@pie-lib/math-input-mathlive 1.0.6 → 1.0.8

package/src/latex-bridge.js

@@ -29,9 +29,121 @@ const DISPLAYLINES_REGEX = /^\\displaylines\{([\s\S]*)\}$/;
 const MQ_FIELD_REGEX = /\\MathQuillMathField\[([^\]]*)\]\{([^{}]*)\}/g;
 const PLACEHOLDER_REGEX = /\\placeholder\[([^\]]*)\]\{([^{}]*)\}/g;
 
+/**
+ * Unnamed placeholders, which MathLive inserts on its own.
+ *
+ * Typing a command with empty arguments (`\longdiv{}`, `\frac{}{}`) makes
+ * MathLive serialise the empty slots as `\placeholder{}`. That token is
+ * MathLive-specific: MathJax - which @pie-lib/math-rendering uses to render
+ * prompts and previews - has no such command and renders it as red error text.
+ * Stored latex must therefore keep plain empty groups.
+ */
+const BARE_PLACEHOLDER_REGEX = /\\placeholder\{([^{}]*)\}/g;
+const BARE_PLACEHOLDER_NO_ARG_REGEX = /\\placeholder(?![[{a-zA-Z])/g;
+
 /** Default id used when stored latex has an unnamed field. */
 export const DEFAULT_FIELD_ID = 'r1';
 
+/**
+ * A visible stand-in for an empty argument slot, used for STATIC rendering only.
+ *
+ * Stored latex legitimately contains empty groups - `\longdiv{}`, `\frac{}{}`,
+ * `x^{}` - to express a command's shape. MathQuill drew those as a shaded box
+ * (`.mq-empty`); MathLive renders `{}` as nothing, so `convertLatexToMarkup`
+ * output comes out completely blank (not even the surrounding bracket, in the
+ * case of `\enclose{longdiv}{}`).
+ *
+ * `\placeholder{}` is not usable here: in static markup it renders as a
+ * non-breaking space, because its editable box only exists inside a live
+ * mathfield. So an actual glyph is required.
+ *
+ * Live mathfields need none of this - MathLive manages empty slots itself.
+ */
+const EMPTY_SLOT = '\\htmlData{pie-empty=1}{\\unicode{"25AB}}';
+const EMPTY_GROUP_REGEX = /\{\s*\}/g;
+
+/**
+ * Make empty argument slots visible, for static rendering.
+ *
+ * Display-only: never feed the result to a mathfield or to storage - the
+ * original latex is what gets typed and saved.
+ *
+ * @param {string} latex
+ * @returns {string}
+ */
+export const withVisibleEmptySlots = (latex) => (latex || '').replace(EMPTY_GROUP_REGEX, `{${EMPTY_SLOT}}`);
+
+/**
+ * Pie commands that take an argument, and their native MathLive equivalents.
+ *
+ * These MUST NOT be handled as MathLive macros. A macro is serialised from the
+ * arguments it was created with, so text typed inside its expansion never makes
+ * it back out: `getValue('latex')` keeps returning `\longdiv{\placeholder{}}`
+ * while `getValue('ascii-math')` shows the typed content. Setting
+ * `captureSelection: false` lets the cursor in but does not change
+ * serialisation.
+ *
+ * Expanding to native constructs instead gives real, editable atoms that
+ * round-trip. All three targets are understood by MathJax too, so stored latex
+ * still renders in @pie-lib/math-rendering without a reverse mapping.
+ */
+/**
+ * Rewrite argument-taking pie commands into native MathLive latex.
+ * Applied on the way *into* a mathfield.
+ *
+ * @param {string} latex
+ * @returns {string}
+ */
+export const toNativeCommands = (latex) => {
+  if (typeof latex !== 'string' || !latex) {
+    return latex || '';
+  }
+
+  let out = latex;
+
+  // \abs{x} -> \left|x\right| needs brace-aware handling, the rest are prefix
+  // swaps.
+  out = replaceAbs(out);
+  out = out.replace(/\\longdiv\{/g, '\\enclose{longdiv}{');
+  out = out.replace(/\\overarc\{/g, '\\overparen{');
+
+  return out;
+};
+
+/** `\abs{x}` -> `\left|x\right|`, matching balanced braces. */
+const replaceAbs = (latex) => {
+  let out = latex;
+  let idx = out.indexOf('\\abs{');
+
+  while (idx !== -1) {
+    const open = idx + '\\abs{'.length - 1;
+    let depth = 0;
+    let close = -1;
+
+    for (let i = open; i < out.length; i++) {
+      if (out[i] === '{') depth++;
+      else if (out[i] === '}') {
+        depth--;
+        if (depth === 0) {
+          close = i;
+          break;
+        }
+      }
+    }
+
+    if (close === -1) {
+      break;
+    }
+
+    const inner = out.slice(open + 1, close);
+
+    out = `${out.slice(0, idx)}\\left|${inner}\\right|${out.slice(close + 1)}`;
+    idx = out.indexOf('\\abs{');
+  }
+
+  return out;
+};
+
 /**
  * Ids of the answer blocks in a piece of stored latex, in document order.
  *
@@ -67,8 +179,12 @@ export const toMathLive = (latex) => {
     return latex || '';
   }
 
+  // Argument-taking pie commands -> native constructs, so their content stays
+  // editable and serialises back correctly (see toNativeCommands).
+  let out = toNativeCommands(latex);
+
   // Answer blocks: \MathQuillMathField[id]{x} -> \placeholder[id]{x}
-  let out = latex.replace(MQ_FIELD_REGEX, (_m, id, content) => `\\placeholder[${id || DEFAULT_FIELD_ID}]{${content}}`);
+  out = out.replace(MQ_FIELD_REGEX, (_m, id, content) => `\\placeholder[${id || DEFAULT_FIELD_ID}]{${content}}`);
 
   // Newlines: \embed{newLine}[] -> a multiline environment
   if (out.indexOf(NEWLINE_EMBED) !== -1) {
@@ -108,6 +224,13 @@ export const fromMathLive = (latex) => {
     (_m, id, content) => `\\MathQuillMathField[${id || DEFAULT_FIELD_ID}]{${content}}`,
   );
 
+  // Unnamed placeholders are MathLive's own representation of an empty slot and
+  // must not reach storage or MathJax. Unwrap them: keep any content, drop the
+  // command itself (the surrounding braces are already part of the host latex,
+  // so re-adding them here would produce `\longdiv{{}}`).
+  out = out.replace(BARE_PLACEHOLDER_REGEX, (_m, content) => content);
+  out = out.replace(BARE_PLACEHOLDER_NO_ARG_REGEX, '');
+
   return out;
 };
 
@@ -124,8 +247,10 @@ const COMMANDS_WITH_ARGS = {
   '\\overline': '\\overline{#?}',
   '\\overrightarrow': '\\overrightarrow{#?}',
   '\\overleftrightarrow': '\\overleftrightarrow{#?}',
-  '\\overarc': '\\overarc{#?}',
-  '\\longdiv': '\\longdiv{#?}',
+  // Native forms, not the pie macros: a macro would not serialise the user's
+  // typed content back out (see toNativeCommands).
+  '\\overarc': '\\overparen{#?}',
+  '\\longdiv': '\\enclose{longdiv}{#?}',
   '^': '^{#?}',
   _: '_{#?}',
   '(': '\\left(#?\\right)',

package/src/mathlive-instance.js

@@ -1,5 +1,5 @@
 import debug from 'debug';
-import { NEWLINE_EMBED, toMathLive } from './latex-bridge';
+import { NEWLINE_EMBED, toMathLive, withVisibleEmptySlots } from './latex-bridge';
 
 const log = debug('pie-lib:math-input-mathlive:instance');
 
@@ -66,6 +66,18 @@ export const configureFonts = (dir) => {
   }
 };
 
+/**
+ * What the spacebar inserts in math mode.
+ *
+ * MathLive's `mathModeSpace` defaults to an empty string, which makes the
+ * spacebar a no-op - users cannot type a space at all. `\\ ` (a LaTeX control
+ * space) is what MathQuill serialised spaces as, so existing content and the
+ * MathJax renderer in @pie-lib/math-rendering both already understand it.
+ *
+ * A literal " " is not usable: LaTeX skips raw whitespace.
+ */
+export const MATH_MODE_SPACE = '\\ ';
+
 /**
  * Custom macros for the pie-specific commands that the MathQuill fork
  * understood but stock LaTeX does not.
@@ -75,8 +87,9 @@ export const configureFonts = (dir) => {
  * way in the editor and in the static renderer.
  */
 export const PIE_MACROS = {
+  // Argument-less symbols. Atomic is correct here: backspace should remove the
+  // whole glyph, and there is nothing to type into.
   parallelogram: '\\htmlData{pie-macro=parallelogram}{\\unicode{"25B1}}',
-  overarc: '\\overparen{#1}',
   napprox: '\\not\\approx',
   nsim: '\\not\\sim',
   ncong: '\\not\\cong',
@@ -85,7 +98,15 @@ export const PIE_MACROS = {
   divide: '\\div',
   degree: '^{\\circ}',
   square: '\\unicode{"25A1}',
-  longdiv: '\\htmlData{pie-macro=longdiv}{#1}',
+
+  // Argument-taking commands, kept ONLY so previously authored latex still
+  // parses and renders. They are never used for editing: MathLive serialises a
+  // macro from the arguments it was created with, so text typed inside the
+  // expansion never comes back out of `getValue('latex')`. Anything entering a
+  // mathfield is rewritten to the native equivalent first - see
+  // `toNativeCommands` in latex-bridge.
+  longdiv: '\\enclose{longdiv}{#1}',
+  overarc: '\\overparen{#1}',
   abs: '\\left|#1\\right|',
 };
 
@@ -347,7 +368,7 @@ export function applyStaticMath(element, latex, options = {}) {
     return undefined;
   }
 
-  element.innerHTML = ml.convertLatexToMarkup(toMathLive(source), {
+  element.innerHTML = ml.convertLatexToMarkup(withVisibleEmptySlots(toMathLive(source)), {
     macros: { ...getMacros(), ...(options.macros || {}) },
   });
 
@@ -372,7 +393,10 @@ export function latexToMarkup(latex, options = {}) {
   }
 
   try {
-    return ml.convertLatexToMarkup(toMathLive(latex), {
+    // Empty groups render as nothing in static markup, so give them a visible
+    // box. This covers every static path: keypad labels, mf.Static in display
+    // mode, and applyStaticMath.
+    return ml.convertLatexToMarkup(withVisibleEmptySlots(toMathLive(latex)), {
       macros: { ...getMacros(), ...(options.macros || {}) },
       ...options,
     });

package/src/mf/common-styles.js

@@ -51,6 +51,19 @@ export const placeholderStyles = {
     borderBottom: '1px solid currentColor',
     minWidth: '1em',
   },
+  // Stand-in glyph for an empty argument slot in STATIC math (see
+  // `withVisibleEmptySlots`). Muted so it reads as "a slot goes here" rather
+  // than as part of the symbol, matching how MathQuill shaded `.mq-empty`.
+  '& [data-pie-empty]': {
+    opacity: 0.5,
+  },
+  // Stretchy accents render an <svg>; mathlive-static.css positions it
+  // absolutely at width:100%. Repeated here so static math cannot blow out its
+  // container if that stylesheet is missing.
+  '& svg': {
+    position: 'absolute',
+    width: '100%',
+  },
 };
 
 /**

package/src/mf/input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import debug from 'debug';
-import { loadMathLive, getMacros } from '../mathlive-instance';
+import { loadMathLive, getMacros, MATH_MODE_SPACE } from '../mathlive-instance';
 import { toMathLive, fromMathLive, keyToAction, KEYSTROKES } from '../latex-bridge';
 
 const log = debug('pie-lib:math-input-mathlive:input');
@@ -49,9 +49,16 @@ export class Input extends React.Component {
   }
 
   async componentDidMount() {
+    // MathLive loads asynchronously, so this method resumes after an await and
+    // has to know whether it is still the current mount. React StrictMode calls
+    // mount -> unmount -> mount on the SAME instance in dev, so a boolean
+    // "unmounted" flag would latch and block the remount from ever creating a
+    // field. A generation counter identifies the live mount instead: only the
+    // newest one proceeds, and a real unmount invalidates all pending ones.
+    const generation = (this.mountGeneration = (this.mountGeneration || 0) + 1);
     const ml = await loadMathLive();
 
-    if (!ml || !this.holderRef.current) {
+    if (generation !== this.mountGeneration || !ml || !this.holderRef.current || this.mathField) {
       return;
     }
 
@@ -64,15 +71,18 @@ export class Input extends React.Component {
 
     // pie drives input through its own keypad, so suppress MathLive's.
     this.mathField.mathVirtualKeyboardPolicy = 'manual';
+    // Without this the spacebar does nothing: MathLive's mathModeSpace
+    // defaults to an empty string.
+    this.mathField.mathModeSpace = MATH_MODE_SPACE;
 
     this.mathField.addEventListener('input', this.onInputEdit);
-    this.holderRef.current.appendChild(this.mathField);
+
+    // Belt and braces: drop anything a previous mount may have left behind.
+    this.holderRef.current.replaceChildren(this.mathField);
 
     if (this.props.innerRef) {
       this.props.innerRef(this);
     }
-
-    this.setState?.({});
   }
 
   componentDidUpdate(prevProps) {
@@ -99,6 +109,10 @@ export class Input extends React.Component {
   }
 
   componentWillUnmount() {
+    // Invalidate any mount still awaiting the MathLive load, so it does not
+    // append a field into a holder that is going away.
+    this.mountGeneration = (this.mountGeneration || 0) + 1;
+
     if (this.mathField) {
       this.mathField.removeEventListener('input', this.onInputEdit);
       this.mathField.remove();

package/src/mf/static.jsx

@@ -2,13 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import debug from 'debug';
-import { loadMathLive, getMacros, latexToMarkup } from '../mathlive-instance';
+import { loadMathLive, getMacros, latexToMarkup, MATH_MODE_SPACE } from '../mathlive-instance';
 import { toMathLive, fromMathLive, fieldIds } from '../latex-bridge';
+import { placeholderStyles } from './common-styles';
 
 const log = debug('pie-lib:math-input-mathlive:static');
 
 const Holder = styled('span')({
   display: 'inline-block',
+  // Shared static-math rules: muted empty-slot glyphs and svg containment.
+  ...placeholderStyles,
   '& math-field': {
     display: 'inline-block',
     border: 'none',
@@ -61,28 +64,41 @@ export default class Static extends React.Component {
   }
 
   async componentDidMount() {
+    // See the note in mf/input.jsx: a generation counter, not a boolean, so a
+    // StrictMode mount -> unmount -> mount on the same instance still ends up
+    // with exactly one field.
+    const generation = (this.mountGeneration = (this.mountGeneration || 0) + 1);
+
     if (!this.isInteractive()) {
       await loadMathLive();
-      this.renderMarkup();
+
+      if (generation === this.mountGeneration) {
+        this.renderMarkup();
+      }
+
       return;
     }
 
     const ml = await loadMathLive();
 
-    if (!ml || !this.holderRef.current) {
+    if (generation !== this.mountGeneration || !ml || !this.holderRef.current || this.mathField) {
       return;
     }
 
     this.mathField = new ml.MathfieldElement({ macros: getMacros() });
     this.mathField.readOnly = true;
     this.mathField.mathVirtualKeyboardPolicy = 'manual';
+    // Without this the spacebar does nothing: MathLive's mathModeSpace
+    // defaults to an empty string.
+    this.mathField.mathModeSpace = MATH_MODE_SPACE;
     this.mathField.value = toMathLive(this.props.latex);
 
     this.mathField.addEventListener('input', this.onPromptInput);
     this.mathField.addEventListener('focusin', this.onPromptFocus);
     this.mathField.addEventListener('keydown', this.onKeyDown);
 
-    this.holderRef.current.appendChild(this.mathField);
+    // Belt and braces: drop anything a previous mount may have left behind.
+    this.holderRef.current.replaceChildren(this.mathField);
 
     this.createLiveRegion();
   }
@@ -100,6 +116,9 @@ export default class Static extends React.Component {
   }
 
   componentWillUnmount() {
+    // Invalidate any mount still awaiting the MathLive load.
+    this.mountGeneration = (this.mountGeneration || 0) + 1;
+
     if (this.mathField) {
       this.mathField.removeEventListener('input', this.onPromptInput);
       this.mathField.removeEventListener('focusin', this.onPromptFocus);