@pie-lib/math-input-mathlive 1.1.4 → 1.1.5-beta.10

package/src/__tests__/mount-race.test.jsx

@@ -0,0 +1,142 @@
+/**
+ * MathLive loads asynchronously, so `componentDidMount` resumes after an await
+ * before appending a <math-field>. Two orderings must both hold:
+ *
+ *  - StrictMode dev double-mount (mount -> unmount -> mount on the SAME
+ *    instance) must end up with exactly ONE field. A boolean "unmounted" flag
+ *    latches here and blocks the remount entirely - which is why this uses a
+ *    generation counter.
+ *  - A genuine unmount while the load is in flight must append nothing.
+ *
+ * MathLive cannot load under jsdom, so it is mocked with a minimal stub in
+ * order to actually count appended fields.
+ */
+jest.mock('../mathlive-instance', () => {
+  // Must be a real DOM node: the component uses replaceChildren(), which
+  // rejects anything that is not a Node. Returning an element from the
+  // constructor replaces `this`, so callers get a genuine <math-field>.
+  class FakeMathfieldElement {
+    constructor() {
+      // `global` rather than `document`: jest forbids out-of-scope variables in
+      // a mock factory, and `global` is on its allow-list.
+      const el = global.document.createElement('math-field');
+
+      el.value = '';
+      el.getValue = () => el.value;
+
+      return el;
+    }
+  }
+
+  return {
+    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),
+    getMacros: () => ({}),
+    // must mirror the real export, otherwise the component sets `undefined`
+    MATH_MODE_SPACE: '\\ ',
+    applyShadowStyles: () => {},
+    trackPlaceholderCaret: () => () => {},
+    latexToMarkup: (l) => `<span>${l}</span>`,
+  };
+});
+
+// eslint-disable-next-line import/first
+import Input from '../mf/input';
+
+const holderFor = (cmp) => {
+  const el = document.createElement('span');
+
+  cmp.holderRef = { current: el };
+
+  return el;
+};
+
+const fieldCount = (el) => Array.from(el.childNodes).filter((n) => n.tagName === 'MATH-FIELD').length;
+
+describe('async mount race', () => {
+  it('StrictMode mount -> unmount -> mount yields exactly one field', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    const first = input.componentDidMount();
+
+    input.componentWillUnmount();
+
+    const second = input.componentDidMount();
+
+    await Promise.all([first, second]);
+
+    expect(fieldCount(el)).toBe(1);
+    expect(input.mathField).toBeDefined();
+  });
+
+  it('appends nothing when unmounted while the load is in flight', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    const pending = input.componentDidMount();
+
+    input.componentWillUnmount();
+
+    await pending;
+
+    expect(fieldCount(el)).toBe(0);
+    expect(input.mathField).toBeUndefined();
+  });
+
+  it('a normal single mount creates the field', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    await input.componentDidMount();
+
+    expect(fieldCount(el)).toBe(1);
+  });
+
+  it('repeated mounts never accumulate fields', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    await input.componentDidMount();
+    await input.componentDidMount();
+    await input.componentDidMount();
+
+    expect(fieldCount(el)).toBe(1);
+  });
+
+  // MathLive's mathModeSpace defaults to '', which makes the spacebar a no-op.
+  it('configures the spacebar so a space can be typed', async () => {
+    const input = new Input({});
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    // a LaTeX control space - what MathQuill produced, and MathJax understands
+    expect(input.mathField.mathModeSpace).toEqual('\\ ');
+    expect(input.mathField.mathModeSpace).not.toEqual('');
+  });
+
+  // MathLive leaves a superscript after one digit by default (`smartSuperscript`),
+  // so x^23 / 10^6 cannot be typed.
+  it('stays in the exponent after a digit instead of jumping out', async () => {
+    const input = new Input({});
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    expect(input.mathField.smartSuperscript).toBe(false);
+  });
+
+  it('reports itself through innerRef on mount and clears it on unmount', async () => {
+    const innerRef = jest.fn();
+    const input = new Input({ innerRef });
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    expect(innerRef).toHaveBeenCalledWith(input);
+
+    input.componentWillUnmount();
+
+    expect(innerRef).toHaveBeenLastCalledWith(null);
+  });
+});

package/src/__tests__/static-prompts.test.jsx

@@ -0,0 +1,364 @@
+import Static from '../mf/static';
+
+/**
+ * The answer-block contract: `\MathQuillMathField[id]{}` in stored latex becomes
+ * a MathLive prompt, and sub-field values/focus are surfaced through the same
+ * callbacks @pie-lib/math-input exposed (`onSubFieldChange`, `onSubFieldFocus`,
+ * `getFieldName`, `setInput`).
+ *
+ * Driven against a stub mathfield: a real <math-field> needs a browser, and what
+ * matters here is the mapping, not MathLive's rendering.
+ */
+const stubField = (values = {}, selection = null) => ({
+  values: { ...values },
+  getPrompts() {
+    return Object.keys(this.values);
+  },
+  getPromptValue(id) {
+    return this.values[id];
+  },
+  setPromptValue(id, v) {
+    this.values[id] = v;
+  },
+  getPromptRange(id) {
+    const i = Object.keys(this.values).indexOf(id);
+
+    return [i * 10, i * 10 + 5];
+  },
+  selection,
+  // Caret bookkeeping: MathLive exposes the caret offset as `position`, and any
+  // executeCommand triggers the render that reveals the caret.
+  position: undefined,
+  commands: [],
+  executeCommand(name) {
+    this.commands.push(name);
+  },
+  addEventListener() {},
+  removeEventListener() {},
+  focus() {
+    this.focused = true;
+  },
+  blur() {
+    this.blurred = true;
+  },
+  remove() {},
+});
+
+const make = (props = {}) => new Static({ latex: 'x=\\MathQuillMathField[r1]{}', getFieldName: () => {}, ...props });
+
+describe('Static: answer blocks / prompts', () => {
+  describe('isInteractive', () => {
+    it('is interactive when the latex has answer blocks', () => {
+      expect(make({ latex: 'x=\\MathQuillMathField[r1]{}' }).isInteractive()).toBe(true);
+      expect(make({ latex: 'x=\\placeholder[r1]{}' }).isInteractive()).toBe(true);
+    });
+
+    it('is display-only for plain latex', () => {
+      expect(make({ latex: '\\frac{1}{2}' }).isInteractive()).toBe(false);
+      expect(make({ latex: '' }).isInteractive()).toBe(false);
+    });
+  });
+
+  describe('values', () => {
+    it('returns {} before the field exists', () => {
+      expect(make().values()).toEqual({});
+    });
+
+    it('maps each prompt id to its stored-form latex', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '7', r2: '\\placeholder{}' });
+
+      // \placeholder must not leak into stored values
+      expect(s.values()).toEqual({ r1: '7', r2: '' });
+    });
+  });
+
+  describe('promptHandle / innerFields', () => {
+    it('exposes a MathQuill-field-like handle with get/set latex', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '7' });
+
+      const h = s.promptHandle('r1');
+
+      expect(h.id).toEqual('r1');
+      expect(h.latex()).toEqual('7');
+
+      h.latex('9');
+      expect(s.mathField.values.r1).toEqual('9');
+    });
+
+    it('handle latex() is safe with no field', () => {
+      expect(make().promptHandle('r1').latex()).toEqual('');
+    });
+
+    it('innerFields returns one handle per prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '1', r2: '2' });
+
+      expect(s.innerFields.map((f) => f.id)).toEqual(['r1', 'r2']);
+      expect(make().innerFields).toEqual([]);
+    });
+  });
+
+  describe('onSubFieldChange', () => {
+    it('fires only for prompts whose value changed', () => {
+      const onSubFieldChange = jest.fn();
+      const s = make({ onSubFieldChange });
+
+      s.mathField = stubField({ r1: '1', r2: '2' });
+      s.promptValues = { r1: '1', r2: '2' };
+
+      s.mathField.values.r2 = '5';
+      s.onPromptInput();
+
+      expect(onSubFieldChange).toHaveBeenCalledTimes(1);
+      expect(onSubFieldChange).toHaveBeenCalledWith('r2', '5');
+    });
+
+    it('uses getFieldName when it returns a name', () => {
+      const onSubFieldChange = jest.fn();
+      const s = make({ onSubFieldChange, getFieldName: (handle) => 'named-' + handle.id });
+
+      s.mathField = stubField({ r1: '1' });
+      s.promptValues = {};
+
+      s.onPromptInput();
+
+      expect(onSubFieldChange).toHaveBeenCalledWith('named-r1', '1');
+    });
+
+    it('still tracks values when no callback is supplied', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '3' });
+      s.onPromptInput();
+
+      expect(s.promptValues).toEqual({ r1: '3' });
+    });
+  });
+
+  describe('onSubFieldFocus', () => {
+    it('reports the prompt containing the selection, plus setInput', () => {
+      const onSubFieldFocus = jest.fn();
+      const setInput = jest.fn();
+      const s = make({ onSubFieldFocus, setInput });
+
+      // r2 occupies offsets 10..15
+      s.mathField = stubField({ r1: '', r2: '' }, { ranges: [[11, 11]] });
+      s.onPromptFocus();
+
+      expect(onSubFieldFocus).toHaveBeenCalledTimes(1);
+      expect(onSubFieldFocus.mock.calls[0][0]).toEqual('r2');
+      expect(onSubFieldFocus.mock.calls[0][1].id).toEqual('r2');
+      expect(setInput).toHaveBeenCalled();
+    });
+
+    it('does nothing without a selection', () => {
+      const onSubFieldFocus = jest.fn();
+      const s = make({ onSubFieldFocus });
+
+      s.mathField = stubField({ r1: '' }, null);
+      s.onPromptFocus();
+
+      expect(onSubFieldFocus).not.toHaveBeenCalled();
+    });
+
+    it('does not throw when the field is missing', () => {
+      const s = make({ onSubFieldFocus: jest.fn() });
+
+      expect(() => s.onPromptFocus()).not.toThrow();
+    });
+  });
+
+  describe('accessibility announcements', () => {
+    afterEach(() => {
+      document.body.innerHTML = '';
+    });
+
+    it('creates a polite off-screen live region', () => {
+      const s = make();
+
+      s.createLiveRegion();
+
+      expect(s.liveRegion.getAttribute('aria-live')).toEqual('polite');
+      expect(s.liveRegion.getAttribute('aria-atomic')).toEqual('true');
+      expect(document.body.contains(s.liveRegion)).toBe(true);
+
+      s.removeLiveRegion();
+      expect(s.liveRegion).toBeUndefined();
+    });
+
+    it('does not create a second region', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      const first = s.liveRegion;
+
+      s.createLiveRegion();
+      expect(s.liveRegion).toBe(first);
+      s.removeLiveRegion();
+    });
+
+    it('announces when typed input expands into a command', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x' };
+      // grew by more than one char AND gained a backslash => a conversion
+      s.announceConversion({ r1: 'x\\frac{}{}' });
+
+      expect(s.liveRegion.textContent).toEqual('Converted to math symbol');
+      s.removeLiveRegion();
+    });
+
+    it('does not announce ordinary typing', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x' };
+      s.announceConversion({ r1: 'xy' });
+
+      expect(s.liveRegion.textContent).toEqual('');
+      s.removeLiveRegion();
+    });
+
+    it('does not announce a deletion', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x\\frac{}{}' };
+      s.onKeyDown({ key: 'Backspace' });
+      s.announceConversion({ r1: 'x' });
+
+      expect(s.liveRegion.textContent).toEqual('');
+      s.removeLiveRegion();
+    });
+  });
+
+  describe('focus / blur', () => {
+    it('delegates to the field and is safe without one', () => {
+      const s = make();
+
+      expect(() => {
+        s.focus();
+        s.blur();
+      }).not.toThrow();
+
+      s.mathField = stubField();
+      s.focus();
+      s.blur();
+
+      expect(s.mathField.focused).toBe(true);
+      expect(s.mathField.blurred).toBe(true);
+    });
+  });
+
+  /**
+   * MathLive shows the caret only while the field carries `ML__focused`, which
+   * it adds during a render gated on `isSelectionEditable && hasFocus()`. In a
+   * read-only field only prompt interiors are editable, so after a bare
+   * `focus()` - whose selection sits outside every prompt - the answer block
+   * looked focused but had no blinking cursor. Verified in Chromium: the caret
+   * span goes from visibility:hidden to visible once the selection is inside a
+   * prompt AND a render has run.
+   */
+  describe('caret placement', () => {
+    it('puts a collapsed caret in the first prompt on focus', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.focus();
+
+      // stub ranges are [0,5] for r1, [10,15] for r2
+      expect(s.mathField.selection).toEqual({ ranges: [[0, 0]] });
+    });
+
+    it('forces the render that makes the caret visible', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '' });
+      s.focus();
+
+      // assigning `selection` alone updates the model without re-rendering, so
+      // ML__focused would never be added
+      expect(s.mathField.commands).toEqual(['scrollIntoView']);
+    });
+
+    it('does not move a caret that is already inside a prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.mathField.position = 12; // inside r2
+      s.focus();
+
+      expect(s.mathField.selection).toBe(null);
+      expect(s.mathField.commands).toEqual([]);
+    });
+
+    it('targets a specific prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.focusPrompt('r2');
+
+      expect(s.mathField.selection).toEqual({ ranges: [[10, 10]] });
+    });
+
+    it('falls back to the first prompt for an unknown id', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.focusPrompt('nope');
+
+      expect(s.mathField.selection).toEqual({ ranges: [[0, 0]] });
+    });
+
+    it('is a no-op when there are no prompts', () => {
+      const s = make();
+
+      s.mathField = stubField({});
+
+      expect(() => s.focusPrompt()).not.toThrow();
+      expect(s.mathField.selection).toBe(null);
+    });
+
+    it('is safe without a field', () => {
+      expect(() => make().focusPrompt('r1')).not.toThrow();
+    });
+
+    describe('promptContaining', () => {
+      it('finds the prompt whose range holds the offset, inclusive', () => {
+        const s = make();
+
+        s.mathField = stubField({ r1: '', r2: '' });
+
+        expect(s.promptContaining(0)).toEqual('r1');
+        expect(s.promptContaining(5)).toEqual('r1');
+        expect(s.promptContaining(10)).toEqual('r2');
+        expect(s.promptContaining(7)).toBeUndefined();
+      });
+
+      it('treats a missing position as outside', () => {
+        const s = make();
+
+        s.mathField = stubField({ r1: '' });
+
+        expect(s.promptContaining(undefined)).toBeUndefined();
+      });
+    });
+
+    // MathQuill's inner fields could be focused directly.
+    it('promptHandle exposes focus() for its own prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.promptHandle('r2').focus();
+
+      expect(s.mathField.focused).toBe(true);
+      expect(s.mathField.selection).toEqual({ ranges: [[10, 10]] });
+    });
+  });
+});

package/src/keypad/index.jsx

@@ -9,7 +9,7 @@ import { color } from '@pie-lib/render-ui';
 
 import { baseSet } from '../keys';
 import { sortKeys } from './keys-layout';
-import { commonKeyboardStyles } from '../mf/common-styles';
+import { commonKeyboardStyles, rootIndexStyles } from '../mf/common-styles';
 import { loadMathLive, latexToMarkup } from '../mathlive-instance';
 
 const log = debug('pie-lib:math-input-mathlive:keypad');
@@ -22,29 +22,42 @@ const log = debug('pie-lib:math-input-mathlive:keypad');
  * `convertLatexToMarkup`, so a 40-key keypad no longer creates 40 live math
  * instances.
  */
+// Labels that the legacy keypad drew slanted. MathQuill styled `\parallel` as
+// italic, which slants the two bars; MathLive draws it upright. A skew is used
+// rather than `font-style: italic` so the slant does not depend on the font
+// having an italic face for this glyph.
+const SLANTED_LABELS = ['\\parallel'];
+const SLANT = 'skewX(-15deg)';
+// MathLive's `∥` has hairline bars next to the radical sign and the other keys, so
+// they are thickened with a text stroke and stretched a little taller.
+const SLANTED_STROKE = '0.03em currentColor';
+const SLANTED_SCALE_Y = 1.25;
+
 // The `color.*()` helpers must be called lazily, inside the styled callback.
 // Evaluating them in a plain object literal runs them at module load, which
 // breaks any consumer that mocks a subset of @pie-lib/render-ui.
-const LabelHolder = styled('span')(() => ({
+const LabelHolder = styled('span', { shouldForwardProp: (prop) => prop !== 'slanted' })(({ slanted }) => ({
+  ...(slanted && {
+    transform: `${SLANT} scaleY(${SLANTED_SCALE_Y})`,
+    '& *': { WebkitTextStroke: SLANTED_STROKE },
+  }),
   pointerEvents: 'none',
   textTransform: 'none',
   color: color.text(),
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  // Deliberately inline-block, NOT inline-flex: MathLive's markup relies on
+  // normal inline flow. Making its spans flex items collapses their width, and
+  // stretchy accents render an <svg width="100%" preserveAspectRatio="none">
+  // that then squeezes into a spike instead of spanning the content.
+  display: 'inline-block',
+  textAlign: 'center',
   lineHeight: 1,
-  // Never let a label size its grid column. Stretchy accents
-  // (\overrightarrow, \overleftrightarrow, \overarc) render an <svg> that
-  // mathlive-static.css positions absolutely at width:100%; if that stylesheet
-  // is missing the svg lays out statically and expands without bound, dragging
-  // the whole column across the screen. `overflow: hidden` also collapses the
-  // label's min-content contribution, so the grid can't blow out either way.
+  // Keep a label from sizing its grid column. `overflow: hidden` also collapses
+  // the label's min-content contribution, so a wide accent cannot drag the
+  // column across the screen. The svg's own positioning is left to
+  // mathlive-static.css (injected by the package) - duplicating it here broke
+  // the accent's containing block.
   maxWidth: '100%',
   overflow: 'hidden',
-  '& svg': {
-    position: 'absolute',
-    width: '100%',
-  },
   // Answer-block / empty-slot boxes inside a label.
   '& .ML__placeholder': {
     backgroundColor: color.keypadEmptyPlaceholder ? color.keypadEmptyPlaceholder() : undefined,
@@ -55,6 +68,9 @@ const LabelHolder = styled('span')(() => ({
   '& [data-pie-empty]': {
     opacity: 0.5,
   },
+  // A readable index on the nth-root key. Carried by the label itself, not only
+  // by the keypad container, so it holds wherever a LatexLabel is mounted.
+  ...rootIndexStyles,
 }));
 
 export class LatexLabel extends React.Component {
@@ -111,9 +127,9 @@ export class LatexLabel extends React.Component {
     // Fall back to the raw latex so a button is never blank.
     return markup ? (
       // eslint-disable-next-line react/no-danger
-      <LabelHolder dangerouslySetInnerHTML={{ __html: markup }} />
+      <LabelHolder slanted={SLANTED_LABELS.includes(this.props.latex)} dangerouslySetInnerHTML={{ __html: markup }} />
     ) : (
-      <LabelHolder>{this.props.latex}</LabelHolder>
+      <LabelHolder slanted={SLANTED_LABELS.includes(this.props.latex)}>{this.props.latex}</LabelHolder>
     );
   }
 }

package/src/keys/geometry.js

@@ -14,7 +14,10 @@ export const overRightArrow = set({
 
 export const overLeftRightArrow = set({
   name: 'Segment',
-  latex: '\\overleftrightarrow{\\overline{}}', // used this notation to display the pink box
+  // MathQuill needed a nested \overline{} to draw the empty box; MathLive
+  // renders that as a real line, so the label showed a spurious bar under the
+  // arrows. `withVisibleEmptySlots` supplies the box for `{}` instead.
+  latex: '\\overleftrightarrow{}',
   symbol: 'AB',
   command: '\\overleftrightarrow',
 });
@@ -51,7 +54,9 @@ export const angle = set({
 });
 export const overArc = set({
   name: 'Over arc',
-  latex: '\\overarc{\\overline{}}', // used this notation to display the pink box
+  // See the note on Segment above: the nested \overline{} drew a straight line
+  // instead of leaving the arc visible.
+  latex: '\\overarc{}',
   command: '\\overarc',
 });
 export const measureOfAngle = set({

package/src/keys/misc.js

@@ -29,10 +29,16 @@ export const brackets = set({
   command: '[',
 });
 
+// `%` must be escaped. MathQuill was not a real LaTeX parser: it defined
+// `LatexCmds['%']` as a symbol that *serialised* to `\%`, so a bare `%` worked
+// both as a label and as a command. MathLive parses LaTeX properly, where `%`
+// begins a comment - it rendered nothing (a blank button) and, once inserted,
+// silently swallowed the rest of the expression. `\%` is what MathQuill stored
+// all along, so this changes the key only, not the saved latex.
 export const percentage = set({
   name: 'Percent',
-  latex: '%',
-  command: '%',
+  latex: '\\%',
+  command: '\\%',
 });
 
 export const approx = set({