@zzish/math-rich-input 0.1.55 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -13,10 +13,11 @@
   },
   "main": "dist/index.js",
   "scripts": {
+    "test": "playwright test tests/caret-regression.spec.js --workers=1",
     "build": "rollup --config && webpack --config webpack.standalone.config.js",
     "build:legacy": "rollup --config",
     "build:standalone": "webpack --config webpack.standalone.config.js",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm test && npm run build"
   },
   "dependencies": {
     "katex": "^0.12.0",
@@ -36,6 +37,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/register": "^7.13.8",
+    "@playwright/test": "^1.62.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",

package/src/MathRichInput.jsx

@@ -39,6 +39,10 @@ import {
   debugMathRichInput,
   getSelectionSnapshot,
 } from "./mathRichInputDebug";
+import {
+  editableText,
+  transactionFromBeforeInput,
+} from "./editTransaction";
 
 import "./MathRichInput.css";
 import AccentBar from "./AccentBar";
@@ -84,6 +88,7 @@ const EMPTY_INLINE_FORMATTING_REG_EXP =
 // const LATEX_MARKER_END = "</annotation>"
 
 const MAX_HISTORY_LENGTH = 100;
+const CONTROLLED_VALUE_ECHO_TIMEOUT_MS = 50;
 
 const DEFAULT_OPTIONS = {
   useExpertMode: false,
@@ -244,6 +249,9 @@ export default class MathRichInput extends React.Component {
     this.initialHistoryState = null;
     this.undoHistory = [];
     this.redoHistory = [];
+    this.historySequence = 0;
+    this.pendingTransaction = null;
+    this.compositionStart = null;
     this.accent = "";
 
     // keeps track of whether user is composing in an IME - see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
@@ -358,15 +366,44 @@ export default class MathRichInput extends React.Component {
     if (isExpertMode === null) isExpertMode = options.isExpertMode;
     if (selectedTab === null) selectedTab = options.selectedTab;
 
-    // Add this to the history
-    this.undoHistory.push({ value, mimeType, rangeParams });
-    if (this.undoHistory.length > MAX_HISTORY_LENGTH) this.undoHistory.shift();
+    const transaction = applyOptions.transaction || null;
+    const historyState = { value, mimeType, rangeParams, transaction };
+    if (applyOptions.recordHistory !== false) {
+      // Add this to the history. The transaction is retained beside the rendered value so a host can
+      // restore annotation snapshots on undo/redo instead of interpreting an inverse spelling anew.
+      this.undoHistory.push(historyState);
+      if (this.undoHistory.length > MAX_HISTORY_LENGTH) this.undoHistory.shift();
+    }
 
     // Debug what's being passed to parent
     // console.log("APPLY CHANGES:", { value, mimeType });
 
     // Call the parent handler to apply the changes
-    this.onChangeCallback({ value, mimeType }, { isExpertMode, selectedTab });
+    this.onChangeCallback(
+      {
+        value,
+        mimeType,
+        ...(transaction?.edit ? { edit: transaction.edit } : {}),
+        ...(transaction?.intent ? { intent: transaction.intent } : {}),
+        ...(transaction?.history ? { history: transaction.history } : {}),
+      },
+      { isExpertMode, selectedTab }
+    );
+    if (applyOptions.skipControlledRender === true) {
+      const pendingNativeValue = value;
+      // Give a scheduled controlled echo one short render window. If the host
+      // never echoes the value, release the gate rather than preserving a
+      // rejected native edit indefinitely.
+      setTimeout(() => {
+        if (
+          this.skipNextControlledValueRender === true &&
+          this.skipNextControlledValue === pendingNativeValue
+        ) {
+          this.skipNextControlledValueRender = false;
+          this.skipNextControlledValue = null;
+        }
+      }, CONTROLLED_VALUE_ECHO_TIMEOUT_MS);
+    }
     debugMathRichInput("applyChangesToComponent:after-onChange", {
       afterComponentUpdateData: this.afterComponentUpdateData,
       selection: getSelectionSnapshot(this.editableDiv),
@@ -379,6 +416,7 @@ export default class MathRichInput extends React.Component {
         value: this.props.value,
         mimeType: this.props.mimeType,
         rangeParams: this._getRangeParams(),
+        transaction: null,
       };
   };
 
@@ -409,37 +447,62 @@ export default class MathRichInput extends React.Component {
   };
 
   undo = () => {
-    const currentState = this.undoHistory.pop();
-
-    let previousState = this.undoHistory.pop();
-    if (previousState === null || previousState === undefined) {
-      previousState = this.initialHistoryState;
-    }
+    const currentState = this.undoHistory[this.undoHistory.length - 1];
+    if (!currentState) return;
+		this.undoHistory.pop();
 
-    if (this.redoHistory.length > 0) {
-      let redoLast = this.redoHistory[this.redoHistory.length - 1];
-      if (!this.deepEqual(redoLast, currentState))
-        this.redoHistory.push(currentState);
-    } else this.redoHistory.push(currentState);
+		const previousState = this.undoHistory[this.undoHistory.length - 1] || this.initialHistoryState;
+    if (!previousState) return;
+		this.redoHistory.push(currentState);
 
+    const transaction = this.historyTransaction(currentState, "undo");
     this.applyChangesToComponent(
       previousState.value,
       previousState.mimeType,
-      previousState.rangeParams
+      previousState.rangeParams,
+      null,
+      null,
+      { transaction, recordHistory: false }
     );
   };
 
   redo = () => {
     const redoState = this.redoHistory.pop();
-    if ((redoState !== null) & (redoState !== undefined)) {
+    if (redoState !== null && redoState !== undefined) {
       this.applyChangesToComponent(
         redoState.value,
         redoState.mimeType,
-        redoState.rangeParams
+        redoState.rangeParams,
+        null,
+        null,
+        { transaction: this.historyTransaction(redoState, "redo"), recordHistory: false }
       );
+			this.undoHistory.push(redoState);
     }
   };
 
+  /** Build an explicit forward/inverse transaction for one history entry. */
+  historyTransaction = (state, direction) => {
+    const original = state?.transaction;
+    if (!original?.history?.id || !original.edit) {
+      return { intent: direction, history: original?.history ? { id: original.history.id, direction } : undefined };
+    }
+    const edit = original.edit;
+    const after = edit.before.slice(0, edit.from) + edit.insert + edit.before.slice(edit.to);
+    const inverse = {
+      before: after,
+      from: edit.from,
+      to: edit.from + edit.insert.length,
+      insert: edit.before.slice(edit.from, edit.to),
+      ...(edit.boundary ? { boundary: edit.boundary } : {}),
+    };
+    return {
+      intent: direction,
+      history: { id: original.history.id, direction },
+      edit: direction === "undo" ? inverse : edit,
+    };
+  };
+
   setOldRangeParams(params) {
     this.oldRangeParams = params;
   }
@@ -587,6 +650,9 @@ export default class MathRichInput extends React.Component {
       ? this.getCurrentRawTextForProps(this.props)
       : null;
     const liveEditableHtml = this.editableDiv ? this.editableDiv.innerHTML : null;
+    const pendingNativeInputMatchesLiveDom =
+      this.skipNextControlledValueRender === true &&
+      currentRawText === this.skipNextControlledValue;
     const canPreserveNativeDom =
       this.state.hasFocus === true &&
       this.editableDiv !== null &&
@@ -594,7 +660,7 @@ export default class MathRichInput extends React.Component {
       (this.afterComponentUpdateData === null ||
         this.afterComponentUpdateData === undefined) &&
       this.lastRenderedEditableHtml !== null &&
-      currentRawText === this.props.value;
+      (currentRawText === this.props.value || pendingNativeInputMatchesLiveDom);
     const preserveRangeParams = canPreserveNativeDom
       ? this.getRangeParamsPreservingInlinePlaceholder()
       : null;
@@ -609,6 +675,7 @@ export default class MathRichInput extends React.Component {
       liveEditableHtml,
       lastRenderedEditableHtml: this.lastRenderedEditableHtml,
       currentRawText,
+      pendingNativeInputMatchesLiveDom,
       preserveRangeParams,
       afterComponentUpdateData: this.afterComponentUpdateData,
       hasFocus: this.state.hasFocus,
@@ -893,7 +960,11 @@ export default class MathRichInput extends React.Component {
     const rangeParams = this._getRangeParams();
     if (rangeParams) {
       this.setOldRangeParams(rangeParams);
-      this.applyCurrentEditableDomToComponent(rangeParams);
+      this.applyCurrentEditableDomToComponent(rangeParams, {
+        edit: { before: editableText(this.editableDiv), from: 0, to: 0, insert: "" },
+        intent: "format",
+        history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+      });
     }
 
     debugMathRichInput("moveTrailingWhitespaceOutsideInlineStyle:after", {
@@ -907,7 +978,7 @@ export default class MathRichInput extends React.Component {
     return true;
   }
 
-  applyCurrentEditableDomToComponent(rangeParams = null) {
+  applyCurrentEditableDomToComponent(rangeParams = null, transaction = null) {
     if (!this.editableDiv) return;
     if (rangeParams === null || rangeParams === undefined) {
       rangeParams = this._getRangeParams();
@@ -940,7 +1011,7 @@ export default class MathRichInput extends React.Component {
       rangeParams,
       this.props.useExpertMode,
       this.props.selectedTab,
-      { skipControlledRender: true }
+      { skipControlledRender: true, transaction }
     );
   }
 
@@ -1008,6 +1079,7 @@ export default class MathRichInput extends React.Component {
   }
 
   handleKeyDownBackspace = (e) => {
+    const beforeText = editableText(this.editableDiv);
     let rangeParams = this._getRangeParams();
     let start_node_index = rangeParams.startNodeIndex;
     let end_node_index = rangeParams.endNodeIndex;
@@ -1062,7 +1134,14 @@ export default class MathRichInput extends React.Component {
         this.getMimeType(false, false),
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: { before: beforeText, from: 0, to: beforeText.length, insert: "" },
+            intent: "cut",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
       e.preventDefault();
       return;
@@ -2122,6 +2201,9 @@ export default class MathRichInput extends React.Component {
       // console.log("handleInput")
       if (this.isComposing) return;
 
+      const transaction = this.pendingTransaction;
+      this.pendingTransaction = null;
+
       debugMathRichInput("handleInput:start", {
         inputType: event && event.nativeEvent ? event.nativeEvent.inputType : null,
         data: event && event.nativeEvent ? event.nativeEvent.data : null,
@@ -2182,7 +2264,7 @@ export default class MathRichInput extends React.Component {
           defaultParams,
           this.props.useExpertMode,
           this.props.selectedTab,
-          { skipControlledRender: true }
+          { skipControlledRender: true, transaction }
         );
         return;
       } else if (
@@ -2232,7 +2314,7 @@ export default class MathRichInput extends React.Component {
         validParams,
         this.props.useExpertMode,
         this.props.selectedTab,
-        { skipControlledRender: true }
+        { skipControlledRender: true, transaction }
       );
       debugMathRichInput("handleInput:after-apply", {
         raw_text,
@@ -2330,6 +2412,7 @@ export default class MathRichInput extends React.Component {
 
   handlePaste = (event) => {
     try {
+      this.pendingTransaction = null;
       let clipboardData = event.clipboardData || window.clipboardData;
       if (!clipboardData) {
         return;
@@ -2355,6 +2438,8 @@ export default class MathRichInput extends React.Component {
         console.warn("Could not get range params for paste");
         return;
       }
+      const beforePaste = editableText(this.editableDiv);
+      const pasteSelection = this.captureSelectionOffsets();
 
       // Store old range params for cursor positioning (like equation editor)
       this.setOldRangeParams(rangeParams);
@@ -2627,12 +2712,32 @@ export default class MathRichInput extends React.Component {
         );
 
         // Apply the change using the component's standard flow
+        const insertionText = (() => {
+          if (!/<[^>]+>/.test(finalText)) return finalText;
+          const probe = document.createElement("div");
+          probe.innerHTML = finalText;
+          return editableText(probe).replace(/\ufffc/g, "");
+        })();
+        const transaction = pasteSelection
+          ? {
+              edit: {
+                before: beforePaste,
+                from: pasteSelection.from,
+                to: pasteSelection.to,
+                insert: insertionText,
+              },
+              intent: "paste",
+              history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+            }
+          : { intent: "paste", history: { id: `mri-${++this.historySequence}`, direction: "forward" } };
+
         this.applyChangesToComponent(
           cleanedRawText,
           actualMimeType,
           newRangeParams,
           this.props.useExpertMode,
-          this.props.selectedTab
+          this.props.selectedTab,
+          { transaction }
         );
 
         // A paste cannot rely on being re-rendered. It removed the selected content from the DOM itself,
@@ -2673,6 +2778,7 @@ export default class MathRichInput extends React.Component {
 
       this.editableDiv.addEventListener("keydown", this.handleKeyDown);
       this.editableDiv.addEventListener("keyup", this.handleKeyUp);
+      this.editableDiv.addEventListener("beforeinput", this.handleBeforeInput);
       this.editableDiv.addEventListener("paste", this.handlePaste);
       this.editableDiv.addEventListener("copy", this.handleCopy);
       if (this.props.autofocus === true) this.editableDiv.focus();
@@ -2685,6 +2791,7 @@ export default class MathRichInput extends React.Component {
     try {
       this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
       this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
+      this.editableDiv.removeEventListener("beforeinput", this.handleBeforeInput);
       this.editableDiv.removeEventListener("paste", this.handlePaste);
       this.editableDiv.removeEventListener("copy", this.handleCopy);
     } catch (error) {
@@ -2694,22 +2801,32 @@ export default class MathRichInput extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     if (this.skipNextControlledValueRender === true) {
+      const controlledValueArrived =
+        nextProps.value === this.skipNextControlledValue;
       const canSkip =
-        nextProps.value === this.skipNextControlledValue &&
-        nextState === this.state;
+        controlledValueArrived && nextState === this.state;
 
       debugMathRichInput("shouldComponentUpdate:native-input-gate", {
         canSkip,
         nextValue: nextProps.value,
         skipNextControlledValue: this.skipNextControlledValue,
+        controlledValueArrived,
         currentPropsValue: this.props.value,
         stateChanged: nextState !== this.state,
         innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
         selection: getSelectionSnapshot(this.editableDiv),
       });
 
-      this.skipNextControlledValueRender = false;
-      this.skipNextControlledValue = null;
+      // A controlled host may commit an unrelated render before it echoes the
+      // value from this native input event. Keep the gate armed through that
+      // stale render so getEditableHtmlForRender can preserve the browser DOM
+      // and its selection. The time-bounded fallback armed by
+      // applyChangesToComponent keeps a host that rejects the value from
+      // leaving the gate armed indefinitely.
+      if (controlledValueArrived) {
+        this.skipNextControlledValueRender = false;
+        this.skipNextControlledValue = null;
+      }
 
       if (canSkip) return false;
     }
@@ -3280,12 +3397,19 @@ export default class MathRichInput extends React.Component {
       }
 
       const rangeParams = this._getRangeParams();
-      const removedEmptyTags =
-        !insertedTypingStylePlaceholder &&
-        this.cleanupEmptyInlineFormattingElements();
-      if (removedEmptyTags && rangeParams !== null && rangeParams !== undefined) {
+      if (!insertedTypingStylePlaceholder) this.cleanupEmptyInlineFormattingElements();
+      if (rangeParams !== null && rangeParams !== undefined) {
         this._setRangeParams(rangeParams);
-        this.applyCurrentEditableDomToComponent(rangeParams);
+        this.applyCurrentEditableDomToComponent(rangeParams, {
+          edit: {
+            before: editableText(this.editableDiv),
+            from: 0,
+            to: 0,
+            insert: "",
+          },
+          intent: "format",
+          history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+        });
       }
       this.setActiveButtonsIfChanged(
         this.getActiveButtonsFromSelection(rangeParams)
@@ -3341,6 +3465,7 @@ export default class MathRichInput extends React.Component {
 
   insertRawText = (new_text, selectInsertedText = false) => {
     try {
+      const beforeText = editableText(this.editableDiv);
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
       let offset = rangeParams.endOffset;
@@ -3392,7 +3517,19 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: rangeParams.startGlobalOffset,
+              to: rangeParams.endGlobalOffset,
+              insert: new_text,
+            },
+            intent: "input",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
     } catch (error) {
       console.error(error);
@@ -3547,6 +3684,7 @@ export default class MathRichInput extends React.Component {
 
   removeNewLine = () => {
     try {
+      const beforeText = editableText(this.editableDiv);
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
       let prevNode = this._findNodeWithIndex(rangeParams.endNodeIndex - 1);
@@ -3583,7 +3721,19 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: Math.max(0, rangeParams.endGlobalOffset - 1),
+              to: rangeParams.endGlobalOffset,
+              insert: "",
+            },
+            intent: "input",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
     } catch (error) {
       console.error(error);
@@ -3592,6 +3742,7 @@ export default class MathRichInput extends React.Component {
 
   insertNewLine = () => {
     try {
+      const beforeText = editableText(this.editableDiv);
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
       let offset = rangeParams.endOffset;
@@ -3648,14 +3799,26 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: rangeParams.startGlobalOffset,
+              to: rangeParams.endGlobalOffset,
+              insert: "\n",
+            },
+            intent: "input",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
     } catch (error) {
       console.error(error);
     }
   };
 
-	  insertAfterSmallSpace(new_char, rangeParams) {
+	insertAfterSmallSpace(new_char, rangeParams) {
 	    try {
 	      if (rangeParams === null || rangeParams === undefined)
 	        rangeParams = this._getRangeParams();
@@ -3667,6 +3830,7 @@ export default class MathRichInput extends React.Component {
             " in insertAfterSmallSpace"
         );
 
+	      const beforeText = editableText(this.editableDiv);
 	      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
 	      if (node === null || node === undefined || node.nodeValue === null) {
 	        console.warn("Could not find small-space text node");
@@ -3706,14 +3870,21 @@ export default class MathRichInput extends React.Component {
         this.enableHtml()
       );
 
-      this.applyChangesToComponent(
+	      this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,
 	        new_rangeParams,
 	        this.props.useExpertMode,
 	        this.props.selectedTab,
-	        { skipControlledRender: true }
-	      );
+	        {
+	          skipControlledRender: true,
+	          transaction: {
+	            edit: { before: beforeText, from: rangeParams.startGlobalOffset, to: rangeParams.startGlobalOffset, insert: new_char },
+	            intent: "input",
+	            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+	          },
+	        }
+      );
 	    } catch (error) {
 	      console.error(error);
     }
@@ -3721,6 +3892,7 @@ export default class MathRichInput extends React.Component {
 
   insertAccentLetter = (event, old_char, new_char) => {
     try {
+      const beforeText = editableText(this.editableDiv);
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
       let offset = rangeParams.startOffset;
@@ -3767,7 +3939,19 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: old_char === null ? rangeParams.startGlobalOffset : Math.max(0, rangeParams.startGlobalOffset - 1),
+              to: old_char === null ? rangeParams.startGlobalOffset : rangeParams.startGlobalOffset,
+              insert: new_char,
+            },
+            intent: "input",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
     } catch (error) {
       console.error(error);
@@ -3883,11 +4067,63 @@ export default class MathRichInput extends React.Component {
   };
 
   handleCompositionStart = (event) => {
+    const offsets = this.captureSelectionOffsets();
+    this.compositionStart = {
+      before: editableText(this.editableDiv),
+      from: offsets?.from ?? 0,
+      to: offsets?.to ?? 0,
+    };
     this.isComposing = true;
   };
 
   handleCompositionEnd = (event) => {
     this.isComposing = false;
+    this.compositionStart = null;
+  };
+
+  captureSelectionOffsets = () => {
+    try {
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return null;
+      const range = selection.getRangeAt(0);
+      const before = editableText(this.editableDiv);
+      const endpoint = (container, offset) => {
+        const probe = document.createRange();
+        probe.selectNodeContents(this.editableDiv);
+        probe.setEnd(container, offset);
+        const wrapper = document.createElement("span");
+        wrapper.appendChild(probe.cloneContents());
+        return editableText(wrapper).length;
+      };
+      const from = endpoint(range.startContainer, range.startOffset);
+      const to = endpoint(range.endContainer, range.endOffset);
+      return { before, from: Math.min(from, to), to: Math.max(from, to) };
+    } catch (_error) {
+      return null;
+    }
+  };
+
+  /** Capture an input intent before the browser mutates the contenteditable DOM. */
+  handleBeforeInput = (event) => {
+    try {
+      const captured = transactionFromBeforeInput(
+        this.editableDiv,
+        event,
+        this.compositionStart
+          ? { before: this.compositionStart.before, from: this.compositionStart.from, to: this.compositionStart.to }
+          : null
+      );
+      const id = `mri-${++this.historySequence}`;
+      this.pendingTransaction = {
+        edit: captured.edit || undefined,
+        intent: captured.intent,
+        history: { id, direction: "forward" },
+      };
+    } catch (_error) {
+      this.pendingTransaction = {
+        intent: "programmatic",
+      };
+    }
   };
 
   // Comprehensive LaTeX pattern detection and auto-wrapping in math tags