@pie-lib/math-input-mathlive 1.1.5-beta.6 → 1.1.5-beta.8

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__/drop-in-compat.test.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { styled } from '@mui/material/styles';
+
+import { mq } from '../index';
+
+/**
+ * Exercises the exact call patterns real consumers use against
+ * @pie-lib/math-input, to catch drop-in incompatibilities.
+ *
+ * Sources:
+ *  - packages/math-toolbar/src/editor-and-pad.jsx:16,185
+ *  - packages/math-toolbar/src/math-preview.jsx:8,156
+ *  - packages/editable-html/src/plugins/respArea/math-templated/index.jsx:92
+ *  - packages/editable-html-tip-tap/src/components/respArea/MathTemplated.jsx:111
+ */
+describe('drop-in compatibility with @pie-lib/math-input consumers', () => {
+  describe('mq.CommonMqStyles destructuring', () => {
+    it('math-preview.jsx: { commonMqFontStyles, longdivStyles, supsubStyles }', () => {
+      const { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
+
+      expect(commonMqFontStyles).toBeDefined();
+      expect(longdivStyles).toBeDefined();
+      expect(supsubStyles).toBeDefined();
+    });
+
+    it('editor-and-pad.jsx: also { commonMqKeyboardStyles }', () => {
+      const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
+
+      expect(commonMqKeyboardStyles).toBeDefined();
+      // All four must be spreadable into an emotion style object.
+      expect(() => ({
+        ...commonMqFontStyles,
+        ...commonMqKeyboardStyles,
+        ...longdivStyles,
+        ...supsubStyles,
+      })).not.toThrow();
+    });
+
+    it('the destructured groups survive being spread into a styled component', () => {
+      const { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
+      const Styled = styled('div')({ ...commonMqFontStyles, ...longdivStyles, ...supsubStyles });
+
+      expect(() => render(<Styled />)).not.toThrow();
+    });
+  });
+
+  describe('mq.Input', () => {
+    it('editor-and-pad.jsx: styled(mq.Input) renders', () => {
+      const MathEditor = styled(mq.Input)(() => ({ width: '100%' }));
+
+      expect(() => render(<MathEditor latex="\\frac{1}{2}" onChange={() => {}} />)).not.toThrow();
+    });
+
+    it('accepts the className that styled() injects', () => {
+      const Styled = styled(mq.Input)({ padding: 4 });
+      const { container } = render(<Styled latex="x" onChange={() => {}} />);
+
+      expect(container.firstChild).toBeTruthy();
+      expect(container.firstChild.className).toBeTruthy();
+    });
+  });
+
+  describe('mq.Static', () => {
+    it('math-preview.jsx: <mq.Static latex onFocus onBlur />', () => {
+      expect(() => render(<mq.Static latex={'\\frac{1}{2}'} onFocus={() => {}} onBlur={() => {}} />)).not.toThrow();
+    });
+
+    it('math-templated respArea: <mq.Static latex={value} />', () => {
+      expect(() => render(<mq.Static latex={'x=1'} />)).not.toThrow();
+    });
+
+    it('renders answer-block latex (the templated-math case) without throwing', () => {
+      expect(() =>
+        render(<mq.Static latex={'x=\\MathQuillMathField[r1]{}'} onSubFieldChange={() => {}} />),
+      ).not.toThrow();
+    });
+
+    it('is styleable, as keypad labels were in math-input', () => {
+      const Styled = styled(mq.Static)({ pointerEvents: 'none' });
+
+      expect(() => render(<Styled latex={'\\pi'} />)).not.toThrow();
+    });
+  });
+
+  describe('surface parity', () => {
+    it('exposes exactly the names math-input exported', () => {
+      // eslint-disable-next-line global-require
+      const pkg = require('../index');
+
+      [
+        'keysForGrade',
+        'addBrackets',
+        'removeBrackets',
+        'keys',
+        'HorizontalKeypad',
+        'mq',
+        'updateSpans',
+        'registerEmbed',
+        'applyStaticMath',
+      ].forEach((name) => {
+        expect(pkg[name]).toBeDefined();
+      });
+    });
+
+    it('mq exposes Input, Static and CommonMqStyles', () => {
+      ['Input', 'Static', 'CommonMqStyles'].forEach((name) => {
+        expect(mq[name]).toBeDefined();
+      });
+    });
+  });
+});

package/src/__tests__/index.test.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import {
+  keys,
+  keysForGrade,
+  addBrackets,
+  removeBrackets,
+  registerEmbed,
+  applyStaticMath,
+  updateSpans,
+  mf,
+  mq,
+  MathInput,
+  HorizontalKeypad,
+  KeyPad,
+} from '../index';
+
+describe('math-input-mathlive public API', () => {
+  it('mirrors the @pie-lib/math-input export surface', () => {
+    expect(typeof keysForGrade).toBe('function');
+    expect(typeof addBrackets).toBe('function');
+    expect(typeof removeBrackets).toBe('function');
+    expect(typeof registerEmbed).toBe('function');
+    expect(typeof applyStaticMath).toBe('function');
+    expect(typeof updateSpans).toBe('function');
+    expect(keys).toBeDefined();
+    expect(keys.baseSet).toBeDefined();
+  });
+
+  it('exports the field wrappers under both mf and mq', () => {
+    expect(mf.Input).toBeDefined();
+    expect(mf.Static).toBeDefined();
+    // `mq` alias lets a consumer swap packages by changing only the import.
+    expect(mq).toBe(mf);
+  });
+
+  it('updateSpans is a safe no-op', () => {
+    expect(() => updateSpans()).not.toThrow();
+  });
+
+  it('CommonMqStyles keeps the shape consumers destructure', () => {
+    // math-toolbar does:
+    //   const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles }
+    //     = mq.CommonMqStyles;
+    const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles } = mf.CommonMqStyles;
+
+    [commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles].forEach((s) => {
+      expect(s).toBeDefined();
+      expect(typeof s).toBe('object');
+    });
+  });
+
+  it('bracket helpers round-trip', () => {
+    expect(addBrackets('x')).toEqual('\\(x\\)');
+    expect(removeBrackets('\\(x\\)')).toEqual('x');
+    expect(removeBrackets(addBrackets('\\frac{1}{2}'))).toEqual('\\frac{1}{2}');
+  });
+
+  it('keysForGrade returns a 5-row keyset', () => {
+    const set = keysForGrade('geometry');
+
+    expect(Array.isArray(set)).toBe(true);
+    expect(set.length).toBe(5);
+  });
+});
+
+describe('rendering', () => {
+  // MathLive is a browser-only custom element; loadMathLive() resolves async and
+  // is a no-op-ish under jsdom. These assert the components mount without
+  // throwing, which is what regressed most often in the MathQuill version.
+  it('KeyPad renders without a live MathLive instance', () => {
+    const { container } = render(<KeyPad onPress={() => {}} />);
+
+    expect(container.querySelectorAll('button').length).toBeGreaterThan(0);
+  });
+
+  it('KeyPad falls back to raw latex for labels before MathLive loads', () => {
+    const { container } = render(
+      <KeyPad onPress={() => {}} baseSet={[[{ name: 'pi', latex: '\\pi', category: 'constants' }]]} />,
+    );
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('KeyPad fires onPress with the key definition', () => {
+    const onPress = jest.fn();
+    const key = { name: 'x', label: 'x', write: 'x', category: 'vars' };
+    const { container } = render(<KeyPad onPress={onPress} baseSet={[[key]]} />);
+
+    container.querySelector('button').click();
+
+    expect(onPress).toHaveBeenCalledWith(key);
+  });
+
+  it('MathInput mounts', () => {
+    expect(() => render(<MathInput latex="\\frac{1}{2}" onChange={() => {}} />)).not.toThrow();
+  });
+
+  it('HorizontalKeypad mounts and reports the legacy {value,type} model', () => {
+    const onClick = jest.fn();
+
+    expect(() => render(<HorizontalKeypad onClick={onClick} />)).not.toThrow();
+  });
+
+  it('Static renders display-mode latex without a mathfield', () => {
+    expect(() => render(<mf.Static latex="\\frac{1}{2}" />)).not.toThrow();
+  });
+});

package/src/__tests__/input-imperative.test.jsx

@@ -0,0 +1,144 @@
+import { KEYSTROKES, keyToAction } from '../latex-bridge';
+import Input from '../mf/input';
+
+/**
+ * The imperative surface that @pie-lib/math-toolbar drives
+ * (editor-and-pad.jsx: clear/command/keystroke/write/latex).
+ *
+ * These call the methods against a stub mathfield, because a real
+ * <math-field> needs a browser. What matters here is the *translation*:
+ * MathQuill-era arguments must become valid MathLive operations.
+ */
+const stubField = () => {
+  const calls = { insert: [], executeCommand: [], focus: 0 };
+
+  return {
+    calls,
+    value: '',
+    getValue: () => '',
+    insert(v) {
+      calls.insert.push(v);
+    },
+    executeCommand(v) {
+      calls.executeCommand.push(v);
+    },
+    focus() {
+      calls.focus++;
+    },
+    blur() {},
+  };
+};
+
+const withField = () => {
+  const input = new Input({});
+  const f = stubField();
+
+  input.mathField = f;
+
+  return { input, f };
+};
+
+describe('Input imperative API (drives math-toolbar)', () => {
+  describe('keystroke', () => {
+    it('maps MathQuill keystroke names to MathLive selectors', () => {
+      const { input, f } = withField();
+
+      input.keystroke('Left');
+      input.keystroke('Right');
+      input.keystroke('Backspace');
+
+      expect(f.calls.executeCommand).toEqual(['moveToPreviousChar', 'moveToNextChar', 'deleteBackward']);
+    });
+
+    it('passes an unknown value through as a selector', () => {
+      const { input, f } = withField();
+
+      input.keystroke('deleteForward');
+
+      expect(f.calls.executeCommand).toEqual(['deleteForward']);
+    });
+
+    it('does not throw when the engine rejects the selector', () => {
+      const { input } = withField();
+
+      input.mathField.executeCommand = () => {
+        throw new Error('unknown command');
+      };
+
+      expect(() => input.keystroke('Nonsense')).not.toThrow();
+    });
+
+    it('covers every keystroke the keypad emits', () => {
+      // navigation.js / edit.js only produce these three
+      ['Left', 'Right', 'Backspace'].forEach((k) => expect(KEYSTROKES[k]).toBeDefined());
+    });
+  });
+
+  describe('command', () => {
+    it('expands argument-taking commands into placeholders', () => {
+      const { input, f } = withField();
+
+      input.command('\\frac');
+
+      // a bare \frac would give no editable slots
+      expect(f.calls.insert).toEqual(['\\frac{#?}{#?}']);
+    });
+
+    it('handles array commands', () => {
+      const { input, f } = withField();
+
+      input.command(['\\log', '_']);
+
+      expect(f.calls.insert).toEqual(['\\log_{#?}']);
+    });
+
+    it('passes argument-less commands through', () => {
+      const { input, f } = withField();
+
+      input.command('\\pi');
+
+      expect(f.calls.insert).toEqual(['\\pi']);
+    });
+
+    it('agrees with keyToAction', () => {
+      expect(keyToAction({ command: '\\sqrt' }).value).toEqual('\\sqrt{#?}');
+    });
+  });
+
+  describe('safety before MathLive loads', () => {
+    it('every method is a no-op rather than a crash', () => {
+      const input = new Input({});
+
+      // mathField is undefined until loadMathLive() resolves
+      expect(input.latex()).toEqual('');
+      expect(input.clear()).toEqual('');
+      expect(input.command('\\frac')).toEqual('');
+      expect(input.keystroke('Left')).toEqual('');
+      expect(input.write('x')).toEqual('');
+      expect(() => input.focus()).not.toThrow();
+      expect(() => input.blur()).not.toThrow();
+      expect(() => input.setLatex('x')).not.toThrow();
+      expect(input.element).toBeUndefined();
+    });
+  });
+
+  describe('mqCompat facade', () => {
+    // math-toolbar used to call this.input.mathField.latex(); external
+    // consumers may still do the same.
+    it('exposes latex() as a getter', () => {
+      const { input } = withField();
+
+      input.mathField.getValue = () => '\\frac{1}{2}';
+
+      expect(input.mqCompat.latex()).toEqual('\\frac{1}{2}');
+    });
+
+    it('exposes latex(v) as a setter and el()', () => {
+      const { input, f } = withField();
+
+      input.mqCompat.latex('x+1');
+      expect(f.value).toEqual('x+1');
+      expect(input.mqCompat.el()).toBe(f);
+    });
+  });
+});

package/src/__tests__/input-selection.test.jsx

@@ -0,0 +1,64 @@
+/**
+ * The editable Input keeps its selection snapped to whole atoms (see
+ * selection.js). This checks the wiring: attached on mount, removed on unmount.
+ */
+jest.mock('../mathlive-instance', () => {
+  class FakeMathfieldElement {
+    constructor() {
+      const el = global.document.createElement('math-field');
+
+      el.value = '';
+      el.getValue = () => el.value;
+
+      return el;
+    }
+  }
+
+  return {
+    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),
+    getMacros: () => ({}),
+    MATH_MODE_SPACE: '\\ ',
+    applyShadowStyles: () => {},
+    trackPlaceholderCaret: () => () => {},
+    latexToMarkup: (l) => `<span>${l}</span>`,
+  };
+});
+
+const mockUntrack = jest.fn();
+
+jest.mock('../selection', () => ({
+  trackWholeAtomSelection: jest.fn(() => mockUntrack),
+}));
+
+// eslint-disable-next-line import/first
+import Input from '../mf/input';
+// eslint-disable-next-line import/first
+import { trackWholeAtomSelection } from '../selection';
+
+describe('Input: whole-atom selection', () => {
+  beforeEach(() => {
+    trackWholeAtomSelection.mockClear();
+    mockUntrack.mockClear();
+  });
+
+  it('attaches the tracker to the mathfield on mount', async () => {
+    const input = new Input({});
+
+    input.holderRef = { current: document.createElement('span') };
+    await input.componentDidMount();
+
+    expect(trackWholeAtomSelection).toHaveBeenCalledTimes(1);
+    expect(trackWholeAtomSelection).toHaveBeenCalledWith(input.mathField);
+  });
+
+  it('removes it on unmount', async () => {
+    const input = new Input({});
+
+    input.holderRef = { current: document.createElement('span') };
+    await input.componentDidMount();
+    input.componentWillUnmount();
+
+    expect(mockUntrack).toHaveBeenCalledTimes(1);
+    expect(input.untrackSelection).toBeUndefined();
+  });
+});