@pie-lib/math-input-mathlive 1.0.9-next.6637 → 1.0.10

package/src/mf/input.jsx

@@ -2,7 +2,7 @@ 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 } from '../mathlive-instance';
 import { toMathLive, fromMathLive, keyToAction, KEYSTROKES } from '../latex-bridge';
 
 const log = debug('pie-lib:math-input-mathlive:input');
@@ -49,9 +49,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 +71,22 @@ 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;
+
+    // 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);
 
     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 +113,10 @@ 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.mathField) {
       this.mathField.removeEventListener('input', this.onInputEdit);
       this.mathField.remove();

package/src/mf/static.jsx

@@ -2,7 +2,7 @@ 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 } from '../mathlive-instance';
 import { toMathLive, fromMathLive, fieldIds } from '../latex-bridge';
 import { placeholderStyles } from './common-styles';
 
@@ -64,28 +64,45 @@ 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;
     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);
+
     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 +120,9 @@ export default class Static extends React.Component {
   }
 
   componentWillUnmount() {
+    // Invalidate any mount still awaiting the MathLive load.
+    this.mountGeneration = (this.mountGeneration || 0) + 1;
+
     if (this.mathField) {
       this.mathField.removeEventListener('input', this.onPromptInput);
       this.mathField.removeEventListener('focusin', this.onPromptFocus);

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.