@pie-lib/math-input-mathlive 1.1.4 → 1.1.5-beta.10

package/src/mf/index.js

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

package/src/mf/input.jsx

@@ -2,7 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import debug from 'debug';
-import { loadMathLive, getMacros } from '../mathlive-instance';
+import {
+  loadMathLive,
+  getMacros,
+  MATH_MODE_SPACE,
+  applyShadowStyles,
+  trackPlaceholderCaret,
+} from '../mathlive-instance';
 import { toMathLive, fromMathLive, keyToAction, KEYSTROKES } from '../latex-bridge';
 
 const log = debug('pie-lib:math-input-mathlive:input');
@@ -49,9 +55,16 @@ export class Input extends React.Component {
   }
 
   async componentDidMount() {
+    // MathLive loads asynchronously, so this method resumes after an await and
+    // has to know whether it is still the current mount. React StrictMode calls
+    // mount -> unmount -> mount on the SAME instance in dev, so a boolean
+    // "unmounted" flag would latch and block the remount from ever creating a
+    // field. A generation counter identifies the live mount instead: only the
+    // newest one proceeds, and a real unmount invalidates all pending ones.
+    const generation = (this.mountGeneration = (this.mountGeneration || 0) + 1);
     const ml = await loadMathLive();
 
-    if (!ml || !this.holderRef.current) {
+    if (generation !== this.mountGeneration || !ml || !this.holderRef.current || this.mathField) {
       return;
     }
 
@@ -64,15 +77,30 @@ export class Input extends React.Component {
 
     // pie drives input through its own keypad, so suppress MathLive's.
     this.mathField.mathVirtualKeyboardPolicy = 'manual';
+    // 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.
+    applyShadowStyles(this.mathField);
+
+    // A selected `\placeholder{}` gets no MathLive caret; draw one.
+    this.untrackCaret = trackPlaceholderCaret(this.mathField);
 
     this.mathField.addEventListener('input', this.onInputEdit);
-    this.holderRef.current.appendChild(this.mathField);
+
+    // Belt and braces: drop anything a previous mount may have left behind.
+    this.holderRef.current.replaceChildren(this.mathField);
 
     if (this.props.innerRef) {
       this.props.innerRef(this);
     }
-
-    this.setState?.({});
   }
 
   componentDidUpdate(prevProps) {
@@ -99,6 +127,15 @@ export class Input extends React.Component {
   }
 
   componentWillUnmount() {
+    // Invalidate any mount still awaiting the MathLive load, so it does not
+    // append a field into a holder that is going away.
+    this.mountGeneration = (this.mountGeneration || 0) + 1;
+
+    if (this.untrackCaret) {
+      this.untrackCaret();
+      this.untrackCaret = undefined;
+    }
+
     if (this.mathField) {
       this.mathField.removeEventListener('input', this.onInputEdit);
       this.mathField.remove();

package/src/mf/static.jsx

@@ -2,9 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import debug from 'debug';
-import { loadMathLive, getMacros, latexToMarkup } from '../mathlive-instance';
+import {
+  loadMathLive,
+  getMacros,
+  latexToMarkup,
+  MATH_MODE_SPACE,
+  applyShadowStyles,
+  trackPlaceholderCaret,
+} from '../mathlive-instance';
 import { toMathLive, fromMathLive, fieldIds } from '../latex-bridge';
-import { placeholderStyles } from './common-styles';
+import { placeholderStyles, rootIndexStyles, parallelStyles } from './common-styles';
 
 const log = debug('pie-lib:math-input-mathlive:static');
 
@@ -12,6 +19,10 @@ const Holder = styled('span')({
   display: 'inline-block',
   // Shared static-math rules: muted empty-slot glyphs and svg containment.
   ...placeholderStyles,
+  // 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',
@@ -64,28 +75,51 @@ export default class Static extends React.Component {
   }
 
   async componentDidMount() {
+    // See the note in mf/input.jsx: a generation counter, not a boolean, so a
+    // StrictMode mount -> unmount -> mount on the same instance still ends up
+    // with exactly one field.
+    const generation = (this.mountGeneration = (this.mountGeneration || 0) + 1);
+
     if (!this.isInteractive()) {
       await loadMathLive();
-      this.renderMarkup();
+
+      if (generation === this.mountGeneration) {
+        this.renderMarkup();
+      }
+
       return;
     }
 
     const ml = await loadMathLive();
 
-    if (!ml || !this.holderRef.current) {
+    if (generation !== this.mountGeneration || !ml || !this.holderRef.current || this.mathField) {
       return;
     }
 
     this.mathField = new ml.MathfieldElement({ macros: getMacros() });
     this.mathField.readOnly = true;
     this.mathField.mathVirtualKeyboardPolicy = 'manual';
+    // 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
+    // stretchy-accent fix has to be injected there directly.
+    applyShadowStyles(this.mathField);
+
+    // A selected `\placeholder{}` gets no MathLive caret; draw one. Answer
+    // blocks are typed into with the same keypad, so they grow placeholders too.
+    this.untrackCaret = trackPlaceholderCaret(this.mathField);
+
     this.mathField.addEventListener('input', this.onPromptInput);
     this.mathField.addEventListener('focusin', this.onPromptFocus);
     this.mathField.addEventListener('keydown', this.onKeyDown);
 
-    this.holderRef.current.appendChild(this.mathField);
+    // Belt and braces: drop anything a previous mount may have left behind.
+    this.holderRef.current.replaceChildren(this.mathField);
 
     this.createLiveRegion();
   }
@@ -103,6 +137,14 @@ export default class Static extends React.Component {
   }
 
   componentWillUnmount() {
+    // Invalidate any mount still awaiting the MathLive load.
+    this.mountGeneration = (this.mountGeneration || 0) + 1;
+
+    if (this.untrackCaret) {
+      this.untrackCaret();
+      this.untrackCaret = undefined;
+    }
+
     if (this.mathField) {
       this.mathField.removeEventListener('input', this.onPromptInput);
       this.mathField.removeEventListener('focusin', this.onPromptFocus);
@@ -234,6 +276,13 @@ export default class Static extends React.Component {
   promptHandle(id) {
     return {
       id,
+      // MathQuill's inner fields could be focused directly; keep that.
+      focus: () => {
+        if (this.mathField) {
+          this.mathField.focus();
+          this.focusPrompt(id);
+        }
+      },
       latex: (value) => {
         if (!this.mathField) {
           return '';
@@ -331,8 +380,77 @@ export default class Static extends React.Component {
     }
   };
 
+  /** The id of the prompt whose range contains `position`, if any. */
+  promptContaining(position) {
+    if (!this.mathField || typeof position !== 'number') {
+      return undefined;
+    }
+
+    return (this.mathField.getPrompts() || []).find((id) => {
+      const range = this.mathField.getPromptRange(id);
+
+      return range && position >= range[0] && position <= range[1];
+    });
+  }
+
+  /**
+   * Put a blinking caret inside an answer block.
+   *
+   * MathLive only makes the caret visible while the field element carries the
+   * `ML__focused` class, and it adds that class during a *render*, gated on
+   * `isSelectionEditable && hasFocus()`. In a read-only field only prompt
+   * interiors are editable, so the two things both have to be true:
+   *
+   *  - the selection must sit inside a prompt, and
+   *  - a render must run afterwards.
+   *
+   * Assigning `selection` satisfies the first but not the second - it updates
+   * the model without re-rendering, so the class stays off and the caret span
+   * remains `visibility: hidden`. Executing any command does trigger the
+   * render, and `scrollIntoView` is the one with no other effect: it keeps the
+   * caret on screen, which the preceding `focus()` already does anyway.
+   *
+   * @param {string} [id] prompt to focus; defaults to the first one
+   */
+  focusPrompt(id) {
+    if (!this.mathField) {
+      return;
+    }
+
+    const ids = this.mathField.getPrompts() || [];
+    const target = id && ids.indexOf(id) !== -1 ? id : ids[0];
+
+    if (!target) {
+      return;
+    }
+
+    const range = this.mathField.getPromptRange(target);
+
+    if (!range) {
+      return;
+    }
+
+    this.mathField.selection = { ranges: [[range[0], range[0]]] };
+
+    if (typeof this.mathField.executeCommand === 'function') {
+      this.mathField.executeCommand('scrollIntoView');
+    }
+  }
+
   focus() {
-    this.mathField && this.mathField.focus();
+    if (!this.mathField) {
+      return;
+    }
+
+    this.mathField.focus();
+
+    // A bare focus() leaves the selection outside every prompt, which in a
+    // read-only field is not editable - the block looked focused but had no
+    // cursor. Clicking a prompt already works, because MathLive's own pointer
+    // handling moves the selection and re-renders.
+    if (!this.promptContaining(this.mathField.position)) {
+      this.focusPrompt();
+    }
   }
 
   blur() {

package/CHANGELOG.md

@@ -1,30 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.1.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/math-input-mathlive@1.1.3...@pie-lib/math-input-mathlive@1.1.4) (2026-09-22)
-
-**Note:** Version bump only for package @pie-lib/math-input-mathlive
-
-## [1.1.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/math-input-mathlive@1.1.2...@pie-lib/math-input-mathlive@1.1.3) (2026-09-02)
-
-**Note:** Version bump only for package @pie-lib/math-input-mathlive
-
-## [1.1.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/math-input-mathlive@1.1.1...@pie-lib/math-input-mathlive@1.1.2) (2026-08-26)
-
-**Note:** Version bump only for package @pie-lib/math-input-mathlive
-
-## [1.1.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/math-input-mathlive@1.1.0...@pie-lib/math-input-mathlive@1.1.1) (2026-08-21)
-
-**Note:** Version bump only for package @pie-lib/math-input-mathlive
-
-# 1.1.0 (2026-08-13)
-
-### Bug Fixes
-
-- bump math-input-mathlive version to allow canary workflow to generate next on develop ([1ae0088](https://github.com/pie-framework/pie-lib/commit/1ae0088e3b8985aa65933d6a35d94f609cfb9420))
-
-### Features
-
-- implemented math-input-mathlive [PIE-158] ([0d0aa07](https://github.com/pie-framework/pie-lib/commit/0d0aa07cd946b758cb280add754615690542eca3))

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.