@pie-lib/math-input-mathlive 1.1.5-beta.7 → 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/latex-bridge.js

@@ -69,6 +69,11 @@ 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.
@@ -98,6 +103,7 @@ const EMPTY_FENCE_SLOT = '\\rule{0em}{1em}\\htmlData{pie-empty=1}{\\rule[-0.25em
  */
 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');
 
@@ -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();

package/src/selection.js

@@ -0,0 +1,146 @@
+import debug from 'debug';
+
+const log = debug('pie-lib:math-input-mathlive:selection');
+
+/**
+ * Widen a selection so it covers whole atoms of a single parent.
+ *
+ * MathLive extends a selection over *flat offsets*, so Shift+Arrow walks into
+ * a fraction instead of over it: from before `2x` in `5x^2+2x+\frac{\pi}{2}-4`,
+ * five presses select `2x+` plus the `\pi` of the numerator, and copying gives
+ * `2x+\pi`. MathQuill treated a fraction (root, superscript...) as one unit,
+ * which is what authors expect.
+ *
+ * The tree is recovered from MathLive's public `getElementInfo(offset)`, where
+ * offset `i` describes the atom ending at caret position `i`:
+ *
+ *  - a composite atom (fraction, root, script) owns the offset right *after*
+ *    its children; the children are one level deeper;
+ *  - each branch (numerator, denominator, radicand) opens with an empty-latex
+ *    "start" atom.
+ *
+ * The rule: find the shallowest depth the selection touches, counting the caret
+ * it starts from. If the range crosses into a sibling branch at that depth, the
+ * real common parent is one level up. Then push both ends out of anything
+ * deeper. A script atom (`^2`) is kept with its base, since MathLive stores
+ * `x^2` as `x` followed by a separate `^2` atom.
+ *
+ * Pure, so it can be tested without a browser.
+ *
+ * @param {number} start
+ * @param {number} end
+ * @param {function(number): {depth?: number, latex?: string}} info
+ * @param {number} lastOffset
+ * @returns {[number, number]} the widened range, start <= end
+ */
+export const expandRange = (start, end, info, lastOffset) => {
+  const at = (i) => info(i) || {};
+  const depth = (i) => at(i).depth || 0;
+  const isBranchStart = (i) => depth(i) > 0 && at(i).latex === '';
+
+  if (end < start) {
+    [start, end] = [end, start];
+  }
+
+  if (end - start < 1) {
+    return [start, end];
+  }
+
+  let target = Infinity;
+
+  for (let i = start; i <= end; i++) {
+    target = Math.min(target, depth(i));
+  }
+
+  for (let i = start + 1; i <= end; i++) {
+    if (depth(i) === target && isBranchStart(i)) {
+      target -= 1;
+      break;
+    }
+  }
+
+  target = Math.max(target, 0);
+
+  while (start > 0 && depth(start) > target) {
+    start -= 1;
+  }
+
+  while (end < lastOffset && depth(end) > target) {
+    end += 1;
+  }
+
+  // Keep a superscript / subscript with its base.
+  let first = start + 1;
+
+  while (first <= end && depth(first) > target) {
+    first += 1;
+  }
+
+  if (start > 0 && first <= end && /^[\^_]/.test(at(first).latex || '') && depth(start) === target) {
+    start -= 1;
+  }
+
+  return [start, end];
+};
+
+/**
+ * Keep a mathfield's selection snapped to whole atoms (see {@link expandRange}).
+ *
+ * This fixes both what the user sees highlighted and what copy/cut put on the
+ * clipboard, since both come from the selection. The selection direction is
+ * preserved, so further Shift+Arrow presses keep extending the same end.
+ *
+ * @param {HTMLElement} mathField a MathLive `<math-field>`
+ * @returns {function|undefined} teardown, to call on unmount
+ */
+export const trackWholeAtomSelection = (mathField) => {
+  if (!mathField || typeof mathField.addEventListener !== 'function') {
+    return undefined;
+  }
+
+  let applying = false;
+
+  const update = () => {
+    if (applying) {
+      return;
+    }
+
+    try {
+      if (mathField.selectionIsCollapsed || typeof mathField.getElementInfo !== 'function') {
+        return;
+      }
+
+      const selection = mathField.selection;
+      const range = selection && selection.ranges && selection.ranges[0];
+
+      if (!range) {
+        return;
+      }
+
+      const [start, end] = range;
+      const lo = Math.min(start, end);
+      const hi = Math.max(start, end);
+      const [nextStart, nextEnd] = expandRange(
+        lo,
+        hi,
+        (i) => mathField.getElementInfo(i),
+        mathField.lastOffset,
+      );
+
+      if (nextStart === lo && nextEnd === hi) {
+        return;
+      }
+
+      applying = true;
+      mathField.selection = { ranges: [[nextStart, nextEnd]], direction: selection.direction };
+    } catch (e) {
+      log('could not normalise the selection: %s', e && e.message);
+    } finally {
+      applying = false;
+    }
+  };
+
+  mathField.addEventListener('selection-change', update);
+
+  return () => mathField.removeEventListener('selection-change', update);
+};