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

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

@@ -4,6 +4,8 @@ import {
   fieldIds,
   keyToAction,
   toNativeCommands,
+  toCanonicalCommands,
+  MATHQUILL_ALIASES,
   NEWLINE_EMBED,
   DEFAULT_FIELD_ID,
 } from '../latex-bridge';
@@ -133,6 +135,28 @@ describe('latex-bridge', () => {
       expect(toNativeCommands('\\longdiv{1}\\longdiv{2}')).toEqual('\\enclose{longdiv}{1}\\enclose{longdiv}{2}');
     });
 
+    // `%` starts a comment in real LaTeX, so MathLive drops it and everything
+    // after it. MathQuill had no comments, so latex authored under it - or by
+    // hand - can carry a bare `%` that would silently truncate the expression.
+    it('escapes a bare % so it cannot comment out the rest of the line', () => {
+      expect(toNativeCommands('%')).toEqual('\\%');
+      expect(toNativeCommands('50%')).toEqual('50\\%');
+      expect(toNativeCommands('x%y')).toEqual('x\\%y');
+      expect(toNativeCommands('a%b%c')).toEqual('a\\%b\\%c');
+    });
+
+    it('leaves an already-escaped % alone', () => {
+      expect(toNativeCommands('\\%')).toEqual('\\%');
+      expect(toNativeCommands('50\\%')).toEqual('50\\%');
+      // idempotent: toMathLive may run over latex that came back out of a field
+      expect(toNativeCommands(toNativeCommands('50%'))).toEqual('50\\%');
+    });
+
+    // `\\` is a line break, not an escape, so the `%` after it is still bare.
+    it('counts backslashes to decide whether a % is escaped', () => {
+      expect(toNativeCommands('a\\\\%b')).toEqual('a\\\\\\%b');
+    });
+
     it('leaves other latex untouched', () => {
       ['\\frac{1}{2}', '\\pi', '\\sqrt{x}', '\\overline{AB}'].forEach((l) => {
         expect(toNativeCommands(l)).toEqual(l);
@@ -175,6 +199,120 @@ describe('latex-bridge', () => {
     });
   });
 
+  // MathQuill registered some keypad names as aliases of a different command:
+  // the divide key stored `\div`, not `\divide`. MathLive knows `\divide` only as
+  // a pie macro and serialises it under that name, so it reached storage and
+  // MathJax (which has no `\divide`) rendered it as red text.
+  describe('MathQuill command aliases', () => {
+    it('the divide and perpendicular keys insert the command MathQuill stored', () => {
+      /* eslint-disable global-require */
+      const { divide } = require('../keys/basic-operators');
+      // Exported under a pre-existing misspelling.
+      const { perpindicular: perpendicular } = require('../keys/geometry');
+      /* eslint-enable global-require */
+
+      expect(keyToAction(divide)).toEqual({ type: 'insert', value: '\\div' });
+      expect(keyToAction(perpendicular)).toEqual({ type: 'insert', value: '\\perp' });
+    });
+
+    it('stores the canonical command for latex that still carries an alias', () => {
+      // Typed into the field, or saved before the keypad resolved the alias.
+      expect(fromMathLive('1\\divide 6')).toEqual('1\\div 6');
+      expect(fromMathLive('a\\perpendicular b')).toEqual('a\\perp b');
+    });
+
+    it('only replaces whole command names', () => {
+      // \divideontimes is a real AMS symbol and must survive.
+      expect(toCanonicalCommands('a\\divideontimes b')).toEqual('a\\divideontimes b');
+      expect(toCanonicalCommands('\\divide\\divide')).toEqual('\\div\\div');
+    });
+
+    // The double prime key: MathLive serialises `5''` as `5^{\doubleprime}`,
+    // which MathJax cannot render (red `\doubleprime`). MathQuill stored `5''`.
+    it('stores the double prime key as apostrophes', () => {
+      expect(fromMathLive('5^{\\doubleprime}')).toEqual("5''");
+      expect(fromMathLive('x^{\\prime}')).toEqual("x'");
+      expect(fromMathLive('x^{\\prime\\prime\\prime}')).toEqual("x'''");
+      expect(fromMathLive('\\doubleprime')).toEqual("''");
+    });
+
+    // Typing `'` twice yields two superscript groups - a MathJax double-exponent
+    // error - so they collapse into apostrophes too.
+    it('collapses adjacent prime superscripts', () => {
+      expect(fromMathLive('x^{\\prime}^{\\prime}')).toEqual("x''");
+      expect(fromMathLive('5^{\\prime}^{\\doubleprime}')).toEqual("5'''");
+    });
+
+    it('leaves superscripts that hold more than primes alone', () => {
+      expect(fromMathLive('x^{\\prime 2}')).toEqual('x^{\\prime 2}');
+      expect(fromMathLive('x^{2}')).toEqual('x^{2}');
+    });
+
+    it('round-trips stored primes unchanged', () => {
+      expect(fromMathLive("12^{\\circ}30'15''")).toEqual("12^{\\circ}30'15''");
+    });
+
+    // `5′6″` typed or pasted as characters serialises as bare commands. A bare
+    // `\prime` is full size in MathJax while `''` is a superscript, so storing
+    // `5\prime6''` drew the single prime larger than each stroke of the double.
+    it('stores bare primes as apostrophes, so single and double match', () => {
+      expect(fromMathLive('5\\prime6\\doubleprime')).toEqual("5'6''");
+      expect(fromMathLive('5\\prime 6\\doubleprime')).toEqual("5' 6''");
+      expect(fromMathLive('\\prime')).toEqual("'");
+      expect(fromMathLive('\\frac{5\\prime}{2}')).toEqual("\\frac{5'}{2}");
+    });
+
+    // Inside a script a prime is already a superscript; an apostrophe there
+    // would be a prime *of* the script.
+    it('keeps primes that are inside a superscript or subscript', () => {
+      expect(fromMathLive('x^{\\prime 2}')).toEqual('x^{\\prime 2}');
+      expect(fromMathLive('x^\\prime')).toEqual('x^\\prime');
+      expect(fromMathLive('x_{\\prime}')).toEqual('x_{\\prime}');
+      // MathJax has no \doubleprime: spell it out rather than leave red text
+      expect(fromMathLive('x^{\\doubleprime 2}')).toEqual('x^{\\prime\\prime 2}');
+    });
+
+    it('closes the script scope at the matching brace', () => {
+      expect(fromMathLive('x^{2}\\prime')).toEqual("x^{2}'");
+      expect(fromMathLive('x^{\\frac{a}{b}}6\\doubleprime')).toEqual("x^{\\frac{a}{b}}6''");
+    });
+
+    it('does not touch commands that merely start with "prime"', () => {
+      expect(fromMathLive('\\primes')).toEqual('\\primes');
+      expect(fromMathLive('\\backprime')).toEqual('\\backprime');
+    });
+
+    it('no keypad key inserts an alias name', () => {
+      /* eslint-disable global-require */
+      const fs = require('fs');
+      const path = require('path');
+      /* eslint-enable global-require */
+      const keysDir = path.resolve(__dirname, '../keys');
+      const keys = [];
+
+      const collect = (v) => {
+        if (Array.isArray(v)) return v.forEach(collect);
+        if (v && typeof v === 'object' && (v.command || v.latex || v.write)) keys.push(v);
+      };
+
+      fs.readdirSync(keysDir)
+        .filter((f) => /\.js$/.test(f))
+        // eslint-disable-next-line global-require, import/no-dynamic-require
+        .forEach((f) => Object.values(require(path.join(keysDir, f))).forEach(collect));
+
+      expect(keys.length).toBeGreaterThan(50);
+
+      keys.forEach((k) => {
+        const action = keyToAction(k);
+        const value = (action && action.value) || '';
+
+        Object.keys(MATHQUILL_ALIASES).forEach((alias) => {
+          expect(new RegExp(`\\${alias}(?![a-zA-Z])`).test(value)).toBe(false);
+        });
+      });
+    });
+  });
+
   describe('keyToAction', () => {
     it('prefers latex when there is no command', () => {
       expect(keyToAction({ latex: '\\pi', write: 'p' })).toEqual({ type: 'insert', value: '\\pi' });
@@ -190,6 +328,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,203 @@ 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.
+  /**
+   * A keypad key like \frac inserts `\frac{#?}{#?}`; MathLive turns each `#?`
+   * into a `\placeholder{}` atom and *selects* the first one. Measured in
+   * Chromium: that atom is a leaf (its offsets are before/after, there is no
+   * position inside), so MathLive renders NO caret element and shows only the
+   * selection highlight - the box read as focused-but-dead. The caret is drawn
+   * by our own shadow CSS, gated on a class so it is placeholder-specific.
+   */
+  describe('trackPlaceholderCaret', () => {
+    const fakeField = (selection, latex) => {
+      const classes = new Set();
+
+      return {
+        listeners: {},
+        selection,
+        selectionIsCollapsed: !selection,
+        getValue: () => latex,
+        classList: {
+          toggle: (name, on) => (on ? classes.add(name) : classes.delete(name)),
+          contains: (name) => classes.has(name),
+        },
+        addEventListener(name, fn) {
+          this.listeners[name] = fn;
+        },
+        removeEventListener(name) {
+          delete this.listeners[name];
+        },
+      };
+    };
+
+    it('marks the host when a placeholder is selected', () => {
+      const mf = fakeField({ ranges: [[1, 2]] }, '\\placeholder{}');
+
+      instance.trackPlaceholderCaret(mf);
+
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(true);
+    });
+
+    it('does not mark an ordinary selection', () => {
+      const mf = fakeField({ ranges: [[0, 3]] }, 'x+1');
+
+      instance.trackPlaceholderCaret(mf);
+
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('does not mark a collapsed selection, which has a real caret already', () => {
+      const mf = fakeField(null, '\\placeholder{}');
+
+      instance.trackPlaceholderCaret(mf);
+
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('leaves a named prompt alone - it takes a real caret inside', () => {
+      const mf = fakeField({ ranges: [[1, 2]] }, '\\placeholder[r1]{}');
+
+      instance.trackPlaceholderCaret(mf);
+
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('re-evaluates whenever the selection moves', () => {
+      const mf = fakeField(null, '');
+
+      instance.trackPlaceholderCaret(mf);
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+
+      // the caret lands on a placeholder
+      mf.selection = { ranges: [[1, 2]] };
+      mf.selectionIsCollapsed = false;
+      mf.getValue = () => '\\placeholder{}';
+      mf.listeners['selection-change']();
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(true);
+
+      // ...and moves off it again
+      mf.selectionIsCollapsed = true;
+      mf.listeners['selection-change']();
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('returns a teardown that detaches the listener', () => {
+      const mf = fakeField(null, '');
+      const off = instance.trackPlaceholderCaret(mf);
+
+      expect(typeof mf.listeners['selection-change']).toEqual('function');
+      off();
+      expect(mf.listeners['selection-change']).toBeUndefined();
+    });
+
+    it('survives a field that throws while reading the selection', () => {
+      const mf = fakeField({ ranges: [[1, 2]] }, '');
+
+      mf.getValue = () => {
+        throw new Error('detached');
+      };
+
+      expect(() => instance.trackPlaceholderCaret(mf)).not.toThrow();
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('is a no-op without a field', () => {
+      expect(instance.trackPlaceholderCaret(undefined)).toBeUndefined();
+      expect(instance.trackPlaceholderCaret({})).toBeUndefined();
+    });
+  });
+
+  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('injects the placeholder caret rules', () => {
+      const el = host();
+
+      instance.applyShadowStyles(el);
+
+      const viaStyle = el.shadowRoot.querySelector('style[data-pie-accent]');
+
+      if (viaStyle) {
+        const css = viaStyle.textContent;
+
+        // gated on the host class, so an ordinary selection gets no caret
+        expect(css).toContain(`:host(.${instance.PLACEHOLDER_CARET_CLASS})`);
+        // MathLive's own blink keyframes and caret colour, already in this root
+        expect(css).toContain('ML__caret-blink');
+        expect(css).toContain('--_caret-color');
+        // the innermost selected element only: MathLive marks a wrapper AND the
+        // glyph span, which would otherwise render two carets
+        expect(css).toContain('.ML__selected:not(:has(.ML__selected))');
+      }
+    });
+
+    it('injects the radical index size fix', () => {
+      const el = host();
+
+      instance.applyShadowStyles(el);
+
+      const viaStyle = el.shadowRoot.querySelector('style[data-pie-accent]');
+
+      if (viaStyle) {
+        const css = viaStyle.textContent;
+
+        // MathLive's scriptscriptstyle index (an inline 50%) reads too small in
+        // the authoring UI; a mathfield's shadow root needs its own copy of the
+        // rule, since host styles do not cross the boundary. Compared against
+        // the exported rule, so the size stays defined in one place.
+        // eslint-disable-next-line global-require
+        const { ROOT_INDEX_CSS } = require('../mf/common-styles');
+
+        expect(ROOT_INDEX_CSS).toContain('.ML__sqrt-index >');
+        expect(css).toContain(ROOT_INDEX_CSS);
+      }
+    });
+
+    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('');