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

package/lib/selection.js.map

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

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.1.5-beta.11",
+  "version": "1.1.5-beta.12",
   "description": "MathLive-based math input (drop-in alternative to @pie-lib/math-input)",
   "main": "lib/index.js",
   "module": "src/index.jsx",

package/src/__tests__/longdiv-wiring.test.jsx

@@ -0,0 +1,137 @@
+/**
+ * Every place that draws MathLive output must apply the long-division
+ * correction (see longdiv.js): live fields after every render, static markup
+ * after it is written into the DOM.
+ */
+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('../longdiv', () => ({
+  trackLongDivision: jest.fn(() => mockUntrack),
+  fixLongDivisionWhenReady: jest.fn(),
+  fixLongDivision: jest.fn(),
+}));
+
+/* eslint-disable import/first */
+import Input from '../mf/input';
+import Static from '../mf/static';
+import { LatexLabel } from '../keypad';
+import { trackLongDivision, fixLongDivisionWhenReady } from '../longdiv';
+/* eslint-enable import/first */
+
+beforeEach(() => {
+  trackLongDivision.mockClear();
+  fixLongDivisionWhenReady.mockClear();
+  mockUntrack.mockClear();
+});
+
+describe('Input (the editor)', () => {
+  it('tracks the mathfield on mount and stops on unmount', async () => {
+    const input = new Input({});
+
+    input.holderRef = { current: document.createElement('span') };
+    await input.componentDidMount();
+
+    expect(trackLongDivision).toHaveBeenCalledWith(input.mathField);
+
+    input.componentWillUnmount();
+
+    expect(mockUntrack).toHaveBeenCalledTimes(1);
+    expect(input.untrackLongDivision).toBeUndefined();
+  });
+});
+
+describe('Static', () => {
+  it('tracks the answer-block field on mount and stops on unmount', async () => {
+    const s = new Static({ latex: 'x=\\MathQuillMathField[r1]{}' });
+
+    s.holderRef = { current: document.createElement('span') };
+    s.createLiveRegion = () => {};
+    await s.componentDidMount();
+
+    expect(trackLongDivision).toHaveBeenCalledWith(s.mathField);
+
+    s.componentWillUnmount();
+
+    expect(mockUntrack).toHaveBeenCalledTimes(1);
+  });
+
+  // Display mode: the markup reaches the DOM through state, so it is corrected
+  // once React has written it.
+  it('corrects static markup after it is rendered', () => {
+    const s = new Static({ latex: '5\\longdiv{144}' });
+    const holder = document.createElement('span');
+
+    s.holderRef = { current: holder };
+    s.state = { markup: '<span>new</span>' };
+    s.componentDidUpdate({ latex: '5\\longdiv{144}' }, { markup: '' });
+
+    expect(fixLongDivisionWhenReady).toHaveBeenCalledWith(holder);
+  });
+
+  it('does not redo it when the markup did not change', () => {
+    const s = new Static({ latex: 'x' });
+
+    s.holderRef = { current: document.createElement('span') };
+    s.state = { markup: '<span>same</span>' };
+    s.componentDidUpdate({ latex: 'x' }, { markup: '<span>same</span>' });
+
+    expect(fixLongDivisionWhenReady).not.toHaveBeenCalled();
+  });
+
+  it('leaves a live field to the tracker', () => {
+    const s = new Static({ latex: 'x' });
+
+    s.holderRef = { current: document.createElement('span') };
+    s.mathField = document.createElement('math-field');
+    s.state = { markup: '<span>new</span>' };
+    s.componentDidUpdate({ latex: 'x' }, { markup: '' });
+
+    expect(fixLongDivisionWhenReady).not.toHaveBeenCalled();
+  });
+});
+
+describe('keypad label', () => {
+  it('corrects the label once mounted', async () => {
+    const label = new LatexLabel({ latex: '\\longdiv{}' });
+    const el = document.createElement('span');
+
+    label.labelRef = { current: el };
+    await label.componentDidMount();
+
+    expect(fixLongDivisionWhenReady).toHaveBeenCalledWith(el);
+  });
+
+  it('corrects it again when the label changes', () => {
+    const label = new LatexLabel({ latex: '\\longdiv{}' });
+    const el = document.createElement('span');
+
+    label.labelRef = { current: el };
+    label.setState = () => {};
+    label.state = { markup: '<span>other</span>' };
+    label.componentDidUpdate({ latex: '\\longdiv{}' }, { markup: '<span>first</span>' });
+
+    expect(fixLongDivisionWhenReady).toHaveBeenCalledWith(el);
+  });
+});

package/src/__tests__/longdiv.test.js

@@ -0,0 +1,259 @@
+import { fixLongDivision, fixLongDivisionWhenReady, trackLongDivision } from '../longdiv';
+
+/**
+ * Markup captured verbatim from MathLive 0.110.0 `convertLatexToMarkup` in
+ * Chrome. In `12\enclose{longdiv}{144}` MathLive drops the dividend 0.45em
+ * (`top:0.45em`), sizes the box 2.1em wide while the viewBox is 2.54 wide, and
+ * ends the bar at 1.8 although the dividend runs to 0.3 + 0.45 + 1.5 = 2.25.
+ */
+const LONGDIV =
+  '<span class="ML__latex"><span class="ML__strut" style="height:0.8em"></span><span class="ML__strut--bottom" style="height:1.25em;vertical-align:-0.44em"></span><span class="ML__base"><span class="ML__cmr">12</span><span style="position:relative;height:1.24em;display:inline-block;margin-left:0.3em;margin-right:0.3em;width:1.95em"><span class="ML__notation" style="box-sizing:border-box;left:calc(-1 * 1px - 0.3em);height:calc( 1.24444em + 1px);top:0em;width:calc(2.1em + 1px);background-color:transparent"><span style="display: inline-block;height:1.24em;vertical-align:0.44em;"></span><svg style="position:absolute;overflow:visible;height:1.24em;top:0;left:0;width:100%;z-index:2;" stroke-width="0.06em" stroke="currentColor" stroke-linecap="round" viewBox="0 0 2.54 1.24"><line x1="0.3"  y1="0.3" x2="1.8" y2="0.3" vector-effect="non-scaling-stroke"></line><path d="M 0.3 0.3  a0.3 0.46997, 0, 1, 1, 0 0.93994 " stroke-width="0.004em" stroke="currentColor" fill="none"/></svg></span><span style="position:relative;display:inline-block;height:0.65em;width:1.5em;margin-left:0.45em;top:0.45em"><span class="ML__cmr">144</span></span></span></span></span>';
+
+// \enclose{box}{x}: another notation, which must be left alone
+const BOX =
+  '<span class="ML__latex"><span class="ML__strut" style="height:1.04em"></span><span class="ML__base"><span style="position:relative;height:1.03em;display:inline-block;margin-left:0.3em;margin-right:0.3em;width:0.58em"><span class="ML__notation" style="box-sizing:border-box;left:calc(-1 * 1px - 0.3em);height:calc( 1.03056em + 1px);top:0em;width:calc(1.17153em + 1px);background-color:transparent;border:1px solid red"></span><span style="position:relative;display:inline-block;height:0.44em;width:0.58em"><span class="ML__mathit">x</span></span></span></span></span>';
+
+const mount = (html) => {
+  const el = document.createElement('div');
+
+  el.innerHTML = html;
+  document.body.appendChild(el);
+
+  return el;
+};
+
+const parts = (el) => {
+  const notation = el.querySelector('.ML__notation');
+
+  return {
+    notation,
+    box: notation.parentElement,
+    dividend: notation.nextElementSibling,
+    line: notation.querySelector('line'),
+  };
+};
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('fixLongDivision', () => {
+  it('puts the dividend back on the baseline', () => {
+    const el = mount(LONGDIV);
+
+    fixLongDivision(el);
+
+    const { dividend, box } = parts(el);
+
+    expect(dividend.style.top).toEqual('0px');
+    // the drawing keeps its place relative to the dividend, and the line grows
+    // so the field does not clip the bar
+    expect(box.style.paddingTop).toEqual('0.45em');
+  });
+
+  it('sizes the box to the viewBox, so the drawing is not scaled down', () => {
+    const el = mount(LONGDIV);
+
+    fixLongDivision(el);
+
+    expect(parts(el).notation.style.width).toEqual('calc(2.54em + 1px)');
+  });
+
+  it('runs the bar to the end of the dividend', () => {
+    const el = mount(LONGDIV);
+
+    fixLongDivision(el);
+
+    // no layout under jsdom, so from MathLive's numbers: start + gap + width
+    expect(parseFloat(parts(el).line.getAttribute('x2'))).toBeCloseTo(0.3 + 0.45 + 1.5, 6);
+  });
+
+  // MathLive's width leaves out the spacing around `,` and `+`, so when the
+  // markup is laid out the end is measured instead.
+  it('measures the bar end from the rendered dividend when laid out', () => {
+    const el = mount(LONGDIV);
+    const { notation, dividend } = parts(el);
+    const svg = notation.querySelector('svg');
+    const glyph = dividend.querySelector('.ML__cmr');
+
+    // the svg is 254px wide for a 2.54-unit viewBox: 100px per unit
+    svg.getBoundingClientRect = () => ({ left: 100, width: 254, right: 354 });
+    glyph.getBoundingClientRect = () => ({ left: 145, right: 340, width: 195 });
+
+    fixLongDivision(el);
+
+    expect(parseFloat(parts(el).line.getAttribute('x2'))).toBeCloseTo(2.4, 6);
+  });
+
+  it('ignores the caret when measuring', () => {
+    const el = mount(LONGDIV);
+    const { notation, dividend } = parts(el);
+    const caret = document.createElement('span');
+
+    caret.className = 'ML__caret';
+    dividend.appendChild(caret);
+    notation.querySelector('svg').getBoundingClientRect = () => ({ left: 100, width: 254, right: 354 });
+    dividend.querySelector('.ML__cmr').getBoundingClientRect = () => ({ left: 145, right: 340, width: 195 });
+    caret.getBoundingClientRect = () => ({ left: 400, right: 402, width: 2 });
+
+    fixLongDivision(el);
+
+    expect(parseFloat(parts(el).line.getAttribute('x2'))).toBeCloseTo(2.4, 6);
+  });
+
+  it('can run again without drifting', () => {
+    const el = mount(LONGDIV);
+
+    fixLongDivision(el);
+    const first = { ...parts(el), x2: parts(el).line.getAttribute('x2') };
+
+    fixLongDivision(el);
+    const second = parts(el);
+
+    expect(second.line.getAttribute('x2')).toEqual(first.x2);
+    expect(second.box.style.paddingTop).toEqual('0.45em');
+    expect(second.notation.style.width).toEqual('calc(2.54em + 1px)');
+  });
+
+  it('leaves other enclose notations alone', () => {
+    const el = mount(BOX);
+    const before = el.innerHTML;
+
+    expect(fixLongDivision(el)).toBe(0);
+    expect(el.innerHTML).toEqual(before);
+  });
+
+  it('counts what it corrected', () => {
+    expect(fixLongDivision(mount(LONGDIV + LONGDIV))).toBe(2);
+  });
+
+  it('is safe on nothing', () => {
+    expect(fixLongDivision(null)).toBe(0);
+    expect(fixLongDivision(mount('<span>plain</span>'))).toBe(0);
+  });
+});
+
+describe('fixLongDivisionWhenReady', () => {
+  it('corrects now, and again once the fonts have loaded', async () => {
+    let fontsLoaded;
+    const original = document.fonts;
+
+    Object.defineProperty(document, 'fonts', {
+      configurable: true,
+      value: { ready: new Promise((resolve) => (fontsLoaded = resolve)) },
+    });
+
+    try {
+      const el = mount(LONGDIV);
+
+      fixLongDivisionWhenReady(el);
+      expect(parts(el).dividend.style.top).toEqual('0px');
+
+      // a re-render before the fonts arrive...
+      el.innerHTML = LONGDIV;
+      fontsLoaded();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      // ...is corrected once they do
+      expect(parts(el).dividend.style.top).toEqual('0px');
+    } finally {
+      Object.defineProperty(document, 'fonts', { configurable: true, value: original });
+    }
+  });
+});
+
+describe('trackLongDivision', () => {
+  const field = () => {
+    const host = document.createElement('div');
+
+    host.attachShadow({ mode: 'open' });
+    host.shadowRoot.innerHTML = LONGDIV;
+    document.body.appendChild(host);
+
+    return host;
+  };
+
+  it('corrects the field straight away', () => {
+    const host = field();
+
+    trackLongDivision(host);
+
+    expect(parts(host.shadowRoot).dividend.style.top).toEqual('0px');
+  });
+
+  // jest.setup.js replaces MutationObserver with a no-op for every test, so this
+  // installs one that records what it was asked to observe and can be fired.
+  describe('re-rendering', () => {
+    let observers;
+    const RealObserver = global.MutationObserver;
+
+    beforeEach(() => {
+      observers = [];
+      global.MutationObserver = class {
+        constructor(callback) {
+          this.callback = callback;
+          this.disconnected = false;
+          observers.push(this);
+        }
+
+        observe(target, options) {
+          this.target = target;
+          this.options = options;
+        }
+
+        disconnect() {
+          this.disconnected = true;
+        }
+      };
+    });
+
+    afterEach(() => {
+      global.MutationObserver = RealObserver;
+    });
+
+    it('watches the whole shadow tree for MathLive rebuilding it', () => {
+      const host = field();
+
+      trackLongDivision(host);
+
+      expect(observers).toHaveLength(1);
+      expect(observers[0].target).toBe(host.shadowRoot);
+      expect(observers[0].options).toEqual({ childList: true, subtree: true });
+    });
+
+    // MathLive rebuilds its shadow DOM on every keystroke, resize and font load.
+    it('re-corrects after MathLive re-renders', () => {
+      const host = field();
+
+      trackLongDivision(host);
+      host.shadowRoot.innerHTML = LONGDIV;
+      expect(parts(host.shadowRoot).dividend.style.top).toEqual('0.45em');
+
+      observers[0].callback([]);
+
+      expect(parts(host.shadowRoot).dividend.style.top).toEqual('0px');
+    });
+
+    // The corrections change attributes only, so observing childList alone
+    // cannot loop.
+    it('does not observe attributes', () => {
+      trackLongDivision(field());
+
+      expect(observers[0].options.attributes).toBeUndefined();
+    });
+
+    it('stops after teardown', () => {
+      const untrack = trackLongDivision(field());
+
+      untrack();
+
+      expect(observers[0].disconnected).toBe(true);
+    });
+  });
+
+  it('is a no-op without a shadow root', () => {
+    expect(trackLongDivision(undefined)).toBeUndefined();
+    expect(trackLongDivision(document.createElement('div'))).toBeUndefined();
+  });
+});

package/src/__tests__/selection.test.js

@@ -8,17 +8,52 @@ const table = (rows) => (i) => (rows[i] ? { depth: rows[i][0], latex: rows[i][1]
 
 // 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'],
+  [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']]);
+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}'],
+  [0, ''],
+  [1, ''],
+  [2, ''],
+  [2, 'a'],
+  [2, ''],
+  [2, 'b'],
+  [1, '\\frac{a}{b}'],
+  [1, ''],
+  [1, 'c'],
+  [0, '\\frac{\\frac{a}{b}}{c}'],
 ]);
 
 describe('expandRange', () => {

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>
     );