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

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');
 
@@ -235,6 +236,22 @@ const PLACEHOLDER_CARET_CSS = [
   'animation:ML__caret-blink 1.05s step-end forwards infinite}',
 ].join('');
 
+// MathLive sets the bar of `\overline{}` right on top of the content, so over an
+// empty slot it touches the slot's box, while the ray and line arrows (stretchy
+// accents) float clear of it. The bar is raised 0.33em, and the strut that sets
+// the field's top edge is raised with it, or the bar would be clipped.
+const OVERLINE_GAP_CSS =
+  '.ML__latex .overline>.ML__vlist-t>.ML__vlist-r>.ML__vlist>span:has(>.overline-line){top:-4.15em !important}' +
+  '.ML__latex:has(.overline)>.ML__strut{height:1.23em !important}';
+
+// MathLive spaces a fraction's bar for text glyphs, whose ink sits tight against
+// the baseline. An empty slot's box (`▢`) hangs lower than that, so the bar ends
+// up much nearer the denominator's box than the numerator's (measured ~0.28em vs
+// ~0.11em). Dropping the bar 0.08em evens the two gaps. Layout is untouched, so
+// the numerator and denominator keep their positions; filled fractions (`1/2`)
+// only see the bar move a hair.
+const FRAC_BAR_CENTER_CSS = '.ML__latex .ML__frac-line{position:relative;top:0.08em}';
+
 // A live mathfield needs the readable radical index too: `rootIndexStyles` is
 // written for static markup in the host page, which cannot cross the shadow
 // boundary.
@@ -242,6 +259,8 @@ const SHADOW_CSS =
   '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}' +
   ROOT_INDEX_CSS +
   PARALLEL_CSS +
+  OVERLINE_GAP_CSS +
+  FRAC_BAR_CENTER_CSS +
   PLACEHOLDER_CARET_CSS;
 
 /**
@@ -545,6 +564,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/common-styles.js

@@ -115,6 +115,25 @@ export const placeholderStyles = {
   '& [data-pie-empty]': {
     opacity: 0.5,
   },
+  // A fraction with an empty slot: MathLive spaces the bar for text, but the
+  // slot's box is a taller `\rule`, so the bar hugs the numerator's box (~0.2em
+  // above vs ~0.4em below). Dropping the bar 0.16em (0.13em when the numerator is not an empty slot or follows an `x`) centres it between the two
+  // boxes. Only the bar moves, not the slots.
+  '& .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',
+  },
   // Stretchy accents (\overarc, \overleftrightarrow, \overrightarrow) render an
   // <svg width="100%" preserveAspectRatio="none"> inside a `.ML__stretchy`. That
   // span is absolutely positioned, so its immediate wrapper computes to 0px and

package/src/mf/input.jsx

@@ -11,6 +11,7 @@ import {
 } 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');
 
@@ -97,6 +98,9 @@ export class Input extends React.Component {
     // 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.
@@ -145,6 +149,11 @@ export class Input extends React.Component {
       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);

package/src/selection.js

@@ -120,12 +120,7 @@ export const trackWholeAtomSelection = (mathField) => {
       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,
-      );
+      const [nextStart, nextEnd] = expandRange(lo, hi, (i) => mathField.getElementInfo(i), mathField.lastOffset);
 
       if (nextStart === lo && nextEnd === hi) {
         return;