@zzish/math-rich-input 0.1.56 → 0.1.58

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 : {};
 
@@ -18835,7 +18886,7 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, EquationEditor);
     _this = _callSuper(this, EquationEditor, [props]);
     _defineProperty(_this, "handleInsert", function () {
-      _this.handleInsertCallback(_this.state.latex);
+      _this.handleInsertCallback(_this.latexForInsert());
     });
     _defineProperty(_this, "handleCancel", function () {
       _this.handleCancelCallback();
@@ -18848,8 +18899,14 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "handleKeyDown", function (e) {
       try {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          _this.handleCancelCallback();
+          return;
+        }
         if (!_this.props.useExpertMode && e.key === "Enter") {
-          _this.handleInsertCallback(_this.state.latex);
+          _this.handleInsertCallback(_this.latexForInsert());
           e.preventDefault();
         }
       } catch (error) {
@@ -19022,12 +19079,35 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
       recentSymbolsCount: 0
     };
     _this.mathQuill = null;
+    // MathQuill's own spelling of the formula the editor was opened with, read once when it mounts.
+    _this.openedLatexInMathQuill = null;
     _this.handleInsertCallback = props.handleInsert;
     _this.handleCancelCallback = props.handleCancel;
     return _this;
   }
+
+  /**
+   * The latex Insert hands back.
+   *
+   * Opening a formula makes MathQuill rewrite it in its own spelling (`\frac12` becomes `\frac{1}{2}`,
+   * `\int` gains empty limits, `\,` is dropped), and that rewrite reaches state through an edit event
+   * although nobody typed. While the content is still exactly that rewrite, or the original, the formula
+   * has not been edited, so the original goes back and the host sees no change it did not make.
+   */
   _inherits(EquationEditor, _React$Component);
   return _createClass(EquationEditor, [{
+    key: "latexForInsert",
+    value: function latexForInsert() {
+      var latex = this.state.latex;
+      var opened = this.props.latex || "";
+      if (opened === "") return latex;
+      if (latex === opened) return opened;
+      if (this.openedLatexInMathQuill !== null && latex === this.openedLatexInMathQuill) {
+        return opened;
+      }
+      return latex;
+    }
+  }, {
     key: "prettifyLatex",
     value: function prettifyLatex(latex) {
       // NB:  replaceAll not suported on safari
@@ -19109,6 +19189,12 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
     key: "mathquillDidMount",
     value: function mathquillDidMount(mathQuill) {
       this.mathQuill = mathQuill;
+      // Only the first mount, and only while the content is still the formula the editor was opened
+      // with: a later mount (after switching modes) may hold the user's own edit, which must never be
+      // mistaken for the untouched formula.
+      if (this.openedLatexInMathQuill === null && this.state.latex === (this.props.latex || "")) {
+        this.openedLatexInMathQuill = mathQuill.latex();
+      }
     }
   }, {
     key: "componentDidMount",
@@ -19215,8 +19301,11 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "centerBox"
       }, /*#__PURE__*/React__default["default"].createElement(reactMathquill.EditableMathField, {
-        className: "editable",
-        latex: this.state.latex,
+        className: "editable"
+        // MathQuill rejects TeX's thin-space command and clears the whole formula.
+        // Keep the original latex in state; only adapt spacing for its visual parser.
+        ,
+        latex: this.state.latex.replace(/\\,/g, " "),
         placeholder: "Type equation ..",
         config: {
           autoOperatorNames: AUTO_OPERATOR_NAMES
@@ -19298,6 +19387,9 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
 }(React__default["default"].Component);
 
 var GLOBAL_lastSelectedExpertMode = false;
+
+// Anything a host may use as a modal dialog.
+var DIALOG_SELECTOR = '[role="dialog"], [role="alertdialog"], [aria-modal="true"], dialog[open]';
 var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
   function EquationEditorModal(props) {
     var _this;
@@ -19307,9 +19399,80 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
       _this.handleInsertCallback(latex);
     });
     _defineProperty(_this, "handleClose", function () {
+      var _this$origin;
+      if (_this.closing) return;
+      _this.closing = true;
+      if ((_this$origin = _this.origin) !== null && _this$origin !== void 0 && _this$origin.isConnected) {
+        _this.origin.focus({
+          preventScroll: true
+        });
+        if (_this.originRange && _this.origin.contains(_this.originRange.commonAncestorContainer)) {
+          var selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(_this.originRange);
+        }
+      }
       _this.handleCloseCallback();
     });
+    _defineProperty(_this, "handleKeyDown", function (event) {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      _this.handleClose();
+    });
+    /**
+     * The dialog's own keyboard boundary.
+     *
+     * The modal is a portal into document.body, so focus can leave it: a Tab from the last control reaches
+     * whatever the host page has behind the overlay, and an Escape pressed out there never comes back here
+     * (the handler above only sees events that bubble through the dialog). The capture listener keeps both
+     * inside the dialog for as long as it is mounted: Tab wraps, Escape closes, and the originating field and
+     * range are restored by handleClose.
+     */
+    _defineProperty(_this, "handleDocumentKeyDown", function (event) {
+      if (_this.closing || !_this.mounted) return;
+      // A dialog the host opened or revealed over this one owns its own keyboard: Tab stays in it and Escape
+      // closes it, not this editor. The host's modal around the field is beneath this editor and does not count.
+      if (_this.focusIsInLaterDialog()) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        _this.handleClose();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      var root = _this.modalDiv;
+      if (!root) return;
+      var focusable = _toConsumableArray(root.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]')).filter(function (element) {
+        var _element$checkVisibil, _element$checkVisibil2;
+        return (_element$checkVisibil = (_element$checkVisibil2 = element.checkVisibility) === null || _element$checkVisibil2 === void 0 ? void 0 : _element$checkVisibil2.call(element)) !== null && _element$checkVisibil !== void 0 ? _element$checkVisibil : true;
+      });
+      if (focusable.length === 0) return;
+      var first = focusable[0],
+        last = focusable[focusable.length - 1];
+      var active = document.activeElement;
+      var inside = root.contains(active);
+      if (!inside) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus({
+          preventScroll: true
+        });
+        return;
+      }
+      if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus({
+          preventScroll: true
+        });
+      } else if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus({
+          preventScroll: true
+        });
+      }
+    });
     _defineProperty(_this, "focusEquationEditor", function () {
+      if (!_this.mounted || _this.closing) return;
       console.log("🔍 Focusing equation editor...");
       if (_this.equationEditor) {
         console.log("🔍 EquationEditor ref found");
@@ -19364,15 +19527,36 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
   }
   _inherits(EquationEditorModal, _React$Component);
   return _createClass(EquationEditorModal, [{
+    key: "focusIsInLaterDialog",
+    value: function focusIsInLaterDialog() {
+      var active = document.activeElement;
+      if (!active || !active.closest || !this.modalDiv) return false;
+      var dialog = active.closest(DIALOG_SELECTOR);
+      if (!dialog || dialog === this.modalDiv || this.modalDiv.contains(dialog)) return false;
+      // The host's own dialog around the field this editor was opened from is beneath it. Any other dialog
+      // holding focus was opened or revealed over it, including one that was already in the DOM but hidden.
+      return !(this.origin && dialog.contains(this.origin));
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
+      this.mounted = true;
+      this.origin = document.activeElement;
+      var selection = window.getSelection();
+      this.originRange = selection !== null && selection !== void 0 && selection.rangeCount ? selection.getRangeAt(0).cloneRange() : null;
       // Store current scroll position to prevent jumping
       this.originalScrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
       // Create portal container if it doesn't exist
       this.ensurePortalContainer();
 
+      // Capture phase, so the dialog owns the keyboard even when focus has escaped it to the host page.
+      this.documentKeyListener = function (event) {
+        return _this2.handleDocumentKeyDown(event);
+      };
+      document.addEventListener("keydown", this.documentKeyListener, true);
+
       // Lock body scroll to prevent jumping in transform containers
       this.lockBodyScroll();
 
@@ -19380,6 +19564,7 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
       // Need multiple RAF frames for proper CSS animation timing
       requestAnimationFrame(function () {
         requestAnimationFrame(function () {
+          if (!_this2.mounted) return;
           _this2.setState({
             animationReady: true
           }, function () {
@@ -19395,6 +19580,11 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var _this3 = this;
+      this.mounted = false;
+      if (this.documentKeyListener) {
+        document.removeEventListener("keydown", this.documentKeyListener, true);
+        this.documentKeyListener = null;
+      }
       // Hide portal immediately to prevent flash
       if (this.portalContainer) {
         this.portalContainer.style.visibility = "hidden";
@@ -19513,6 +19703,10 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
         }
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: useClass,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Equation Editor",
+        onKeyDown: this.handleKeyDown,
         ref: function ref(r) {
           return _this5.modalDiv = r;
         },
@@ -19870,7 +20064,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character);
           }
         }, character);
       })), !compactMode && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -19916,7 +20111,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -19934,7 +20130,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       }))), this.state.selectedTab === "Greek" && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -19954,7 +20151,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -19972,7 +20170,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       }))), this.state.selectedTab === "Math" && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -19992,7 +20191,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20010,7 +20210,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20028,7 +20229,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20046,7 +20248,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20064,7 +20267,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       }))), this.state.selectedTab === "Emoticons" && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20084,7 +20288,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20102,7 +20307,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20120,7 +20326,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20138,7 +20345,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20156,7 +20364,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20174,7 +20383,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20192,7 +20402,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       }))), this.state.selectedTab === "More" && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20212,7 +20423,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20230,7 +20442,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20248,7 +20461,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20266,7 +20480,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
             return _this2.handleButtonClick(e, character, true);
           },
           onClick: function onClick(e) {
-            return e.preventDefault();
+            e.preventDefault();
+            if (e.detail === 0) _this2.handleButtonClick(e, character, true);
           }
         }, character);
       })))))));
@@ -20302,8 +20517,10 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "handleButtonClick", function (event, buttonName) {
+      var _this$props$beforeAct, _this$props;
       event.preventDefault();
       event.stopPropagation();
+      (_this$props$beforeAct = (_this$props = _this.props).beforeAction) === null || _this$props$beforeAct === void 0 || _this$props$beforeAct.call(_this$props);
       _this.suppliedClickHandler(event, buttonName);
     });
     _defineProperty(_this, "handleAccentButtonClick", function (event, oldCharacter, newCharacter) {
@@ -20402,87 +20619,89 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         style: style,
         ref: function ref(r) {
           return _this2.toolbar = r;
-        }
+        },
+        onBlur: this.props.onBlur
       }, enableFontStyling && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
+        type: "button",
         name: "Bold",
+        "aria-label": "Bold",
         className: "Toolbar-button TB-narrow" + (this.props.activeButtons.bold ? " TB-selected" : ""),
         onClick: function onClick(e) {
-          return e.preventDefault();
+          return _this2.handleButtonClick(e, "Bold");
         },
         onMouseDown: function onMouseDown(e) {
           return e.preventDefault();
-        },
-        onMouseUp: function onMouseUp(e) {
-          return _this2.handleButtonClick(e, "Bold");
         }
       }, /*#__PURE__*/React__default["default"].createElement("b", null, "B")), /*#__PURE__*/React__default["default"].createElement("button", {
+        type: "button",
         name: "Italic",
+        "aria-label": "Italic",
         className: "Toolbar-button TB-narrow" + (this.props.activeButtons.italic ? " TB-selected" : ""),
         onClick: function onClick(e) {
-          return e.preventDefault();
+          return _this2.handleButtonClick(e, "Italic");
         },
         onMouseDown: function onMouseDown(e) {
           return e.preventDefault();
-        },
-        onMouseUp: function onMouseUp(e) {
-          return _this2.handleButtonClick(e, "Italic");
         }
       }, /*#__PURE__*/React__default["default"].createElement("i", null, "I")), /*#__PURE__*/React__default["default"].createElement("button", {
+        type: "button",
         name: "Underline",
+        "aria-label": "Underline",
         className: "Toolbar-button TB-narrow" + (this.props.activeButtons.underline ? " TB-selected" : ""),
         onClick: function onClick(e) {
-          return e.preventDefault();
+          return _this2.handleButtonClick(e, "Underline");
         },
         onMouseDown: function onMouseDown(e) {
           return e.preventDefault();
-        },
-        onMouseUp: function onMouseUp(e) {
-          return _this2.handleButtonClick(e, "Underline");
         }
       }, /*#__PURE__*/React__default["default"].createElement("u", null, "U")), /*#__PURE__*/React__default["default"].createElement("button", {
+        type: "button",
         name: "Superscript",
+        "aria-label": "Superscript",
         className: "Toolbar-button TB-narrow" + (this.props.activeButtons.superscript ? " TB-selected" : ""),
         onClick: function onClick(e) {
-          return e.preventDefault();
+          return _this2.handleButtonClick(e, "Superscript");
         },
         onMouseDown: function onMouseDown(e) {
           return e.preventDefault();
-        },
-        onMouseUp: function onMouseUp(e) {
-          return _this2.handleButtonClick(e, "Superscript");
         }
       }, "a", /*#__PURE__*/React__default["default"].createElement("sup", null, "x")), /*#__PURE__*/React__default["default"].createElement("button", {
+        type: "button",
         name: "Subscript",
+        "aria-label": "Subscript",
         className: "Toolbar-button TB-narrow" + (this.props.activeButtons.subscript ? " TB-selected" : ""),
         onClick: function onClick(e) {
-          return e.preventDefault();
+          return _this2.handleButtonClick(e, "Subscript");
         },
         onMouseDown: function onMouseDown(e) {
           return e.preventDefault();
-        },
-        onMouseUp: function onMouseUp(e) {
-          return _this2.handleButtonClick(e, "Subscript");
         }
       }, "a", /*#__PURE__*/React__default["default"].createElement("sub", null, "x"))), /*#__PURE__*/React__default["default"].createElement("button", {
+        type: "button",
         name: "Accents",
+        "aria-label": "Accents",
+        "aria-expanded": this.state.showAccents,
         className: "Toolbar-button TB-narrow" + (this.state.showAccents ? " TB-selected" : ""),
         onMouseDown: function onMouseDown(e) {
           return e.preventDefault();
         },
         onClick: function onClick(e) {
-          return e.preventDefault();
-        },
-        onMouseUp: function onMouseUp(e) {
-          return _this2.showOrHideAccentBar(e);
+          var _this2$props$beforeAc, _this2$props;
+          e.preventDefault();
+          e.stopPropagation();
+          (_this2$props$beforeAc = (_this2$props = _this2.props).beforeAction) === null || _this2$props$beforeAc === void 0 || _this2$props$beforeAc.call(_this2$props);
+          _this2.showOrHideAccentBar(e);
         }
       }, "\xE1"), enableMath && /*#__PURE__*/React__default["default"].createElement("button", {
+        type: "button",
         name: "Equation",
+        "aria-label": "Insert equation",
         className: "Toolbar-button TB-wide",
         onClick: function onClick(e) {
-          return e.preventDefault();
+          return _this2.handleButtonClick(e, "Equation");
         },
         onMouseDown: function onMouseDown(e) {
-          return _this2.handleButtonClick(e, "Equation");
+          return e.preventDefault();
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         dangerouslySetInnerHTML: {
@@ -20774,6 +20993,8 @@ function getMark() {
   return MARK$1;
 }
 function isKatexNode(node) {
+  // Callers probe siblings and parents that may not exist (the first node has no previousSibling).
+  if (node === null || node === undefined) return false;
   return node.className === "katex" || node.className === "katex-error";
 }
 function isTextNode(node) {
@@ -21479,7 +21700,6 @@ function getRangeParams(editableDiv) {
   }
   var selection = window.getSelection();
   if (selection.rangeCount === 0) {
-    console.error("Can't get range params, window.getSelection did not return any ranges");
     return null;
   }
   var range = selection.getRangeAt(0);
@@ -21972,6 +22192,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";
@@ -22178,23 +22621,34 @@ 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
       });
@@ -22219,7 +22673,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 () {
@@ -22238,22 +22693,59 @@ 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 {
@@ -22295,6 +22787,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;
@@ -22331,7 +22824,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;
       }
@@ -23188,6 +23695,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         // console.log("handleInput")
         if (_this2.isComposing) return;
+        // execCommand emits a synchronous input event; styleText records the
+        // complete format transaction once after the command returns.
+        if (_this2.formatCommandActive) 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,
@@ -23224,7 +23736,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) {
@@ -23259,7 +23772,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,
@@ -23356,6 +23870,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;
@@ -23380,6 +23895,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);
@@ -23605,7 +24122,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
@@ -23634,7 +24178,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       var moveCursorOnInsert = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       try {
+        var _node;
         var rangeParams = _this2._getRangeParams();
+        var hasNode = node !== null && node !== undefined;
         debugMathRichInput("showEquationEditor:start", {
           moveCursorOnInsert: moveCursorOnInsert,
           nodeProvided: Boolean(node),
@@ -23643,8 +24189,27 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
           selection: getSelectionSnapshot(_this2.editableDiv)
         });
-        if (rangeParams.startNodeIndex < 0) {
-          console.error("Could not find position of cursor in node list");
+        // A node handed in by a click is enough to open the editor, even when the selection resolves to
+        // nothing (-1) or is missing entirely: the node carries the latex and where it sits.
+        if (!hasNode && (rangeParams === null || rangeParams.startNodeIndex < 0) && !_this2.isVisuallyEmpty()) {
+          // No usable caret in a field that has content. The empty-field fallback below must never run
+          // here: its marks stand for the WHOLE value, so Insert would replace the answer with the formula.
+          // Put the caret at the end of the field and resolve it again; if that still fails, do not open.
+          var endOfField = document.createRange();
+          endOfField.selectNodeContents(_this2.editableDiv);
+          endOfField.collapse(false);
+          _this2.setCaretToRange(endOfField);
+          rangeParams = _this2._getRangeParams();
+          if (rangeParams === null || rangeParams.startNodeIndex < 0) {
+            console.error("Could not find position of cursor in node list");
+            return;
+          }
+        }
+        if (!hasNode && (rangeParams === null || rangeParams.startNodeIndex < 0)) {
+          // An empty field: there is nothing to keep, so the equation becomes its whole value.
+          debugMathRichInput("showEquationEditor:empty-field", {
+            rangeParams: rangeParams
+          });
           _this2.setOldRangeParams({
             startNodeIndex: 2,
             startOffset: 1,
@@ -23652,6 +24217,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             endOffset: 1
           });
           _this2.markedRawText = MARK + " " + MARK;
+          // A new equation: never the formula an earlier opening was editing.
+          _this2.editingExistingEquation = false;
+          _this2.editingNode = null;
           _this2.moveCursorOnInsert = moveCursorOnInsert;
           _this2.setState({
             showEquationEditor: true,
@@ -23661,7 +24229,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         }
         var latex = "";
         var offset = 0;
-        if (node === null) node = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
+        if (!hasNode) node = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
+
+        // The toolbar preserves a caret AFTER the formula, in the renderer's zero-width text node.
+        // Resolve that boundary to the preceding formula so f(x) edits it instead of opening empty.
+        // Ordinary text or a non-collapsed selection still starts a new equation.
+        if (!hasNode && ((_node = node) === null || _node === void 0 ? void 0 : _node.nodeType) === Node.TEXT_NODE && rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset && node.textContent.slice(0, rangeParams.startOffset).replace(/\u200b/g, "") === "" && isKatexNode(node.previousSibling)) {
+          node = node.previousSibling;
+        }
 
         // console.log(rangeParams)
         // console.log(this.editableDiv.childNodes)
@@ -23681,7 +24256,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           _this2.editingNode = node;
         } else {
           latex = "";
-          offset = rangeParams.startOffset;
+          offset = rangeParams ? rangeParams.startOffset : 0;
           _this2.editingExistingEquation = false;
           _this2.editingNode = null;
         }
@@ -23709,6 +24284,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         _this2.isMouseDownInEditable = false;
       }, 0);
       _this2.showEquationEditorOnMouseUp = false;
+      _this2.equationEditorMouseDownKatexIndex = -1;
       var node = null;
       try {
         node = event.target;
@@ -23724,6 +24300,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           return;
         }
         _this2.showEquationEditorOnMouseUp = true;
+        // The browser has no selection yet at mousedown and a click inside KaTeX may leave it inside the
+        // rendered subtree or outside the field. The formula's POSITION is what survives until mouseup:
+        // focusing the field redraws the editable and replaces every node with an identical one, so the
+        // element pressed here is detached by the time the mouse is released.
+        _this2.equationEditorMouseDownKatexIndex = _this2.katexNodesInField().indexOf(node);
         // Save current range parameters so that we can restore them later if we wish
         _this2.setOldRangeParams(_this2._getRangeParams());
 
@@ -23742,6 +24323,25 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Clear selection anchor on mouse click
         _this2.selectionAnchor = null;
+        var selection = window.getSelection();
+        var collapsedClick = selection === null || selection.rangeCount === 0 || selection.isCollapsed;
+
+        // A click on a formula opens the equation editor for THAT formula. The selection is not used to
+        // find it: clicking KaTeX leaves the selection inside the rendered subtree (which the text model
+        // reads as the position before the maths) or outside the field, and the editor then opened empty
+        // and the caret came back at the start. The caret is put after the formula, which is one logical
+        // character, so typing and Insert continue to its right.
+        if (collapsedClick && _this2.showEquationEditorOnMouseUp) {
+          // Focus BEFORE the node is looked up: focusing redraws the field, and a node resolved from the
+          // old DOM would be detached by the time the range is built.
+          _this2.editableDiv.focus();
+          var mathNode = _this2.katexNodesInField()[_this2.equationEditorMouseDownKatexIndex] || null;
+          if (mathNode !== null) {
+            _this2.setCaretToRange(_this2.caretRangeAfterNode(mathNode));
+            _this2.showEquationEditor(false, mathNode);
+            return;
+          }
+        }
 
         // A click that lands with the selection outside this field — a toolbar button, another field —
         // gives no range at all. Dereferenced unguarded, this threw on every such click.
@@ -23754,11 +24354,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           console.warn("Start or end node was null");
           return;
         }
-        if (params.startNodeIndex === params.endNodeIndex && params.startOffset === params.endOffset && _this2.showEquationEditorOnMouseUp) {
-          _this2.editableDiv.focus();
-          _this2.showEquationEditor(false, startNode);
-          return;
-        }
 
         // If our range starts or ends inside a katex node, move it out
         var new_rangeParams = null;
@@ -23779,6 +24374,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           new_rangeParams.endOffset = SMALL_SPACE_LENGTH;
         }
         if (new_rangeParams !== null) {
+          // These node positions replace a selection inside KaTeX. Its old global offsets still point
+          // before the atomic formula, so they must not override the corrected positions after it.
+          new_rangeParams.startGlobalOffset = null;
+          new_rangeParams.endGlobalOffset = null;
           _this2._setRangeParams(new_rangeParams);
           event.preventDefault();
           return;
@@ -23812,6 +24411,27 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
           selection: getSelectionSnapshot(_this2.editableDiv)
         });
+
+        // Insert with nothing to write: a formula that was opened and not edited, or a new equation left
+        // empty. Writing back would send the host a change event for a value it already holds, and hosts
+        // show "unsaved changes" on any change event. Close as Escape does and put the caret back.
+        if (_this2.editingExistingEquation && latex === _this2.state.equationEditorLatex || !_this2.editingExistingEquation && latex === "") {
+          var unchangedRangeParams = _this2.getOldRangeParams();
+          _this2.setState({
+            showEquationEditor: false
+          }, function () {
+            try {
+              _this2.editableDiv.focus();
+              if (unchangedRangeParams !== null) {
+                _this2._setRangeParams(unchangedRangeParams);
+                _this2.restoreRangeAfterBrowserWork(unchangedRangeParams, "equation-unchanged");
+              }
+            } catch (error) {
+              console.error(error);
+            }
+          });
+          return;
+        }
         var start_pos = _this2.markedRawText.indexOf(MARK);
         var end_pos = _this2.markedRawText.indexOf(MARK, start_pos + MARK.length);
         var oldRangeParams = _this2.getOldRangeParams();
@@ -23932,6 +24552,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     // }
     _defineProperty(_this2, "styleText", function (event, style) {
       try {
+        _this2.initialiseHistory();
+        _this2.resetHistoryRedo();
+        _this2.formatCommandActive = true;
         style = style.toLowerCase();
         var command = _this2.getStyleCommand(style);
         var activeBefore = _this2.getActiveButtonsFromSelection();
@@ -23939,12 +24562,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var isCollapsed = selection === null || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed;
         var success = false;
         var insertedTypingStylePlaceholder = false;
+        var publishedByWhitespaceMove = false;
 
         // This first part is a workaround whereby executing subscript or superscript
         // within an existing subscript or superscript makes the text even smaller instead
         // of toggling it off. Thus we manually toggle it off with some jigerry pokery!
         if (isCollapsed && activeBefore[style] && _this2.moveTrailingWhitespaceOutsideInlineStyle(style, command)) {
           success = true;
+          publishedByWhitespaceMove = true;
         } else if (isCollapsed && !activeBefore[style] && selection && selection.rangeCount > 0) {
           success = _this2.insertInlineStylePlaceholder(style);
           insertedTypingStylePlaceholder = success;
@@ -23966,15 +24591,29 @@ 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 (!publishedByWhitespaceMove && 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;
       } catch (error) {
         console.error(error);
+      } finally {
+        _this2.formatCommandActive = false;
       }
     });
     _defineProperty(_this2, "handleToolbarButtonClick", function (event, buttonName) {
@@ -24014,6 +24653,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;
@@ -24045,7 +24685,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);
       }
@@ -24173,6 +24827,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);
@@ -24189,13 +24844,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;
@@ -24231,13 +24901,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;
@@ -24261,7 +24946,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);
       }
@@ -24306,12 +25005,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         currentRangeParams = null;
       }
       var savedRangeParams = _this2.getOldRangeParams();
-      var shouldRestoreSavedRange = !_this2.isMouseDownInEditable && _this2.props.value !== "" && _this2.rangeIsAtStart(currentRangeParams) && _this2.rangeHasNonZeroPosition(savedRangeParams);
+      // A missing selection at focus time is not "somewhere else": the browser has not placed a caret
+      // yet, which reads as the START of the field. Treating null as "leave it alone" skipped both the
+      // restore below and the move to the end, so the caret stayed where the browser had left it — 0.
+      var currentIsAtStart = currentRangeParams === null || _this2.rangeIsAtStart(currentRangeParams);
+      var shouldRestoreSavedRange = !_this2.isMouseDownInEditable && _this2.props.value !== "" && currentIsAtStart && _this2.rangeHasNonZeroPosition(savedRangeParams);
+      // Focus without a click inside the field (a host focusing it, Tab, a click on the row around it)
+      // carries no position of its own. Editing an existing answer means continuing at its end, so the
+      // caret goes there; a click inside the field keeps the position the browser gave it.
+      var shouldMoveToEnd = !_this2.isMouseDownInEditable && _this2.props.value !== "" && currentIsAtStart && !_this2.rangeHasNonZeroPosition(savedRangeParams);
       debugMathRichInput("handleFocus:start", {
         propsValue: _this2.props.value,
         oldRangeParams: _this2.oldRangeParams,
         currentRangeParams: currentRangeParams,
         shouldRestoreSavedRange: shouldRestoreSavedRange,
+        shouldMoveToEnd: shouldMoveToEnd,
         innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
         selection: getSelectionSnapshot(_this2.editableDiv)
       });
@@ -24325,6 +25033,22 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           if (shouldRestoreSavedRange) {
             _this2._setRangeParams(savedRangeParams);
             _this2.restoreRangeAfterBrowserWork(savedRangeParams, "focus-restore");
+          } else if (shouldMoveToEnd) {
+            // One task later, not here: the browser places the caret as part of the focus default
+            // action, and for a keyboard focus (Tab) that happens AFTER this callback — moving now was
+            // simply overwritten. A task boundary is after both the pointer and the keyboard default.
+            // The guard keeps a selection placed meanwhile (a host restoring its own range) untouched.
+            window.setTimeout(function () {
+              if (_this2.state.hasFocus !== true) return;
+              var liveRangeParams = _this2._getRangeParams();
+              if (liveRangeParams !== null && !_this2.rangeIsAtStart(liveRangeParams)) {
+                return;
+              }
+              var endOfField = document.createRange();
+              endOfField.selectNodeContents(_this2.editableDiv);
+              endOfField.collapse(false);
+              _this2.setCaretToRange(endOfField);
+            }, 0);
           }
           debugMathRichInput("handleFocus:after-setState", {
             selection: getSelectionSnapshot(_this2.editableDiv)
@@ -24335,11 +25059,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this2, "handleBlur", function (event) {
+      var _this2$toolbar;
       var onBlur = _this2.props.onBlur;
       var currentRangeParams = null;
       try {
         currentRangeParams = _this2._getRangeParams();
-        if (_this2.rangeHasNonZeroPosition(currentRangeParams)) {
+        if (currentRangeParams !== null) {
           _this2.setOldRangeParams(currentRangeParams);
         }
       } catch (error) {
@@ -24352,6 +25077,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
         selection: getSelectionSnapshot(_this2.editableDiv)
       });
+      // Keyboard focus on this editor's tools is still inside the editor. Keep both
+      // the toolbar and the captured range until focus leaves the whole control.
+      if (event.relatedTarget === _this2.editableDiv || (_this2$toolbar = _this2.toolbar) !== null && _this2$toolbar !== void 0 && (_this2$toolbar = _this2$toolbar.toolbar) !== null && _this2$toolbar !== void 0 && _this2$toolbar.contains(event.relatedTarget)) return;
       if (onBlur != null) {
         onBlur();
       }
@@ -24369,10 +25097,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
@@ -24509,6 +25293,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _this2.isMouseDownInEditable = false;
     _this2.lastRenderedEditableHtml = null;
     _this2.preserveNativeDomRangeParams = null;
+    // The `dangerouslySetInnerHTML` prop object, reused while the html is unchanged. React re-applies
+    // the markup on a commit when it is handed a fresh object, replacing the editable's nodes and the
+    // caret with them; the same object tells React there is nothing to write.
+    _this2.lastEditableHtmlProp = undefined;
+    _this2.lastEditableHtmlPropHtml = null;
+    // Which of the field's formulas the current mouse press started on. The node itself cannot be
+    // kept: focusing a field redraws it, so the element that was pressed is already gone at mouseup.
+    _this2.equationEditorMouseDownKatexIndex = -1;
     _this2.lastSetActiveButtons = null;
     _this2.onChangeCallback = _this2.props.onChange;
 
@@ -24518,6 +25310,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
@@ -24693,6 +25488,39 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         endGlobalOffset: null
       });
     }
+
+    /** The caret's params, only when the selection is inside this field. */
+  }, {
+    key: "selectionRangeParams",
+    value: function selectionRangeParams() {
+      var selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return null;
+      if (!this.editableDiv || !this.editableDiv.contains(selection.anchorNode)) {
+        return null;
+      }
+      return this.getRangeParamsPreservingInlinePlaceholder();
+    }
+
+    /**
+     * The `dangerouslySetInnerHTML` prop, REUSED while the html is unchanged.
+     *
+     * React re-applies `dangerouslySetInnerHTML` on a commit when it is handed a new prop object, even
+     * when the string in it is the one already in the DOM (measured with React 19: three writes of an
+     * identical-length string, each replacing the editable's children — and with them the caret, which
+     * then sat at the start of the field). The same object is what tells React there is nothing to
+     * write, and that is how the field keeps the browser's own DOM and selection.
+     */
+  }, {
+    key: "editableHtmlProp",
+    value: function editableHtmlProp(html) {
+      if (this.lastEditableHtmlProp === undefined || this.lastEditableHtmlPropHtml !== html) {
+        this.lastEditableHtmlPropHtml = html;
+        this.lastEditableHtmlProp = {
+          __html: html
+        };
+      }
+      return this.lastEditableHtmlProp;
+    }
   }, {
     key: "getEditableHtmlForRender",
     value: function getEditableHtmlForRender(html) {
@@ -24721,8 +25549,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         this.preserveNativeDomRangeParams = preserveRangeParams;
         return liveEditableHtml;
       }
+
+      // React will write this string: it differs from the one it last rendered. Remember where the
+      // caret is so it can be put back if the write takes the selection with it. A click elsewhere
+      // blurs the field before the commit, so the restore below never overrides another control.
+      this.preserveNativeDomRangeParams = this.state.hasFocus === true && html !== this.lastRenderedEditableHtml ? this.selectionRangeParams() : null;
       this.lastRenderedEditableHtml = html;
-      this.preserveNativeDomRangeParams = null;
       return html;
     }
   }, {
@@ -24954,7 +25786,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,
@@ -24970,6 +25814,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();
@@ -24984,7 +25829,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
       });
     }
   }, {
@@ -25035,6 +25881,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();
@@ -25048,6 +25895,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) {
@@ -25208,25 +26056,77 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         if (this.preserveNativeDomRangeParams !== null && this.preserveNativeDomRangeParams !== undefined && this.state.hasFocus === true) {
           var rangeParams = this.preserveNativeDomRangeParams;
           this.preserveNativeDomRangeParams = null;
-          debugMathRichInput("componentDidUpdate:preserve-restore-before", {
-            rangeParams: rangeParams,
-            selection: getSelectionSnapshot(this.editableDiv)
-          });
-          this._setRangeParams(rangeParams);
-          debugMathRichInput("componentDidUpdate:preserve-restore-after", {
-            selection: getSelectionSnapshot(this.editableDiv)
-          });
+          // Only when the commit really did take the caret. A selection still in the field is the
+          // user's and is not ours to move; a click elsewhere has blurred the field, which is why the
+          // focus check above owns that case.
+          var liveRangeParams = this._getRangeParams();
+          if (liveRangeParams === null || this.rangeIsAtStart(liveRangeParams)) {
+            debugMathRichInput("componentDidUpdate:preserve-restore-before", {
+              rangeParams: rangeParams,
+              selection: getSelectionSnapshot(this.editableDiv)
+            });
+            this._setRangeParams(rangeParams);
+            debugMathRichInput("componentDidUpdate:preserve-restore-after", {
+              selection: getSelectionSnapshot(this.editableDiv)
+            });
+          }
         }
       } catch (error) {
         console.error(error);
       }
     }
+  }, {
+    key: "katexNodesInField",
+    value: /** The field's rendered formulas, in document order — the positions a click can land on. */
+    function katexNodesInField() {
+      return _toConsumableArray(this.editableDiv.querySelectorAll(".katex, .katex-error"));
+    }
+
+    /**
+     * Put the browser's selection at `range` and remember the position it resolves to.
+     *
+     * Used to place the caret where the component — not the browser — knows it belongs: after a formula
+     * that was clicked, and at the end of a field that was focused without a click.
+     */
+  }, {
+    key: "setCaretToRange",
+    value: function setCaretToRange(range) {
+      try {
+        var selection = window.getSelection();
+        if (!selection) return;
+        selection.removeAllRanges();
+        selection.addRange(range);
+        var params = this._getRangeParams();
+        if (params) this.setOldRangeParams(params);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    /**
+     * A range that starts immediately after `node`, in the text that follows it.
+     *
+     * `setStartAfter` alone reads back as a position INSIDE the KaTeX subtree — the last text node of the
+     * formula is the nearest text — and the text model treats that as the position BEFORE the maths. The
+     * renderer always leaves a zero-width text node after a formula, so the caret starts there instead:
+     * after the maths, where typing continues.
+     */
+  }, {
+    key: "caretRangeAfterNode",
+    value: function caretRangeAfterNode(node) {
+      var range = document.createRange();
+      var next = node.nextSibling;
+      if (next !== null && next !== undefined) range.setStart(next, 0);else range.setStartAfter(node);
+      range.collapse(true);
+      return range;
+    }
   }, {
     key: "insertAfterSmallSpace",
     value: function insertAfterSmallSpace(new_char, rangeParams) {
       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");
@@ -25251,7 +26151,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);
@@ -25328,6 +26241,20 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         className: "MathRichInput-hint",
         "aria-hidden": "true"
       }, this.props.placeholder)), this.state.hasFocus && /*#__PURE__*/React__default["default"].createElement(Toolbar, {
+        ref: function ref(r) {
+          return _this3.toolbar = r;
+        },
+        onBlur: this.handleBlur,
+        beforeAction: function beforeAction() {
+          if (document.activeElement !== _this3.editableDiv) {
+            var range = _this3.getOldRangeParams();
+            _this3.editableDiv.focus({
+              preventScroll: true
+            });
+            if (range !== null) _this3._setRangeParams(range);
+          }
+          _this3.initialiseHistory();
+        },
         className: "Toolbar",
         enableMath: this.enableMath(),
         enableFontStyling: this.enableFontStyling(),
@@ -25360,9 +26287,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         onBlur: this.handleBlur,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd,
-        dangerouslySetInnerHTML: {
-          __html: editableHtml
-        },
+        dangerouslySetInnerHTML: this.editableHtmlProp(editableHtml),
         "data-placeholder": this.props.placeholder || ""
       }))), this.state.showEquationEditor && /*#__PURE__*/React__default["default"].createElement(EquationEditorModal, {
         ref: function ref(r) {