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

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');
 
@@ -68,6 +69,28 @@ const LabelHolder = styled('span', { shouldForwardProp: (prop) => prop !== 'slan
   '& [data-pie-empty]': {
     opacity: 0.5,
   },
+  // A fraction is taller than the label's 1em line box, so its numerator sat
+  // flush against (and was clipped by) the top edge. Extra room above it grows
+  // the box, which the keypad then centres, so the fraction moves down a little.
+  '&:has(.ML__mfrac)': {
+    paddingTop: '0.25em',
+  },
+  // Centre a fraction's bar between its empty slots (see `placeholderStyles`).
+  '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
+    position: 'relative',
+    top: '0.16em',
+  },
+  // A real numerator (`x`) is lighter than an empty box and its ink ends at the
+  // baseline, so the full drop overshoots: it needs a smaller drop. The numerator is
+  // the second `.ML__center` (MathLive emits the denominator first).
+  '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
+    top: '0.13em',
+  },
+  // Same for a mixed number (`x` then the fraction): the leading `x` is a sibling
+  // of the fraction, which a lone `\frac{}{}` does not have.
+  '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
+    top: '0.13em',
+  },
   // A readable index on the nth-root key. Carried by the label itself, not only
   // by the keypad container, so it holds wherever a LatexLabel is mounted.
   ...rootIndexStyles,
@@ -81,11 +104,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 +137,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 +157,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/latex-bridge.js

@@ -69,6 +69,18 @@ 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 smallest boxes are the ones in a subscript (`x_{}`, `\log_{}`) or exponent
+// (`x^{}`): they sit at script size, so the 0.55em square reads cramped. They get
+// 0.4em more height, and `\rule[-d]` decides which side it grows on:
+//  - subscript / log base: all of it goes below, the top edge stays put;
+//  - exponent: 0.3em goes above, plus 0.1em below.
+const EMPTY_SUBSCRIPT_REGEX = /_\{\s*\}/g;
+const EMPTY_SUPERSCRIPT_REGEX = /\^\{\s*\}/g;
+const EMPTY_SUBSCRIPT_SLOT = '\\htmlData{pie-empty=1}{\\rule[-0.4em]{0.55em}{0.95em}}';
+// The label clips what hangs below its line box (`overflow: hidden`), so the lowered
+// box needs a zero-width strut after it to make room, or its bottom is cut off.
+const EMPTY_SUBSCRIPT_STRUT = '\\rule[-0.5em]{0em}{0.5em}';
+const EMPTY_SUPERSCRIPT_SLOT = '\\htmlData{pie-empty=1}{\\rule[-0.1em]{0.55em}{0.95em}}';
 // The segment key (`\overline{}`). The keypad centres every label in its cell, and
 // a thin bar is a much shorter label than the ray and line keys' stretchy arrows,
 // so by default both its bar and its box sit off from theirs: the bar is lower
@@ -111,6 +123,8 @@ const EMPTY_FENCE_SLOT = '\\rule{0em}{1em}\\htmlData{pie-empty=1}{\\rule[-0.25em
 export const withVisibleEmptySlots = (latex) =>
   (latex || '')
     .replace(EMPTY_OVERLINE_REGEX, `${EMPTY_OVERLINE_LABEL_STRUT}\\overline{${EMPTY_OVERLINE_BAR_STRUT}${EMPTY_SLOT}}`)
+    .replace(EMPTY_SUBSCRIPT_REGEX, `_{${EMPTY_SUBSCRIPT_SLOT}}${EMPTY_SUBSCRIPT_STRUT}`)
+    .replace(EMPTY_SUPERSCRIPT_REGEX, `^{${EMPTY_SUPERSCRIPT_SLOT}}`)
     .replace(EMPTY_GROUP_REGEX, `{${EMPTY_SLOT}}`)
     .replace(EMPTY_FENCE_REGEX, (_m, open, close) => `\\left${open}${EMPTY_FENCE_SLOT}\\right${close}`);
 
@@ -529,3 +543,7 @@ export const keyToAction = (key) => {
 };
 
 export { COMMANDS_WITH_ARGS, KEYSTROKES, MATHQUILL_ALIASES };
+
+// TEMP: remove once confirmed that pie-elements picks up this build.
+// eslint-disable-next-line no-console
+console.log('[math-input-mathlive] latex-bridge loaded - taller sub/sup slots (PIE-1135 v2)');