@pie-lib/math-input-mathlive 1.0.11 → 1.0.13

package/src/__tests__/keypad-label.test.jsx

@@ -18,11 +18,19 @@ describe('keypad label display normalisation', () => {
   });
 
   it('handles every empty-group key shape', () => {
-    ['\\frac{}{}', '\\overline{}', 'x^{}', 'x_{}', '\\sqrt{}', '\\sqrt[{}]{}', '\\abs{}', '\\log_{}', '\\longdiv{}'].forEach(
-      (latex) => {
-        expect(latexForDisplay(latex)).not.toContain('{}');
-      },
-    );
+    [
+      '\\frac{}{}',
+      '\\overline{}',
+      'x^{}',
+      'x_{}',
+      '\\sqrt{}',
+      '\\sqrt[{}]{}',
+      '\\abs{}',
+      '\\log_{}',
+      '\\longdiv{}',
+    ].forEach((latex) => {
+      expect(latexForDisplay(latex)).not.toContain('{}');
+    });
   });
 
   it('treats a whitespace-only group as empty', () => {
@@ -80,6 +88,79 @@ describe('keypad label display normalisation', () => {
     expect(placeholderStyles['& .ML__center:has(.ML__stretchy)'].marginLeft).toEqual('0 !important');
   });
 
+  // MathLive sets the index of \sqrt[n]{x} in scriptscriptstyle - an inline
+  // `font-size: 50%` - which is too small to read on the nth-root key and in
+  // authored radicals. It is scaled up to 80%.
+  describe('radical index size', () => {
+    // Real MathLive 0.110 output for `\sqrt[1]{2}`, trimmed to the index. The
+    // selector walks this exact chain, so this fixture is what pins it down.
+    const INDEX_MARKUP = `
+      <span class="ML__base">
+        <span class="ML__sqrt-index">
+          <span class="ML__vlist-t"><span class="ML__vlist-r"><span class="ML__vlist" style="height:0.78em">
+            <span style="top:-3.45em">
+              <span class="ML__pstrut" style="height:3em"></span>
+              <span id="index-size" style="height:0.33em;display:inline-block;font-size: 50%">
+                <span class="ML__cmr">1</span>
+                <span id="nested-size" style="font-size: 50%">nested</span>
+              </span>
+            </span>
+          </span></span></span>
+        </span>
+        <span class="ML__sqrt-sign"><span class="ML__delim-size1">&#8730;</span></span>
+      </span>`;
+
+    const rule = () => {
+      // eslint-disable-next-line global-require
+      const { rootIndexStyles } = require('../mf/common-styles');
+      const selectors = Object.keys(rootIndexStyles);
+
+      expect(selectors).toHaveLength(1);
+
+      return { selector: selectors[0], value: rootIndexStyles[selectors[0]].fontSize };
+    };
+
+    it("scales the index glyph to 80%, up from MathLive's 50%", () => {
+      // !important: the 50% is an inline style, which a class cannot override.
+      expect(rule().value).toEqual('80% !important');
+    });
+
+    it('targets the span MathLive puts the inline font-size on', () => {
+      const holder = document.createElement('div');
+
+      holder.innerHTML = INDEX_MARKUP;
+
+      const matched = holder.querySelectorAll(rule().selector.replace(/^&\s*/, ''));
+
+      expect(Array.from(matched).map((el) => el.id)).toEqual(['index-size']);
+    });
+
+    it('leaves the radical index box itself unscaled', () => {
+      // Scaling `.ML__sqrt-index` would scale the em-based top/height offsets
+      // that tuck the index into the radical, lifting it clear of the crook.
+      const { selector } = rule();
+
+      expect(selector).not.toMatch(/\.ML__sqrt-index\s*\{?$/);
+      expect(selector.startsWith('& .ML__sqrt-index >')).toBe(true);
+    });
+
+    it('applies wherever math renders - keypad labels, static math, mathfield', () => {
+      // eslint-disable-next-line global-require
+      const cs = require('../mf/common-styles');
+      const { selector } = rule();
+
+      ['commonKeyboardStyles', 'commonMathLiveStyles', 'supsubStyles'].forEach((name) => {
+        expect(cs[name][selector]).toBeDefined();
+      });
+
+      // The live mathfield renders in a shadow root, which host styles cannot
+      // reach, so the same rule ships as plain CSS for `applyShadowStyles`.
+      expect(cs.ROOT_INDEX_CSS).toContain('.ML__sqrt-index >');
+      // Derived, so the size lives in one place: the two copies cannot drift.
+      expect(cs.ROOT_INDEX_CSS).toContain(`font-size:${rule().value}`);
+    });
+  });
+
   it('applies those rules wherever static math renders', () => {
     // eslint-disable-next-line global-require
     const cs = require('../mf/common-styles');
@@ -103,6 +184,51 @@ describe('keypad label display normalisation', () => {
     });
   });
 
+  // The Percent key showed as a blank button on the Advanced Algebra keypad
+  // (row 1, position 6). MathQuill defined `LatexCmds['%']` as a symbol that
+  // serialised to `\\%`, so its bare `%` label parsed fine; MathLive parses real
+  // LaTeX, where `%` opens a comment - the label rendered nothing, and pressing
+  // the key inserted a comment that swallowed the rest of the expression.
+  it('the percent key is escaped, not a latex comment', () => {
+    // eslint-disable-next-line global-require
+    const { percentage } = require('../keys/misc');
+
+    expect(percentage.latex).toEqual('\\%');
+    expect(keyToAction(percentage).value).toEqual('\\%');
+  });
+
+  // Any bare `%` in a key would fail the same way, silently.
+  it('no keypad key carries an unescaped %', () => {
+    // eslint-disable-next-line global-require
+    const { baseSet } = require('../keys');
+    // eslint-disable-next-line global-require
+    const { gradeSets } = require('../keys/grades');
+
+    const every = [...baseSet, ...gradeSets.map((g) => g.set)];
+
+    const walk = (node) => {
+      if (Array.isArray(node)) {
+        node.forEach(walk);
+        return;
+      }
+
+      if (!node) {
+        return;
+      }
+
+      ['latex', 'write', 'command'].forEach((field) => {
+        const value = node[field];
+
+        if (typeof value === 'string') {
+          // a `%` is only safe when preceded by an odd run of backslashes
+          expect(value.replace(/\\./g, '')).not.toContain('%');
+        }
+      });
+    };
+
+    walk(every);
+  });
+
   it('leaves latex without empty groups alone', () => {
     ['\\pi', '\\sin', 'x^2', '\\overline{AB}'].forEach((latex) => {
       expect(latexForDisplay(latex)).toEqual(latex);

package/src/__tests__/latex-bridge.test.js

@@ -133,6 +133,28 @@ describe('latex-bridge', () => {
       expect(toNativeCommands('\\longdiv{1}\\longdiv{2}')).toEqual('\\enclose{longdiv}{1}\\enclose{longdiv}{2}');
     });
 
+    // `%` starts a comment in real LaTeX, so MathLive drops it and everything
+    // after it. MathQuill had no comments, so latex authored under it - or by
+    // hand - can carry a bare `%` that would silently truncate the expression.
+    it('escapes a bare % so it cannot comment out the rest of the line', () => {
+      expect(toNativeCommands('%')).toEqual('\\%');
+      expect(toNativeCommands('50%')).toEqual('50\\%');
+      expect(toNativeCommands('x%y')).toEqual('x\\%y');
+      expect(toNativeCommands('a%b%c')).toEqual('a\\%b\\%c');
+    });
+
+    it('leaves an already-escaped % alone', () => {
+      expect(toNativeCommands('\\%')).toEqual('\\%');
+      expect(toNativeCommands('50\\%')).toEqual('50\\%');
+      // idempotent: toMathLive may run over latex that came back out of a field
+      expect(toNativeCommands(toNativeCommands('50%'))).toEqual('50\\%');
+    });
+
+    // `\\` is a line break, not an escape, so the `%` after it is still bare.
+    it('counts backslashes to decide whether a % is escaped', () => {
+      expect(toNativeCommands('a\\\\%b')).toEqual('a\\\\\\%b');
+    });
+
     it('leaves other latex untouched', () => {
       ['\\frac{1}{2}', '\\pi', '\\sqrt{x}', '\\overline{AB}'].forEach((l) => {
         expect(toNativeCommands(l)).toEqual(l);

package/src/__tests__/mathlive-instance.test.js

@@ -211,6 +211,113 @@ describe('mathlive-instance', () => {
 
   // A live <math-field> renders in shadow DOM, so nothing in the page's
   // stylesheets reaches it - the stretchy-accent fix has to be injected there.
+  /**
+   * A keypad key like \frac inserts `\frac{#?}{#?}`; MathLive turns each `#?`
+   * into a `\placeholder{}` atom and *selects* the first one. Measured in
+   * Chromium: that atom is a leaf (its offsets are before/after, there is no
+   * position inside), so MathLive renders NO caret element and shows only the
+   * selection highlight - the box read as focused-but-dead. The caret is drawn
+   * by our own shadow CSS, gated on a class so it is placeholder-specific.
+   */
+  describe('trackPlaceholderCaret', () => {
+    const fakeField = (selection, latex) => {
+      const classes = new Set();
+
+      return {
+        listeners: {},
+        selection,
+        selectionIsCollapsed: !selection,
+        getValue: () => latex,
+        classList: {
+          toggle: (name, on) => (on ? classes.add(name) : classes.delete(name)),
+          contains: (name) => classes.has(name),
+        },
+        addEventListener(name, fn) {
+          this.listeners[name] = fn;
+        },
+        removeEventListener(name) {
+          delete this.listeners[name];
+        },
+      };
+    };
+
+    it('marks the host when a placeholder is selected', () => {
+      const mf = fakeField({ ranges: [[1, 2]] }, '\\placeholder{}');
+
+      instance.trackPlaceholderCaret(mf);
+
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(true);
+    });
+
+    it('does not mark an ordinary selection', () => {
+      const mf = fakeField({ ranges: [[0, 3]] }, 'x+1');
+
+      instance.trackPlaceholderCaret(mf);
+
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('does not mark a collapsed selection, which has a real caret already', () => {
+      const mf = fakeField(null, '\\placeholder{}');
+
+      instance.trackPlaceholderCaret(mf);
+
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('leaves a named prompt alone - it takes a real caret inside', () => {
+      const mf = fakeField({ ranges: [[1, 2]] }, '\\placeholder[r1]{}');
+
+      instance.trackPlaceholderCaret(mf);
+
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('re-evaluates whenever the selection moves', () => {
+      const mf = fakeField(null, '');
+
+      instance.trackPlaceholderCaret(mf);
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+
+      // the caret lands on a placeholder
+      mf.selection = { ranges: [[1, 2]] };
+      mf.selectionIsCollapsed = false;
+      mf.getValue = () => '\\placeholder{}';
+      mf.listeners['selection-change']();
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(true);
+
+      // ...and moves off it again
+      mf.selectionIsCollapsed = true;
+      mf.listeners['selection-change']();
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('returns a teardown that detaches the listener', () => {
+      const mf = fakeField(null, '');
+      const off = instance.trackPlaceholderCaret(mf);
+
+      expect(typeof mf.listeners['selection-change']).toEqual('function');
+      off();
+      expect(mf.listeners['selection-change']).toBeUndefined();
+    });
+
+    it('survives a field that throws while reading the selection', () => {
+      const mf = fakeField({ ranges: [[1, 2]] }, '');
+
+      mf.getValue = () => {
+        throw new Error('detached');
+      };
+
+      expect(() => instance.trackPlaceholderCaret(mf)).not.toThrow();
+      expect(mf.classList.contains(instance.PLACEHOLDER_CARET_CLASS)).toBe(false);
+    });
+
+    it('is a no-op without a field', () => {
+      expect(instance.trackPlaceholderCaret(undefined)).toBeUndefined();
+      expect(instance.trackPlaceholderCaret({})).toBeUndefined();
+    });
+  });
+
   describe('applyShadowStyles', () => {
     const host = () => {
       const el = document.createElement('div');
@@ -243,6 +350,49 @@ describe('mathlive-instance', () => {
       }
     });
 
+    it('injects the placeholder caret rules', () => {
+      const el = host();
+
+      instance.applyShadowStyles(el);
+
+      const viaStyle = el.shadowRoot.querySelector('style[data-pie-accent]');
+
+      if (viaStyle) {
+        const css = viaStyle.textContent;
+
+        // gated on the host class, so an ordinary selection gets no caret
+        expect(css).toContain(`:host(.${instance.PLACEHOLDER_CARET_CLASS})`);
+        // MathLive's own blink keyframes and caret colour, already in this root
+        expect(css).toContain('ML__caret-blink');
+        expect(css).toContain('--_caret-color');
+        // the innermost selected element only: MathLive marks a wrapper AND the
+        // glyph span, which would otherwise render two carets
+        expect(css).toContain('.ML__selected:not(:has(.ML__selected))');
+      }
+    });
+
+    it('injects the radical index size fix', () => {
+      const el = host();
+
+      instance.applyShadowStyles(el);
+
+      const viaStyle = el.shadowRoot.querySelector('style[data-pie-accent]');
+
+      if (viaStyle) {
+        const css = viaStyle.textContent;
+
+        // MathLive's scriptscriptstyle index (an inline 50%) reads too small in
+        // the authoring UI; a mathfield's shadow root needs its own copy of the
+        // rule, since host styles do not cross the boundary. Compared against
+        // the exported rule, so the size stays defined in one place.
+        // eslint-disable-next-line global-require
+        const { ROOT_INDEX_CSS } = require('../mf/common-styles');
+
+        expect(ROOT_INDEX_CSS).toContain('.ML__sqrt-index >');
+        expect(css).toContain(ROOT_INDEX_CSS);
+      }
+    });
+
     it('does not inject twice', () => {
       const el = host();
 

package/src/__tests__/mount-race.test.jsx

@@ -34,6 +34,7 @@ jest.mock('../mathlive-instance', () => {
     // must mirror the real export, otherwise the component sets `undefined`
     MATH_MODE_SPACE: '\\ ',
     applyShadowStyles: () => {},
+    trackPlaceholderCaret: () => () => {},
     latexToMarkup: (l) => `<span>${l}</span>`,
   };
 });

package/src/__tests__/static-prompts.test.jsx

@@ -26,6 +26,13 @@ const stubField = (values = {}, selection = null) => ({
     return [i * 10, i * 10 + 5];
   },
   selection,
+  // Caret bookkeeping: MathLive exposes the caret offset as `position`, and any
+  // executeCommand triggers the render that reveals the caret.
+  position: undefined,
+  commands: [],
+  executeCommand(name) {
+    this.commands.push(name);
+  },
   addEventListener() {},
   removeEventListener() {},
   focus() {
@@ -248,4 +255,110 @@ describe('Static: answer blocks / prompts', () => {
       expect(s.mathField.blurred).toBe(true);
     });
   });
+
+  /**
+   * MathLive shows the caret only while the field carries `ML__focused`, which
+   * it adds during a render gated on `isSelectionEditable && hasFocus()`. In a
+   * read-only field only prompt interiors are editable, so after a bare
+   * `focus()` - whose selection sits outside every prompt - the answer block
+   * looked focused but had no blinking cursor. Verified in Chromium: the caret
+   * span goes from visibility:hidden to visible once the selection is inside a
+   * prompt AND a render has run.
+   */
+  describe('caret placement', () => {
+    it('puts a collapsed caret in the first prompt on focus', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.focus();
+
+      // stub ranges are [0,5] for r1, [10,15] for r2
+      expect(s.mathField.selection).toEqual({ ranges: [[0, 0]] });
+    });
+
+    it('forces the render that makes the caret visible', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '' });
+      s.focus();
+
+      // assigning `selection` alone updates the model without re-rendering, so
+      // ML__focused would never be added
+      expect(s.mathField.commands).toEqual(['scrollIntoView']);
+    });
+
+    it('does not move a caret that is already inside a prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.mathField.position = 12; // inside r2
+      s.focus();
+
+      expect(s.mathField.selection).toBe(null);
+      expect(s.mathField.commands).toEqual([]);
+    });
+
+    it('targets a specific prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.focusPrompt('r2');
+
+      expect(s.mathField.selection).toEqual({ ranges: [[10, 10]] });
+    });
+
+    it('falls back to the first prompt for an unknown id', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.focusPrompt('nope');
+
+      expect(s.mathField.selection).toEqual({ ranges: [[0, 0]] });
+    });
+
+    it('is a no-op when there are no prompts', () => {
+      const s = make();
+
+      s.mathField = stubField({});
+
+      expect(() => s.focusPrompt()).not.toThrow();
+      expect(s.mathField.selection).toBe(null);
+    });
+
+    it('is safe without a field', () => {
+      expect(() => make().focusPrompt('r1')).not.toThrow();
+    });
+
+    describe('promptContaining', () => {
+      it('finds the prompt whose range holds the offset, inclusive', () => {
+        const s = make();
+
+        s.mathField = stubField({ r1: '', r2: '' });
+
+        expect(s.promptContaining(0)).toEqual('r1');
+        expect(s.promptContaining(5)).toEqual('r1');
+        expect(s.promptContaining(10)).toEqual('r2');
+        expect(s.promptContaining(7)).toBeUndefined();
+      });
+
+      it('treats a missing position as outside', () => {
+        const s = make();
+
+        s.mathField = stubField({ r1: '' });
+
+        expect(s.promptContaining(undefined)).toBeUndefined();
+      });
+    });
+
+    // MathQuill's inner fields could be focused directly.
+    it('promptHandle exposes focus() for its own prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '', r2: '' });
+      s.promptHandle('r2').focus();
+
+      expect(s.mathField.focused).toBe(true);
+      expect(s.mathField.selection).toEqual({ ranges: [[10, 10]] });
+    });
+  });
 });

package/src/keypad/index.jsx

@@ -9,7 +9,7 @@ import { color } from '@pie-lib/render-ui';
 
 import { baseSet } from '../keys';
 import { sortKeys } from './keys-layout';
-import { commonKeyboardStyles } from '../mf/common-styles';
+import { commonKeyboardStyles, rootIndexStyles } from '../mf/common-styles';
 import { loadMathLive, latexToMarkup } from '../mathlive-instance';
 
 const log = debug('pie-lib:math-input-mathlive:keypad');
@@ -53,6 +53,9 @@ const LabelHolder = styled('span')(() => ({
   '& [data-pie-empty]': {
     opacity: 0.5,
   },
+  // 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,
 }));
 
 export class LatexLabel extends React.Component {

package/src/keys/misc.js

@@ -29,10 +29,16 @@ export const brackets = set({
   command: '[',
 });
 
+// `%` must be escaped. MathQuill was not a real LaTeX parser: it defined
+// `LatexCmds['%']` as a symbol that *serialised* to `\%`, so a bare `%` worked
+// both as a label and as a command. MathLive parses LaTeX properly, where `%`
+// begins a comment - it rendered nothing (a blank button) and, once inserted,
+// silently swallowed the rest of the expression. `\%` is what MathQuill stored
+// all along, so this changes the key only, not the saved latex.
 export const percentage = set({
   name: 'Percent',
-  latex: '%',
-  command: '%',
+  latex: '\\%',
+  command: '\\%',
 });
 
 export const approx = set({

package/src/latex-bridge.js

@@ -114,6 +114,40 @@ export const toNativeCommands = (latex) => {
   out = replaceAbs(out);
   out = out.replace(/\\longdiv\{/g, '\\enclose{longdiv}{');
   out = out.replace(/\\overarc\{/g, '\\overparen{');
+  out = escapeBareComments(out);
+
+  return out;
+};
+
+/**
+ * Escape an unescaped `%`.
+ *
+ * In real LaTeX `%` starts a comment, so MathLive discards it *and everything
+ * after it*: `50%` renders as `50`, and `x%y` as just `x`. MathQuill had no
+ * such notion - it treated `%` as a symbol - so latex from anywhere outside the
+ * keypad may still carry a bare one.
+ *
+ * Only a `%` preceded by an even number of backslashes is bare: `\%` is already
+ * escaped, while the `%` in `\\%` (a line break, then a comment) is not.
+ *
+ * @param {string} latex
+ * @returns {string}
+ */
+const escapeBareComments = (latex) => {
+  if (latex.indexOf('%') === -1) {
+    return latex;
+  }
+
+  let out = '';
+  // Consecutive backslashes immediately before the current character.
+  let backslashes = 0;
+
+  for (let i = 0; i < latex.length; i++) {
+    const ch = latex[i];
+
+    out += ch === '%' && backslashes % 2 === 0 ? '\\%' : ch;
+    backslashes = ch === '\\' ? backslashes + 1 : 0;
+  }
 
   return out;
 };

package/src/mathlive-instance.js

@@ -1,5 +1,6 @@
 import debug from 'debug';
 import { NEWLINE_EMBED, toMathLive, withVisibleEmptySlots } from './latex-bridge';
+import { ROOT_INDEX_CSS } from './mf/common-styles';
 
 const log = debug('pie-lib:math-input-mathlive:instance');
 
@@ -196,7 +197,85 @@ const configureLoaded = () => {
  * `:has(.ML__stretchy)` keeps the fix to stretchy accents; single-glyph accents
  * (`\hat{x}`, `\vec{x}`) still need their centring offset.
  */
-const SHADOW_CSS = '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}';
+/**
+ * Marker put on the host `<math-field>` while a `\placeholder{}` is selected,
+ * so the caret rules below apply to a placeholder and nothing else.
+ */
+export const PLACEHOLDER_CARET_CLASS = 'pie-caret-in-placeholder';
+
+/** What MathLive serialises a `#?` slot as. */
+const PLACEHOLDER_LATEX = '\\placeholder{}';
+
+/**
+ * A blinking caret inside a selected placeholder box.
+ *
+ * A keypad key such as `\frac` inserts `\frac{#?}{#?}`. MathLive turns each
+ * `#?` into a `\placeholder{}` atom and *selects* the first one. That atom is a
+ * leaf - the offsets around it are "before" and "after", there is no position
+ * inside it - so MathLive renders **no caret element at all** and shows only
+ * the selection highlight. The box therefore looked focused (blue) but dead,
+ * where MathQuill used to blink a cursor inside its empty box.
+ *
+ * So the caret is drawn here. `:not(:has(.ML__selected))` picks the innermost
+ * selected element (MathLive puts the class on a wrapper *and* the glyph span,
+ * which would otherwise give two carets), and the `ML__caret-blink` keyframes
+ * plus `--_caret-color` are MathLive's own, already in this shadow root.
+ *
+ * Typing still replaces the whole placeholder, which for an empty box is
+ * indistinguishable from inserting at the caret.
+ */
+const PLACEHOLDER_CARET_CSS = [
+  `:host(.${PLACEHOLDER_CARET_CLASS}) .ML__selected:not(:has(.ML__selected)){position:relative}`,
+  `:host(.${PLACEHOLDER_CARET_CLASS}) .ML__selected:not(:has(.ML__selected))::after{`,
+  'content:"";position:absolute;left:50%;top:12%;height:76%;',
+  'border-right:2px solid var(--_caret-color, currentColor);',
+  'animation:ML__caret-blink 1.05s step-end forwards infinite}',
+].join('');
+
+// 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.
+const SHADOW_CSS =
+  '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}' + ROOT_INDEX_CSS + PLACEHOLDER_CARET_CSS;
+
+/**
+ * Keep {@link PLACEHOLDER_CARET_CLASS} in step with the selection.
+ *
+ * Gating on the class is what keeps the caret specific to placeholders: an
+ * ordinary selection (`x+1`) must not sprout one. MathLive fires
+ * `selection-change` for every caret move, including the one that lands on the
+ * placeholder straight after an insert.
+ *
+ * @param {HTMLElement} mathField
+ * @returns {function|undefined} teardown, to call on unmount
+ */
+export const trackPlaceholderCaret = (mathField) => {
+  if (!mathField || typeof mathField.addEventListener !== 'function') {
+    return undefined;
+  }
+
+  const update = () => {
+    let selected = '';
+
+    try {
+      // A collapsed selection already has a real MathLive caret.
+      if (!mathField.selectionIsCollapsed && mathField.selection) {
+        selected = mathField.getValue(mathField.selection, 'latex');
+      }
+    } catch (e) {
+      log('could not read the selection: %s', e && e.message);
+    }
+
+    if (mathField.classList) {
+      mathField.classList.toggle(PLACEHOLDER_CARET_CLASS, selected === PLACEHOLDER_LATEX);
+    }
+  };
+
+  mathField.addEventListener('selection-change', update);
+  update();
+
+  return () => mathField.removeEventListener('selection-change', update);
+};
 
 /**
  * Apply {@link SHADOW_CSS} inside a mathfield's shadow root.