@zzish/math-rich-input 0.1.57 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -13,9 +13,13 @@
   },
   "main": "dist/index.js",
   "scripts": {
-    "test": "playwright test tests/caret-regression.spec.js --workers=1",
+    "pretest": "node scripts/build-katex-stylesheet.js",
+    "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 tests/first-render.spec.js --workers=1",
+    "prebuild": "node scripts/build-katex-stylesheet.js",
     "build": "rollup --config && webpack --config webpack.standalone.config.js",
+    "prebuild:legacy": "node scripts/build-katex-stylesheet.js",
     "build:legacy": "rollup --config",
+    "prebuild:standalone": "node scripts/build-katex-stylesheet.js",
     "build:standalone": "webpack --config webpack.standalone.config.js",
     "prepublishOnly": "npm test && npm run build"
   },
@@ -43,6 +47,7 @@
     "@rollup/plugin-node-resolve": "^11.2.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.7.1",
+    "katex-0.11.1": "npm:katex@0.11.1",
     "postcss": "^8.4.38",
     "postcss-loader": "^6.2.1",
     "postcss-nested": "^6.0.1",

package/scripts/build-katex-stylesheet.js

@@ -0,0 +1,40 @@
+/**
+ * Build the KaTeX stylesheet the field carries inside itself, so it never fetches one from a CDN.
+ *
+ * Up to 0.1.58 the field appended `katex@0.11.1`'s stylesheet from jsdelivr on its first mount. Every
+ * host's formulas in and around the field have looked the way that stylesheet draws them ever since —
+ * Classic's own KaTeX is 0.3.0, two examples have none — so the SAME stylesheet is kept, byte for byte,
+ * and only its delivery changes: read from the pinned `katex-0.11.1` dev dependency, with each font face's
+ * woff2 inlined as a data URI. A data URI needs no bundler, public path or server in any consumer
+ * (webpack 3 and 5, Vite, SvelteKit, plain script tags). The woff and ttf fallbacks are dropped: every
+ * browser the hosts support reads woff2 (KaTeX docs, "Kinds of fonts used").
+ *
+ * Output: `src/katexStylesheet.generated.js` (ignored by git; `prebuild` and `pretest` recreate it).
+ */
+const fs = require("node:fs");
+const path = require("node:path");
+
+const root = path.resolve(__dirname, "..");
+const dist = path.join(root, "node_modules", "katex-0.11.1", "dist");
+const version = require(path.join(root, "node_modules", "katex-0.11.1", "package.json")).version;
+if (version !== "0.11.1") throw new Error(`expected katex 0.11.1 for the bundled stylesheet, found ${version}`);
+
+let missing = 0;
+const css = fs
+  .readFileSync(path.join(dist, "katex.min.css"), "utf8")
+  .replace(/src:url\(fonts\/([^)]+)\.woff2\) format\("woff2"\)(,url\([^)]*\) format\("[^"]*"\))*/g, (_, name) => {
+    const file = path.join(dist, "fonts", `${name}.woff2`);
+    if (!fs.existsSync(file)) missing += 1;
+    const data = fs.readFileSync(file).toString("base64");
+    return `src:url(data:font/woff2;base64,${data}) format("woff2")`;
+  });
+if (missing || /url\(fonts\//.test(css)) throw new Error("a KaTeX font was left pointing at a relative URL");
+
+const out = path.join(root, "src", "katexStylesheet.generated.js");
+fs.writeFileSync(
+  out,
+  `// Generated by scripts/build-katex-stylesheet.js from katex@${version}; do not edit.\n` +
+    `export const KATEX_VERSION = ${JSON.stringify(version)};\n` +
+    `export const KATEX_CSS = ${JSON.stringify(css)};\n`
+);
+console.log(`katex ${version} stylesheet: ${css.length} characters, written to ${path.relative(root, out)}`);

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 {