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

package/src/latex-bridge.js

@@ -69,6 +69,35 @@ 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{}`). 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
+// than the arrows' shafts, and the box higher than theirs. Two zero-width struts
+// fix that, found by rendering the three keys at 14-28px and measuring:
+//  - inside the bar, above the box: pushes the bar up to the height of the
+//    arrows' shafts (the bar-to-box distance then matches theirs);
+//  - before the bar, from the baseline: raises the label's top, which moves the
+//    whole label down so the box lands where theirs does.
+const EMPTY_OVERLINE_REGEX = /\\overline\{\s*\}/g;
+const EMPTY_OVERLINE_BAR_STRUT = '\\rule{0em}{0.87em}';
+const EMPTY_OVERLINE_LABEL_STRUT = '\\rule{0em}{1.3em}';
+// 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.
+const EMPTY_FENCE_REGEX = /\\left([([|])\s*\\right([)\]|])/g;
+// The same muted fill as the other slots (`pie-empty`), but a tall rectangle
+// rather than a square. It also sets the fences' height: `\left...\right` stretch
+// to their content, so a taller slot gives taller parentheses.
+//
+// A `\rule` stands on the baseline, but the fences are centred on the math axis
+// (0.25em above it), so an un-lifted box sat high between them. `[-0.25em]`
+// lowers it by (axis - height / 2) = 0.25 - 1 / 2, centring it on the axis.
+//
+// Lowering it alone also shrinks the fences, which size themselves to their
+// content (MathLive switches to short bars). The zero-width `\rule{0em}{1em}`
+// strut keeps the content as tall as before, so the bars keep their height and
+// only the box moves.
+const EMPTY_FENCE_SLOT = '\\rule{0em}{1em}\\htmlData{pie-empty=1}{\\rule[-0.25em]{0.55em}{1em}}';
 
 /**
  * Make empty argument slots visible, for static rendering.
@@ -79,7 +108,11 @@ const EMPTY_GROUP_REGEX = /\{\s*\}/g;
  * @param {string} latex
  * @returns {string}
  */
-export const withVisibleEmptySlots = (latex) => (latex || '').replace(EMPTY_GROUP_REGEX, `{${EMPTY_SLOT}}`);
+export const withVisibleEmptySlots = (latex) =>
+  (latex || '')
+    .replace(EMPTY_OVERLINE_REGEX, `${EMPTY_OVERLINE_LABEL_STRUT}\\overline{${EMPTY_OVERLINE_BAR_STRUT}${EMPTY_SLOT}}`)
+    .replace(EMPTY_GROUP_REGEX, `{${EMPTY_SLOT}}`)
+    .replace(EMPTY_FENCE_REGEX, (_m, open, close) => `\\left${open}${EMPTY_FENCE_SLOT}\\right${close}`);
 
 /**
  * Pie commands that take an argument, and their native MathLive equivalents.
@@ -236,6 +269,138 @@ export const toMathLive = (latex) => {
   return out;
 };
 
+/**
+ * Keypad command names that MathQuill treated as ALIASES of a different command.
+ *
+ * MathQuill registered `\\divide` as another name for `\\div` (and
+ * `\\perpendicular` for `\\perp`), so pressing the key stored the real command.
+ * MathLive only knows these names through `PIE_MACROS`, and serialises a macro
+ * under its own name - so `\\divide` reached storage verbatim, where MathJax
+ * (@pie-lib/math-rendering) has no such command and renders it as red text.
+ *
+ * Every other keypad command already matches what MathQuill stored (`\\degree`,
+ * `\\nsim`, `\\ncong`, `\\nparallel`, `\\square`, `\\napprox`,
+ * `\\parallelogram`), and MathJax understands those.
+ */
+const MATHQUILL_ALIASES = {
+  '\\divide': '\\div',
+  '\\perpendicular': '\\perp',
+};
+
+// Whole command names only: `\\divideontimes` is a real AMS symbol.
+const MATHQUILL_ALIAS_REGEX = /\\(divide|perpendicular)(?![a-zA-Z])/g;
+
+/**
+ * Primes. MathLive turns a prime that follows a base into a superscript atom and
+ * serialises it as `^{\\prime}`, or `^{\\doubleprime}` for the keypad's double
+ * prime key (`5''` comes back out as `5^{\\doubleprime}`). MathJax has no
+ * `\\doubleprime`, and two adjacent `^{\\prime}` groups - what typing `'` twice
+ * produces - are a "double exponent" error. MathQuill stored plain apostrophes,
+ * which both MathJax and MathLive read as primes, so store those.
+ *
+ * Only a superscript made of primes alone is rewritten: `x^{\\prime 2}` keeps
+ * its group, since it holds more than primes.
+ */
+const PRIME_SUPERSCRIPT_REGEX = /\^\{((?:\s*\\(?:prime|doubleprime)(?![a-zA-Z]))+)\s*\}/g;
+const BARE_DOUBLEPRIME_REGEX = /\\doubleprime(?![a-zA-Z])/g;
+
+const primesToApostrophes = (primes) =>
+  // eslint-disable-next-line quotes
+  "'".repeat(
+    (primes.match(/\\prime(?![a-zA-Z])/g) || []).length + 2 * (primes.match(BARE_DOUBLEPRIME_REGEX) || []).length,
+  );
+
+const BARE_PRIME_COMMAND_REGEX = /^\\(doubleprime|prime)(?![a-zA-Z])/;
+
+/**
+ * Primes that are *not* in a superscript.
+ *
+ * MathLive emits bare `\prime` / `\doubleprime` for a `′` or `″` typed or pasted
+ * as a character (`5′6″` serialises as `5\prime6\doubleprime`). A bare `\prime`
+ * is a full-size glyph in MathJax, while `''` is a superscript, so storing
+ * `5\prime6''` drew the single prime visibly larger than each stroke of the
+ * double prime. Both become apostrophes, the superscript primes MathQuill
+ * stored, so they always match.
+ *
+ * Inside a script (`x^{\prime 2}`, `x^\prime`) a prime is already a
+ * superscript, and an apostrophe there would mean something else, so
+ * `\prime` is kept and `\doubleprime` (unknown to MathJax) becomes
+ * `\prime\prime`.
+ *
+ * @param {string} latex
+ * @returns {string}
+ */
+const barePrimesToApostrophes = (latex) => {
+  if (latex.indexOf('prime') === -1) {
+    return latex;
+  }
+
+  // One entry per open brace: is that group a super/subscript?
+  const groups = [];
+  let out = '';
+  let i = 0;
+
+  while (i < latex.length) {
+    const ch = latex[i];
+
+    if (ch === '\\') {
+      const match = latex.slice(i).match(BARE_PRIME_COMMAND_REGEX);
+
+      if (match) {
+        const isDouble = match[1] === 'doubleprime';
+        // `x^\prime`: the command is itself the script.
+        const isScriptArgument = /[\^_]\s*$/.test(out);
+        const inScript = isScriptArgument || groups.indexOf(true) !== -1;
+
+        if (inScript) {
+          out += isDouble ? '\\prime\\prime' : '\\prime';
+        } else {
+          // eslint-disable-next-line quotes
+          out += isDouble ? "''" : "'";
+        }
+
+        i += match[0].length;
+        continue;
+      }
+
+      // Copy any other command, or an escaped character such as `\{`, whole.
+      const command = latex.slice(i).match(/^\\(?:[a-zA-Z]+|.)/);
+      const text = command ? command[0] : ch;
+
+      out += text;
+      i += text.length;
+      continue;
+    }
+
+    if (ch === '{') {
+      groups.push(/[\^_]\s*$/.test(out));
+    } else if (ch === '}') {
+      groups.pop();
+    }
+
+    out += ch;
+    i += 1;
+  }
+
+  return out;
+};
+
+/**
+ * Rewrite what MathLive serialises into the form MathQuill stored: alias
+ * command names, and primes.
+ *
+ * @param {string} latex
+ * @returns {string}
+ */
+export const toCanonicalCommands = (latex) =>
+  typeof latex === 'string'
+    ? barePrimesToApostrophes(
+        latex
+          .replace(MATHQUILL_ALIAS_REGEX, (m) => MATHQUILL_ALIASES[m])
+          .replace(PRIME_SUPERSCRIPT_REGEX, (_m, primes) => primesToApostrophes(primes)),
+      )
+    : latex;
+
 /**
  * Convert latex out of MathLive back into the stored form, so items authored
  * with the MathLive editor remain readable by @pie-lib/math-rendering and by
@@ -273,7 +438,9 @@ export const fromMathLive = (latex) => {
   out = out.replace(BARE_PLACEHOLDER_REGEX, (_m, content) => content);
   out = out.replace(BARE_PLACEHOLDER_NO_ARG_REGEX, '');
 
-  return out;
+  // Store the command MathQuill stored, not the alias - also heals latex that was
+  // saved with `\\divide` before the keypad resolved it.
+  return toCanonicalCommands(out);
 };
 
 /**
@@ -347,7 +514,7 @@ export const keyToAction = (key) => {
     // applied them in sequence; MathLive inserts one latex string, so expand
     // each part and concatenate.
     const parts = Array.isArray(key.command) ? key.command : [key.command];
-    const value = parts.map((c) => COMMANDS_WITH_ARGS[c] || c).join('');
+    const value = parts.map((c) => COMMANDS_WITH_ARGS[c] || MATHQUILL_ALIASES[c] || c).join('');
 
     return { type: 'insert', value };
   }
@@ -361,4 +528,4 @@ export const keyToAction = (key) => {
   return undefined;
 };
 
-export { COMMANDS_WITH_ARGS, KEYSTROKES };
+export { COMMANDS_WITH_ARGS, KEYSTROKES, MATHQUILL_ALIASES };

package/src/mathlive-instance.js

@@ -1,7 +1,6 @@
 import debug from 'debug';
 import { NEWLINE_EMBED, toMathLive, withVisibleEmptySlots } from './latex-bridge';
-import { registerEmbeddedFonts } from './fonts';
-import { ROOT_INDEX_CSS } from './mf/common-styles';
+import { ROOT_INDEX_CSS, PARALLEL_CSS } from './mf/common-styles';
 
 const log = debug('pie-lib:math-input-mathlive:instance');
 
@@ -49,7 +48,7 @@ const absoluteFontsDirectory = (dir) => {
 };
 
 /**
- * Last-resort CDN for the KaTeX fonts.
+ * Version-pinned CDN fallback for the KaTeX fonts.
  *
  * Some symbols are composed from Private Use Area glyphs that exist only in
  * those fonts: `\\neq` is U+E020 (a negation slash) overlapped on `=`, and
@@ -57,10 +56,9 @@ const absoluteFontsDirectory = (dir) => {
  * an arbitrary glyph for U+E020, so those keys render as garbage rather than
  * simply falling back to a plainer face.
  *
- * The fonts normally come from inside this package (see `./fonts`), so this URL
- * is only reached on a browser without the FontFace API, where MathLive has to
- * fetch the woff2 files itself. The version comes from MathLive, so the fonts
- * always match the engine.
+ * The version comes from MathLive itself, so the fonts always match the engine.
+ * Hosts that would rather not depend on a third party should serve the fonts and
+ * call `configureFonts('/their/path')`, or pass `null` to opt out.
  */
 const FALLBACK_MATHLIVE_VERSION = '0.110.0';
 
@@ -74,17 +72,15 @@ const cdnFontsDirectory = () => {
 /**
  * Tell the package where the MathLive fonts are served from.
  *
- * Optional: by default the fonts come from inside this package (see `./fonts`),
- * so nothing has to be served or configured. Call this before `loadMathLive()`
- * to point MathLive at your own copy instead - worth doing if the host already
- * serves the KaTeX woff2 files and would rather not carry them twice.
+ * Call before `loadMathLive()`.
  *
- *  - a path/URL: served by you; the embedded fonts are not registered
- *  - `null`:     skip font loading entirely; note `\\neq`, `\\nsim` and `\\ncong`
- *                then render incorrectly, being built from Private Use Area
- *                glyphs that only these fonts have
- *  - not called: the embedded fonts, with the CDN as a fallback for browsers
- *                without the FontFace API
+ *  - a path/URL: served by you, no third-party request
+ *  - `null`:     skip font loading; note `\\neq`, `\\nsim` and `\\ncong` then
+ *                render incorrectly, being built from Private Use Area glyphs
+ *  - not called: falls back to a version-pinned CDN
+ *
+ * The fonts ship inside the `mathlive` package (`node_modules/mathlive/fonts`)
+ * ready to copy into whatever the host app serves statically.
  *
  * @param {string|null} [dir]
  */
@@ -120,6 +116,9 @@ export const PIE_MACROS = {
   // Argument-less symbols. Atomic is correct here: backspace should remove the
   // whole glyph, and there is nothing to type into.
   parallelogram: '\\htmlData{pie-macro=parallelogram}{\\unicode{"25B1}}',
+  // Same glyph as the built-in `\\parallel` (U+2225), tagged so it can be sized -
+  // see `parallelStyles`.
+  parallel: '\\htmlData{pie-macro=parallel}{\\unicode{"2225}}',
   napprox: '\\not\\approx',
   nsim: '\\not\\sim',
   ncong: '\\not\\cong',
@@ -167,22 +166,18 @@ let loadWarned = false;
 
 /** Apply post-load configuration exactly once. */
 const configureLoaded = () => {
-  // No host path configured: use the fonts that ship inside this package. Once
-  // they are in `document.fonts`, MathLive's own loader short-circuits and never
-  // requests a woff2 - so math renders offline and under a CSP that allows no
-  // font origin at all.
-  if (fontsDirectory === undefined && !registerEmbeddedFonts()) {
+  // Always replace MathLive's relative `'./fonts/'` default: it throws
+  // "Invalid base URL" when bundled. Use the host's copy if one was configured,
+  // otherwise the version-pinned CDN.
+  if (fontsDirectory === undefined) {
     log(
-      'embedded fonts unavailable (no FontFace API) - falling back to the CDN (%s). ' +
-        'Serve the fonts yourself and call configureFonts("/path/to/fonts") to avoid the network request.',
+      'no fontsDirectory configured - falling back to the CDN (%s). ' +
+        'Serve the fonts yourself and call configureFonts("/path/to/fonts") to avoid the network request, ' +
+        'or configureFonts(null) to opt out.',
       cdnFontsDirectory(),
     );
   }
 
-  // Always replace MathLive's relative `'./fonts/'` default: it throws
-  // "Invalid base URL" when bundled. The host's copy if one was configured,
-  // otherwise the CDN, which is now only reached if the embedded fonts could not
-  // be registered.
   mathlive.MathfieldElement.fontsDirectory =
     fontsDirectory === undefined ? cdnFontsDirectory() : absoluteFontsDirectory(fontsDirectory);
 
@@ -244,7 +239,10 @@ const PLACEHOLDER_CARET_CSS = [
 // written for static markup in the host page, which cannot cross the shadow
 // boundary.
 const SHADOW_CSS =
-  '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}' + ROOT_INDEX_CSS + PLACEHOLDER_CARET_CSS;
+  '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}' +
+  ROOT_INDEX_CSS +
+  PARALLEL_CSS +
+  PLACEHOLDER_CARET_CSS;
 
 /**
  * Keep {@link PLACEHOLDER_CARET_CLASS} in step with the selection.

package/src/mf/common-styles.js

@@ -75,6 +75,24 @@ export const rootIndexStyles = {
  */
 export const ROOT_INDEX_CSS = `${ROOT_INDEX_SELECTOR}{font-size:${ROOT_INDEX_FONT_SIZE} !important}`;
 
+/**
+ * Size of the parallel sign (`\parallel`, tagged `data-pie-macro="parallel"` by
+ * `PIE_MACROS`). The legacy editor enlarged it (`updateSpans` set 32px) because
+ * the bars read too small next to the letters of `AB ∥ CD`; MathLive draws it at
+ * the surrounding size, so it is scaled up here. Not applied to keypad labels.
+ */
+const PARALLEL_SELECTOR = '[data-pie-macro="parallel"]';
+const PARALLEL_FONT_SIZE = '1.4em';
+
+export const parallelStyles = {
+  [`& ${PARALLEL_SELECTOR}`]: {
+    fontSize: PARALLEL_FONT_SIZE,
+  },
+};
+
+/** The same rule as a CSS string, for a live mathfield's shadow root. */
+export const PARALLEL_CSS = `${PARALLEL_SELECTOR}{font-size:${PARALLEL_FONT_SIZE}}`;
+
 /**
  * Superscript/subscript sizing. MathLive follows TeX metrics for scripts, so the
  * MathQuill-era corrections are gone; the radical index is the one place where a
@@ -82,6 +100,7 @@ export const ROOT_INDEX_CSS = `${ROOT_INDEX_SELECTOR}{font-size:${ROOT_INDEX_FON
  */
 export const supsubStyles = {
   ...rootIndexStyles,
+  ...parallelStyles,
 };
 
 /** Empty placeholder boxes (answer blocks / open slots). */

package/src/mf/index.js

@@ -7,6 +7,7 @@ import CommonMqStyles, {
   commonMqKeyboardStyles,
   longdivStyles,
   rootIndexStyles,
+  parallelStyles,
   supsubStyles,
   placeholderStyles,
 } from './common-styles';
@@ -23,6 +24,7 @@ export {
   commonMqKeyboardStyles,
   longdivStyles,
   rootIndexStyles,
+  parallelStyles,
   supsubStyles,
   placeholderStyles,
 };

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');
 
@@ -80,6 +81,11 @@ export class Input extends React.Component {
     // Without this the spacebar does nothing: MathLive's mathModeSpace
     // defaults to an empty string.
     this.mathField.mathModeSpace = MATH_MODE_SPACE;
+    // After the exponent key the cursor must stay in the exponent until it is moved
+    // MathLive's `smartSuperscript` (on by
+    // default) jumps out of an empty superscript after a single digit, which breaks
+    // typing x^23 or 10^6 and is inconsistent with non-digit exponents.
+    this.mathField.smartSuperscript = false;
 
     // The mathfield renders in shadow DOM, so page CSS cannot reach it - the
     // stretchy-accent fix has to be injected there directly.
@@ -88,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.
@@ -131,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/mf/static.jsx

@@ -11,7 +11,7 @@ import {
   trackPlaceholderCaret,
 } from '../mathlive-instance';
 import { toMathLive, fromMathLive, fieldIds } from '../latex-bridge';
-import { placeholderStyles, rootIndexStyles } from './common-styles';
+import { placeholderStyles, rootIndexStyles, parallelStyles } from './common-styles';
 
 const log = debug('pie-lib:math-input-mathlive:static');
 
@@ -22,6 +22,7 @@ const Holder = styled('span')({
   // Readable radical index - display mode renders in the light DOM, so the
   // shadow-root copy of this rule does not reach it.
   ...rootIndexStyles,
+  ...parallelStyles,
   '& math-field': {
     display: 'inline-block',
     border: 'none',
@@ -101,6 +102,8 @@ export default class Static extends React.Component {
     // Without this the spacebar does nothing: MathLive's mathModeSpace
     // defaults to an empty string.
     this.mathField.mathModeSpace = MATH_MODE_SPACE;
+    // Same as the editor: stay in the exponent after a digit (see mf/input.jsx).
+    this.mathField.smartSuperscript = false;
     this.mathField.value = toMathLive(this.props.latex);
 
     // The mathfield renders in shadow DOM, so page CSS cannot reach it - the

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