Adding MJXGUI form input

Gruntfile.js

@@ -1,32 +1,43 @@
-module.exports = function(grunt) {
+module.exports = function (grunt) {
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
         htmlmin: {
             src: {
                 options: {
                     removeComments: true,
-                    collapseWhitespace: true
+                    collapseWhitespace: true,
                 },
                 files: {
-                    'src/modules/editor.min.html': 'src/modules/editor.html'
-                }
-            }
+                    'src/modules/editor.min.html': 'src/modules/editor.html',
+                    'src/modules/form-input.min.html':
+                        'src/modules/form-input.html',
+                },
+            },
         },
         injectHTML: {
             options: {
-                html: 'src/modules/editor.min.html',
-                src: 'src/modules/ui.js'
+                editorHtml: 'src/modules/editor.min.html',
+                formInputHtml: 'src/modules/form-input.min.html',
+                src: 'src/modules/ui.js',
             },
         },
         concat: {
             build: {
-                src: ['src/modules/expression-backend.js', 'src/modules/cursor.js', 'src/modules/ui.js'],
+                src: [
+                    'src/modules/expression-backend.js',
+                    'src/modules/cursor.js',
+                    'src/modules/ui.js',
+                ],
                 dest: 'src/mjxgui.js',
             },
             buildExample: {
-                src: ['src/modules/expression-backend.js', 'src/modules/cursor.js', 'src/modules/ui.js'],
-                dest: 'docs/js/mjxgui.js'
-            }
+                src: [
+                    'src/modules/expression-backend.js',
+                    'src/modules/cursor.js',
+                    'src/modules/ui.js',
+                ],
+                dest: 'docs/js/mjxgui.js',
+            },
         },
         uglify: {
             options: {
@@ -35,23 +46,33 @@ module.exports = function(grunt) {
             build: {
                 src: 'src/mjxgui.js',
                 dest: 'src/mjxgui.min.js',
-            }
-        }
+            },
+        },
     });
 
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-htmlmin');
 
-    grunt.registerTask('injectHTML', function() {
+    grunt.registerTask('injectHTML', function () {
         const options = this.options();
-        const template = grunt.file.read(options.html);
+        const editorTemplate = grunt.file.read(options.editorHtml);
+        const formInputTemplate = grunt.file.read(options.formInputHtml);
         const src = grunt.file.read(options.src);
 
-        const content = src.replace(/\{\{\seditor_html\s}}/, template);
+        let content = src.replace(/\{\{\seditor_html\s}}/, editorTemplate);
+        content = content.replace(
+            /\{\{\sform_input_html\s}}/,
+            formInputTemplate,
+        );
         grunt.file.write(options.src, content);
-    })
+    });
 
-    grunt.registerTask('default', ['htmlmin', 'injectHTML', 'concat', 'uglify']);
+    grunt.registerTask('default', [
+        'htmlmin',
+        'injectHTML',
+        'concat',
+        'uglify',
+    ]);
     grunt.registerTask('inject-ui', ['htmlmin', 'injectHTML']);
-}
+};

docs/contributing.md

@@ -124,11 +124,31 @@ If you are working on a patch that requires changing the HTML for the MJXGUI edi
     ```
 4. Run the `inject-ui` task from this project's Gruntfile by running -
     ```bash
+    grunt htmlmin
     grunt inject-ui
     ```
 
 This will minify the `editor.html` file and inject the minified HTML in the right place in the `ui.js` file. You can then test these changes and complete your patch.
 
+## Working With The Form Input's HTML
+If you are working on a patch that requires changing the HTML for the MJXGUI form input, you will need to make changes to the `src/modules/form-input.html` file. Once you have made your changes, you will need to inject this HTML into the MJXGUI source for the new HTML to be used. You can do this by running `Grunt`. Make sure [Grunt is installed](https://gruntjs.com/getting-started) and follow these steps -
+
+
+1. Open the `src/modules/ui.js` file.
+2. Find the line where the form input's HTML is injected into the file, which will look something like this -
+   `const formInputHTML = '< big HTML string >';`
+3. Delete the big HTML string, and replace that line with this line -
+    ```javascript
+    const formInputHTML = '{{ form_input_html }}';
+    ```
+4. Run the `inject-ui` task from this project's Gruntfile by running -
+    ```bash
+    grunt htmlmin
+    grunt inject-ui
+    ```
+
+This will minify the `form-input.html` file and inject the minified HTML in the right place in the `ui.js` file. You can then test these changes and complete your patch.
+
 ## Submitting a Patch
 Once you have finished working on your patch and verified that your issue has been fixed, push your changes and create a pull request!
 

docs/customizing.md → docs/customizing/functionality.md

@@ -37,7 +37,7 @@ mjxgui.successCallback = function () {
 
 mjxgui.registerSymbol('\\therefore', '∴', 'Therefore', false);
 ```
-You can see this example [here](./examples/add-custom-symbol.html).
+You can see this example [here](../examples/add-custom-symbol.html).
 
 ## Adding A Custom Function
 Adding a function to the editor widget is a little different from adding a symbol. A function needs to know how its LaTeX should be generated, since it is not simple static LaTeX like a symbol. To add a function that is not already present, you will need -
@@ -85,4 +85,4 @@ mjxgui.registerFunction(
     typeset = false
 );
 ```
-You can see this example [here](./examples/add-custom-function.html).
+You can see this example [here](../examples/add-custom-function.html).

docs/customizing/index.md

@@ -0,0 +1,9 @@
+---
+layout: default
+title: Customizing
+nav_order: 3
+has_children: true
+---
+
+# Customizing
+MJXGUI lets you customize both the functionality of the editor widget as well as the UI.

src/mjxgui.css

@@ -15,7 +15,7 @@
     --error-red: rgb(255, 13, 53);
 }
 
-#_mjxgui_editor_window {
+._mjxgui_editor_window {
     display: none;
     position: fixed;
     top: 50%;
@@ -33,30 +33,30 @@
     width: min(600px, 80%);
 }
 
-#_mjxgui_editor_window svg {
+._mjxgui_editor_window svg {
     stroke: var(--default-font-color);
 }
 
-#_mjxgui_editor_window button {
+._mjxgui_editor_window button {
     background-color: var(--background-color);
     transition: background-color ease 0.2s;
     color: var(--default-font-color);
 }
 
-#_mjxgui_editor_window button:hover {
+._mjxgui_editor_window button:hover {
     background-color: var(--background-dark-1);
 }
 
-#_mjxgui_tab_container_container {
+._mjxgui_tab_container_container {
     display: flex;
     flex-flow: row wrap;
 }
 
-#mjxgui_save_equation svg {
+._mjxgui_save_equation svg {
     stroke: var(--success-green);
 }
 
-#mjxgui_clear_equation svg {
+._mjxgui_clear_equation svg {
     stroke: var(--error-red);
 }
 
@@ -80,13 +80,13 @@
     background-color: var(--background-dark-1);
 }
 
-#mjxgui_editor_controls {
+.mjxgui_editor_controls {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
 }
 
-#_mjxgui_editor_display {
+._mjxgui_editor_display {
     padding: 10px;
     margin: 10px;
     border: 1px solid var(--default-font-color);
@@ -148,4 +148,14 @@
     margin: 0 5px;
     border: 1px solid transparent;
     border-radius: 3px;
+}
+
+._mjxgui_equation_input {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+
+._mjxgui_equation_input_preview {
+    margin-left: 10px;
 }