fix: Fixed #225

arnog · Oct 11, 2020 · b5d390a · b5d390a
1 parent 868399b
commit b5d390a
Show file tree

Hide file tree

Showing 22 changed files with 413 additions and 214 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,27 @@
 
 ### New Features
 
--   Added `mount` and `unmount` event to the web component
+-   **#225** Added `onCommit` listener to `mf.options`. This listener is invoked when
+    the user presses **Enter** or **Return** key, or when the field loses focus
+    and its value has changed since it acquired it.
+    In addition, a `change` event is triggered when using a `MathfieldElement`.
+    The event previously named `change` has been renamed to `input`.
+    This mimics the behavior of `<input>` and `<textarea>` elements.
+-   **#225** Changed the keyboard shortcuts to add columns and rows:
+    | Shortcut | Command |
+    |:---|:---|
+    | **ctrl**/**cmd** + **Return**/**Enter** | `addRowAfter` |
+    | **ctrl**/**cmd** + **shift** + **Return**/**Enter** | `addRowBefore` |
+    | **ctrl**/**cmd** + **;** | `addRowAfter` |
+    | **ctrl**/**cmd** + **shift** + **;** | `addRowBefore` |
+    | **ctrl**/**cmd** + **,** | `addColumnAfter` |
+    | **ctrl**/**cmd** + **shift** + **,** | `addColumnBefore` |
+
+    Note that **Enter**/**Return** no longer create a matrix/vector when inside a parenthesized expression. Use **ctrl/cmd** + **Return**/**Enter** instead.
+
+-   Added a `commit` command to programmatically trigger the `onCommit` listener
+    `change` event.
+-   Added `mount` and `unmount` events to `MathfieldElement`
 -   The `$text()` method, which is deprecated, was accidentally prematurely removed.
     It has been added back.
 
@@ -65,7 +85,7 @@ or:
     });
 
     // After
-    mfe.addEventListener('change', (ev) => {
+    mfe.addEventListener('input', (ev) => {
         console.log(mfe.value);
     });
 ```

diff --git a/README.md b/README.md
@@ -60,7 +60,7 @@ state changes.
 <html lang="en-US">
     <body>
         <math-field>f(x)=</math-field>
-        <script src="https://unpkg.com/mathlive/dist/mathlive.mjs"></script>
+        <script src="https://unpkg.com/mathlive/dist/mathlive.min.js"></script>
     </body>
 </html>
 ```
@@ -78,7 +78,7 @@ Render static math equations by
         <p>$$e^{i\pi} + 1 = 0$$</p>
 
         <script type="module">
-            import { renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.mjs';
+            import { renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.min.mjs';
             renderMathInDocument();
         </script>
     </body>

diff --git a/dist/mathlive.js b/dist/mathlive.js
diff --git a/dist/mathlive.min.js b/dist/mathlive.min.js
diff --git a/dist/mathlive.min.mjs b/dist/mathlive.min.mjs
diff --git a/dist/mathlive.mjs b/dist/mathlive.mjs
@@ -18500,12 +18500,18 @@ const DEFAULT_KEYBINDINGS = [
         ifMode: 'math',
         command: ['insert', '$$\\left\\lbrace #0 \\right\\rbrace$$'],
     },
-    { key: '[Return]', ifMode: 'math', command: 'addRowAfter' },
-    { key: '[Enter]', ifMode: 'math', command: 'addRowAfter' },
+    { key: 'ctrl+[Return]', ifMode: 'math', command: 'addRowAfter' },
+    { key: 'ctrl+[Enter]', ifMode: 'math', command: 'addRowAfter' },
+    { key: 'cmd+[Return]', ifMode: 'math', command: 'addRowAfter' },
+    { key: 'cmd+[Enter]', ifMode: 'math', command: 'addRowAfter' },
+    { key: 'ctrl+;', ifMode: 'math', command: 'addRowAfter' },
+    { key: 'cmd+;', ifMode: 'math', command: 'addRowAfter' },
+    { key: 'ctrl+shift+;', ifMode: 'math', command: 'addRowBefore' },
+    { key: 'cmd+shift+;', ifMode: 'math', command: 'addRowBefore' },
     { key: 'ctrl+[Comma]', ifMode: 'math', command: 'addColumnAfter' },
-    { key: '[Return]', ifMode: 'text', command: 'addRowAfter' },
-    { key: '[Enter]', ifMode: 'text', command: 'addRowAfter' },
-    { key: 'ctrl+[Comma]', ifMode: 'text', command: 'addColumnAfter' },
+    { key: 'cmd+[Comma]', ifMode: 'math', command: 'addColumnAfter' },
+    { key: 'ctrl+shift+[Comma]', ifMode: 'math', command: 'addColumnAfter' },
+    { key: 'cmd+shift[Comma]', ifMode: 'math', command: 'addColumnAfter' },
     // Excel keybindings:
     // shift+space: select entire row, ctrl+space: select an entire column
     // ctrl+shift++ or ctrl+numpad+
@@ -22698,7 +22704,7 @@ function delegateKeyboardEvents(textarea, handlers) {
     let callbackTimeoutID;
     function defer(cb) {
         clearTimeout(callbackTimeoutID);
-        callbackTimeoutID = setTimeout(function () {
+        callbackTimeoutID = setTimeout(() => {
             clearTimeout(callbackTimeoutID);
             cb();
         });
@@ -22707,10 +22713,10 @@ function delegateKeyboardEvents(textarea, handlers) {
         // Some browsers (Firefox, Opera) fire a keypress event for commands
         // such as command-C where there might be a non-empty selection.
         // We need to ignore these.
-        if (hasSelection(textarea))
+        if (textarea.selectionStart !== textarea.selectionEnd)
             return;
-        const text = textarea['value'];
-        textarea['value'] = '';
+        const text = textarea.value;
+        textarea.value = '';
         if (text.length > 0)
             handlers.typedText(text);
     }
@@ -22741,7 +22747,7 @@ function delegateKeyboardEvents(textarea, handlers) {
         }
         if (!compositionInProgress &&
             e.code !== 'CapsLock' &&
-            !/(Control|Meta|Alt|Shift)(Right|Left)/.test(e.code)) {
+            !/(Control|Meta|Alt|Shift)(Left|Right)/.test(e.code)) {
             keydownEvent = e;
             keypressEvent = null;
             return handlers.keystroke(keyboardEventToString(e), e);
@@ -22770,8 +22776,8 @@ function delegateKeyboardEvents(textarea, handlers) {
         // In some cases (Linux browsers), the text area might not be focused
         // when doing a middle-click paste command.
         textarea.focus();
-        const text = textarea['value'];
-        textarea['value'] = '';
+        const text = textarea.value;
+        textarea.value = '';
         if (text.length > 0)
             handlers.paste(text);
     }, true);
@@ -22825,9 +22831,6 @@ function delegateKeyboardEvents(textarea, handlers) {
         }
     });
 }
-function hasSelection(textarea) {
-    return textarea.selectionStart !== textarea.selectionEnd;
-}
 function eventToChar(evt) {
     var _a;
     if (!evt)
@@ -24726,6 +24729,7 @@ function update(current, updates) {
             case 'onUndoStateWillChange':
             case 'onUndoStateDidChange':
             case 'onModeChange':
+            case 'onCommit':
             case 'onVirtualKeyboardToggle':
             case 'onReadAloudStatus':
             case 'onError':
@@ -24851,6 +24855,7 @@ function getDefault() {
         onModeChange: NO_OP_LISTENER,
         onVirtualKeyboardToggle: NO_OP_LISTENER,
         onReadAloudStatus: NO_OP_LISTENER,
+        onCommit: NO_OP_LISTENER,
         onError: () => {
             return;
         },
@@ -25279,6 +25284,19 @@ function onKeystroke(mathfield, keystroke, evt) {
     if (!shortcut && !selector) {
         selector = getCommandForKeybinding(mathfield.keybindings, mathfield.mode, keystroke);
     }
+    if (!shortcut &&
+        !selector &&
+        (keystroke === '[Enter]' || keystroke === '[Return]')) {
+        // No matching keybinding: trigger a commit
+        if (typeof mathfield.options.onCommit === 'function') {
+            mathfield.options.onCommit(mathfield);
+            if (evt === null || evt === void 0 ? void 0 : evt.preventDefault) {
+                evt.preventDefault();
+                evt.stopPropagation();
+            }
+            return false;
+        }
+    }
     // No shortcut :( We're done.
     if (!shortcut && !selector) {
         return true;
@@ -25653,6 +25671,12 @@ register$2({
         onTypedText(mathfield, text);
         return true;
     },
+    commit: (mathfield) => {
+        if (typeof mathfield.options.onCommit === 'function') {
+            mathfield.options.onCommit(mathfield);
+        }
+        return true;
+    },
 });
 
 function applyStyle$4(mathfield, inStyle) {
@@ -30515,12 +30539,10 @@ class MathfieldPrivate {
         delegateKeyboardEvents(this.textarea, {
             allowDeadKey: () => this.mode === 'text',
             typedText: (text) => onTypedText(this, text),
-            paste: () => {
-                return onPaste(this);
-            },
+            paste: () => onPaste(this),
             keystroke: (keystroke, e) => onKeystroke(this, keystroke, e),
-            focus: () => this._onFocus(),
-            blur: () => this._onBlur(),
+            focus: () => this.onFocus(),
+            blur: () => this.onBlur(),
         });
         // Delegate mouse and touch events
         if (window.PointerEvent) {
@@ -30623,7 +30645,7 @@ class MathfieldPrivate {
             console.log(e.join('\n'));
         });
         if (!this.options.readOnly) {
-            this._onBlur();
+            this.onBlur();
         }
         // Changing some config options (i.e. `macros`) may
         // require the content to be reparsed and re-rendered
@@ -30663,14 +30685,14 @@ class MathfieldPrivate {
             case 'focus':
                 if (!this.eventHandlingInProgress) {
                     this.eventHandlingInProgress = 'focus';
-                    this._onFocus();
+                    this.onFocus();
                     this.eventHandlingInProgress = '';
                 }
                 break;
             case 'blur':
                 if (!this.eventHandlingInProgress) {
                     this.eventHandlingInProgress = 'blur';
-                    this._onBlur();
+                    this.onBlur();
                     this.eventHandlingInProgress = '';
                 }
                 break;
@@ -30793,7 +30815,7 @@ class MathfieldPrivate {
             this.options.onSelectionDidChange(this);
         }
     }
-    _onFocus() {
+    onFocus() {
         if (this.options.readOnly)
             return;
         if (this.blurred) {
@@ -30810,10 +30832,15 @@ class MathfieldPrivate {
             if (this.options.onFocus) {
                 this.options.onFocus(this);
             }
+            // Save the current value.
+            // It will be compared in `onBlur()` to see if the
+            // `onCommit` listener needs to be invoked. This
+            // mimic the `<input>` and `<textarea>` behavior
+            this.valueOnFocus = this.getValue();
             requestUpdate(this);
         }
     }
-    _onBlur() {
+    onBlur() {
         if (!this.blurred) {
             this.blurred = true;
             this.ariaLiveText.textContent = '';
@@ -30822,9 +30849,13 @@ class MathfieldPrivate {
             }
             complete(this, { discard: true });
             requestUpdate(this);
-            if (this.options.onBlur) {
+            if (typeof this.options.onBlur === 'function') {
                 this.options.onBlur(this);
             }
+            if (typeof this.options.onCommit === 'function' &&
+                this.getValue() !== this.valueOnFocus) {
+                this.options.onCommit(this);
+            }
         }
     }
     _onResize() {
@@ -33194,17 +33225,18 @@ const gDeferredState = new WeakMap();
  *
  * | Event Name | Event Arguments | Description |
  * |:---|:---|:---|
- * | `blur` |  | The mathfield is losing focus |
- * | `change` |  | The value of the mathfield has changed |
- * | `math-error` | `ErrorListener<ParserErrorCode | MathfieldErrorCode>` | A parsing or configuration error happened |
- * | `focus` |  | The mathfield is gaining focus |
- * | `keystroke` | `(keystroke: string, event: KeyboardEvent): boolean` | The user typed a keystroke with a physical keyboard |
- * | `mode-change` |  | The mode of the mathfield has changed |
- * | `focus-out` | `(direction: 'forward' | 'backward' | 'upward' | 'downward'): boolean` | The user is navigating out of the mathfield, typically using the keyboard |
- * | `read-aloud-status-change` |  | The status of a read aloud operation has changed |
+ * | `input |  | The value of the mathfield has been modified |
+ * | `change` |  | The user has commited the value of the mathfield |
  * | `selection-change` |  | The selection of the mathfield has changed |
+ * | `mode-change` |  | The mode of the mathfield has changed |
  * | `undo-state-change` |  | The state of the undo stack has changed |
+ * | `read-aloud-status-change` |  | The status of a read aloud operation has changed |
  * | `virtual-keyboard-toggle` |  | The visibility of the virtual keyboard has changed |
+ * | `blur` |  | The mathfield is losing focus |
+ * | `focus` |  | The mathfield is gaining focus |
+ * | `focus-out` | `(direction: 'forward' | 'backward' | 'upward' | 'downward'): boolean` | The user is navigating out of the mathfield, typically using the keyboard |
+ * | `math-error` | `ErrorListener<ParserErrorCode | MathfieldErrorCode>` | A parsing or configuration error happened |
+ * | `keystroke` | `(keystroke: string, event: KeyboardEvent): boolean` | The user typed a keystroke with a physical keyboard |
  * | `mount` | | Fired once when the element has been attached to the DOM |
  * | `unmount` | | Fired once when the element is about to be removed from the DOM |
  *
@@ -33233,28 +33265,6 @@ class MathfieldElement extends HTMLElement {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.appendChild(MATHFIELD_TEMPLATE.content.cloneNode(true));
         const slot = this.shadowRoot.querySelector('slot:not([name])');
-        this.value = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedNodes().map((x) => (x.nodeType === 3 ? x.textContent : '')).join('').trim()) !== null && _a !== void 0 ? _a : '';
-        this.shadowRoot
-            .querySelector('slot')
-            .addEventListener('slotchange', (e) => {
-            const slot = e.target;
-            if (slot.name === '') {
-                const value = slot
-                    .assignedNodes()
-                    .map((x) => (x.nodeType === 3 ? x.textContent : ''))
-                    .join('')
-                    .trim();
-                if (!__classPrivateFieldGet(this, _mathfield)) {
-                    this.value = value;
-                }
-                else {
-                    __classPrivateFieldGet(this, _mathfield).setValue(value, {
-                        insertionMode: 'replaceAll',
-                        suppressChangeNotifications: true,
-                    });
-                }
-            }
-        });
         // When the elements get focused (through tabbing for example)
         // focus the mathfield
         this.shadowRoot.host.addEventListener('focus', (_event) => this.focus());
@@ -33281,6 +33291,28 @@ class MathfieldElement extends HTMLElement {
         if (this.hasAttribute('value')) {
             this.value = this.getAttribute('value');
         }
+        else {
+            this.value = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedNodes().map((x) => (x.nodeType === 3 ? x.textContent : '')).join('').trim()) !== null && _a !== void 0 ? _a : '';
+        }
+        slot.addEventListener('slotchange', (e) => {
+            if (e.target !== slot)
+                return;
+            const value = slot
+                .assignedNodes()
+                .map((x) => (x.nodeType === 3 ? x.textContent : ''))
+                .join('')
+                .trim();
+            if (!__classPrivateFieldGet(this, _mathfield)) {
+                this.value = value;
+            }
+            else {
+                // Don't suppress notification changes. We need to know
+                // if the value has changed indirectly through slot manipulation
+                __classPrivateFieldGet(this, _mathfield).setValue(value, {
+                    insertionMode: 'replaceAll',
+                });
+            }
+        });
     }
     /**
      * Private lifecycle hooks
@@ -33535,7 +33567,7 @@ class MathfieldElement extends HTMLElement {
                 }));
             },
             onContentDidChange: () => {
-                this.dispatchEvent(new Event('change', {
+                this.dispatchEvent(new Event('input', {
                     cancelable: false,
                     bubbles: true,
                 }));
@@ -33575,6 +33607,15 @@ class MathfieldElement extends HTMLElement {
                     bubbles: true,
                 }));
             },
+            onCommit: (_sender) => {
+                // Match the DOM event sent by `<input>`, `<textarea>`, etc...
+                // Sent when the [Return] or [Enter] key is pressed, or on
+                // focus loss if the content has changed.
+                this.dispatchEvent(new Event('change', {
+                    cancelable: false,
+                    bubbles: true,
+                }));
+            },
             onMoveOutOf: (_sender, direction) => {
                 return this.dispatchEvent(new CustomEvent('focus-out', {
                     detail: { direction },
@@ -33615,9 +33656,13 @@ class MathfieldElement extends HTMLElement {
             },
         }));
         if (gDeferredState.has(this)) {
+            const suppressChangeNotifications = __classPrivateFieldGet(this, _mathfield).model
+                .suppressChangeNotifications;
+            __classPrivateFieldGet(this, _mathfield).model.suppressChangeNotifications = true;
             __classPrivateFieldGet(this, _mathfield).setValue(gDeferredState.get(this).value);
             __classPrivateFieldGet(this, _mathfield).selection = gDeferredState.get(this).selection;
             gDeferredState.delete(this);
+            __classPrivateFieldGet(this, _mathfield).model.suppressChangeNotifications = suppressChangeNotifications;
         }
         this.upgradeProperty('disabled');
         // Notify listeners that we're mounted and ready