@zzish/math-rich-input 0.1.57 → 0.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -13,7 +13,7 @@
   },
   "main": "dist/index.js",
   "scripts": {
-    "test": "playwright test tests/caret-regression.spec.js --workers=1",
+    "test": "playwright test tests/caret-regression.spec.js tests/math-only-caret.spec.js tests/math-only-caret-react19.spec.js tests/studio-equation.spec.js tests/release-regression.spec.js --workers=1",
     "build": "rollup --config && webpack --config webpack.standalone.config.js",
     "build:legacy": "rollup --config",
     "build:standalone": "webpack --config webpack.standalone.config.js",

package/src/AccentBar.jsx

@@ -728,7 +728,7 @@ export default class AccentBar extends React.Component {
                   key={"accent-button-" + index}
                   onMouseDown={(e) => e.preventDefault()}
                   onMouseUp={(e) => this.handleButtonClick(e, character)}
-                  onClick={(e) => e.preventDefault()}
+                  onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character); }}
                 >
                   {character}
                 </button>
@@ -786,7 +786,7 @@ export default class AccentBar extends React.Component {
                               onMouseUp={(e) =>
                                 this.handleButtonClick(e, character)
                               }
-                              onClick={(e) => e.preventDefault()}
+                              onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character); }}
                             >
                               {character}
                             </button>
@@ -806,7 +806,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -830,7 +830,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -848,7 +848,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -872,7 +872,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -890,7 +890,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -908,7 +908,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -926,7 +926,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -944,7 +944,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -968,7 +968,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -986,7 +986,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1004,7 +1004,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1022,7 +1022,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1040,7 +1040,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1058,7 +1058,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1076,7 +1076,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1100,7 +1100,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1118,7 +1118,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1136,7 +1136,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>
@@ -1154,7 +1154,7 @@ export default class AccentBar extends React.Component {
                             onMouseUp={(e) =>
                               this.handleButtonClick(e, character, true)
                             }
-                            onClick={(e) => e.preventDefault()}
+                            onClick={(e) => { e.preventDefault(); if (e.detail === 0) this.handleButtonClick(e, character, true); }}
                           >
                             {character}
                           </button>

package/src/EquationEditor.jsx

@@ -76,12 +76,36 @@ export default class EquationEditor extends React.Component {
     };
 
     this.mathQuill = null;
+    // MathQuill's own spelling of the formula the editor was opened with, read once when it mounts.
+    this.openedLatexInMathQuill = null;
     this.handleInsertCallback = props.handleInsert;
     this.handleCancelCallback = props.handleCancel;
   }
 
+  /**
+   * The latex Insert hands back.
+   *
+   * Opening a formula makes MathQuill rewrite it in its own spelling (`\frac12` becomes `\frac{1}{2}`,
+   * `\int` gains empty limits, `\,` is dropped), and that rewrite reaches state through an edit event
+   * although nobody typed. While the content is still exactly that rewrite, or the original, the formula
+   * has not been edited, so the original goes back and the host sees no change it did not make.
+   */
+  latexForInsert() {
+    const { latex } = this.state;
+    const opened = this.props.latex || "";
+    if (opened === "") return latex;
+    if (latex === opened) return opened;
+    if (
+      this.openedLatexInMathQuill !== null &&
+      latex === this.openedLatexInMathQuill
+    ) {
+      return opened;
+    }
+    return latex;
+  }
+
   handleInsert = () => {
-    this.handleInsertCallback(this.state.latex);
+    this.handleInsertCallback(this.latexForInsert());
   };
 
   handleCancel = () => {
@@ -112,8 +136,14 @@ export default class EquationEditor extends React.Component {
 
   handleKeyDown = (e) => {
     try {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.handleCancelCallback();
+        return;
+      }
       if (!this.props.useExpertMode && e.key === "Enter") {
-        this.handleInsertCallback(this.state.latex);
+        this.handleInsertCallback(this.latexForInsert());
         e.preventDefault();
       }
     } catch (error) {
@@ -331,6 +361,15 @@ export default class EquationEditor extends React.Component {
 
   mathquillDidMount(mathQuill) {
     this.mathQuill = mathQuill;
+    // Only the first mount, and only while the content is still the formula the editor was opened
+    // with: a later mount (after switching modes) may hold the user's own edit, which must never be
+    // mistaken for the untouched formula.
+    if (
+      this.openedLatexInMathQuill === null &&
+      this.state.latex === (this.props.latex || "")
+    ) {
+      this.openedLatexInMathQuill = mathQuill.latex();
+    }
   }
 
   componentDidMount() {
@@ -496,7 +535,9 @@ export default class EquationEditor extends React.Component {
               <div className="centerBox">
                 <EditableMathField
                   className="editable"
-                  latex={this.state.latex}
+                  // MathQuill rejects TeX's thin-space command and clears the whole formula.
+                  // Keep the original latex in state; only adapt spacing for its visual parser.
+                  latex={this.state.latex.replace(/\\,/g, " ")}
                   placeholder="Type equation .."
                   config={{
                     autoOperatorNames: AUTO_OPERATOR_NAMES,

package/src/EquationEditorModal.jsx

@@ -6,6 +6,9 @@ import "./EquationEditorModal.css";
 
 let GLOBAL_lastSelectedExpertMode = false;
 
+// Anything a host may use as a modal dialog.
+const DIALOG_SELECTOR = '[role="dialog"], [role="alertdialog"], [aria-modal="true"], dialog[open]';
+
 export default class EquationEditorModal extends React.Component {
   constructor(props) {
     super(props);
@@ -24,10 +27,80 @@ export default class EquationEditorModal extends React.Component {
   };
 
   handleClose = () => {
+    if (this.closing) return;
+    this.closing = true;
+    if (this.origin?.isConnected) {
+      this.origin.focus({ preventScroll: true });
+      if (this.originRange && this.origin.contains(this.originRange.commonAncestorContainer)) {
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(this.originRange);
+      }
+    }
     this.handleCloseCallback();
   };
 
+  handleKeyDown = (event) => {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.handleClose();
+  };
+
+  /**
+   * The dialog's own keyboard boundary.
+   *
+   * The modal is a portal into document.body, so focus can leave it: a Tab from the last control reaches
+   * whatever the host page has behind the overlay, and an Escape pressed out there never comes back here
+   * (the handler above only sees events that bubble through the dialog). The capture listener keeps both
+   * inside the dialog for as long as it is mounted: Tab wraps, Escape closes, and the originating field and
+   * range are restored by handleClose.
+   */
+  handleDocumentKeyDown = (event) => {
+    if (this.closing || !this.mounted) return;
+    // A dialog the host opened or revealed over this one owns its own keyboard: Tab stays in it and Escape
+    // closes it, not this editor. The host's modal around the field is beneath this editor and does not count.
+    if (this.focusIsInLaterDialog()) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleClose();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const root = this.modalDiv;
+    if (!root) return;
+    const focusable = [...root.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]'
+    )].filter((element) => element.checkVisibility?.() ?? true);
+    if (focusable.length === 0) return;
+    const first = focusable[0], last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    const inside = root.contains(active);
+    if (!inside) {
+      event.preventDefault();
+      (event.shiftKey ? last : first).focus({ preventScroll: true });
+      return;
+    }
+    if (!event.shiftKey && active === last) { event.preventDefault(); first.focus({ preventScroll: true }); }
+    else if (event.shiftKey && active === first) { event.preventDefault(); last.focus({ preventScroll: true }); }
+  };
+
+  focusIsInLaterDialog() {
+    const active = document.activeElement;
+    if (!active || !active.closest || !this.modalDiv) return false;
+    const dialog = active.closest(DIALOG_SELECTOR);
+    if (!dialog || dialog === this.modalDiv || this.modalDiv.contains(dialog)) return false;
+    // The host's own dialog around the field this editor was opened from is beneath it. Any other dialog
+    // holding focus was opened or revealed over it, including one that was already in the DOM but hidden.
+    return !(this.origin && dialog.contains(this.origin));
+  }
+
   componentDidMount() {
+    this.mounted = true;
+    this.origin = document.activeElement;
+    const selection = window.getSelection();
+    this.originRange = selection?.rangeCount ? selection.getRangeAt(0).cloneRange() : null;
     // Store current scroll position to prevent jumping
     this.originalScrollTop =
       window.pageYOffset || document.documentElement.scrollTop;
@@ -35,6 +108,10 @@ export default class EquationEditorModal extends React.Component {
     // Create portal container if it doesn't exist
     this.ensurePortalContainer();
 
+    // Capture phase, so the dialog owns the keyboard even when focus has escaped it to the host page.
+    this.documentKeyListener = (event) => this.handleDocumentKeyDown(event);
+    document.addEventListener("keydown", this.documentKeyListener, true);
+
     // Lock body scroll to prevent jumping in transform containers
     this.lockBodyScroll();
 
@@ -42,6 +119,7 @@ export default class EquationEditorModal extends React.Component {
     // Need multiple RAF frames for proper CSS animation timing
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
+        if (!this.mounted) return;
         this.setState({ animationReady: true }, () => {
           // Auto-focus after animation completes (0.3s CSS animation + buffer)
           setTimeout(() => {
@@ -53,6 +131,11 @@ export default class EquationEditorModal extends React.Component {
   }
 
   componentWillUnmount() {
+    this.mounted = false;
+    if (this.documentKeyListener) {
+      document.removeEventListener("keydown", this.documentKeyListener, true);
+      this.documentKeyListener = null;
+    }
     // Hide portal immediately to prevent flash
     if (this.portalContainer) {
       this.portalContainer.style.visibility = "hidden";
@@ -145,6 +228,7 @@ export default class EquationEditorModal extends React.Component {
   }
 
   focusEquationEditor = () => {
+    if (!this.mounted || this.closing) return;
     console.log("🔍 Focusing equation editor...");
     if (this.equationEditor) {
       console.log("🔍 EquationEditor ref found");
@@ -223,6 +307,10 @@ export default class EquationEditorModal extends React.Component {
         ></div>
         <div
           className={useClass}
+          role="dialog"
+          aria-modal="true"
+          aria-label="Equation Editor"
+          onKeyDown={this.handleKeyDown}
           ref={(r) => (this.modalDiv = r)}
           style={{ pointerEvents: "auto" }}
         >

package/src/MathRichInput.css

@@ -66,6 +66,8 @@
 
 .MathRichInput .katex {
     border: 0px;
+    /* A click opens the equation editor for this formula, so it is a control, not text. */
+    cursor: pointer;
 }
 
 .MathRichInput .base {
@@ -90,6 +92,7 @@
     border-radius: 5px;
     padding: 2px;
     margin: 0px 2px;
+    cursor: pointer;
 }
 
 .MathRichInput-Container {