@zzish/math-rich-input 0.1.50 → 0.1.52

package/dist/index.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 function _callSuper(t, o, e) {
   return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
@@ -19311,31 +19313,50 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
       console.log("🔍 Focusing equation editor...");
       if (_this.equationEditor) {
         console.log("🔍 EquationEditor ref found");
-        if (_this.state.useExpertMode) {
-          // Focus textarea in expert mode
-          console.log("🔍 Expert mode - focusing latexInput");
-          if (_this.equationEditor.latexInput) {
-            _this.equationEditor.latexInput.focus();
-            console.log("✅ LatexInput focused");
-          } else {
-            console.log("❌ LatexInput not found");
-          }
-        } else {
-          // Focus MathQuill in normal mode
-          console.log("🔍 Normal mode - focusing mathQuill");
-          if (_this.equationEditor.mathQuill) {
-            _this.equationEditor.mathQuill.focus();
-            console.log("✅ MathQuill focused");
+
+        // Prevent scroll jumping during focus
+        var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        try {
+          if (_this.state.useExpertMode) {
+            // Focus textarea in expert mode
+            console.log("🔍 Expert mode - focusing latexInput");
+            if (_this.equationEditor.latexInput) {
+              // Use preventScroll option if available
+              _this.equationEditor.latexInput.focus({
+                preventScroll: true
+              });
+              console.log("✅ LatexInput focused");
+            } else {
+              console.log("❌ LatexInput not found");
+            }
           } else {
-            console.log("❌ MathQuill not found");
+            // Focus MathQuill in normal mode
+            console.log("🔍 Normal mode - focusing mathQuill");
+            if (_this.equationEditor.mathQuill) {
+              _this.equationEditor.mathQuill.focus();
+              console.log("✅ MathQuill focused");
+            } else {
+              console.log("❌ MathQuill not found");
+            }
           }
+        } catch (error) {
+          console.warn("🔍 Focus failed:", error);
         }
+
+        // Ensure scroll position hasn't changed
+        setTimeout(function () {
+          var newScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+          if (newScrollTop !== currentScrollTop) {
+            window.scrollTo(0, currentScrollTop);
+          }
+        }, 10);
       } else {
         console.log("❌ EquationEditor ref not found");
       }
     });
     _this.state = {
-      useExpertMode: GLOBAL_lastSelectedExpertMode
+      useExpertMode: GLOBAL_lastSelectedExpertMode,
+      animationReady: false
     };
     _this.handleCloseCallback = props.handleClose;
     _this.handleInsertCallback = props.handleInsert;
@@ -19346,20 +19367,117 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      // Auto-focus when modal opens
-      // Use setTimeout to ensure child components are fully mounted
-      setTimeout(function () {
-        _this2.focusEquationEditor();
-      }, 100);
+      // Store current scroll position to prevent jumping
+      this.originalScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      // Create portal container if it doesn't exist
+      this.ensurePortalContainer();
+
+      // Lock body scroll to prevent jumping in transform containers
+      this.lockBodyScroll();
+
+      // Enable animation after portal is ready (ensures smooth slide-in)
+      // Need multiple RAF frames for proper CSS animation timing
+      requestAnimationFrame(function () {
+        requestAnimationFrame(function () {
+          _this2.setState({
+            animationReady: true
+          }, function () {
+            // Auto-focus after animation completes (0.3s CSS animation + buffer)
+            setTimeout(function () {
+              _this2.focusEquationEditor();
+            }, 400); // Wait for animation to complete
+          });
+        });
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this3 = this;
+      // Hide portal immediately to prevent flash
+      if (this.portalContainer) {
+        this.portalContainer.style.visibility = "hidden";
+      }
+
+      // Unlock body scroll and restore original scroll position
+      this.unlockBodyScroll();
+
+      // Clean up portal container after a small delay
+      if (this.createdPortalContainer && this.portalContainer) {
+        setTimeout(function () {
+          if (_this3.portalContainer && _this3.portalContainer.parentNode) {
+            document.body.removeChild(_this3.portalContainer);
+          }
+        }, 100);
+      }
+    }
+  }, {
+    key: "lockBodyScroll",
+    value: function lockBodyScroll() {
+      // Store original overflow styles and scroll position
+      this.originalBodyOverflow = document.body.style.overflow;
+      this.originalDocumentOverflow = document.documentElement.style.overflow;
+      this.originalBodyPosition = document.body.style.position;
+      this.originalBodyTop = document.body.style.top;
+      this.originalBodyWidth = document.body.style.width;
+
+      // Get current scroll position
+      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      // Apply position: fixed to prevent scrolling while preserving position
+      document.body.style.position = "fixed";
+      document.body.style.top = "-".concat(scrollTop, "px");
+      document.body.style.width = "100%";
+      document.body.style.overflow = "hidden";
+    }
+  }, {
+    key: "unlockBodyScroll",
+    value: function unlockBodyScroll() {
+      // Get the scroll position from the fixed top value
+      var scrollTop = Math.abs(parseInt(document.body.style.top) || 0);
+
+      // Restore original styles
+      document.body.style.position = this.originalBodyPosition || "";
+      document.body.style.top = this.originalBodyTop || "";
+      document.body.style.width = this.originalBodyWidth || "";
+      document.body.style.overflow = this.originalBodyOverflow || "";
+      document.documentElement.style.overflow = this.originalDocumentOverflow || "";
+
+      // Restore scroll position smoothly
+      if (scrollTop > 0) {
+        window.scrollTo(0, scrollTop);
+      }
+    }
+  }, {
+    key: "ensurePortalContainer",
+    value: function ensurePortalContainer() {
+      // Look for existing portal container
+      this.portalContainer = document.getElementById("math-rich-input-modal-portal");
+      if (!this.portalContainer) {
+        // Create new portal container
+        this.portalContainer = document.createElement("div");
+        this.portalContainer.id = "math-rich-input-modal-portal";
+        // Portal container should not interfere with content positioning
+        // Start invisible until animation is ready
+        this.portalContainer.style.cssText = "position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999990; visibility: hidden;";
+        document.body.appendChild(this.portalContainer);
+        this.createdPortalContainer = true;
+      }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this3 = this;
+      var _this4 = this;
+      // Show portal container when animation is ready
+      if (!prevState.animationReady && this.state.animationReady && this.portalContainer) {
+        this.portalContainer.style.visibility = "visible";
+      }
+
       // Re-focus when expert mode changes
       if (prevState.useExpertMode !== this.state.useExpertMode) {
         setTimeout(function () {
-          _this3.focusEquationEditor();
+          _this4.focusEquationEditor();
         }, 100);
       }
     }
@@ -19379,16 +19497,27 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
       var useClass = "EquationEditorModal";
       if (this.isMobile()) useClass = "EquationEditorModal-mobile";
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "EquationEditorModal-background",
-        onClick: this.handleClose
+
+      // Add support for disabling animations (useful for Svelte transitions)
+      if (this.props.disableAnimation) {
+        useClass += " no-animation";
+      }
+      var modalContent = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "EquationEditorModal-background".concat(this.props.disableAnimation ? " no-animation" : ""),
+        onClick: this.handleClose,
+        style: {
+          pointerEvents: "auto"
+        }
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: useClass,
         ref: function ref(r) {
-          return _this4.modalDiv = r;
+          return _this5.modalDiv = r;
+        },
+        style: {
+          pointerEvents: "auto"
         }
       }, !this.isMobile() && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "title"
@@ -19399,23 +19528,31 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React__default["default"].createElement("input", {
         type: "checkbox",
         ref: function ref(r) {
-          return _this4.expertModeSwitch = r;
+          return _this5.expertModeSwitch = r;
         },
         onChange: function onChange(e) {
-          return _this4.handleExpertModeSwitchChange(e);
+          return _this5.handleExpertModeSwitchChange(e);
         },
         checked: this.state.useExpertMode
       }), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "slider round"
       })))), /*#__PURE__*/React__default["default"].createElement(EquationEditor, {
         ref: function ref(r) {
-          return _this4.equationEditor = r;
+          return _this5.equationEditor = r;
         },
         latex: this.props.latex,
         useExpertMode: this.state.useExpertMode,
         handleInsert: this.handleInsert,
         handleCancel: this.handleClose
       })));
+
+      // Use portal to render modal outside of parent container stacking context
+      if (this.portalContainer && this.state.animationReady) {
+        return /*#__PURE__*/ReactDOM__default["default"].createPortal(modalContent, this.portalContainer);
+      }
+
+      // Show nothing until portal and animation are ready (prevents flash)
+      return null;
     }
   }]);
 }(React__default["default"].Component);
@@ -20146,9 +20283,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, Toolbar);
     _this = _callSuper(this, Toolbar, [props]);
-    _defineProperty(_this, "handleButtonClick", function (event, buttonName) {
-      _this.suppliedClickHandler(event, buttonName);
-    });
     _defineProperty(_this, "showAccentBar", function (event) {
       if (!_this.state.showAccents) _this.accentLetter = _this.suppliedAccentLetterFetcher();
       _this.setState({
@@ -20168,6 +20302,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "handleButtonClick", function (event, buttonName) {
+      event.preventDefault();
+      event.stopPropagation();
       _this.suppliedClickHandler(event, buttonName);
     });
     _defineProperty(_this, "handleAccentButtonClick", function (event, oldCharacter, newCharacter) {
@@ -20342,6 +20478,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       }, "\xE1"), enableMath && /*#__PURE__*/React__default["default"].createElement("button", {
         name: "Equation",
         className: "Toolbar-button TB-wide",
+        onClick: function onClick(e) {
+          return e.preventDefault();
+        },
         onMouseDown: function onMouseDown(e) {
           return _this2.handleButtonClick(e, "Equation");
         }
@@ -20531,6 +20670,73 @@ function determineMimeType(text) {
         {this.test("$a bcd> e$", "application/x-tex")}
 */
 
+var DEBUG_MATH_RICH_INPUT = false;
+function getNodePath(node) {
+  var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  if (!node) return null;
+  var parts = [];
+  var current = node;
+  while (current && current !== root && parts.length < 8) {
+    if (current.nodeType === 3) {
+      parts.unshift("#text(\"".concat(current.nodeValue, "\")"));
+    } else {
+      var name = current.nodeName ? current.nodeName.toLowerCase() : "unknown";
+      var className = current.className && typeof current.className === "string" ? ".".concat(current.className.split(" ").filter(Boolean).join(".")) : "";
+      parts.unshift("".concat(name).concat(className));
+    }
+    current = current.parentNode;
+  }
+  if (root) parts.unshift("root");
+  return parts.join(" > ");
+}
+function describeNode(node) {
+  var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  if (!node) return null;
+  return {
+    nodeName: node.nodeName,
+    nodeType: node.nodeType,
+    text: node.nodeType === 3 && typeof node.nodeValue === "string" ? node.nodeValue : undefined,
+    textLength: node.nodeType === 3 && typeof node.nodeValue === "string" ? node.nodeValue.length : undefined,
+    childCount: node.childNodes ? node.childNodes.length : undefined,
+    path: getNodePath(node, root)
+  };
+}
+function getSelectionSnapshot() {
+  var editableDiv = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  if (typeof window === "undefined" || !window.getSelection) return null;
+  var selection = window.getSelection();
+  if (!selection) return null;
+  var snapshot = {
+    activeElement: typeof document !== "undefined" && document.activeElement ? {
+      nodeName: document.activeElement.nodeName,
+      className: document.activeElement.className
+    } : null,
+    rangeCount: selection.rangeCount,
+    isCollapsed: selection.isCollapsed,
+    anchorOffset: selection.anchorOffset,
+    focusOffset: selection.focusOffset,
+    anchorNode: describeNode(selection.anchorNode, editableDiv),
+    focusNode: describeNode(selection.focusNode, editableDiv)
+  };
+  if (selection.rangeCount > 0) {
+    var range = selection.getRangeAt(0);
+    snapshot.range = {
+      collapsed: range.collapsed,
+      startOffset: range.startOffset,
+      endOffset: range.endOffset,
+      startContainer: describeNode(range.startContainer, editableDiv),
+      endContainer: describeNode(range.endContainer, editableDiv)
+    };
+  }
+  return snapshot;
+}
+function debugMathRichInput(label) {
+  return;
+}
+if (typeof window !== "undefined") {
+  window.__MRI_DEBUG__ = DEBUG_MATH_RICH_INPUT;
+}
+
 var RAW_TEXT_MATH_START_TAG_TEX = "\\[";
 var RAW_TEXT_MATH_END_TAG_TEX = "\\]";
 var RAW_TEXT_MATH_START_TAG_HTML_MATH = "<math>";
@@ -21172,6 +21378,55 @@ function findFirstTextNode(node) {
   }
   return null;
 }
+function findLastTextNode(node) {
+  if (isTextNode(node)) return node;
+  var nodes = node.childNodes;
+  for (var i = nodes.length - 1; i >= 0; i--) {
+    var found_node = findLastTextNode(nodes[i]);
+    if (found_node !== null) return found_node;
+  }
+  return null;
+}
+function getTextPositionFromElementRangeEndpoint(container, offset) {
+  if (isTextNode(container)) return {
+    node: container,
+    offset: offset
+  };
+  var nodes = container.childNodes;
+  if (nodes === null || nodes === undefined || nodes.length === 0) return null;
+
+  // A collapsed selection inside contentEditable may report the editable SPAN
+  // itself as the container and the child index as the offset. The previous
+  // implementation always picked the first descendant text node, which moved
+  // the caret to the beginning after React re-rendered the controlled input.
+  if (offset > 0) {
+    var previousChild = nodes[Math.min(offset - 1, nodes.length - 1)];
+    var previousTextNode = findLastTextNode(previousChild);
+    if (previousTextNode !== null) {
+      return {
+        node: previousTextNode,
+        offset: previousTextNode.nodeValue.length
+      };
+    }
+  }
+  if (offset < nodes.length) {
+    var nextTextNode = findFirstTextNode(nodes[offset]);
+    if (nextTextNode !== null) {
+      return {
+        node: nextTextNode,
+        offset: 0
+      };
+    }
+  }
+  var fallbackTextNode = findFirstTextNode(container);
+  if (fallbackTextNode !== null) {
+    return {
+      node: fallbackTextNode,
+      offset: 0
+    };
+  }
+  return null;
+}
 function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
   var result = {
     offset: 0
@@ -21213,6 +21468,10 @@ function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset
 function getRangeParams(editableDiv) {
   // console.log ("getRangeParams")
   // console.log("Inner html: "+editableDiv.innerHTML)
+  debugMathRichInput("getRangeParams:start", {
+    innerHTML: editableDiv ? editableDiv.innerHTML : null,
+    selection: getSelectionSnapshot(editableDiv)
+  });
   var isSupported = typeof window.getSelection !== "undefined";
   if (!isSupported) {
     console.error("Can't get range params, browser does not support window.getSelection");
@@ -21224,15 +21483,27 @@ function getRangeParams(editableDiv) {
     return null;
   }
   var range = selection.getRangeAt(0);
+  debugMathRichInput("getRangeParams:range-before-normalize", {
+    startContainer: describeNode(range.startContainer, editableDiv),
+    startOffset: range.startOffset,
+    endContainer: describeNode(range.endContainer, editableDiv),
+    endOffset: range.endOffset
+  });
 
   // logAllDescendants(editableDiv)
-  // If the range is not within a text node, move it to a text node
-  // This typically happens when the end of a range is at the start of a new line
+  // If the range is not within a text node, move it to the text node implied
+  // by the element-container offset. This typically happens when the browser
+  // reports a collapsed contentEditable selection as (SPAN, childIndex).
   if (range.startContainer.nodeType !== 3) {
-    var textNode = findFirstTextNode(range.startContainer);
-    if (textNode !== null) {
-      console.warn("Adjusting start pos in getRangeParams as container was of type: " + range.startContainer.nodeName);
-      range.setStart(textNode, 0);
+    var textPosition = getTextPositionFromElementRangeEndpoint(range.startContainer, range.startOffset);
+    if (textPosition !== null) {
+      debugMathRichInput("getRangeParams:normalize-start-element", {
+        from: describeNode(range.startContainer, editableDiv),
+        fromOffset: range.startOffset,
+        to: describeNode(textPosition.node, editableDiv),
+        toOffset: textPosition.offset
+      });
+      range.setStart(textPosition.node, textPosition.offset);
     } else {
       // Handle empty content case - return default range params
       // This is normal behavior after selecting all and deleting content
@@ -21248,10 +21519,15 @@ function getRangeParams(editableDiv) {
     }
   }
   if (range.endContainer.nodeType !== 3) {
-    var _textNode = findFirstTextNode(range.endContainer);
-    if (_textNode !== null) {
-      console.warn("Adjusting end pos in getRangeParams as container was of type: " + range.endContainer.nodeName);
-      range.setEnd(_textNode, 0);
+    var _textPosition = getTextPositionFromElementRangeEndpoint(range.endContainer, range.endOffset);
+    if (_textPosition !== null) {
+      debugMathRichInput("getRangeParams:normalize-end-element", {
+        from: describeNode(range.endContainer, editableDiv),
+        fromOffset: range.endOffset,
+        to: describeNode(_textPosition.node, editableDiv),
+        toOffset: _textPosition.offset
+      });
+      range.setEnd(_textPosition.node, _textPosition.offset);
     } else {
       // Handle empty content case - return default range params
       // This is normal behavior after selecting all and deleting content
@@ -21297,11 +21573,20 @@ function getRangeParams(editableDiv) {
     startGlobalOffset: startResult.offset,
     endGlobalOffset: endResult.offset
   };
+  debugMathRichInput("getRangeParams:result", {
+    rangeParams: rangeParams,
+    selection: getSelectionSnapshot(editableDiv)
+  });
   return rangeParams;
 }
 function setRangeParamsFromGlobalOffsets(editableDiv, params) {
   var new_range = null;
   try {
+    debugMathRichInput("setRangeParamsFromGlobalOffsets:start", {
+      params: params,
+      innerHTML: editableDiv ? editableDiv.innerHTML : null,
+      selectionBefore: getSelectionSnapshot(editableDiv)
+    });
     if (params === null || params === undefined) throw new Error("Can't set range params: params === " + params);
     var startResult = findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, params.startGlobalOffset);
     var endResult = findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, params.endGlobalOffset);
@@ -21321,6 +21606,18 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
     var selection = window.getSelection();
     selection.removeAllRanges();
     selection.addRange(new_range);
+    debugMathRichInput("setRangeParamsFromGlobalOffsets:after", {
+      params: params,
+      startResult: {
+        node: describeNode(startResult.node, editableDiv),
+        offset: startResult.offset
+      },
+      endResult: {
+        node: describeNode(endResult.node, editableDiv),
+        offset: endResult.offset
+      },
+      selectionAfter: getSelectionSnapshot(editableDiv)
+    });
   } catch (error) {
     console.error(error);
     console.log("Trying to set range:");
@@ -21334,6 +21631,11 @@ function setRangeParams(editableDiv, params) {
 
   var new_range = null;
   try {
+    debugMathRichInput("setRangeParams:start", {
+      params: params,
+      innerHTML: editableDiv ? editableDiv.innerHTML : null,
+      selectionBefore: getSelectionSnapshot(editableDiv)
+    });
     if (params === null || params === undefined) {
       console.error("Can't set range params: params === " + params);
       return;
@@ -21393,6 +21695,7 @@ function setRangeParams(editableDiv, params) {
       startNode = findFirstTextNode(editableDiv);
       startOffset = 0;
     }
+    if (startNode === null) return;
     if (!isTextNode(startNode)) {
       console.warn("Start node found for range start is not a text a node");
       console.log(editableDiv.childNodes);
@@ -21408,6 +21711,7 @@ function setRangeParams(editableDiv, params) {
       endNode = findFirstTextNode(editableDiv);
       endOffset = 0;
     }
+    if (endNode === null) return;
     if (!isTextNode(endNode)) {
       console.warn("End node found for range start is not a text a node");
       console.log(editableDiv.childNodes);
@@ -21420,7 +21724,7 @@ function setRangeParams(editableDiv, params) {
     }
     new_range = document.createRange();
     if (startOffset > startNode.nodeValue.length) {
-      console.warn("endOffset > endNode.nodeValue.length when setting range: " + startOffset + " > " + startNode.nodeValue.length + " - " + stateNode.nodeType + " - " + startNode.nodeValue);
+      console.warn("endOffset > endNode.nodeValue.length when setting range: " + startOffset + " > " + startNode.nodeValue.length + " - " + startNode.nodeType + " - " + startNode.nodeValue);
       startOffset = startNode.nodeValue.length;
     }
     new_range.setStart(startNode, startOffset);
@@ -21435,6 +21739,14 @@ function setRangeParams(editableDiv, params) {
     var selection = window.getSelection();
     selection.removeAllRanges();
     selection.addRange(new_range);
+    debugMathRichInput("setRangeParams:after", {
+      params: params,
+      startNode: describeNode(startNode, editableDiv),
+      startOffset: startOffset,
+      endNode: describeNode(endNode, editableDiv),
+      endOffset: endOffset,
+      selectionAfter: getSelectionSnapshot(editableDiv)
+    });
   } catch (error) {
     console.error(error);
     console.log("Trying to set range:");
@@ -21661,6 +21973,29 @@ var SMALL_SPACE_LENGTH = SMALL_SPACE.length;
 // const SMALL_SPACE_REG_EXP = new RegExp(SMALL_SPACE, "g")
 
 var MARK = getMark();
+var INLINE_STYLE_COMMANDS = {
+  bold: "bold",
+  italic: "italic",
+  underline: "underline",
+  subscript: "subscript",
+  superscript: "superscript"
+};
+var INLINE_STYLE_TAGS = {
+  bold: ["b", "strong"],
+  italic: ["i", "em"],
+  underline: ["u"],
+  subscript: ["sub"],
+  superscript: ["sup"]
+};
+var INLINE_STYLE_TAG_NAMES = ["b", "strong", "i", "em", "u", "sub", "sup"];
+var INLINE_STYLE_WRAPPER_TAGS = {
+  bold: "strong",
+  italic: "em",
+  underline: "u",
+  subscript: "sub",
+  superscript: "sup"
+};
+var EMPTY_INLINE_FORMATTING_REG_EXP = /<(B|STRONG|I|EM|U|SUB|SUP)>(?:\s|&nbsp;|\u00a0|\u200b|\ufeff)*<\/\1>/gi;
 
 // const LATEX_MARKER_START = "<annotation encoding=\"application/x-tex\">"
 // const LATEX_MARKER_END = "</annotation>"
@@ -21802,12 +22137,34 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       return countNodeTypes(_this2.editableDiv);
     });
     _defineProperty(_this2, "applyChangesToComponent", function (value, mimeType, rangeParams, isExpertMode, selectedTab) {
+      var applyOptions = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
       // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
       if (rangeParams === null) rangeParams = _this2.lastSetRangeParams;
-      _this2.afterComponentUpdateData = {
+      debugMathRichInput("applyChangesToComponent:start", {
+        value: value,
+        mimeType: mimeType,
         rangeParams: rangeParams,
-        value: value
-      };
+        propsValue: _this2.props.value,
+        propsMimeType: _this2.props.mimeType,
+        innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
+        selection: getSelectionSnapshot(_this2.editableDiv),
+        skipControlledRender: applyOptions.skipControlledRender === true
+      });
+      if (applyOptions.skipControlledRender === true) {
+        // Native contenteditable input has already mutated the DOM and kept the
+        // browser selection in the right place. Re-rendering the same value via
+        // dangerouslySetInnerHTML can replace text nodes under React 19 and move
+        // the caret to the beginning. Programmatic edits still use the normal
+        // render-and-restore path.
+        _this2.skipNextControlledValueRender = true;
+        _this2.skipNextControlledValue = value;
+        _this2.afterComponentUpdateData = null;
+      } else {
+        _this2.afterComponentUpdateData = {
+          rangeParams: rangeParams,
+          value: value
+        };
+      }
       var options = _this2.props.options || DEFAULT_OPTIONS;
       if (isExpertMode === null) isExpertMode = options.isExpertMode;
       if (selectedTab === null) selectedTab = options.selectedTab;
@@ -21831,6 +22188,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         isExpertMode: isExpertMode,
         selectedTab: selectedTab
       });
+      debugMathRichInput("applyChangesToComponent:after-onChange", {
+        afterComponentUpdateData: _this2.afterComponentUpdateData,
+        selection: getSelectionSnapshot(_this2.editableDiv)
+      });
     });
     _defineProperty(_this2, "initialiseHistory", function () {
       if (_this2.initialHistoryState == null) _this2.initialHistoryState = {
@@ -21874,14 +22235,43 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this2, "_setRangeParams", function (params) {
       try {
+        debugMathRichInput("MathRichInput:_setRangeParams:start", {
+          params: params,
+          selectionBefore: getSelectionSnapshot(_this2.editableDiv)
+        });
         setRangeParams(_this2.editableDiv, params);
         _this2.setOldRangeParams(params);
-        _this2.lastSetRangeParmas = params;
+        _this2.lastSetRangeParams = params;
+        debugMathRichInput("MathRichInput:_setRangeParams:after", {
+          params: params,
+          oldRangeParams: _this2.oldRangeParams,
+          selectionAfter: getSelectionSnapshot(_this2.editableDiv)
+        });
       } catch (error) {
         console.error(error);
         // console.log(this.editableDiv.childNodes);
       }
     });
+    _defineProperty(_this2, "restoreRangeAfterBrowserWork", function (params, reason) {
+      if (params === null || params === undefined) return;
+      var restore = function restore(delay) {
+        window.setTimeout(function () {
+          if (_this2.state.showEquationEditor) return;
+          if (!_this2.state.hasFocus && document.activeElement !== _this2.editableDiv) {
+            return;
+          }
+          debugMathRichInput("restoreRangeAfterBrowserWork", {
+            reason: reason,
+            delay: delay,
+            params: params,
+            selectionBefore: getSelectionSnapshot(_this2.editableDiv)
+          });
+          _this2._setRangeParams(params);
+        }, delay);
+      };
+      restore(0);
+      restore(50);
+    });
     _defineProperty(_this2, "handleKeyDownBackspace", function (e) {
       var rangeParams = _this2._getRangeParams();
       var start_node_index = rangeParams.startNodeIndex;
@@ -22009,7 +22399,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this2, "isWordModifier", function (e) {
       var _this2$getPlatformMod = _this2.getPlatformModifiers(),
         isMac = _this2$getPlatformMod.isMac;
-      return isMac ? e.altKey : e.ctrlKey;
+      // Borough production is pinned to math-rich-input 0.1.48, where Option +
+      // Arrow did not get custom word navigation. Keep Mac Option + Arrow as
+      // normal character movement to preserve the editor's existing UX; Command +
+      // Arrow is handled by isLineModifier below.
+      return isMac ? false : e.ctrlKey;
     });
     // Check if line navigation modifier is pressed
     _defineProperty(_this2, "isLineModifier", function (e) {
@@ -22466,6 +22860,17 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this2, "handleKeyDown", function (e) {
       try {
+        debugMathRichInput("handleKeyDown:start", {
+          key: e.key,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          hasFocus: _this2.state.hasFocus,
+          propsValue: _this2.props.value,
+          innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
         // Lets set up or update the undo redo history
         _this2.initialiseHistory();
         if ((e.key === "z" || e.key === "Z") && (e.ctrlKey || e.metaKey)) {
@@ -22522,7 +22927,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-        if (e.altKey && e.key === "Alt") {
+        var _this2$getPlatformMod3 = _this2.getPlatformModifiers(),
+          isMac = _this2$getPlatformMod3.isMac;
+        if (!isMac && e.altKey && e.key === "Alt") {
           var key = _this2.fetchAccentLetter();
           if (key === "a" || key === "e" || key === "i" || key === "o" || key === "u" || key === "c" || key === "l" || key === "n" || key === "s" || key === "?" || key === "!") {
             // console.log("showing/hiding accent bar");
@@ -22539,9 +22946,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           return;
         }
         _this2.keyPressed = e.key; // store for use in methods
-        _this2.setState({
-          keyPressed: e.key
-        });
+        if (_this2.state.showAccentBar) {
+          _this2.setState({
+            keyPressed: e.key
+          });
+        }
 
         // Hide the accent bar if a key is typed except when it is an automatic key repeat press
         // If it is automatic key repeat, then keyPressStartTime will be greater than 0
@@ -22561,10 +22970,16 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         }
         if (e.key === "ArrowLeft") {
           _this2.handleKeyDownArrowLeft(e);
+          debugMathRichInput("handleKeyDown:after-arrow-left", {
+            selection: getSelectionSnapshot(_this2.editableDiv)
+          });
           return;
         }
         if (e.key === "ArrowRight") {
           _this2.handleKeyDownArrowRight(e);
+          debugMathRichInput("handleKeyDown:after-arrow-right", {
+            selection: getSelectionSnapshot(_this2.editableDiv)
+          });
           return;
         }
         if (e.key === "ArrowUp") {
@@ -22657,6 +23072,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this2, "handleKeyUp", function (e) {
       try {
+        debugMathRichInput("handleKeyUp:start", {
+          key: e.key,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
         _this2.keyPressed = e.key;
         _this2.keyPressStartTime = -1;
 
@@ -22732,8 +23155,22 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         // console.log("handleInput")
         if (_this2.isComposing) return;
+        debugMathRichInput("handleInput:start", {
+          inputType: event && event.nativeEvent ? event.nativeEvent.inputType : null,
+          data: event && event.nativeEvent ? event.nativeEvent.data : null,
+          propsValue: _this2.props.value,
+          propsMimeType: _this2.props.mimeType,
+          innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
+        _this2.cleanupEmptyInlineFormattingElements();
         var raw_text = elementToMarkedRawText(_this2.editableDiv, null, 0, _this2.enableHtml());
         var params = _this2._getRangeParams();
+        debugMathRichInput("handleInput:after-range", {
+          raw_text: raw_text,
+          params: params,
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
         if (params === null || params === undefined) {
           // console.log(
           //   "handleInput: Empty content detected, using default range params"
@@ -22752,7 +23189,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           var _mimeType = _this2.getMimeType(_nodeCounts.html > 0, _nodeCounts.math > 0);
           var _raw_text = elementToMarkedRawText(_this2.editableDiv, null, 0, _this2.enableHtml());
           _raw_text = removeEncodingIfPlainText(_raw_text, _mimeType, _this2.enableHtml());
-          _this2.applyChangesToComponent(_raw_text, _mimeType, defaultParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+          _raw_text = _this2.stripEmptyInlineFormattingTags(_raw_text);
+          _this2.applyChangesToComponent(_raw_text, _mimeType, defaultParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
+            skipControlledRender: true
+          });
           return;
         } else if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
           // console.log(
@@ -22773,6 +23213,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var hasMath = hasMathContent || nodeCounts.math > 0;
         var mimeType = _this2.getMimeType(hasHtml, hasMath);
         raw_text = removeEncodingIfPlainText(raw_text, mimeType, _this2.enableHtml());
+        raw_text = _this2.stripEmptyInlineFormattingTags(raw_text);
 
         // Use valid params or fallback to defaults
         var validParams = params || {
@@ -22783,7 +23224,16 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           startGlobalOffset: 0,
           endGlobalOffset: 0
         };
-        _this2.applyChangesToComponent(raw_text, mimeType, validParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.setOldRangeParams(validParams);
+        _this2.applyChangesToComponent(raw_text, mimeType, validParams, _this2.props.useExpertMode, _this2.props.selectedTab, {
+          skipControlledRender: true
+        });
+        debugMathRichInput("handleInput:after-apply", {
+          raw_text: raw_text,
+          mimeType: mimeType,
+          validParams: validParams,
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
       } catch (error) {
         console.error(error);
       }
@@ -22828,44 +23278,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           });
           return;
         }
-        var node = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
-        var bold = false;
-        var italic = false;
-        var underline = false;
-        var superscript = false;
-        var subscript = false;
-        do {
-          if (node.nodeType === 1) {
-            var nodeName = node.nodeName.toLowerCase();
-            if (nodeName === "b" || nodeName === "strong") bold = true;else if (nodeName === "i" || nodeName === "em") italic = true;else if (nodeName === "u") underline = true;else if (nodeName === "sub") subscript = true;else if (nodeName === "sup") superscript = true;
-          } else if (node.classList !== null && node.classList !== undefined && node.classList.contains("MathRichInput")) break;
-          node = node.parentNode;
-        } while (node !== null);
-        var activeButtons = {
-          bold: bold,
-          italic: italic,
-          underline: underline,
-          subscript: subscript,
-          superscript: superscript
-        };
-        // console.log(activeButtons)
-
-        var update = true;
-        if (_this2.lastSetActiveButtons !== null) {
-          update = false;
-          for (var style in activeButtons) {
-            if (activeButtons[style] !== _this2.lastSetActiveButtons[style]) {
-              update = true;
-              break;
-            }
-          }
-        }
-        if (update) {
-          _this2.lastSetActiveButtons = activeButtons;
-          _this2.setState({
-            activeButtons: activeButtons
-          });
-        }
+        var activeButtons = _this2.getActiveButtonsFromSelection(rangeParams);
+        _this2.setActiveButtonsIfChanged(activeButtons);
       } catch (error) {
         console.error(error);
       }
@@ -23100,6 +23514,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       var node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       try {
         var rangeParams = _this2._getRangeParams();
+        debugMathRichInput("showEquationEditor:start", {
+          moveCursorOnInsert: moveCursorOnInsert,
+          nodeProvided: Boolean(node),
+          rangeParams: rangeParams,
+          oldRangeParams: _this2.oldRangeParams,
+          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");
           _this2.setOldRangeParams({
@@ -23142,6 +23564,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           _this2.editingExistingEquation = false;
           _this2.editingNode = null;
         }
+        _this2.setOldRangeParams(rangeParams);
         _this2.markedRawText = elementToMarkedRawText(_this2.editableDiv, node, offset, _this2.enableHtml());
         // console.log("Marked text:"+this.markedRawText)
         _this2.moveCursorOnInsert = moveCursorOnInsert;
@@ -23149,11 +23572,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           showEquationEditor: true,
           equationEditorLatex: latex
         });
+        debugMathRichInput("showEquationEditor:after-setState", {
+          rangeParams: rangeParams,
+          markedRawText: _this2.markedRawText,
+          latex: latex,
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
       } catch (error) {
         console.error(error);
       }
     });
     _defineProperty(_this2, "handleMouseDown", function (event) {
+      _this2.isMouseDownInEditable = true;
+      window.setTimeout(function () {
+        _this2.isMouseDownInEditable = false;
+      }, 0);
       _this2.showEquationEditorOnMouseUp = false;
       var node = null;
       try {
@@ -23189,6 +23622,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         // Clear selection anchor on mouse click
         _this2.selectionAnchor = null;
         var params = _this2._getRangeParams();
+        _this2.setOldRangeParams(params);
         var startNode = _this2._findNodeWithIndex(params.startNodeIndex);
         var endNode = _this2._findNodeWithIndex(params.endNodeIndex);
         if (startNode === null || endNode === null) {
@@ -23244,7 +23678,15 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this2, "handleEquationEditorInsert", function (latex) {
       try {
         // console.log("Inserting latex: "+latex)
-
+        debugMathRichInput("handleEquationEditorInsert:start", {
+          latex: latex,
+          markedRawText: _this2.markedRawText,
+          oldRangeParams: _this2.getOldRangeParams(),
+          moveCursorOnInsert: _this2.moveCursorOnInsert,
+          propsValue: _this2.props.value,
+          innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
         var start_pos = _this2.markedRawText.indexOf(MARK);
         var end_pos = _this2.markedRawText.indexOf(MARK, start_pos + MARK.length);
         var oldRangeParams = _this2.getOldRangeParams();
@@ -23286,6 +23728,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           _this2.applyChangesToComponent(_new_raw_text, _mimeType2, _new_rangeParams7, _this2.props.useExpertMode, _this2.props.selectedTab);
           _this2.setState({
             showEquationEditor: false
+          }, function () {
+            _this2.editableDiv.focus();
+            _this2._setRangeParams(_new_rangeParams7);
+            _this2.restoreRangeAfterBrowserWork(_new_rangeParams7, "equation-empty");
           });
           return;
         }
@@ -23304,28 +23750,48 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
               endOffset: SMALL_SPACE_LENGTH
             };
           } else {
-            // Position cursor after the inserted math element using globalOffset
-            // Find the position right after the last math tag in the content
-            var mathTagMatches = _toConsumableArray(new_raw_text.matchAll(/<math>[^<]*<\/math>/gi));
-            if (mathTagMatches.length > 0) {
-              var lastMatch = mathTagMatches[mathTagMatches.length - 1];
-              var afterMathOffset = lastMatch.index + lastMatch[0].length;
+            // In this editor a rendered equation counts as one logical character
+            // in global-offset space. Put the caret immediately after that math
+            // character instead of guessing rendered child-node indexes.
+            var _oldRangeParams = _this2.getOldRangeParams();
+            if (_oldRangeParams !== null && _oldRangeParams.startGlobalOffset !== null && _oldRangeParams.startGlobalOffset !== undefined) {
+              var afterInsertedMathOffset = _oldRangeParams.startGlobalOffset + 1;
               new_rangeParams = {
-                startGlobalOffset: afterMathOffset,
-                endGlobalOffset: afterMathOffset
+                startGlobalOffset: afterInsertedMathOffset,
+                endGlobalOffset: afterInsertedMathOffset
+              };
+            } else if (_oldRangeParams !== null && _oldRangeParams.startNodeIndex !== null && _oldRangeParams.startNodeIndex !== undefined) {
+              new_rangeParams = {
+                startNodeIndex: _oldRangeParams.startNodeIndex + 2,
+                startOffset: SMALL_SPACE_LENGTH,
+                endNodeIndex: _oldRangeParams.startNodeIndex + 2,
+                endOffset: SMALL_SPACE_LENGTH
               };
             }
-            // If no math tags found, keep old range params
+            // If old range params are unavailable, keep the current fallback.
           }
         }
         // console.log("New cursor pos: "+new_rangeParams.startNodeIndex+"->"+new_rangeParams.startOffset)
         _this2.setOldRangeParams(new_rangeParams);
+        debugMathRichInput("handleEquationEditorInsert:before-apply", {
+          new_raw_text: new_raw_text,
+          new_rangeParams: new_rangeParams,
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
         var nodeCounts = _this2._countNodeTypes();
         var mimeType = _this2.getMimeType(nodeCounts.html > 0, true);
         new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, _this2.enableHtml());
         _this2.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
         _this2.setState({
           showEquationEditor: false
+        }, function () {
+          _this2.editableDiv.focus();
+          _this2._setRangeParams(new_rangeParams);
+          _this2.restoreRangeAfterBrowserWork(new_rangeParams, "equation-insert");
+          debugMathRichInput("handleEquationEditorInsert:after-close-restore", {
+            new_rangeParams: new_rangeParams,
+            selection: getSelectionSnapshot(_this2.editableDiv)
+          });
         });
       } catch (error) {
         console.error(error);
@@ -23342,13 +23808,22 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this2, "styleText", function (event, style) {
       try {
         style = style.toLowerCase();
+        var command = _this2.getStyleCommand(style);
+        var activeBefore = _this2.getActiveButtonsFromSelection();
+        var selection = document.getSelection();
+        var isCollapsed = selection === null || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed;
         var success = false;
+        var insertedTypingStylePlaceholder = 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 (style === "subscript" && _this2.state.activeButtons.subscript || style === "superscript" && _this2.state.activeButtons.superscript) {
-          var selection = document.getSelection();
+        if (isCollapsed && activeBefore[style] && _this2.moveTrailingWhitespaceOutsideInlineStyle(style, command)) {
+          success = true;
+        } else if (isCollapsed && !activeBefore[style] && selection && selection.rangeCount > 0) {
+          success = _this2.insertInlineStylePlaceholder(style);
+          insertedTypingStylePlaceholder = success;
+        } else if (style === "subscript" && activeBefore.subscript || style === "superscript" && activeBefore.superscript) {
           var range = selection.getRangeAt(0);
           if (range.endContainer === range.startContainer && range.endOffset === range.startOffset) {
             success = document.execCommand("insertText", false, " ");
@@ -23357,78 +23832,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             selection.addRange(range);
           }
           success = document.execCommand("removeFormat", false, null);
-          if (_this2.state.activeButtons.bold) success = document.execCommand("bold", false, null);
-          if (_this2.state.activeButtons.italic) success = document.execCommand("italic", false, null);
-          if (_this2.state.activeButtons.underline) success = document.execCommand("underline", false, null);
+          if (activeBefore.bold) success = document.execCommand("bold", false, null);
+          if (activeBefore.italic) success = document.execCommand("italic", false, null);
+          if (activeBefore.underline) success = document.execCommand("underline", false, null);
         } else {
-          var _selection = document.getSelection();
-          if (_selection && _selection.rangeCount > 0) {
-            var _range = _selection.getRangeAt(0);
-            if (_range.collapsed) {
-              // For cursor position (no selection), use insertHTML with styled wrapper
-              // This creates a formatted element that will maintain styling for future typing
-              var isToggleOff = _this2.state.activeButtons[style];
-              if (!isToggleOff) {
-                // Turning style ON - insert a styled wrapper element
-                var wrapperTag;
-                switch (style) {
-                  case "bold":
-                    wrapperTag = "strong";
-                    break;
-                  case "italic":
-                    wrapperTag = "em";
-                    break;
-                  case "underline":
-                    wrapperTag = "u";
-                    break;
-                  case "subscript":
-                    wrapperTag = "sub";
-                    break;
-                  case "superscript":
-                    wrapperTag = "sup";
-                    break;
-                  default:
-                    wrapperTag = "span";
-                    break;
-                }
-
-                // Insert an invisible character wrapped in the styled element
-                // This provides a "landing zone" for future typing
-                var styledElement = "<".concat(wrapperTag, ">\u200B</").concat(wrapperTag, ">");
-                success = document.execCommand("insertHTML", false, styledElement);
-
-                // Move cursor inside the styled element
-                setTimeout(function () {
-                  var newSelection = document.getSelection();
-                  if (newSelection && newSelection.rangeCount > 0) {
-                    var newRange = newSelection.getRangeAt(0);
-                    var styledNode = newRange.startContainer.parentElement;
-                    if (styledNode && styledNode.tagName.toLowerCase() === wrapperTag) {
-                      newRange.setStart(styledNode, 0);
-                      newRange.setEnd(styledNode, 0);
-                      newSelection.removeAllRanges();
-                      newSelection.addRange(newRange);
-                    }
-                  }
-                }, 0);
-              } else {
-                // Turning style OFF - just apply execCommand normally
-                success = document.execCommand(style, false, null);
-              }
-            } else {
-              // For text selection, use regular execCommand
-              success = document.execCommand(style, false, null);
-            }
+          if (selection && selection.rangeCount > 0) {
+            success = document.execCommand(command, false, null);
           }
         }
-        var buttonState = _this2.state.activeButtons[style];
-        if (buttonState === null || buttonState === undefined) return success;
-        buttonState = !buttonState;
-        var new_activeButtons = _objectSpread2({}, _this2.state.activeButtons);
-        new_activeButtons[style] = buttonState;
-        _this2.setState({
-          activeButtons: new_activeButtons
-        });
+        var rangeParams = _this2._getRangeParams();
+        var removedEmptyTags = !insertedTypingStylePlaceholder && _this2.cleanupEmptyInlineFormattingElements();
+        if (removedEmptyTags && rangeParams !== null && rangeParams !== undefined) {
+          _this2._setRangeParams(rangeParams);
+          _this2.applyCurrentEditableDomToComponent(rangeParams);
+        }
+        _this2.setActiveButtonsIfChanged(_this2.getActiveButtonsFromSelection(rangeParams));
         return success;
       } catch (error) {
         console.error(error);
@@ -23436,8 +23854,15 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this2, "handleToolbarButtonClick", function (event, buttonName) {
       try {
+        debugMathRichInput("handleToolbarButtonClick:start", {
+          buttonName: buttonName,
+          eventType: event ? event.type : null,
+          selection: getSelectionSnapshot(_this2.editableDiv),
+          oldRangeParams: _this2.oldRangeParams
+        });
         if (buttonName === "Equation") {
           _this2.showEquationEditor(true);
+          return;
         }
         var style = buttonName;
         var success = _this2.styleText(event, style);
@@ -23749,13 +24174,36 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this2, "handleFocus", function (event) {
       var onFocus = _this2.props.onFocus;
+      var currentRangeParams = null;
+      try {
+        currentRangeParams = _this2._getRangeParams();
+      } catch (error) {
+        currentRangeParams = null;
+      }
+      var savedRangeParams = _this2.getOldRangeParams();
+      var shouldRestoreSavedRange = !_this2.isMouseDownInEditable && _this2.props.value !== "" && _this2.rangeIsAtStart(currentRangeParams) && _this2.rangeHasNonZeroPosition(savedRangeParams);
+      debugMathRichInput("handleFocus:start", {
+        propsValue: _this2.props.value,
+        oldRangeParams: _this2.oldRangeParams,
+        currentRangeParams: currentRangeParams,
+        shouldRestoreSavedRange: shouldRestoreSavedRange,
+        innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
+        selection: getSelectionSnapshot(_this2.editableDiv)
+      });
       if (onFocus != null) {
         onFocus();
       }
       try {
-        _this2._setRangeParams(_this2.getOldRangeParams());
         _this2.setState({
           hasFocus: true
+        }, function () {
+          if (shouldRestoreSavedRange) {
+            _this2._setRangeParams(savedRangeParams);
+            _this2.restoreRangeAfterBrowserWork(savedRangeParams, "focus-restore");
+          }
+          debugMathRichInput("handleFocus:after-setState", {
+            selection: getSelectionSnapshot(_this2.editableDiv)
+          });
         });
       } catch (error) {
         console.error(error);
@@ -23763,6 +24211,22 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this2, "handleBlur", function (event) {
       var onBlur = _this2.props.onBlur;
+      var currentRangeParams = null;
+      try {
+        currentRangeParams = _this2._getRangeParams();
+        if (_this2.rangeHasNonZeroPosition(currentRangeParams)) {
+          _this2.setOldRangeParams(currentRangeParams);
+        }
+      } catch (error) {
+        currentRangeParams = null;
+      }
+      debugMathRichInput("handleBlur:start", {
+        propsValue: _this2.props.value,
+        oldRangeParams: _this2.oldRangeParams,
+        currentRangeParams: currentRangeParams,
+        innerHTML: _this2.editableDiv ? _this2.editableDiv.innerHTML : null,
+        selection: getSelectionSnapshot(_this2.editableDiv)
+      });
       if (onBlur != null) {
         onBlur();
       }
@@ -23772,6 +24236,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           hasFocus: false,
           showAccentBar: false
         });
+        debugMathRichInput("handleBlur:after-setState", {
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
       } catch (error) {
         console.error(error);
       }
@@ -23903,18 +24370,20 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
     // Elements that need to be set before the equation editor is shown
     _this2.markedRawText = null;
-    _this2.oldRangeParams = {
-      startNodeIndex: 0,
-      startOffset: 0,
-      endNodeIndex: 0,
-      endOffset: 0
-    };
+    // No selection has been captured yet. Do not default this to the start of
+    // the editor: React 19 focus/click ordering makes handleFocus restore that
+    // synthetic 0,0 range and moves the caret to the beginning on every click.
+    _this2.oldRangeParams = null;
     _this2.moveCursorOnInsert = false;
 
     // Elements defining the current state of range
     _this2.afterComponentUpdateData = null; // Set this to update the selection after rendering
-    _this2.lastSetRangeParmas = null; // This is set automatically each time the range params are set with setRangeParams
-
+    _this2.lastSetRangeParams = null; // This is set automatically each time the range params are set with setRangeParams
+    _this2.skipNextControlledValueRender = false;
+    _this2.skipNextControlledValue = null;
+    _this2.isMouseDownInEditable = false;
+    _this2.lastRenderedEditableHtml = null;
+    _this2.preserveNativeDomRangeParams = null;
     _this2.lastSetActiveButtons = null;
     _this2.onChangeCallback = _this2.props.onChange;
 
@@ -24004,12 +24473,403 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       var params = _objectSpread2({}, this.oldRangeParams);
       return params;
     }
+  }, {
+    key: "rangeIsAtStart",
+    value: function rangeIsAtStart(params) {
+      if (params === null || params === undefined) return false;
+      if (params.startGlobalOffset !== null && params.startGlobalOffset !== undefined && params.endGlobalOffset !== null && params.endGlobalOffset !== undefined) {
+        return params.startGlobalOffset === 0 && params.endGlobalOffset === 0;
+      }
+      return params.startNodeIndex === 0 && params.endNodeIndex === 0 && params.startOffset === 0 && params.endOffset === 0;
+    }
+  }, {
+    key: "rangeHasNonZeroPosition",
+    value: function rangeHasNonZeroPosition(params) {
+      if (params === null || params === undefined) return false;
+      if (params.startGlobalOffset !== null && params.startGlobalOffset !== undefined) {
+        return params.startGlobalOffset > 0;
+      }
+      return params.startNodeIndex > 0 || params.endNodeIndex > 0 || params.startOffset > 0 || params.endOffset > 0;
+    }
+  }, {
+    key: "getCurrentRawTextForProps",
+    value: function getCurrentRawTextForProps(nextProps) {
+      if (!this.editableDiv) return null;
+      try {
+        var rawText = elementToMarkedRawText(this.editableDiv, null, 0, this.enableHtml());
+        rawText = this.stripEmptyInlineFormattingTags(rawText);
+        return removeEncodingIfPlainText(rawText, nextProps.mimeType, this.enableHtml());
+      } catch (error) {
+        debugMathRichInput("getCurrentRawTextForProps:error", {
+          error: error,
+          selection: getSelectionSnapshot(this.editableDiv)
+        });
+        return null;
+      }
+    }
+  }, {
+    key: "shouldSkipRedundantFocusedRender",
+    value: function shouldSkipRedundantFocusedRender(nextProps, nextState) {
+      if (!this.editableDiv) return false;
+      if (nextState !== this.state) return false;
+      if (nextState.hasFocus !== true) return false;
+      if (this.afterComponentUpdateData !== null && this.afterComponentUpdateData !== undefined) {
+        return false;
+      }
+      var currentRawText = this.getCurrentRawTextForProps(nextProps);
+      var shouldSkip = currentRawText === nextProps.value;
+      debugMathRichInput("shouldComponentUpdate:redundant-focused-check", {
+        shouldSkip: shouldSkip,
+        currentRawText: currentRawText,
+        nextValue: nextProps.value,
+        currentPropsValue: this.props.value,
+        nextMimeType: nextProps.mimeType,
+        currentMimeType: this.props.mimeType,
+        selection: getSelectionSnapshot(this.editableDiv)
+      });
+      if (shouldSkip) {
+        var currentRangeParams = this.getRangeParamsPreservingInlinePlaceholder();
+        if (this.rangeHasNonZeroPosition(currentRangeParams)) {
+          this.setOldRangeParams(currentRangeParams);
+        }
+      }
+      return shouldSkip;
+    }
+  }, {
+    key: "isSelectionInsideInlinePlaceholder",
+    value: function isSelectionInsideInlinePlaceholder() {
+      if (typeof document === "undefined") return false;
+      var selection = document.getSelection ? document.getSelection() : null;
+      if (!selection || selection.rangeCount === 0) return false;
+      var range = selection.getRangeAt(0);
+      if (!range.collapsed) return false;
+      var node = range.startContainer;
+      if (!node || node.nodeType !== 3) return false;
+      if (node.nodeValue !== SMALL_SPACE) return false;
+      if (range.startOffset !== SMALL_SPACE_LENGTH) return false;
+      var parent = node.parentNode;
+      if (!parent || parent.nodeType !== 1) return false;
+      var tagName = parent.nodeName.toLowerCase();
+      if (!INLINE_STYLE_TAG_NAMES.includes(tagName)) return false;
+      return parent.textContent === SMALL_SPACE;
+    }
+  }, {
+    key: "getRangeParamsPreservingInlinePlaceholder",
+    value: function getRangeParamsPreservingInlinePlaceholder() {
+      var selectionInsideInlinePlaceholder = this.isSelectionInsideInlinePlaceholder();
+      var rangeParams = this._getRangeParams();
+      if (!selectionInsideInlinePlaceholder || !rangeParams) {
+        return rangeParams;
+      }
+
+      // Global offsets ignore the zero-width placeholder; node index preserves it.
+      return _objectSpread2(_objectSpread2({}, rangeParams), {}, {
+        startGlobalOffset: null,
+        endGlobalOffset: null
+      });
+    }
+  }, {
+    key: "getEditableHtmlForRender",
+    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 preserveRangeParams = canPreserveNativeDom ? this.getRangeParamsPreservingInlinePlaceholder() : null;
+      debugMathRichInput("render:editable-html", {
+        canPreserveNativeDom: canPreserveNativeDom,
+        selectionInsideInlinePlaceholder: this.isSelectionInsideInlinePlaceholder(),
+        propsValue: this.props.value,
+        generatedHtml: html,
+        renderedHtml: canPreserveNativeDom ? liveEditableHtml : html,
+        liveEditableHtml: liveEditableHtml,
+        lastRenderedEditableHtml: this.lastRenderedEditableHtml,
+        currentRawText: currentRawText,
+        preserveRangeParams: preserveRangeParams,
+        afterComponentUpdateData: this.afterComponentUpdateData,
+        hasFocus: this.state.hasFocus,
+        selection: getSelectionSnapshot(this.editableDiv)
+      });
+      if (canPreserveNativeDom) {
+        this.lastRenderedEditableHtml = liveEditableHtml;
+        this.preserveNativeDomRangeParams = preserveRangeParams;
+        return liveEditableHtml;
+      }
+      this.lastRenderedEditableHtml = html;
+      this.preserveNativeDomRangeParams = null;
+      return html;
+    }
+  }, {
+    key: "stripEmptyInlineFormattingTags",
+    value: function stripEmptyInlineFormattingTags(rawText) {
+      if (rawText === null || rawText === undefined) return rawText;
+      var cleaned = rawText;
+      var previous = null;
+      while (previous !== cleaned) {
+        previous = cleaned;
+        cleaned = cleaned.replace(EMPTY_INLINE_FORMATTING_REG_EXP, "");
+      }
+      return cleaned;
+    }
+  }, {
+    key: "cleanupEmptyInlineFormattingElements",
+    value: function cleanupEmptyInlineFormattingElements() {
+      if (!this.editableDiv) return false;
+      var removed = false;
+      this.editableDiv.querySelectorAll("b,strong,i,em,u,sub,sup").forEach(function (node) {
+        var text = node.textContent || "";
+        var hasMeaningfulText = text.replace(/[\s\u00a0\u200b\ufeff]/g, "") !== "";
+        var hasProtectedContent = node.querySelector("br,img,math,.katex") !== null;
+        if (!hasMeaningfulText && !hasProtectedContent) {
+          node.remove();
+          removed = true;
+        }
+      });
+      if (removed) {
+        this.editableDiv.normalize();
+      }
+      return removed;
+    }
+  }, {
+    key: "getStyleCommand",
+    value: function getStyleCommand(style) {
+      return INLINE_STYLE_COMMANDS[style] || style;
+    }
+  }, {
+    key: "insertInlineStylePlaceholder",
+    value: function insertInlineStylePlaceholder(style) {
+      var wrapperTag = INLINE_STYLE_WRAPPER_TAGS[style] || "span";
+      var selection = document.getSelection();
+      if (!selection || selection.rangeCount === 0) return false;
+      var range = selection.getRangeAt(0);
+      if (!range.collapsed) return false;
+      range.deleteContents();
+      var wrapper = document.createElement(wrapperTag);
+      var textNode = document.createTextNode(SMALL_SPACE);
+      wrapper.appendChild(textNode);
+      range.insertNode(wrapper);
+      var nextRange = document.createRange();
+      nextRange.setStart(textNode, SMALL_SPACE_LENGTH);
+      nextRange.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(nextRange);
+      var rangeParams = this.getRangeParamsPreservingInlinePlaceholder();
+      if (rangeParams) this.setOldRangeParams(rangeParams);
+      debugMathRichInput("insertInlineStylePlaceholder:after", {
+        style: style,
+        wrapperTag: wrapperTag,
+        innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+        rangeParams: rangeParams,
+        selection: getSelectionSnapshot(this.editableDiv)
+      });
+      return true;
+    }
+  }, {
+    key: "getActiveButtonsFromCommandState",
+    value: function getActiveButtonsFromCommandState() {
+      var query = function query(command) {
+        try {
+          return document.queryCommandState(command);
+        } catch (error) {
+          return false;
+        }
+      };
+      return {
+        bold: query("bold"),
+        italic: query("italic"),
+        underline: query("underline"),
+        subscript: query("subscript"),
+        superscript: query("superscript")
+      };
+    }
+  }, {
+    key: "isSelectionCollapsed",
+    value: function isSelectionCollapsed() {
+      var selection = document.getSelection();
+      if (!selection || selection.rangeCount === 0) return true;
+      return selection.getRangeAt(0).collapsed;
+    }
+  }, {
+    key: "getActiveButtonsFromAncestorState",
+    value: function getActiveButtonsFromAncestorState() {
+      var rangeParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (rangeParams === null || rangeParams === undefined) {
+        rangeParams = this._getRangeParams();
+      }
+      var activeButtons = {
+        bold: false,
+        italic: false,
+        underline: false,
+        subscript: false,
+        superscript: false
+      };
+      if (rangeParams === null || rangeParams === undefined || rangeParams.startNodeIndex < 0) {
+        return activeButtons;
+      }
+      var node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+      if (node === null || node === undefined) return activeButtons;
+      do {
+        if (node.nodeType === 1) {
+          var nodeName = node.nodeName.toLowerCase();
+          if (nodeName === "b" || nodeName === "strong") activeButtons.bold = true;else if (nodeName === "i" || nodeName === "em") activeButtons.italic = true;else if (nodeName === "u") activeButtons.underline = true;else if (nodeName === "sub") activeButtons.subscript = true;else if (nodeName === "sup") activeButtons.superscript = true;
+        } else if (node.classList !== null && node.classList !== undefined && node.classList.contains("MathRichInput")) break;
+        node = node.parentNode;
+      } while (node !== null);
+      return activeButtons;
+    }
+  }, {
+    key: "getActiveButtonsFromSelection",
+    value: function getActiveButtonsFromSelection() {
+      var rangeParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var commandState = this.getActiveButtonsFromCommandState();
+      var ancestorState = this.getActiveButtonsFromAncestorState(rangeParams);
+      return {
+        bold: commandState.bold || ancestorState.bold,
+        italic: commandState.italic || ancestorState.italic,
+        underline: commandState.underline || ancestorState.underline,
+        subscript: commandState.subscript || ancestorState.subscript,
+        superscript: commandState.superscript || ancestorState.superscript
+      };
+    }
+  }, {
+    key: "setActiveButtonsIfChanged",
+    value: function setActiveButtonsIfChanged(activeButtons) {
+      var update = true;
+      if (this.lastSetActiveButtons !== null) {
+        update = false;
+        for (var style in activeButtons) {
+          if (activeButtons[style] !== this.lastSetActiveButtons[style]) {
+            update = true;
+            break;
+          }
+        }
+      }
+      if (update) {
+        this.lastSetActiveButtons = activeButtons;
+        this.setState({
+          activeButtons: activeButtons
+        });
+      }
+    }
+  }, {
+    key: "getInlineStyleAncestor",
+    value: function getInlineStyleAncestor(style) {
+      var tags = INLINE_STYLE_TAGS[style];
+      if (!tags) return null;
+      var selection = document.getSelection();
+      if (!selection || selection.rangeCount === 0) return null;
+      var node = selection.getRangeAt(0).startContainer;
+      if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+      while (node && node !== this.editableDiv) {
+        if (node.nodeType === Node.ELEMENT_NODE && tags.includes(node.nodeName.toLowerCase())) {
+          return node;
+        }
+        node = node.parentNode;
+      }
+      return null;
+    }
+  }, {
+    key: "isRangeAtEndOfNode",
+    value: function isRangeAtEndOfNode(range, node) {
+      try {
+        var afterRange = document.createRange();
+        afterRange.setStart(range.startContainer, range.startOffset);
+        afterRange.setEnd(node, node.childNodes.length);
+        var textAfterCaret = afterRange.toString().replace(/[\s\u00a0\u200b\ufeff]/g, "");
+        if (textAfterCaret === "") return true;
+      } catch (error) {
+        // Fall back to boundary comparison below if the browser rejects the range.
+      }
+      var nodeEndRange = document.createRange();
+      nodeEndRange.selectNodeContents(node);
+      nodeEndRange.collapse(false);
+      return range.compareBoundaryPoints(Range.START_TO_START, nodeEndRange) === 0;
+    }
+  }, {
+    key: "moveTrailingWhitespaceOutsideInlineStyle",
+    value: function moveTrailingWhitespaceOutsideInlineStyle(style, command) {
+      var selection = document.getSelection();
+      if (!selection || selection.rangeCount === 0) return false;
+      var range = selection.getRangeAt(0);
+      if (!range.collapsed) return false;
+      var ancestor = this.getInlineStyleAncestor(style);
+      if (!ancestor || !this.isRangeAtEndOfNode(range, ancestor)) return false;
+      if (range.startContainer.nodeType !== Node.TEXT_NODE) return false;
+      var textNode = range.startContainer;
+      var text = textNode.nodeValue || "";
+      var moveStart = range.startOffset;
+      while (moveStart > 0) {
+        var _char = text.charAt(moveStart - 1);
+        if (_char !== " " && _char !== "\xA0") break;
+        moveStart -= 1;
+      }
+      if (moveStart === range.startOffset) return false;
+      var movedText = text.substring(moveStart, range.startOffset);
+      textNode.nodeValue = text.substring(0, moveStart) + text.substring(range.startOffset);
+      var outsideNode = ancestor.nextSibling;
+      if (!outsideNode || outsideNode.nodeType !== Node.TEXT_NODE) {
+        outsideNode = document.createTextNode(movedText);
+        ancestor.parentNode.insertBefore(outsideNode, ancestor.nextSibling);
+      } else {
+        outsideNode.nodeValue = movedText + outsideNode.nodeValue;
+      }
+      var nextRange = document.createRange();
+      nextRange.setStart(outsideNode, movedText.length);
+      nextRange.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(nextRange);
+      try {
+        if (document.queryCommandState(command)) {
+          document.execCommand(command, false, null);
+        }
+      } catch (error) {
+        // DOM position is the source of truth here; command state is best effort.
+      }
+      var rangeParams = this._getRangeParams();
+      if (rangeParams) {
+        this.setOldRangeParams(rangeParams);
+        this.applyCurrentEditableDomToComponent(rangeParams);
+      }
+      debugMathRichInput("moveTrailingWhitespaceOutsideInlineStyle:after", {
+        style: style,
+        command: command,
+        movedText: movedText,
+        innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+        rangeParams: rangeParams,
+        selection: getSelectionSnapshot(this.editableDiv)
+      });
+      return true;
+    }
+  }, {
+    key: "applyCurrentEditableDomToComponent",
+    value: function applyCurrentEditableDomToComponent() {
+      var rangeParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (!this.editableDiv) return;
+      if (rangeParams === null || rangeParams === undefined) {
+        rangeParams = this._getRangeParams();
+      }
+      if (rangeParams === null || rangeParams === undefined) return;
+      var rawText = elementToMarkedRawText(this.editableDiv, null, 0, this.enableHtml());
+      rawText = this.stripEmptyInlineFormattingTags(rawText);
+      var nodeCounts = this._countNodeTypes();
+      var hasMath = /<math>/i.test(rawText) || nodeCounts.math > 0;
+      var hasHtml = nodeCounts.html > 0 || /<[^>]+>/i.test(rawText);
+      var mimeType = this.getMimeType(hasHtml, hasMath);
+      rawText = removeEncodingIfPlainText(rawText, mimeType, this.enableHtml());
+      rawText = this.stripEmptyInlineFormattingTags(rawText);
+      this.applyChangesToComponent(rawText, mimeType, rangeParams, this.props.useExpertMode, this.props.selectedTab, {
+        skipControlledRender: true
+      });
+    }
   }, {
     key: "_getRangeParams",
     value: function _getRangeParams() {
       var editableDiv = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       if (editableDiv === null) editableDiv = this.editableDiv;
       var rangeParams = getRangeParams(editableDiv);
+      debugMathRichInput("MathRichInput:_getRangeParams", {
+        rangeParams: rangeParams,
+        selection: getSelectionSnapshot(editableDiv)
+      });
       return rangeParams;
     }
   }, {
@@ -24038,6 +24898,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       try {
         setupKatex();
+        debugMathRichInput("componentDidMount", {
+          propsValue: this.props.value,
+          propsMimeType: this.props.mimeType,
+          autofocus: this.props.autofocus,
+          autoFocus: this.props.autoFocus,
+          innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+          selection: getSelectionSnapshot(this.editableDiv)
+        });
         this.editableDiv.addEventListener("keydown", this.handleKeyDown);
         this.editableDiv.addEventListener("keyup", this.handleKeyUp);
         this.editableDiv.addEventListener("paste", this.handlePaste);
@@ -24059,14 +24927,70 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.error(error);
       }
     }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this.skipNextControlledValueRender === true) {
+        var canSkip = nextProps.value === this.skipNextControlledValue && nextState === this.state;
+        debugMathRichInput("shouldComponentUpdate:native-input-gate", {
+          canSkip: canSkip,
+          nextValue: nextProps.value,
+          skipNextControlledValue: this.skipNextControlledValue,
+          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;
+        if (canSkip) return false;
+      }
+      if (this.shouldSkipRedundantFocusedRender(nextProps, nextState)) {
+        debugMathRichInput("shouldComponentUpdate:skip-redundant-focused-render", {
+          nextValue: nextProps.value,
+          currentPropsValue: this.props.value,
+          selection: getSelectionSnapshot(this.editableDiv)
+        });
+        return false;
+      }
+      return true;
+    }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       try {
+        debugMathRichInput("componentDidUpdate:start", {
+          propsValue: this.props.value,
+          propsMimeType: this.props.mimeType,
+          afterComponentUpdateData: this.afterComponentUpdateData,
+          hasFocus: this.state.hasFocus,
+          showEquationEditor: this.state.showEquationEditor,
+          innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+          selection: getSelectionSnapshot(this.editableDiv)
+        });
         if (this.afterComponentUpdateData !== null && this.afterComponentUpdateData !== undefined && this.afterComponentUpdateData.value === this.props.value) {
+          debugMathRichInput("componentDidUpdate:restore-before", {
+            rangeParams: this.afterComponentUpdateData.rangeParams,
+            selection: getSelectionSnapshot(this.editableDiv)
+          });
           this._setRangeParams(this.afterComponentUpdateData.rangeParams);
           this.afterComponentUpdateData = null;
           this.updateActiveButtons();
+          debugMathRichInput("componentDidUpdate:restore-after", {
+            selection: getSelectionSnapshot(this.editableDiv)
+          });
+        }
+        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)
+          });
         }
       } catch (error) {
         console.error(error);
@@ -24079,20 +25003,31 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         if (rangeParams === null || rangeParams === undefined) rangeParams = this._getRangeParams();
         if (rangeParams.startOffset !== 0) console.warn("Unexpected startOffset " + rangeParams.startOffset + " in insertAfterSmallSpace");
         var node = this._findNodeWithIndex(rangeParams.startNodeIndex);
-        var raw_text = elementToMarkedRawText(this.editableDiv, node, 1,
-        // after small space
-        this.enableHtml());
-        var new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
+        if (node === null || node === undefined || node.nodeValue === null) {
+          console.warn("Could not find small-space text node");
+          return;
+        }
+
+        // The initial empty editor contains a hidden zero-width space. Handling
+        // the first printable key by re-rendering through React replaces the
+        // text node and drops Chrome's selection to the start under React 19.
+        // Mutate the already-focused DOM node, then skip the matching controlled
+        // render exactly like the normal contenteditable input path.
+        node.nodeValue = node.nodeValue.substring(0, 1) + new_char + node.nodeValue.substring(1);
         var new_rangeParams = {
           startNodeIndex: rangeParams.startNodeIndex,
-          startNodeOffset: 1 + new_char.length,
+          startOffset: 1 + new_char.length,
           endNodeIndex: rangeParams.startNodeIndex,
-          endNodeOffset: 1 + new_char.length,
+          endOffset: 1 + new_char.length,
           startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
           endGlobalOffset: rangeParams.endGlobalOffset + new_char.length
         };
+        this._setRangeParams(new_rangeParams);
+        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);
+        this.applyChangesToComponent(new_raw_text, this.props.mimeType, new_rangeParams, this.props.useExpertMode, this.props.selectedTab, {
+          skipControlledRender: true
+        });
       } catch (error) {
         console.error(error);
       }
@@ -24106,6 +25041,23 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.log(this.props);
       }
       var html = rawTextToHtml(katex$1, this.props.value || "", this.props.mimeType);
+      var editableHtml = this.getEditableHtmlForRender(html);
+      debugMathRichInput("render", {
+        propsValue: this.props.value,
+        propsMimeType: this.props.mimeType,
+        html: html,
+        editableHtml: editableHtml,
+        state: {
+          hasFocus: this.state.hasFocus,
+          showEquationEditor: this.state.showEquationEditor,
+          showAccentBar: this.state.showAccentBar,
+          keyPressed: this.state.keyPressed
+        },
+        afterComponentUpdateData: this.afterComponentUpdateData,
+        oldRangeParams: this.oldRangeParams,
+        editableInnerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+        selection: getSelectionSnapshot(this.editableDiv)
+      });
 
       // Debug render math
       // if (this.props.value && this.props.value.includes("<math>")) {
@@ -24164,7 +25116,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd,
         dangerouslySetInnerHTML: {
-          __html: html
+          __html: editableHtml
         },
         "data-placeholder": this.props.placeholder || ""
       }))), this.state.showEquationEditor && /*#__PURE__*/React__default["default"].createElement(EquationEditorModal, {
@@ -24173,7 +25125,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         },
         handleClose: this.handleEquationEditorClose,
         handleInsert: this.handleEquationEditorInsert,
-        latex: this.state.equationEditorLatex
+        latex: this.state.equationEditorLatex,
+        disableAnimation: this.props.disableAnimation
       }));
     }
   }]);
@@ -24182,7 +25135,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 function getAllTextNodes(node) {
   var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   if (node === null) {
-    console.warn("Deverloper supplied a null node. Ignoring");
+    console.warn("Developer supplied a null node. Ignoring");
     return nodes;
   }
   if (nodes === null) {
@@ -24207,8 +25160,9 @@ function getAllTextNodes(node) {
   return nodes;
 }
 function renderMathInNode(node) {
+  if (node === null || node === undefined) return;
   try {
-    var textNodes = getAllTextNodes(node);
+    var textNodes = getAllTextNodes(node, []);
     for (var i = 0; i < textNodes.length; i++) {
       try {
         var text = textNodes[i].nodeValue;