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

package/src/__tests__/selection.test.js

@@ -0,0 +1,212 @@
+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

@@ -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/latex-bridge.js

@@ -69,14 +69,28 @@ export const DEFAULT_FIELD_ID = 'r1';
  */
 const EMPTY_SLOT = '\\htmlData{pie-empty=1}{\\rule{0.55em}{0.55em}}';
 const EMPTY_GROUP_REGEX = /\{\s*\}/g;
+// The segment key (`\overline{}`). A bar is a thin accent, so its label is shorter
+// than the ray and line keys' stretchy arrows. The keypad centres every label
+// in its cell, so the bar's box ended up ~0.17em higher than theirs.
+const EMPTY_OVERLINE_REGEX = /\\overline\{\s*\}/g;
+const EMPTY_OVERLINE_STRUT = '\\rule{0em}{1.08em}';
 // Empty delimiter pairs: `\abs{}` is converted to `\left|\right|`, and the
 // parenthesis / bracket keys are `\left(\right)` / `\left[\right]`. None has a
 // `{}` group for the rule above to catch, so they would render as bare fences.
-const EMPTY_FENCE_REGEX = /\\left([(\[|])\s*\\right([)\]|])/g;
+const EMPTY_FENCE_REGEX = /\\left([([|])\s*\\right([)\]|])/g;
 // The same muted fill as the other slots (`pie-empty`), but a tall rectangle
 // rather than a square. It also sets the fences' height: `\left...\right` stretch
 // to their content, so a taller slot gives taller parentheses.
-const EMPTY_FENCE_SLOT = '\\htmlData{pie-empty=1}{\\rule{0.55em}{1em}}';
+//
+// A `\rule` stands on the baseline, but the fences are centred on the math axis
+// (0.25em above it), so an un-lifted box sat high between them. `[-0.25em]`
+// lowers it by (axis - height / 2) = 0.25 - 1 / 2, centring it on the axis.
+//
+// Lowering it alone also shrinks the fences, which size themselves to their
+// content (MathLive switches to short bars). The zero-width `\rule{0em}{1em}`
+// strut keeps the content as tall as before, so the bars keep their height and
+// only the box moves.
+const EMPTY_FENCE_SLOT = '\\rule{0em}{1em}\\htmlData{pie-empty=1}{\\rule[-0.25em]{0.55em}{1em}}';
 
 /**
  * Make empty argument slots visible, for static rendering.
@@ -89,6 +103,7 @@ const EMPTY_FENCE_SLOT = '\\htmlData{pie-empty=1}{\\rule{0.55em}{1em}}';
  */
 export const withVisibleEmptySlots = (latex) =>
   (latex || '')
+    .replace(EMPTY_OVERLINE_REGEX, `\\overline{${EMPTY_OVERLINE_STRUT}${EMPTY_SLOT}}`)
     .replace(EMPTY_GROUP_REGEX, `{${EMPTY_SLOT}}`)
     .replace(EMPTY_FENCE_REGEX, (_m, open, close) => `\\left${open}${EMPTY_FENCE_SLOT}\\right${close}`);
 

package/src/mf/input.jsx

@@ -10,6 +10,7 @@ import {
   trackPlaceholderCaret,
 } from '../mathlive-instance';
 import { toMathLive, fromMathLive, keyToAction, KEYSTROKES } from '../latex-bridge';
+import { trackWholeAtomSelection } from '../selection';
 
 const log = debug('pie-lib:math-input-mathlive:input');
 
@@ -81,7 +82,7 @@ export class Input extends React.Component {
     // defaults to an empty string.
     this.mathField.mathModeSpace = MATH_MODE_SPACE;
     // After the exponent key the cursor must stay in the exponent until it is moved
-    // explicitly, as in the legacy editor. MathLive's `smartSuperscript` (on by
+    // MathLive's `smartSuperscript` (on by
     // default) jumps out of an empty superscript after a single digit, which breaks
     // typing x^23 or 10^6 and is inconsistent with non-digit exponents.
     this.mathField.smartSuperscript = false;
@@ -93,6 +94,9 @@ export class Input extends React.Component {
     // A selected `\placeholder{}` gets no MathLive caret; draw one.
     this.untrackCaret = trackPlaceholderCaret(this.mathField);
 
+    // Shift+Arrow would otherwise select half a fraction; snap to whole atoms.
+    this.untrackSelection = trackWholeAtomSelection(this.mathField);
+
     this.mathField.addEventListener('input', this.onInputEdit);
 
     // Belt and braces: drop anything a previous mount may have left behind.
@@ -136,6 +140,11 @@ export class Input extends React.Component {
       this.untrackCaret = undefined;
     }
 
+    if (this.untrackSelection) {
+      this.untrackSelection();
+      this.untrackSelection = undefined;
+    }
+
     if (this.mathField) {
       this.mathField.removeEventListener('input', this.onInputEdit);
       this.mathField.remove();