@pie-lib/math-input-mathlive 1.0.5 → 1.0.7

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "MathLive-based math input (drop-in alternative to @pie-lib/math-input)",
   "main": "lib/index.js",
   "module": "src/index.jsx",

package/src/__tests__/keypad-label.test.jsx

@@ -0,0 +1,49 @@
+import { withVisibleEmptySlots as latexForDisplay } from '../latex-bridge';
+import { keyToAction } from '../latex-bridge';
+
+/**
+ * Keys use empty groups to show a command's shape (`\frac{}{}`, `x^{}`).
+ * MathLive renders `{}` as nothing, so labels need a visible stand-in - but the
+ * value that gets *inserted* must stay untouched.
+ */
+describe('keypad label display normalisation', () => {
+  it('gives empty groups a visible glyph', () => {
+    const out = latexForDisplay('\\frac{}{}');
+
+    expect(out).not.toEqual('\\frac{}{}');
+    expect(out).toContain('25AB'); // white small square
+    expect(out).toContain('pie-empty');
+  });
+
+  it('handles every empty-group key shape', () => {
+    ['\\frac{}{}', '\\overline{}', 'x^{}', 'x_{}', '\\sqrt{}', '\\sqrt[{}]{}', '\\abs{}', '\\log_{}', '\\longdiv{}'].forEach(
+      (latex) => {
+        expect(latexForDisplay(latex)).not.toContain('{}');
+      },
+    );
+  });
+
+  it('treats a whitespace-only group as empty', () => {
+    // e.g. \frac{x}{ }
+    expect(latexForDisplay('\\frac{x}{ }')).toContain('pie-empty');
+  });
+
+  it('leaves latex without empty groups alone', () => {
+    ['\\pi', '\\sin', 'x^2', '\\overline{AB}'].forEach((latex) => {
+      expect(latexForDisplay(latex)).toEqual(latex);
+    });
+  });
+
+  it('handles nullish input', () => {
+    expect(latexForDisplay(undefined)).toEqual('');
+    expect(latexForDisplay('')).toEqual('');
+  });
+
+  it('does NOT affect what gets inserted into the field', () => {
+    // the action must use the key's own latex, never the display form
+    const key = { name: 'frac', latex: '\\frac{}{}' };
+
+    expect(keyToAction(key).value).toEqual('\\frac{}{}');
+    expect(keyToAction(key).value).not.toContain('pie-empty');
+  });
+});

package/src/__tests__/latex-bridge.test.js

@@ -1,4 +1,12 @@
-import { toMathLive, fromMathLive, fieldIds, keyToAction, NEWLINE_EMBED, DEFAULT_FIELD_ID } from '../latex-bridge';
+import {
+  toMathLive,
+  fromMathLive,
+  fieldIds,
+  keyToAction,
+  toNativeCommands,
+  NEWLINE_EMBED,
+  DEFAULT_FIELD_ID,
+} from '../latex-bridge';
 
 describe('latex-bridge', () => {
   describe('toMathLive', () => {
@@ -64,6 +72,32 @@ describe('latex-bridge', () => {
       expect(fromMathLive(toMathLive(stored))).toEqual(stored);
     });
 
+    // MathLive serialises empty slots as \placeholder{}, which MathJax (used by
+    // @pie-lib/math-rendering for prompts/previews) renders as red error text.
+    it('strips unnamed placeholders that MathLive adds', () => {
+      expect(fromMathLive('\\longdiv{\\placeholder{}}')).toEqual('\\longdiv{}');
+      expect(fromMathLive('\\frac{\\placeholder{}}{\\placeholder{}}')).toEqual('\\frac{}{}');
+    });
+
+    it('keeps content inside an unnamed placeholder', () => {
+      expect(fromMathLive('\\sqrt{\\placeholder{7}}')).toEqual('\\sqrt{7}');
+    });
+
+    it('handles a bare \\placeholder with no argument', () => {
+      expect(fromMathLive('\\longdiv{\\placeholder}')).toEqual('\\longdiv{}');
+    });
+
+    it('never leaks the token \\placeholder', () => {
+      ['\\longdiv{\\placeholder{}}', '\\frac{\\placeholder{}}{x}', '\\placeholder{}'].forEach((l) => {
+        expect(fromMathLive(l)).not.toContain('\\placeholder');
+      });
+    });
+
+    it('still maps NAMED placeholders to answer blocks', () => {
+      // named ones are answer blocks and must survive
+      expect(fromMathLive('\\placeholder[r1]{}')).toEqual('\\MathQuillMathField[r1]{}');
+    });
+
     it('round-trips answer blocks combined with newlines', () => {
       const stored = `\\MathQuillMathField[r1]{}${NEWLINE_EMBED}y`;
 
@@ -71,6 +105,58 @@ describe('latex-bridge', () => {
     });
   });
 
+  // A MathLive macro serialises from the arguments it was created with, so text
+  // typed inside its expansion never comes back out of getValue('latex').
+  // Argument-taking pie commands must therefore become native constructs before
+  // they reach a mathfield.
+  describe('toNativeCommands', () => {
+    it('expands \\longdiv to native \\enclose', () => {
+      expect(toNativeCommands('\\longdiv{1234}')).toEqual('\\enclose{longdiv}{1234}');
+      expect(toNativeCommands('\\longdiv{}')).toEqual('\\enclose{longdiv}{}');
+    });
+
+    it('expands \\overarc to native \\overparen', () => {
+      expect(toNativeCommands('\\overarc{AB}')).toEqual('\\overparen{AB}');
+    });
+
+    it('expands \\abs to native \\left|..\\right|', () => {
+      expect(toNativeCommands('\\abs{x}')).toEqual('\\left|x\\right|');
+      expect(toNativeCommands('\\abs{}')).toEqual('\\left|\\right|');
+    });
+
+    it('handles nested braces inside \\abs', () => {
+      expect(toNativeCommands('\\abs{\\frac{1}{2}}')).toEqual('\\left|\\frac{1}{2}\\right|');
+    });
+
+    it('handles several occurrences', () => {
+      expect(toNativeCommands('\\abs{a}+\\abs{b}')).toEqual('\\left|a\\right|+\\left|b\\right|');
+      expect(toNativeCommands('\\longdiv{1}\\longdiv{2}')).toEqual('\\enclose{longdiv}{1}\\enclose{longdiv}{2}');
+    });
+
+    it('leaves other latex untouched', () => {
+      ['\\frac{1}{2}', '\\pi', '\\sqrt{x}', '\\overline{AB}'].forEach((l) => {
+        expect(toNativeCommands(l)).toEqual(l);
+      });
+    });
+
+    it('handles nullish input', () => {
+      expect(toNativeCommands(undefined)).toEqual('');
+      expect(toNativeCommands('')).toEqual('');
+    });
+
+    it('is applied by toMathLive', () => {
+      expect(toMathLive('\\longdiv{5}')).toEqual('\\enclose{longdiv}{5}');
+    });
+
+    it('does not leave a pie macro in what reaches the field', () => {
+      ['\\longdiv{7}', '\\abs{7}', '\\overarc{7}'].forEach((l) => {
+        const out = toMathLive(l);
+
+        expect(out).not.toMatch(/\\longdiv|\\abs|\\overarc/);
+      });
+    });
+  });
+
   describe('fieldIds', () => {
     it('returns ids in document order', () => {
       expect(fieldIds('\\MathQuillMathField[r1]{}+\\MathQuillMathField[r2]{}')).toEqual(['r1', 'r2']);

package/src/__tests__/mathlive-instance.test.js

@@ -63,6 +63,26 @@ describe('mathlive-instance', () => {
       expect(macros.longdiv).toBeDefined();
       expect(macros.napprox).toEqual('\\not\\approx');
     });
+
+    // Argument-taking macros exist only so previously authored latex parses.
+    // Editing never goes through them: MathLive serialises a macro from its
+    // original arguments, so typed content never comes back out.
+    it('argument-taking macros are plain parse-only definitions', () => {
+      ['longdiv', 'overarc', 'abs'].forEach((name) => {
+        expect(typeof instance.PIE_MACROS[name]).toBe('string');
+        expect(instance.PIE_MACROS[name]).toContain('#1');
+      });
+    });
+
+    it('argument-less symbols stay atomic', () => {
+      ['perpendicular', 'square', 'degree', 'napprox', 'parallelogram'].forEach((name) => {
+        expect(typeof instance.PIE_MACROS[name]).toBe('string');
+      });
+    });
+
+    it('longdiv matches the MathJax macro used by math-rendering', () => {
+      expect(instance.PIE_MACROS.longdiv).toEqual('\\enclose{longdiv}{#1}');
+    });
   });
 
   describe('applyStaticMath', () => {

package/src/keypad/index.jsx

@@ -49,6 +49,12 @@ const LabelHolder = styled('span')(() => ({
   '& .ML__placeholder': {
     backgroundColor: color.keypadEmptyPlaceholder ? color.keypadEmptyPlaceholder() : undefined,
   },
+  // The stand-in glyph for an empty argument slot (see EMPTY_SLOT). 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,
+  },
 }));
 
 export class LatexLabel extends React.Component {

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');
 
@@ -75,8 +75,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 +86,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 +356,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 +381,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/static.jsx

@@ -4,11 +4,14 @@ import { styled } from '@mui/material/styles';
 import debug from 'debug';
 import { loadMathLive, getMacros, latexToMarkup } 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',