@pie-lib/math-input-mathlive 1.0.9-next.6637 → 1.0.10

package/src/__tests__/composites.test.jsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import MathInput from '../math-input';
+import HorizontalKeypad from '../horizontal-keypad';
+import Input from '../mf/input';
+
+/**
+ * The pieces that sit between the keypad and the field: how a pressed key is
+ * routed into the field, and the legacy `{value,type}` shape math-toolbar
+ * consumes.
+ */
+describe('MathInput.keypadPress routing', () => {
+  const withInput = () => {
+    const mi = new MathInput({});
+    const calls = { write: [], keystroke: [] };
+
+    mi.input = {
+      write: (v) => calls.write.push(v),
+      keystroke: (v) => calls.keystroke.push(v),
+    };
+
+    return { mi, calls };
+  };
+
+  it('routes an insert action to write()', () => {
+    const { mi, calls } = withInput();
+
+    mi.keypadPress({ latex: '\\pi' });
+
+    expect(calls.write).toEqual(['\\pi']);
+    expect(calls.keystroke).toEqual([]);
+  });
+
+  it('expands an argument-taking command before writing', () => {
+    const { mi, calls } = withInput();
+
+    mi.keypadPress({ command: '\\frac' });
+
+    expect(calls.write).toEqual(['\\frac{#?}{#?}']);
+  });
+
+  it('routes a cursor keystroke to keystroke()', () => {
+    const { mi, calls } = withInput();
+
+    mi.keypadPress({ keystroke: 'Left' });
+
+    expect(calls.keystroke).toEqual(['moveToPreviousChar']);
+    expect(calls.write).toEqual([]);
+  });
+
+  it('ignores keys with no action', () => {
+    const { mi, calls } = withInput();
+
+    mi.keypadPress({});
+    mi.keypadPress({ keystroke: 'Nonsense' });
+
+    expect(calls.write).toEqual([]);
+    expect(calls.keystroke).toEqual([]);
+  });
+
+  it('is a no-op before the field ref exists', () => {
+    const mi = new MathInput({});
+
+    expect(() => mi.keypadPress({ latex: '\\pi' })).not.toThrow();
+  });
+
+  it('changeLatex only fires onChange when the value differs', () => {
+    const onChange = jest.fn();
+    const mi = new MathInput({ latex: 'x', onChange });
+
+    mi.changeLatex('x');
+    expect(onChange).not.toHaveBeenCalled();
+
+    mi.changeLatex('y');
+    expect(onChange).toHaveBeenCalledWith('y');
+  });
+
+  it('tracks focus state', () => {
+    const mi = new MathInput({});
+
+    mi.setState = (s) => Object.assign(mi.state, s);
+    mi.inputFocus();
+    expect(mi.state.focused).toBe(true);
+
+    mi.inputBlur();
+    expect(mi.state.focused).toBe(false);
+  });
+});
+
+describe('HorizontalKeypad legacy {value,type} model', () => {
+  const pressed = (key) => {
+    const onClick = jest.fn();
+    const hk = new HorizontalKeypad({ onClick });
+
+    hk.keypadPress(key);
+
+    return onClick.mock.calls[0][0];
+  };
+
+  it('maps a command to {value, type: command}', () => {
+    expect(pressed({ command: '\\frac' })).toEqual({ value: '\\frac', type: 'command' });
+  });
+
+  it('maps a write to {value}', () => {
+    expect(pressed({ write: 'x' })).toEqual({ value: 'x' });
+  });
+
+  it('maps a keystroke to {type: cursor}', () => {
+    expect(pressed({ keystroke: 'Left' })).toEqual({ type: 'cursor', value: 'Left' });
+  });
+
+  it('renders without throwing', () => {
+    expect(() => render(<HorizontalKeypad onClick={() => {}} />)).not.toThrow();
+  });
+});
+
+describe('Input: controlled-value sync and events', () => {
+  const withField = () => {
+    const input = new Input({});
+
+    input.mathField = {
+      value: '',
+      getValue: () => input.mathField.value,
+      insert(v) {
+        input.mathField.value += v;
+      },
+      executeCommand() {},
+      focus() {},
+      blur() {},
+      addEventListener() {},
+      removeEventListener() {},
+      remove() {},
+    };
+
+    return input;
+  };
+
+  it('emits stored-form latex on edit', () => {
+    const onChange = jest.fn();
+    const input = withField();
+
+    input.props = { onChange };
+    input.mathField.value = '\\longdiv{\\placeholder{}}';
+    input.onInputEdit();
+
+    // \placeholder is MathLive-internal and must not reach the model
+    expect(onChange).toHaveBeenCalledWith('\\longdiv{}');
+    expect(input.lastEmitted).toEqual('\\longdiv{}');
+  });
+
+  it('does not push a prop echo back into the field', () => {
+    const input = withField();
+
+    input.mathField.value = 'x';
+    input.lastEmitted = 'x';
+    input.props = { latex: 'x' };
+
+    input.componentDidUpdate({ latex: '' });
+
+    expect(input.mathField.value).toEqual('x');
+  });
+
+  it('pushes a genuinely new latex prop into the field', () => {
+    const input = withField();
+
+    input.mathField.value = 'x';
+    input.lastEmitted = 'x';
+    input.props = { latex: 'y' };
+
+    input.componentDidUpdate({ latex: 'x' });
+
+    expect(input.mathField.value).toEqual('y');
+  });
+
+  it('bridges stored latex on the way in', () => {
+    const input = withField();
+
+    input.props = { latex: '\\longdiv{5}' };
+    input.componentDidUpdate({ latex: '' });
+
+    // must become native \enclose so the content stays editable
+    expect(input.mathField.value).toEqual('\\enclose{longdiv}{5}');
+  });
+
+  it('toggles readOnly', () => {
+    const input = withField();
+
+    input.props = { readOnly: true };
+    input.componentDidUpdate({ readOnly: false });
+
+    expect(input.mathField.readOnly).toBe(true);
+  });
+
+  it('clear() empties the field', () => {
+    const input = withField();
+
+    input.mathField.value = 'abc';
+    expect(input.clear()).toEqual('');
+    expect(input.mathField.value).toEqual('');
+  });
+
+  it('suppresses Enter so it cannot insert a line break', () => {
+    const input = withField();
+    const preventDefault = jest.fn();
+
+    input.onKeyDown({ key: 'Enter', preventDefault });
+    expect(preventDefault).toHaveBeenCalled();
+
+    preventDefault.mockClear();
+    input.onKeyDown({ key: 'a', preventDefault });
+    expect(preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('componentDidUpdate is safe before the field exists', () => {
+    const input = new Input({ latex: 'x' });
+
+    expect(() => input.componentDidUpdate({ latex: '' })).not.toThrow();
+  });
+});

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

@@ -11,24 +11,18 @@ describe('keypad label display normalisation', () => {
     const out = latexForDisplay('\\frac{}{}');
 
     expect(out).not.toEqual('\\frac{}{}');
-    expect(out).toContain('25AB'); // white small square
+    // a \rule, not a glyph: font metrics for a substituted glyph do not match
+    // MathLive's, which left stretchy accents narrower than the box
+    expect(out).toContain('\\rule');
     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('{}');
-    });
+    ['\\frac{}{}', '\\overline{}', 'x^{}', 'x_{}', '\\sqrt{}', '\\sqrt[{}]{}', '\\abs{}', '\\log_{}', '\\longdiv{}'].forEach(
+      (latex) => {
+        expect(latexForDisplay(latex)).not.toContain('{}');
+      },
+    );
   });
 
   it('treats a whitespace-only group as empty', () => {
@@ -36,6 +30,79 @@ describe('keypad label display normalisation', () => {
     expect(latexForDisplay('\\frac{x}{ }')).toContain('pie-empty');
   });
 
+  // MathQuill needed a nested \overline{} to draw the empty box. MathLive
+  // renders that as a real line, so those labels showed a spurious bar (a line
+  // under the arrows, and a straight line instead of the arc).
+  it('accent keys do not carry the nested-overline box hack', () => {
+    // eslint-disable-next-line global-require
+    const geometry = require('../keys/geometry');
+
+    Object.values(geometry).forEach((key) => {
+      if (key && typeof key.latex === 'string') {
+        expect(key.latex).not.toContain('\\overline{}}');
+      }
+    });
+  });
+
+  it('an accent over an empty slot still gets a visible box', () => {
+    ['\\overleftrightarrow{}', '\\overarc{}'].forEach((latex) => {
+      const out = latexForDisplay(latex);
+
+      expect(out).toContain('pie-empty');
+      expect(out).not.toContain('\\overline');
+    });
+  });
+
+  // A glyph's width comes from font metrics; U+25AB is not in the KaTeX fonts,
+  // so the browser substituted a wider one and stretchy accents came out
+  // narrower than the box. A rule has an explicit width.
+  it('the empty slot has an explicit width, not font-dependent metrics', () => {
+    const out = latexForDisplay('\\overarc{}');
+
+    expect(out).toContain('\\rule');
+    expect(out).toMatch(/rule\{[\d.]+em\}\{[\d.]+em\}/);
+    expect(out).not.toContain('unicode');
+  });
+
+  // Measured in the browser: the accent's immediate wrapper computes to 0px
+  // (its .ML__stretchy child is absolutely positioned), so the svg width has to
+  // resolve against .ML__base - whose width equals the content. Without pinning
+  // that, the arc collapsed to a spike and sat right of the box.
+  it('pins the accent containing block and drops the centering shift', () => {
+    // eslint-disable-next-line global-require
+    const { placeholderStyles } = require('../mf/common-styles');
+
+    expect(placeholderStyles['& .ML__base'].position).toEqual('relative');
+    expect(placeholderStyles['& .ML__stretchy']).toEqual({ position: 'absolute', left: 0, width: '100%' });
+    // must be !important: MathLive writes margin-left as an inline style, and a
+    // class cannot override that. Leaving it un-important also halved the arc's
+    // width, because .ML__center is the stretchy's containing block.
+    expect(placeholderStyles['& .ML__center:has(.ML__stretchy)'].marginLeft).toEqual('0 !important');
+  });
+
+  it('applies those rules wherever static math renders', () => {
+    // eslint-disable-next-line global-require
+    const cs = require('../mf/common-styles');
+
+    ['commonKeyboardStyles', 'commonMathLiveStyles'].forEach((name) => {
+      expect(cs[name]['& .ML__stretchy']).toBeDefined();
+      expect(cs[name]['& .ML__base']).toBeDefined();
+    });
+  });
+
+  // A bare `& svg` rule re-parents every svg in the subtree; MathLive's own rule
+  // is descendant-scoped to .ML__latex .ML__stretchy svg.
+  it('does not use a blanket svg rule', () => {
+    // eslint-disable-next-line global-require
+    const cs = require('../mf/common-styles');
+
+    Object.values(cs).forEach((style) => {
+      if (style && typeof style === 'object') {
+        expect(Object.keys(style)).not.toContain('& svg');
+      }
+    });
+  });
+
   it('leaves latex without empty groups alone', () => {
     ['\\pi', '\\sin', 'x^2', '\\overline{AB}'].forEach((latex) => {
       expect(latexForDisplay(latex)).toEqual(latex);

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import KeyPad, { LatexLabel } from '../keypad';
+
+/**
+ * Keypad behaviour that is new in this package: labels are static markup from
+ * convertLatexToMarkup (the MathQuill version created a live StaticMath per
+ * button), with a raw-latex fallback when the engine is unavailable.
+ */
+describe('LatexLabel', () => {
+  it('falls back to raw latex when MathLive is unavailable', () => {
+    // jsdom cannot load MathLive, so latexToMarkup returns '' - the button must
+    // still show something rather than render blank.
+    const { container } = render(<LatexLabel latex={'\\pi'} />);
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('re-renders when the latex prop changes', () => {
+    const { container, rerender } = render(<LatexLabel latex={'\\pi'} />);
+
+    rerender(<LatexLabel latex={'\\theta'} />);
+
+    expect(container.textContent).toContain('\\theta');
+  });
+
+  it('does not warn more than once about a missing engine', async () => {
+    LatexLabel.warned = false;
+
+    const a = new LatexLabel({ latex: '\\pi' });
+    const b = new LatexLabel({ latex: '\\theta' });
+
+    a.state = { markup: '' };
+    b.state = { markup: '' };
+    a.setState = () => {};
+    b.setState = () => {};
+
+    await a.componentDidMount();
+    await b.componentDidMount();
+
+    expect(LatexLabel.warned).toBe(true);
+  });
+});
+
+describe('KeyPad', () => {
+  const key = (over = {}) => ({ name: 'x', label: 'x', write: 'x', category: 'vars', ...over });
+
+  it('renders a button per key', () => {
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[key(), key({ name: 'y', label: 'y' })]]} />);
+
+    expect(container.querySelectorAll('button').length).toBe(2);
+  });
+
+  it('calls onPress with the whole key definition', () => {
+    const onPress = jest.fn();
+    const k = key();
+    const { container } = render(<KeyPad onPress={onPress} baseSet={[[k]]} />);
+
+    container.querySelector('button').click();
+
+    expect(onPress).toHaveBeenCalledWith(k);
+  });
+
+  it('renders a latex key through LatexLabel', () => {
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[{ name: 'pi', latex: '\\pi' }]]} />);
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('disables the decimal separators when noDecimal is set', () => {
+    const dot = key({ name: '.', label: '.', write: '.' });
+    const comma = key({ name: ',', label: ',', write: ',' });
+    const { container } = render(<KeyPad onPress={() => {}} noDecimal baseSet={[[dot, comma]]} />);
+
+    const disabled = Array.from(container.querySelectorAll('button')).filter((b) => b.disabled);
+
+    expect(disabled.length).toBe(2);
+  });
+
+  it('leaves the separators enabled otherwise', () => {
+    const dot = key({ name: '.', label: '.', write: '.' });
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[dot]]} />);
+
+    expect(container.querySelector('button').disabled).toBe(false);
+  });
+
+  it('renders a placeholder for empty grid slots', () => {
+    expect(() => render(<KeyPad onPress={() => {}} baseSet={[[null]]} />)).not.toThrow();
+  });
+
+  it('notifies setKeypadInteraction on pointer interaction', () => {
+    const setKeypadInteraction = jest.fn();
+    const { container } = render(
+      <KeyPad onPress={() => {}} setKeypadInteraction={setKeypadInteraction} baseSet={[[key()]]} />,
+    );
+
+    container.firstChild.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+
+    expect(setKeypadInteraction).toHaveBeenCalledWith(true);
+  });
+
+  it('uses the mode as a class so mode-specific styling applies', () => {
+    const { container } = render(<KeyPad onPress={() => {}} mode="language" baseSet={[[key()]]} />);
+
+    expect(container.firstChild.className).toContain('language');
+  });
+
+  it('drops the base set for the modes that supply their own keys', () => {
+    const { container } = render(
+      <KeyPad onPress={() => {}} mode="language" baseSet={[[key(), key()]]} additionalKeys={[[key()]]} />,
+    );
+
+    // base set ignored, only the additional key renders
+    expect(container.querySelectorAll('button').length).toBe(1);
+  });
+
+  it('unmounts without throwing', () => {
+    const { unmount } = render(<KeyPad onPress={() => {}} controlledKeypadMode baseSet={[[key()]]} />);
+
+    expect(() => unmount()).not.toThrow();
+  });
+});

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

@@ -190,6 +190,27 @@ describe('latex-bridge', () => {
       expect(keyToAction({ command: '^' })).toEqual({ type: 'insert', value: '^{#?}' });
     });
 
+    // MathQuill's `/` turned the preceding expression into the numerator: type
+    // 5, press the key, get 5/_ with the caret in the denominator. `#@` is
+    // MathLive's "selection, or the item before the cursor" token, and is what
+    // MathLive binds to `/` itself.
+    it('division takes the preceding item as the numerator', () => {
+      expect(keyToAction({ command: '/' })).toEqual({ type: 'insert', value: '\\frac{#@}{#?}' });
+    });
+
+    it('an explicit blank-over-blank fraction stays empty', () => {
+      // distinct from `/`: this key is meant to insert two empty slots
+      expect(keyToAction({ command: '\\frac' })).toEqual({ type: 'insert', value: '\\frac{#?}{#?}' });
+    });
+
+    it('the x-over-blank key routes through division', () => {
+      // eslint-disable-next-line global-require
+      const { xOverBlank } = require('../keys/fractions');
+
+      expect(xOverBlank.command).toEqual('/');
+      expect(keyToAction(xOverBlank).value).toEqual('\\frac{#@}{#?}');
+    });
+
     it('passes argument-less commands through', () => {
       expect(keyToAction({ command: '\\pi' })).toEqual({ type: 'insert', value: '\\pi' });
     });

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

@@ -150,6 +150,46 @@ describe('mathlive-instance', () => {
       expect(MathfieldElement.fontsDirectory.startsWith('http')).toBe(true);
     });
 
+    // \neq, \nsim and \ncong are built from Private Use Area glyphs that only
+    // the KaTeX fonts contain, so "no fonts" renders garbage rather than
+    // degrading gracefully - hence a CDN fallback by default.
+    it('falls back to a version-pinned CDN when nothing is configured', () => {
+      const MathfieldElement = {};
+
+      instance.__setMathLiveForTest({ MathfieldElement, version: { mathlive: '9.9.9' } });
+      instance.configureFonts(undefined);
+
+      expect(MathfieldElement.fontsDirectory).toEqual('https://unpkg.com/mathlive@9.9.9/fonts');
+    });
+
+    it('uses /fonts, not /dist/fonts (the latter 404s on unpkg)', () => {
+      const MathfieldElement = {};
+
+      instance.__setMathLiveForTest({ MathfieldElement, version: { mathlive: '0.110.0' } });
+      instance.configureFonts(undefined);
+
+      expect(MathfieldElement.fontsDirectory).toEqual('https://unpkg.com/mathlive@0.110.0/fonts');
+      expect(MathfieldElement.fontsDirectory).not.toContain('/dist/');
+    });
+
+    it('a configured path wins over the CDN', () => {
+      const MathfieldElement = {};
+
+      instance.__setMathLiveForTest({ MathfieldElement, version: { mathlive: '0.110.0' } });
+      instance.configureFonts('/mathlive-fonts');
+
+      expect(MathfieldElement.fontsDirectory).not.toContain('unpkg.com');
+    });
+
+    it('null still opts out entirely', () => {
+      const MathfieldElement = {};
+
+      instance.__setMathLiveForTest({ MathfieldElement, version: { mathlive: '0.110.0' } });
+      instance.configureFonts(null);
+
+      expect(MathfieldElement.fontsDirectory).toBeNull();
+    });
+
     it('leaves a fully-qualified url untouched', () => {
       const MathfieldElement = {};
 
@@ -169,6 +209,53 @@ describe('mathlive-instance', () => {
     });
   });
 
+  // A live <math-field> renders in shadow DOM, so nothing in the page's
+  // stylesheets reaches it - the stretchy-accent fix has to be injected there.
+  describe('applyShadowStyles', () => {
+    const host = () => {
+      const el = document.createElement('div');
+
+      el.attachShadow({ mode: 'open' });
+
+      return el;
+    };
+
+    it('is a no-op without a shadow root', () => {
+      expect(() => instance.applyShadowStyles(undefined)).not.toThrow();
+      expect(() => instance.applyShadowStyles(document.createElement('div'))).not.toThrow();
+    });
+
+    it('injects the accent fix into the shadow root', () => {
+      const el = host();
+
+      instance.applyShadowStyles(el);
+
+      const viaSheet = el.shadowRoot.__pieAccentSheet;
+      const viaStyle = el.shadowRoot.querySelector('style[data-pie-accent]');
+      const css = viaSheet ? 'adopted' : (viaStyle && viaStyle.textContent) || '';
+
+      expect(viaSheet || viaStyle).toBeTruthy();
+
+      if (viaStyle) {
+        expect(css).toContain('margin-left:0 !important');
+        // scoped so single-glyph accents keep their centring offset
+        expect(css).toContain(':has(.ML__stretchy)');
+      }
+    });
+
+    it('does not inject twice', () => {
+      const el = host();
+
+      instance.applyShadowStyles(el);
+      instance.applyShadowStyles(el);
+
+      const styles = el.shadowRoot.querySelectorAll('style[data-pie-accent]');
+
+      // either one adopted sheet, or exactly one style node
+      expect(el.shadowRoot.__pieAccentSheet ? 1 : styles.length).toBe(1);
+    });
+  });
+
   describe('latexToMarkup', () => {
     it('returns empty string when MathLive is not loaded', () => {
       expect(instance.latexToMarkup('\\pi')).toEqual('');