@zzish/math-rich-input 0.1.55 → 0.1.57

package/dist/index.js

@@ -169,6 +169,57 @@ function _arrayLikeToArray(arr, len) {
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      var F = function () {};
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var normalCompletion = true,
+    didErr = false,
+    err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -21972,6 +22023,229 @@ function plainTextOffsetToGlobalOffset(editableDiv, plainTextOffset) {
  */
 var SELECTION_MARK = MARK$1;
 
+/**
+ * Capture browser editing intent in the logical text coordinates used by MathRichInput.
+ *
+ * The component deliberately reports a measured replacement range instead of asking a host to diff the
+ * old and new strings. A host can therefore retain two equal names independently and reject a stale
+ * event before it changes protected content.
+ */
+
+var ZERO_WIDTH_SPACE = "\u200B";
+var BLOCK_TAGS = new Set(["p", "div", "section", "article", "blockquote", "pre", "li", "ul", "ol", "h1", "h2", "h3", "h4", "h5", "h6", "table", "thead", "tbody", "tfoot", "tr", "td", "th", "hr"]);
+var INERT_TAGS = new Set(["script", "style", "template", "head", "title"]);
+
+/** Return whether a node is the rendered KaTeX island that cannot be edited character by character. */
+function isMathNode(node) {
+  var _node$classList, _node$classList2;
+  return node && node.nodeType === 1 && (((_node$classList = node.classList) === null || _node$classList === void 0 ? void 0 : _node$classList.contains("katex")) || ((_node$classList2 = node.classList) === null || _node$classList2 === void 0 ? void 0 : _node$classList2.contains("katex-error")));
+}
+
+/** Return whether a tag contributes a logical line boundary to the source text. */
+function isBlock(node) {
+  if (!node || node.nodeType !== 1) return false;
+  return BLOCK_TAGS.has(node.tagName.toLowerCase());
+}
+function isInert(node) {
+  if (!node || node.nodeType !== 1) return false;
+  return INERT_TAGS.has(node.tagName.toLowerCase());
+}
+function trimZeroWidth(value) {
+  return value.split(ZERO_WIDTH_SPACE).join("");
+}
+
+/** Build the text coordinate string without reading attributes or rendered math markup. */
+function editableText(root) {
+  if (!root) return "";
+  var pieces = [];
+  var pendingBoundary = false;
+  var walk = function walk(node) {
+    if (isInert(node)) return;
+    if (isMathNode(node)) {
+      var _node$querySelector;
+      if (pendingBoundary && pieces.length && pieces[pieces.length - 1] !== "\n") pieces.push("\n");
+      var latex = ((_node$querySelector = node.querySelector) === null || _node$querySelector === void 0 || (_node$querySelector = _node$querySelector.call(node, 'annotation[encoding="application/x-tex"]')) === null || _node$querySelector === void 0 ? void 0 : _node$querySelector.textContent) || "";
+      pieces.push(latex);
+      pendingBoundary = false;
+      return;
+    }
+    if (node.nodeType === 3) {
+      var text = trimZeroWidth(node.nodeValue || "");
+      if (text && pendingBoundary && pieces.length && pieces[pieces.length - 1] !== "\n") pieces.push("\n");
+      if (text) pieces.push(text);
+      if (text) pendingBoundary = false;
+      return;
+    }
+    if (node.nodeType !== 1 && node.nodeType !== 11) return;
+    if (node.nodeType === 1 && node.tagName.toLowerCase() === "br") {
+      pieces.push("\n");
+      pendingBoundary = false;
+      return;
+    }
+    var block = isBlock(node);
+    if (block && pieces.length) pendingBoundary = true;
+    var _iterator = _createForOfIteratorHelper(node.childNodes || []),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        walk(child);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (block) pendingBoundary = true;
+  };
+  var _iterator2 = _createForOfIteratorHelper(root.childNodes || []),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var child = _step2.value;
+      walk(child);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return pieces.join("");
+}
+function textBeforeEndpoint(root, container, offset) {
+  if (!root || !container || !root.contains(container)) return null;
+  var range = document.createRange();
+  range.selectNodeContents(root);
+  try {
+    range.setEnd(container, offset);
+  } catch (_error) {
+    return null;
+  }
+  var clone = document.createElement("span");
+  clone.appendChild(range.cloneContents());
+  return editableText(clone).length;
+}
+
+/** Read a collapsed or selected DOM range in logical UTF-16 offsets. */
+function selectionOffsets(root) {
+  var _window$getSelection, _window;
+  var selection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (_window$getSelection = (_window = window).getSelection) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.call(_window);
+  if (!root || !selection || selection.rangeCount === 0) return null;
+  var range = selection.getRangeAt(0);
+  var from = textBeforeEndpoint(root, range.startContainer, range.startOffset);
+  var to = textBeforeEndpoint(root, range.endContainer, range.endOffset);
+  if (from === null || to === null) return null;
+  return from <= to ? {
+    from: from,
+    to: to
+  } : {
+    from: to,
+    to: from
+  };
+}
+function expandSurrogateBoundary(text, from, to) {
+  var before = text.charCodeAt(from - 1);
+  var after = text.charCodeAt(from);
+  if (before >= 0xd800 && before <= 0xdbff && after >= 0xdc00 && after <= 0xdfff) {
+    return {
+      from: from - 1,
+      to: Math.max(to, from + 1)
+    };
+  }
+  var at = text.charCodeAt(to - 1);
+  var next = text.charCodeAt(to);
+  if (at >= 0xd800 && at <= 0xdbff && next >= 0xdc00 && next <= 0xdfff) {
+    return {
+      from: Math.min(from, to - 1),
+      to: to + 1
+    };
+  }
+  return {
+    from: from,
+    to: to
+  };
+}
+function textFromTransfer(dataTransfer) {
+  var _dataTransfer$getData, _dataTransfer$getData2;
+  if (!dataTransfer) return "";
+  var plain = ((_dataTransfer$getData = dataTransfer.getData) === null || _dataTransfer$getData === void 0 ? void 0 : _dataTransfer$getData.call(dataTransfer, "text/plain")) || "";
+  if (plain) return plain;
+  var html = ((_dataTransfer$getData2 = dataTransfer.getData) === null || _dataTransfer$getData2 === void 0 ? void 0 : _dataTransfer$getData2.call(dataTransfer, "text/html")) || "";
+  if (!html || typeof document === "undefined") return "";
+  var probe = document.createElement("div");
+  probe.innerHTML = html;
+  return editableText(probe);
+}
+
+/**
+ * Convert a browser `beforeinput` event into an explicit replacement.
+ *
+ * A null return means the browser supplied no safe range or the operation is outside the supported text
+ * edits. The caller still emits the intent, without an edit, so a protected host can refuse it loudly.
+ */
+function transactionFromBeforeInput(root, event) {
+  var _event$data;
+  var compositionStart = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var before = editableText(root);
+  var selection = selectionOffsets(root);
+  if (!selection) return {
+    before: before,
+    intent: intentForInputType(event === null || event === void 0 ? void 0 : event.inputType),
+    edit: null
+  };
+  var inputType = (event === null || event === void 0 ? void 0 : event.inputType) || "insertText";
+  var intent = intentForInputType(inputType);
+  var from = selection.from,
+    to = selection.to;
+  var insert = (_event$data = event === null || event === void 0 ? void 0 : event.data) !== null && _event$data !== void 0 ? _event$data : "";
+  if (inputType === "insertFromPaste" || inputType === "insertFromDrop") {
+    insert = textFromTransfer(event === null || event === void 0 ? void 0 : event.dataTransfer);
+  } else if (inputType === "insertLineBreak" || inputType === "insertParagraph") {
+    insert = "\n";
+  } else if (inputType === "deleteContentBackward" && from === to) {
+    var _expandSurrogateBound = expandSurrogateBoundary(before, Math.max(0, from - 1), from);
+    from = _expandSurrogateBound.from;
+    to = _expandSurrogateBound.to;
+  } else if (inputType === "deleteContentForward" && from === to) {
+    var _expandSurrogateBound2 = expandSurrogateBoundary(before, from, Math.min(before.length, to + 1));
+    from = _expandSurrogateBound2.from;
+    to = _expandSurrogateBound2.to;
+  } else if (inputType.startsWith("delete") && from === to) {
+    return {
+      before: before,
+      intent: intent,
+      edit: null
+    };
+  }
+  var base = compositionStart && intent === "composition" ? compositionStart : {
+    before: before,
+    from: from,
+    to: to
+  };
+  return {
+    before: base.before,
+    intent: intent,
+    edit: {
+      before: base.before,
+      from: base.from,
+      to: base.to,
+      insert: insert
+    }
+  };
+}
+
+/** Give hosts a stable vocabulary while preserving the browser's native inputType for diagnostics. */
+function intentForInputType(inputType) {
+  if (!inputType) return "input";
+  if (inputType.includes("Composition")) return "composition";
+  if (inputType.includes("Paste")) return "paste";
+  if (inputType.includes("Drop")) return "drop";
+  if (inputType.includes("Cut")) return "cut";
+  if (inputType === "historyUndo") return "undo";
+  if (inputType === "historyRedo") return "redo";
+  return "input";
+}
+
 var MIME_TYPE_PLAIN_TEXT = "text/plain";
 var MIME_TYPE_HTML = "text/html";
 var MIME_TYPE_TEX = "application/x-tex";
@@ -22010,6 +22284,7 @@ var EMPTY_INLINE_FORMATTING_REG_EXP = /<(B|STRONG|I|EM|U|SUB|SUP)>(?:\s|&nbsp;|\
 // const LATEX_MARKER_END = "</annotation>"
 
 var MAX_HISTORY_LENGTH = 100;
+var CONTROLLED_VALUE_ECHO_TIMEOUT_MS = 50;
 var DEFAULT_OPTIONS = {
   useExpertMode: false,
   selectedTab: null
@@ -22177,26 +22452,49 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       var options = _this2.props.options || DEFAULT_OPTIONS;
       if (isExpertMode === null) isExpertMode = options.isExpertMode;
       if (selectedTab === null) selectedTab = options.selectedTab;
-
-      // Add this to the history
-      _this2.undoHistory.push({
+      var transaction = applyOptions.transaction || null;
+      var historyState = {
         value: value,
         mimeType: mimeType,
-        rangeParams: rangeParams
-      });
-      if (_this2.undoHistory.length > MAX_HISTORY_LENGTH) _this2.undoHistory.shift();
+        rangeParams: rangeParams,
+        transaction: 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.
+        _this2.undoHistory.push(historyState);
+        if (_this2.undoHistory.length > MAX_HISTORY_LENGTH) _this2.undoHistory.shift();
+      }
 
       // Debug what's being passed to parent
       // console.log("APPLY CHANGES:", { value, mimeType });
 
       // Call the parent handler to apply the changes
-      _this2.onChangeCallback({
+      _this2.onChangeCallback(_objectSpread2(_objectSpread2(_objectSpread2({
         value: value,
         mimeType: mimeType
-      }, {
+      }, transaction !== null && transaction !== void 0 && transaction.edit ? {
+        edit: transaction.edit
+      } : {}), transaction !== null && transaction !== void 0 && transaction.intent ? {
+        intent: transaction.intent
+      } : {}), transaction !== null && transaction !== void 0 && transaction.history ? {
+        history: transaction.history
+      } : {}), {
         isExpertMode: isExpertMode,
         selectedTab: selectedTab
       });
+      if (applyOptions.skipControlledRender === true) {
+        var 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(function () {
+          if (_this2.skipNextControlledValueRender === true && _this2.skipNextControlledValue === pendingNativeValue) {
+            _this2.skipNextControlledValueRender = false;
+            _this2.skipNextControlledValue = null;
+          }
+        }, CONTROLLED_VALUE_ECHO_TIMEOUT_MS);
+      }
       debugMathRichInput("applyChangesToComponent:after-onChange", {
         afterComponentUpdateData: _this2.afterComponentUpdateData,
         selection: getSelectionSnapshot(_this2.editableDiv)
@@ -22206,7 +22504,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       if (_this2.initialHistoryState == null) _this2.initialHistoryState = {
         value: _this2.props.value,
         mimeType: _this2.props.mimeType,
-        rangeParams: _this2._getRangeParams()
+        rangeParams: _this2._getRangeParams(),
+        transaction: null
       };
     });
     _defineProperty(_this2, "resetHistoryRedo", function () {
@@ -22225,23 +22524,60 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       return true;
     });
     _defineProperty(_this2, "undo", function () {
-      var currentState = _this2.undoHistory.pop();
-      var previousState = _this2.undoHistory.pop();
-      if (previousState === null || previousState === undefined) {
-        previousState = _this2.initialHistoryState;
-      }
-      if (_this2.redoHistory.length > 0) {
-        var redoLast = _this2.redoHistory[_this2.redoHistory.length - 1];
-        if (!_this2.deepEqual(redoLast, currentState)) _this2.redoHistory.push(currentState);
-      } else _this2.redoHistory.push(currentState);
-      _this2.applyChangesToComponent(previousState.value, previousState.mimeType, previousState.rangeParams);
+      var currentState = _this2.undoHistory[_this2.undoHistory.length - 1];
+      if (!currentState) return;
+      _this2.undoHistory.pop();
+      var previousState = _this2.undoHistory[_this2.undoHistory.length - 1] || _this2.initialHistoryState;
+      if (!previousState) return;
+      _this2.redoHistory.push(currentState);
+      var transaction = _this2.historyTransaction(currentState, "undo");
+      _this2.applyChangesToComponent(previousState.value, previousState.mimeType, previousState.rangeParams, null, null, {
+        transaction: transaction,
+        recordHistory: false
+      });
     });
     _defineProperty(_this2, "redo", function () {
       var redoState = _this2.redoHistory.pop();
-      if (redoState !== null & redoState !== undefined) {
-        _this2.applyChangesToComponent(redoState.value, redoState.mimeType, redoState.rangeParams);
+      if (redoState !== null && redoState !== undefined) {
+        _this2.applyChangesToComponent(redoState.value, redoState.mimeType, redoState.rangeParams, null, null, {
+          transaction: _this2.historyTransaction(redoState, "redo"),
+          recordHistory: false
+        });
+        _this2.undoHistory.push(redoState);
       }
     });
+    /** Build an explicit forward/inverse transaction for one history entry. */
+    _defineProperty(_this2, "historyTransaction", function (state, direction) {
+      var _original$history;
+      var original = state === null || state === void 0 ? void 0 : state.transaction;
+      if (!(original !== null && original !== void 0 && (_original$history = original.history) !== null && _original$history !== void 0 && _original$history.id) || !original.edit) {
+        return {
+          intent: direction,
+          history: original !== null && original !== void 0 && original.history ? {
+            id: original.history.id,
+            direction: direction
+          } : undefined
+        };
+      }
+      var edit = original.edit;
+      var after = edit.before.slice(0, edit.from) + edit.insert + edit.before.slice(edit.to);
+      var inverse = _objectSpread2({
+        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: direction
+        },
+        edit: direction === "undo" ? inverse : edit
+      };
+    });
     _defineProperty(_this2, "_setRangeParams", function (params) {
       try {
         debugMathRichInput("MathRichInput:_setRangeParams:start", {
@@ -22282,6 +22618,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       restore(50);
     });
     _defineProperty(_this2, "handleKeyDownBackspace", function (e) {
+      var beforeText = editableText(_this2.editableDiv);
       var rangeParams = _this2._getRangeParams();
       var start_node_index = rangeParams.startNodeIndex;
       var end_node_index = rangeParams.endNodeIndex;
@@ -22318,7 +22655,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           startGlobalOffset: 0,
           endGlobalOffset: 0
         };
-        _this2.applyChangesToComponent("", _this2.getMimeType(false, false), _new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent("", _this2.getMimeType(false, false), _new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: 0,
+              to: beforeText.length,
+              insert: ""
+            },
+            intent: "cut",
+            history: {
+              id: "mri-".concat(++_this2.historySequence),
+              direction: "forward"
+            }
+          }
+        });
         e.preventDefault();
         return;
       }
@@ -23175,6 +23526,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         // console.log("handleInput")
         if (_this2.isComposing) return;
+        var transaction = _this2.pendingTransaction;
+        _this2.pendingTransaction = null;
         debugMathRichInput("handleInput:start", {
           inputType: event && event.nativeEvent ? event.nativeEvent.inputType : null,
           data: event && event.nativeEvent ? event.nativeEvent.data : null,
@@ -23211,7 +23564,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           _raw_text = removeEncodingIfPlainText(_raw_text, _mimeType, _this2.enableHtml());
           _raw_text = _this2.stripEmptyInlineFormattingTags(_raw_text);
           _this2.applyChangesToComponent(_raw_text, _mimeType, defaultParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
-            skipControlledRender: true
+            skipControlledRender: true,
+            transaction: transaction
           });
           return;
         } else if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
@@ -23246,7 +23600,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         };
         _this2.setOldRangeParams(validParams);
         _this2.applyChangesToComponent(raw_text, mimeType, validParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
-          skipControlledRender: true
+          skipControlledRender: true,
+          transaction: transaction
         });
         debugMathRichInput("handleInput:after-apply", {
           raw_text: raw_text,
@@ -23343,6 +23698,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this2, "handlePaste", function (event) {
       try {
+        _this2.pendingTransaction = null;
         var clipboardData = event.clipboardData || window.clipboardData;
         if (!clipboardData) {
           return;
@@ -23367,6 +23723,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           console.warn("Could not get range params for paste");
           return;
         }
+        var beforePaste = editableText(_this2.editableDiv);
+        var pasteSelection = _this2.captureSelectionOffsets();
 
         // Store old range params for cursor positioning (like equation editor)
         _this2.setOldRangeParams(rangeParams);
@@ -23592,7 +23950,34 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           var cleanedRawText = removeEncodingIfPlainText(newRawText, actualMimeType, _this2.enableHtml());
 
           // Apply the change using the component's standard flow
-          _this2.applyChangesToComponent(cleanedRawText, actualMimeType, newRangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+          var insertionText = function () {
+            if (!/<[^>]+>/.test(finalText)) return finalText;
+            var probe = document.createElement("div");
+            probe.innerHTML = finalText;
+            return editableText(probe).replace(/\ufffc/g, "");
+          }();
+          var transaction = pasteSelection ? {
+            edit: {
+              before: beforePaste,
+              from: pasteSelection.from,
+              to: pasteSelection.to,
+              insert: insertionText
+            },
+            intent: "paste",
+            history: {
+              id: "mri-".concat(++_this2.historySequence),
+              direction: "forward"
+            }
+          } : {
+            intent: "paste",
+            history: {
+              id: "mri-".concat(++_this2.historySequence),
+              direction: "forward"
+            }
+          };
+          _this2.applyChangesToComponent(cleanedRawText, actualMimeType, newRangeParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
+            transaction: transaction
+          });
 
           // A paste cannot rely on being re-rendered. It removed the selected content from the DOM itself,
           // and if the host already holds the value being applied — the same words pasted back into the
@@ -23953,10 +24338,22 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           }
         }
         var rangeParams = _this2._getRangeParams();
-        var removedEmptyTags = !insertedTypingStylePlaceholder && _this2.cleanupEmptyInlineFormattingElements();
-        if (removedEmptyTags && rangeParams !== null && rangeParams !== undefined) {
+        if (!insertedTypingStylePlaceholder) _this2.cleanupEmptyInlineFormattingElements();
+        if (rangeParams !== null && rangeParams !== undefined) {
           _this2._setRangeParams(rangeParams);
-          _this2.applyCurrentEditableDomToComponent(rangeParams);
+          _this2.applyCurrentEditableDomToComponent(rangeParams, {
+            edit: {
+              before: editableText(_this2.editableDiv),
+              from: 0,
+              to: 0,
+              insert: ""
+            },
+            intent: "format",
+            history: {
+              id: "mri-".concat(++_this2.historySequence),
+              direction: "forward"
+            }
+          });
         }
         _this2.setActiveButtonsIfChanged(_this2.getActiveButtonsFromSelection(rangeParams));
         return success;
@@ -24001,6 +24398,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this2, "insertRawText", function (new_text) {
       var selectInsertedText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       try {
+        var beforeText = editableText(_this2.editableDiv);
         var rangeParams = _this2._getRangeParams();
         var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
         var offset = rangeParams.endOffset;
@@ -24032,7 +24430,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         // console.log(new_rangeParams)
 
         new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
-        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: rangeParams.startGlobalOffset,
+              to: rangeParams.endGlobalOffset,
+              insert: new_text
+            },
+            intent: "input",
+            history: {
+              id: "mri-".concat(++_this2.historySequence),
+              direction: "forward"
+            }
+          }
+        });
       } catch (error) {
         console.error(error);
       }
@@ -24160,6 +24572,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this2, "removeNewLine", function () {
       try {
+        var beforeText = editableText(_this2.editableDiv);
         var rangeParams = _this2._getRangeParams();
         var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
         var prevNode = _this2._findNodeWithIndex(rangeParams.endNodeIndex - 1);
@@ -24176,13 +24589,28 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         new_rangeParams.srartGlobalOffset--;
         new_rangeParams.endGlobalOffset--;
         new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
-        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: Math.max(0, rangeParams.endGlobalOffset - 1),
+              to: rangeParams.endGlobalOffset,
+              insert: ""
+            },
+            intent: "input",
+            history: {
+              id: "mri-".concat(++_this2.historySequence),
+              direction: "forward"
+            }
+          }
+        });
       } catch (error) {
         console.error(error);
       }
     });
     _defineProperty(_this2, "insertNewLine", function () {
       try {
+        var beforeText = editableText(_this2.editableDiv);
         var rangeParams = _this2._getRangeParams();
         var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
         var offset = rangeParams.endOffset;
@@ -24218,13 +24646,28 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         // console.log("New range params after line insert")
         // console.log(new_rangeParams)
 
-        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: rangeParams.startGlobalOffset,
+              to: rangeParams.endGlobalOffset,
+              insert: "\n"
+            },
+            intent: "input",
+            history: {
+              id: "mri-".concat(++_this2.historySequence),
+              direction: "forward"
+            }
+          }
+        });
       } catch (error) {
         console.error(error);
       }
     });
     _defineProperty(_this2, "insertAccentLetter", function (event, old_char, new_char) {
       try {
+        var beforeText = editableText(_this2.editableDiv);
         var rangeParams = _this2._getRangeParams();
         var node = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
         var offset = rangeParams.startOffset;
@@ -24248,7 +24691,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           new_rangeParams = _objectSpread2({}, rangeParams);
         }
         new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
-        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.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-".concat(++_this2.historySequence),
+              direction: "forward"
+            }
+          }
+        });
       } catch (error) {
         console.error(error);
       }
@@ -24356,10 +24813,66 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this2, "handleCompositionStart", function (event) {
+      var _offsets$from, _offsets$to;
+      var offsets = _this2.captureSelectionOffsets();
+      _this2.compositionStart = {
+        before: editableText(_this2.editableDiv),
+        from: (_offsets$from = offsets === null || offsets === void 0 ? void 0 : offsets.from) !== null && _offsets$from !== void 0 ? _offsets$from : 0,
+        to: (_offsets$to = offsets === null || offsets === void 0 ? void 0 : offsets.to) !== null && _offsets$to !== void 0 ? _offsets$to : 0
+      };
       _this2.isComposing = true;
     });
     _defineProperty(_this2, "handleCompositionEnd", function (event) {
       _this2.isComposing = false;
+      _this2.compositionStart = null;
+    });
+    _defineProperty(_this2, "captureSelectionOffsets", function () {
+      try {
+        var selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) return null;
+        var range = selection.getRangeAt(0);
+        var before = editableText(_this2.editableDiv);
+        var endpoint = function endpoint(container, offset) {
+          var probe = document.createRange();
+          probe.selectNodeContents(_this2.editableDiv);
+          probe.setEnd(container, offset);
+          var wrapper = document.createElement("span");
+          wrapper.appendChild(probe.cloneContents());
+          return editableText(wrapper).length;
+        };
+        var from = endpoint(range.startContainer, range.startOffset);
+        var to = endpoint(range.endContainer, range.endOffset);
+        return {
+          before: 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. */
+    _defineProperty(_this2, "handleBeforeInput", function (event) {
+      try {
+        var captured = transactionFromBeforeInput(_this2.editableDiv, event, _this2.compositionStart ? {
+          before: _this2.compositionStart.before,
+          from: _this2.compositionStart.from,
+          to: _this2.compositionStart.to
+        } : null);
+        var id = "mri-".concat(++_this2.historySequence);
+        _this2.pendingTransaction = {
+          edit: captured.edit || undefined,
+          intent: captured.intent,
+          history: {
+            id: id,
+            direction: "forward"
+          }
+        };
+      } catch (_error) {
+        _this2.pendingTransaction = {
+          intent: "programmatic"
+        };
+      }
     });
     // Comprehensive LaTeX pattern detection and auto-wrapping in math tags
     // Comprehensive LaTeX pattern detection for paste auto-wrapping
@@ -24505,6 +25018,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _this2.initialHistoryState = null;
     _this2.undoHistory = [];
     _this2.redoHistory = [];
+    _this2.historySequence = 0;
+    _this2.pendingTransaction = null;
+    _this2.compositionStart = null;
     _this2.accent = "";
 
     // keeps track of whether user is composing in an IME - see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
@@ -24685,7 +25201,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     value: function getEditableHtmlForRender(html) {
       var currentRawText = this.editableDiv ? this.getCurrentRawTextForProps(this.props) : null;
       var liveEditableHtml = this.editableDiv ? this.editableDiv.innerHTML : null;
-      var canPreserveNativeDom = this.state.hasFocus === true && this.editableDiv !== null && this.editableDiv !== undefined && (this.afterComponentUpdateData === null || this.afterComponentUpdateData === undefined) && this.lastRenderedEditableHtml !== null && currentRawText === this.props.value;
+      var pendingNativeInputMatchesLiveDom = this.skipNextControlledValueRender === true && currentRawText === this.skipNextControlledValue;
+      var canPreserveNativeDom = this.state.hasFocus === true && this.editableDiv !== null && this.editableDiv !== undefined && (this.afterComponentUpdateData === null || this.afterComponentUpdateData === undefined) && this.lastRenderedEditableHtml !== null && (currentRawText === this.props.value || pendingNativeInputMatchesLiveDom);
       var preserveRangeParams = canPreserveNativeDom ? this.getRangeParamsPreservingInlinePlaceholder() : null;
       debugMathRichInput("render:editable-html", {
         canPreserveNativeDom: canPreserveNativeDom,
@@ -24696,6 +25213,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         liveEditableHtml: liveEditableHtml,
         lastRenderedEditableHtml: this.lastRenderedEditableHtml,
         currentRawText: currentRawText,
+        pendingNativeInputMatchesLiveDom: pendingNativeInputMatchesLiveDom,
         preserveRangeParams: preserveRangeParams,
         afterComponentUpdateData: this.afterComponentUpdateData,
         hasFocus: this.state.hasFocus,
@@ -24939,7 +25457,19 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       var 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-".concat(++this.historySequence),
+            direction: "forward"
+          }
+        });
       }
       debugMathRichInput("moveTrailingWhitespaceOutsideInlineStyle:after", {
         style: style,
@@ -24955,6 +25485,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "applyCurrentEditableDomToComponent",
     value: function applyCurrentEditableDomToComponent() {
       var rangeParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var transaction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       if (!this.editableDiv) return;
       if (rangeParams === null || rangeParams === undefined) {
         rangeParams = this._getRangeParams();
@@ -24969,7 +25500,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       rawText = removeEncodingIfPlainText(rawText, mimeType, this.enableHtml());
       rawText = this.stripEmptyInlineFormattingTags(rawText);
       this.applyChangesToComponent(rawText, mimeType, rangeParams, this.props.useExpertMode, this.props.selectedTab, {
-        skipControlledRender: true
+        skipControlledRender: true,
+        transaction: transaction
       });
     }
   }, {
@@ -25020,6 +25552,7 @@ var MathRichInput = /*#__PURE__*/function (_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();
@@ -25033,6 +25566,7 @@ var MathRichInput = /*#__PURE__*/function (_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) {
@@ -25043,18 +25577,29 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
       if (this.skipNextControlledValueRender === true) {
-        var canSkip = nextProps.value === this.skipNextControlledValue && nextState === this.state;
+        var controlledValueArrived = nextProps.value === this.skipNextControlledValue;
+        var canSkip = controlledValueArrived && nextState === this.state;
         debugMathRichInput("shouldComponentUpdate:native-input-gate", {
           canSkip: canSkip,
           nextValue: nextProps.value,
           skipNextControlledValue: this.skipNextControlledValue,
+          controlledValueArrived: 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;
       }
       if (this.shouldSkipRedundantFocusedRender(nextProps, nextState)) {
@@ -25201,6 +25746,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         if (rangeParams === null || rangeParams === undefined) rangeParams = this._getRangeParams();
         if (rangeParams.startOffset !== 0) console.warn("Unexpected startOffset " + rangeParams.startOffset + " in insertAfterSmallSpace");
+        var beforeText = editableText(this.editableDiv);
         var node = this._findNodeWithIndex(rangeParams.startNodeIndex);
         if (node === null || node === undefined || node.nodeValue === null) {
           console.warn("Could not find small-space text node");
@@ -25225,7 +25771,20 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var new_raw_text = elementToMarkedRawText(this.editableDiv, null, 0, this.enableHtml());
         new_raw_text = removeEncodingIfPlainText(new_raw_text, this.props.mimeType, this.enableHtml());
         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-".concat(++this.historySequence),
+              direction: "forward"
+            }
+          }
         });
       } catch (error) {
         console.error(error);