@pie-lib/math-input-mathlive 1.1.5-beta.8 → 2.0.1-next.20261107131445

package/src/__tests__/selection.test.js

@@ -1,212 +0,0 @@
-import { expandRange, trackWholeAtomSelection } from '../selection';
-
-/**
- * Offset tables captured from MathLive 0.110.0 `getElementInfo(i)` in Chrome,
- * as [depth, latex] per offset. Offset `i` is the atom ending at caret `i`.
- */
-const table = (rows) => (i) => (rows[i] ? { depth: rows[i][0], latex: rows[i][1] } : undefined);
-
-// 5x^2+2x+\frac{\pi}{2}-4
-const POLY = table([
-  [0, ''], [0, '5'], [0, 'x'], [1, ''], [1, '2'], [0, '^2'], [0, '+'], [0, '2'], [0, 'x'], [0, '+'],
-  [1, ''], [1, '\\pi'], [1, ''], [1, '2'], [0, '\\frac{\\pi}{2}'], [0, '-'], [0, '4'],
-]);
-const POLY_LAST = 16;
-
-// a+\sqrt{x+1}+b
-const ROOT = table([[0, ''], [0, 'a'], [0, '+'], [1, ''], [1, 'x'], [1, '+'], [1, '1'], [0, '\\sqrt{x+1}'], [0, '+'], [0, 'b']]);
-
-// \frac{\frac{a}{b}}{c}
-const NESTED = table([
-  [0, ''], [1, ''], [2, ''], [2, 'a'], [2, ''], [2, 'b'], [1, '\\frac{a}{b}'], [1, ''], [1, 'c'], [0, '\\frac{\\frac{a}{b}}{c}'],
-]);
-
-describe('expandRange', () => {
-  const poly = (a, b) => expandRange(a, b, POLY, POLY_LAST);
-
-  it('leaves a selection of whole sibling atoms alone', () => {
-    expect(poly(6, 7)).toEqual([6, 7]); // 2
-    expect(poly(6, 9)).toEqual([6, 9]); // 2x+
-    expect(poly(6, 15)).toEqual([6, 15]); // 2x+\frac{\pi}{2}-
-    expect(poly(0, 16)).toEqual([0, 16]);
-  });
-
-  // The reported case: five Shift+Right presses from before `2x` gave `2x+\pi`.
-  it('takes the whole fraction when the selection reaches into it', () => {
-    expect(poly(6, 10)).toEqual([6, 14]);
-    expect(poly(6, 11)).toEqual([6, 14]);
-    expect(poly(6, 13)).toEqual([6, 14]);
-  });
-
-  it('takes the whole fraction when the selection leaves it', () => {
-    expect(poly(11, 15)).toEqual([9, 15]); // from the pi to after the minus
-  });
-
-  it('crossing from numerator to denominator selects the fraction', () => {
-    expect(poly(11, 13)).toEqual([9, 14]);
-    expect(poly(11, 12)).toEqual([9, 14]);
-  });
-
-  it('a selection inside one branch stays inside it', () => {
-    expect(poly(10, 11)).toEqual([10, 11]); // \pi
-    expect(poly(12, 13)).toEqual([12, 13]); // the 2 of the denominator
-  });
-
-  // MathLive stores x^2 as `x` then a separate `^2` atom.
-  it('keeps a superscript with its base', () => {
-    expect(poly(3, 7)).toEqual([1, 7]); // x^2+2, not ^2+2
-    expect(poly(4, 6)).toEqual([1, 6]); // x^2+
-  });
-
-  it('accepts a reversed range', () => {
-    expect(poly(11, 6)).toEqual([6, 14]);
-  });
-
-  it('leaves a collapsed range alone', () => {
-    expect(poly(11, 11)).toEqual([11, 11]);
-  });
-
-  it('handles roots the same way', () => {
-    expect(expandRange(2, 4, ROOT, 9)).toEqual([2, 7]);
-    expect(expandRange(4, 6, ROOT, 9)).toEqual([4, 6]); // +1 inside the radicand
-  });
-
-  it('climbs as many levels as needed in nested fractions', () => {
-    expect(expandRange(2, 3, NESTED, 9)).toEqual([2, 3]); // a
-    expect(expandRange(3, 5, NESTED, 9)).toEqual([1, 6]); // a/b crossing -> inner fraction
-    expect(expandRange(6, 7, NESTED, 9)).toEqual([0, 9]); // inner -> outer denominator
-  });
-
-  it('tolerates missing info', () => {
-    expect(expandRange(1, 3, () => undefined, 5)).toEqual([1, 3]);
-  });
-});
-
-describe('trackWholeAtomSelection', () => {
-  const stubField = (range, direction = 'forward') => {
-    const listeners = {};
-
-    return {
-      selection: { ranges: [range], direction },
-      get selectionIsCollapsed() {
-        return this.selection.ranges[0][0] === this.selection.ranges[0][1];
-      },
-      lastOffset: POLY_LAST,
-      getElementInfo: POLY,
-      sets: 0,
-      addEventListener(type, fn) {
-        listeners[type] = fn;
-      },
-      removeEventListener(type, fn) {
-        if (listeners[type] === fn) {
-          delete listeners[type];
-        }
-      },
-      fire(type) {
-        if (listeners[type]) {
-          listeners[type]();
-        }
-      },
-      has(type) {
-        return !!listeners[type];
-      },
-    };
-  };
-
-  const track = (field) => {
-    // count assignments without breaking the getter
-    let current = field.selection;
-
-    Object.defineProperty(field, 'selection', {
-      get: () => current,
-      set: (v) => {
-        field.sets += 1;
-        current = v;
-      },
-    });
-
-    return trackWholeAtomSelection(field);
-  };
-
-  it('widens the selection on selection-change', () => {
-    const field = stubField([6, 11]);
-
-    track(field);
-    field.fire('selection-change');
-
-    expect(field.selection.ranges).toEqual([[6, 14]]);
-  });
-
-  it('preserves the direction, so Shift+Arrow keeps extending the same end', () => {
-    const field = stubField([11, 16], 'backward');
-
-    track(field);
-    field.fire('selection-change');
-
-    expect(field.selection).toEqual({ ranges: [[9, 16]], direction: 'backward' });
-  });
-
-  it('does not touch a selection that is already whole', () => {
-    const field = stubField([6, 9]);
-
-    track(field);
-    field.fire('selection-change');
-
-    expect(field.sets).toBe(0);
-  });
-
-  it('ignores a collapsed caret', () => {
-    const field = stubField([11, 11]);
-
-    track(field);
-    field.fire('selection-change');
-
-    expect(field.sets).toBe(0);
-  });
-
-  it('does not recurse when its own assignment fires selection-change', () => {
-    const field = stubField([6, 11]);
-    let current = field.selection;
-
-    Object.defineProperty(field, 'selection', {
-      get: () => current,
-      set: (v) => {
-        field.sets += 1;
-        current = v;
-        field.fire('selection-change');
-      },
-    });
-
-    trackWholeAtomSelection(field);
-    field.fire('selection-change');
-
-    expect(field.sets).toBe(1);
-    expect(field.selection.ranges).toEqual([[6, 14]]);
-  });
-
-  it('survives a field that throws', () => {
-    const field = stubField([6, 11]);
-
-    field.getElementInfo = () => {
-      throw new Error('boom');
-    };
-
-    track(field);
-
-    expect(() => field.fire('selection-change')).not.toThrow();
-  });
-
-  it('tears down its listener', () => {
-    const field = stubField([6, 11]);
-    const untrack = track(field);
-
-    expect(field.has('selection-change')).toBe(true);
-    untrack();
-    expect(field.has('selection-change')).toBe(false);
-  });
-
-  it('is a no-op without a field', () => {
-    expect(trackWholeAtomSelection(undefined)).toBeUndefined();
-    expect(trackWholeAtomSelection({})).toBeUndefined();
-  });
-});

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

@@ -1,364 +0,0 @@
-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/horizontal-keypad.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { keysForGrade, normalizeAdditionalKeys } from './keys/grades';
-import { extendKeySet } from './keys/utils';
-import Keypad from './keypad';
-
-/**
- * Maps a key definition to the legacy `{value, type}` shape that
- * @pie-lib/math-toolbar consumes. Unchanged from the MathQuill implementation:
- * the shape is part of the 4.x-compatible contract, and translation to MathLive
- * happens later, in `latex-bridge.keyToAction`.
- */
-const toOldModel = (d) => {
-  if (d.command) {
-    return { value: d.command, type: 'command' };
-  } else if (d.write) {
-    return { value: d.write };
-  } else if (d.keystroke) {
-    return { type: 'cursor', value: d.keystroke };
-  }
-};
-
-export default class HorizontalKeypad extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    controlledKeypadMode: PropTypes.bool,
-    mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    layoutForKeyPad: PropTypes.object,
-    onClick: PropTypes.func.isRequired,
-    onFocus: PropTypes.func,
-    noDecimal: PropTypes.bool,
-    additionalKeys: PropTypes.array,
-    setKeypadInteraction: PropTypes.func,
-  };
-
-  static defaultProps = {
-    mode: 'scientific',
-    noDecimal: false,
-    additionalKeys: [],
-  };
-
-  keypadPress = (data) => {
-    this.props.onClick(toOldModel(data));
-  };
-
-  render() {
-    const {
-      mode,
-      onFocus,
-      controlledKeypadMode,
-      noDecimal,
-      className,
-      additionalKeys,
-      layoutForKeyPad,
-      setKeypadInteraction,
-    } = this.props;
-    const normalizedKeys = normalizeAdditionalKeys(additionalKeys);
-
-    return (
-      <Keypad
-        className={className}
-        controlledKeypadMode={controlledKeypadMode}
-        onFocus={onFocus}
-        noDecimal={noDecimal}
-        layoutForKeyPad={layoutForKeyPad}
-        additionalKeys={extendKeySet(keysForGrade(mode), normalizedKeys)}
-        onPress={this.keypadPress}
-        mode={mode}
-        setKeypadInteraction={setKeypadInteraction}
-      />
-    );
-  }
-}

package/src/index.jsx

@@ -1,63 +0,0 @@
-import { keysForGrade } from './keys/grades';
-import * as keys from './keys';
-
-import MathInput from './math-input';
-import HorizontalKeypad from './horizontal-keypad';
-import KeyPad from './keypad';
-
-import * as mf from './mf';
-import {
-  registerEmbed,
-  applyStaticMath,
-  latexToMarkup,
-  loadMathLive,
-  configureFonts,
-  getMacros,
-  PIE_MACROS,
-} from './mathlive-instance';
-import { toMathLive, fromMathLive, keyToAction, NEWLINE_EMBED } from './latex-bridge';
-
-const addLeftBracket = (s) => (s.indexOf('\\(') === 0 ? s : `\\(${s}`);
-const addRightBracket = (s) => (s.indexOf('\\)') === s.length - 2 ? s : `${s}\\)`);
-const rmLeftBracket = (s) => (s.indexOf('\\(') === 0 ? s.substring(2) : s);
-const rmRightBracket = (s) => (s.indexOf('\\)') === s.length - 2 ? s.substring(0, s.length - 2) : s);
-
-const addBrackets = (s) => addRightBracket(addLeftBracket(s));
-const removeBrackets = (s) => rmRightBracket(rmLeftBracket(s));
-
-/**
- * `updateSpans` is intentionally a no-op.
- *
- * In @pie-lib/math-input it patched MathQuill's rendered DOM by walking
- * `span[mathquill-command-id]` to resize the parallel glyph and tag primes.
- * MathLive emits none of those attributes and does not need the fixups, but the
- * export is kept so callers do not break.
- */
-const updateSpans = () => {};
-
-export {
-  keysForGrade,
-  addBrackets,
-  removeBrackets,
-  keys,
-  MathInput,
-  HorizontalKeypad,
-  KeyPad,
-  updateSpans,
-  // `mf` is the MathLive equivalent of math-input's `mq`. Both names are
-  // exported so a consumer can switch packages by changing only the import.
-  mf,
-  mf as mq,
-  registerEmbed,
-  applyStaticMath,
-  // MathLive-specific additions
-  latexToMarkup,
-  loadMathLive,
-  configureFonts,
-  getMacros,
-  PIE_MACROS,
-  toMathLive,
-  fromMathLive,
-  keyToAction,
-  NEWLINE_EMBED,
-};