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

package/src/__tests__/selection.test.js

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

@@ -11,6 +11,7 @@ import { baseSet } from '../keys';
 import { sortKeys } from './keys-layout';
 import { commonKeyboardStyles, rootIndexStyles } from '../mf/common-styles';
 import { loadMathLive, latexToMarkup } from '../mathlive-instance';
+import { fixLongDivisionWhenReady } from '../longdiv';
 
 const log = debug('pie-lib:math-input-mathlive:keypad');
 
@@ -81,11 +82,14 @@ export class LatexLabel extends React.Component {
   constructor(props) {
     super(props);
     this.state = { markup: latexToMarkup(props.latex) };
+    this.labelRef = React.createRef();
   }
 
   async componentDidMount() {
     // MathLive may not have finished loading when the keypad first mounts.
     if (this.state.markup) {
+      // The long-division key's label needs MathLive's drawing corrected.
+      fixLongDivisionWhenReady(this.labelRef.current);
       return;
     }
 
@@ -111,10 +115,14 @@ export class LatexLabel extends React.Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     if (prevProps.latex !== this.props.latex) {
       this.setState({ markup: latexToMarkup(this.props.latex) });
     }
+
+    if (this.state.markup !== (prevState && prevState.markup)) {
+      fixLongDivisionWhenReady(this.labelRef.current);
+    }
   }
 
   componentWillUnmount() {
@@ -127,7 +135,11 @@ export class LatexLabel extends React.Component {
     // Fall back to the raw latex so a button is never blank.
     return markup ? (
       // eslint-disable-next-line react/no-danger
-      <LabelHolder slanted={SLANTED_LABELS.includes(this.props.latex)} dangerouslySetInnerHTML={{ __html: markup }} />
+      <LabelHolder
+        ref={this.labelRef}
+        slanted={SLANTED_LABELS.includes(this.props.latex)}
+        dangerouslySetInnerHTML={{ __html: markup }}
+      />
     ) : (
       <LabelHolder slanted={SLANTED_LABELS.includes(this.props.latex)}>{this.props.latex}</LabelHolder>
     );

package/src/longdiv.js

@@ -0,0 +1,172 @@
+import debug from 'debug';
+
+const log = debug('pie-lib:math-input-mathlive:longdiv');
+
+/**
+ * Long division (`\enclose{longdiv}{...}`, which `\longdiv` is mapped to).
+ *
+ * MathLive 0.110 draws it wrong in three ways, all in `EncloseAtom.render`:
+ *
+ *  1. It lowers the dividend by `padding + clearance` (0.45em) with
+ *     `position: relative; top`, which moves it off the baseline, so the divisor
+ *     looks too high.
+ *  2. The notation box's CSS width leaves out the room it made for the `)`,
+ *     while the SVG's viewBox includes it. The SVG is stretched to 100% of the
+ *     box, so the whole drawing is scaled down (to about 86%).
+ *  3. The bar is drawn `base.width` long from the `)`, but the dividend itself
+ *     starts after the `)` and its gap, so the bar stops short of the end of
+ *     the dividend. `base.width` also leaves out the spacing MathLive puts
+ *     around `,` and `+`, so even the right length would come up short.
+ *
+ * This reads back the numbers MathLive wrote into inline styles and the SVG,
+ * and corrects them, so the rest of MathLive's drawing (the arc, the stroke
+ * weight) is kept. The bar's end is measured from the rendered dividend when
+ * the markup is laid out, and computed from MathLive's numbers otherwise.
+ *
+ * Every value set here is absolute, so running it again is harmless - it has
+ * to run after every render of a live field anyway.
+ */
+
+/** A length MathLive wrote as `prop:<n>em` in an inline style, or 0. */
+const inlineEm = (style, prop) => {
+  const match = new RegExp(`(?:^|;)\\s*${prop}:\\s*(-?[\\d.]+)em`).exec(style || '');
+
+  return match ? parseFloat(match[1]) : 0;
+};
+
+/**
+ * Direct child with a given tag. Not `querySelector(':scope > tag')`: jsdom's
+ * selector engine does not support `:scope` inside SVG elements.
+ */
+const childTag = (el, tag) => el && Array.from(el.children || []).find((c) => c.tagName.toLowerCase() === tag);
+
+/** Right edge of what is actually drawn inside an element, ignoring the caret. */
+const drawnRight = (el) => {
+  let right = -Infinity;
+
+  el.querySelectorAll('*').forEach((child) => {
+    if (child.children.length || (child.classList && child.classList.contains('ML__caret'))) {
+      return;
+    }
+
+    const rect = child.getBoundingClientRect();
+
+    if (rect.width > 0) {
+      right = Math.max(right, rect.right);
+    }
+  });
+
+  return right;
+};
+
+/**
+ * Correct every long division under `root`.
+ *
+ * @param {ParentNode} root a mathfield's shadow root, or an element holding
+ *   static MathLive markup
+ * @returns {number} how many were corrected
+ */
+export const fixLongDivision = (root) => {
+  if (!root || typeof root.querySelectorAll !== 'function') {
+    return 0;
+  }
+
+  let fixed = 0;
+
+  root.querySelectorAll('.ML__notation').forEach((notation) => {
+    try {
+      const svg = childTag(notation, 'svg');
+      const line = childTag(svg, 'line');
+
+      // Long division is the only notation MathLive draws with an arc (<path>).
+      if (!line || !childTag(svg, 'path')) {
+        return;
+      }
+
+      const dividend = notation.nextElementSibling;
+      const style = dividend && dividend.getAttribute('style');
+      const width = inlineEm(style, 'width');
+      const gap = inlineEm(style, 'margin-left');
+      const drop = inlineEm(style, 'top');
+      const viewBox = (svg.getAttribute('viewBox') || '').trim().split(/\s+/).map(Number);
+      const start = parseFloat(line.getAttribute('x1'));
+
+      if (!width || viewBox.length !== 4 || Number.isNaN(start)) {
+        return;
+      }
+
+      // 2. size the box to the viewBox, so the drawing is not scaled down
+      notation.style.width = `calc(${viewBox[2]}em + 1px)`;
+
+      // 1. put the dividend back on the baseline. Growing the box upwards by the
+      // same amount keeps the drawing where it was relative to the dividend, and
+      // makes the line tall enough that the field does not clip the bar.
+      if (drop && notation.parentElement) {
+        dividend.style.top = '0';
+        notation.parentElement.style.paddingTop = `${drop}em`;
+      }
+
+      // 3. run the bar from the ")" to the end of the dividend
+      let end = start + gap + width;
+      const svgRect = svg.getBoundingClientRect();
+      const right = drawnRight(dividend);
+
+      if (svgRect.width > 0 && Number.isFinite(right)) {
+        end = (right - svgRect.left) * (viewBox[2] / svgRect.width);
+      }
+
+      line.setAttribute('x2', String(end));
+      fixed += 1;
+    } catch (e) {
+      log('could not correct a long division: %s', e && e.message);
+    }
+  });
+
+  return fixed;
+};
+
+/**
+ * Correct static markup now, and again once web fonts have loaded: the bar's
+ * end is measured, and glyph widths change when the math fonts arrive.
+ *
+ * @param {Element} element
+ */
+export const fixLongDivisionWhenReady = (element) => {
+  fixLongDivision(element);
+
+  if (typeof document !== 'undefined' && document.fonts && document.fonts.ready) {
+    document.fonts.ready.then(() => fixLongDivision(element)).catch(() => {});
+  }
+};
+
+/**
+ * Keep a live mathfield's long divisions corrected. MathLive rebuilds its shadow
+ * DOM on every render (each keystroke, a resize, the fonts loading), which
+ * discards the corrections, so they are reapplied whenever it does.
+ *
+ * @param {HTMLElement} mathField a MathLive `<math-field>`
+ * @returns {function|undefined} teardown, to call on unmount
+ */
+export const trackLongDivision = (mathField) => {
+  const root = mathField && mathField.shadowRoot;
+
+  if (!root) {
+    return undefined;
+  }
+
+  const run = () => fixLongDivision(root);
+
+  run();
+
+  if (typeof MutationObserver === 'undefined') {
+    return () => {};
+  }
+
+  // Only childList: the corrections themselves change attributes, so they do
+  // not retrigger this.
+  const observer = new MutationObserver(run);
+
+  observer.observe(root, { childList: true, subtree: true });
+
+  return () => observer.disconnect();
+};

package/src/mathlive-instance.js

@@ -1,6 +1,7 @@
 import debug from 'debug';
 import { NEWLINE_EMBED, toMathLive, withVisibleEmptySlots } from './latex-bridge';
 import { ROOT_INDEX_CSS, PARALLEL_CSS } from './mf/common-styles';
+import { fixLongDivisionWhenReady } from './longdiv';
 
 const log = debug('pie-lib:math-input-mathlive:instance');
 
@@ -545,6 +546,9 @@ export function applyStaticMath(element, latex, options = {}) {
     macros: { ...getMacros(), ...(options.macros || {}) },
   });
 
+  // MathLive misdraws long division (see longdiv.js).
+  fixLongDivisionWhenReady(element);
+
   return element;
 }
 

package/src/mf/input.jsx

@@ -10,6 +10,8 @@ import {
   trackPlaceholderCaret,
 } from '../mathlive-instance';
 import { toMathLive, fromMathLive, keyToAction, KEYSTROKES } from '../latex-bridge';
+import { trackWholeAtomSelection } from '../selection';
+import { trackLongDivision } from '../longdiv';
 
 const log = debug('pie-lib:math-input-mathlive:input');
 
@@ -93,6 +95,12 @@ 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);
+
+    // MathLive misdraws long division; correct it after every render.
+    this.untrackLongDivision = trackLongDivision(this.mathField);
+
     this.mathField.addEventListener('input', this.onInputEdit);
 
     // Belt and braces: drop anything a previous mount may have left behind.
@@ -136,6 +144,16 @@ export class Input extends React.Component {
       this.untrackCaret = undefined;
     }
 
+    if (this.untrackSelection) {
+      this.untrackSelection();
+      this.untrackSelection = undefined;
+    }
+
+    if (this.untrackLongDivision) {
+      this.untrackLongDivision();
+      this.untrackLongDivision = undefined;
+    }
+
     if (this.mathField) {
       this.mathField.removeEventListener('input', this.onInputEdit);
       this.mathField.remove();

package/src/mf/static.jsx

@@ -10,6 +10,7 @@ import {
   applyShadowStyles,
   trackPlaceholderCaret,
 } from '../mathlive-instance';
+import { trackLongDivision, fixLongDivisionWhenReady } from '../longdiv';
 import { toMathLive, fromMathLive, fieldIds } from '../latex-bridge';
 import { placeholderStyles, rootIndexStyles, parallelStyles } from './common-styles';
 
@@ -114,6 +115,9 @@ export default class Static extends React.Component {
     // blocks are typed into with the same keypad, so they grow placeholders too.
     this.untrackCaret = trackPlaceholderCaret(this.mathField);
 
+    // MathLive misdraws long division; correct it after every render.
+    this.untrackLongDivision = trackLongDivision(this.mathField);
+
     this.mathField.addEventListener('input', this.onPromptInput);
     this.mathField.addEventListener('focusin', this.onPromptFocus);
     this.mathField.addEventListener('keydown', this.onKeyDown);
@@ -124,7 +128,12 @@ export default class Static extends React.Component {
     this.createLiveRegion();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
+    // Display mode: new markup was just written into the DOM.
+    if (!this.mathField && this.state.markup !== (prevState && prevState.markup)) {
+      fixLongDivisionWhenReady(this.holderRef.current);
+    }
+
     if (prevProps.latex === this.props.latex) {
       return;
     }
@@ -145,6 +154,11 @@ export default class Static extends React.Component {
       this.untrackCaret = undefined;
     }
 
+    if (this.untrackLongDivision) {
+      this.untrackLongDivision();
+      this.untrackLongDivision = undefined;
+    }
+
     if (this.mathField) {
       this.mathField.removeEventListener('input', this.onPromptInput);
       this.mathField.removeEventListener('focusin', this.onPromptFocus);