@zzish/math-rich-input 0.1.51 → 0.1.53

package/dist/index.js

@@ -20283,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({
@@ -20305,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) {
@@ -20479,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");
         }
@@ -20668,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>";
@@ -21309,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
@@ -21350,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");
@@ -21361,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
@@ -21385,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
@@ -21434,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);
@@ -21458,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:");
@@ -21471,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;
@@ -21530,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);
@@ -21545,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);
@@ -21557,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);
@@ -21572,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:");
@@ -21798,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>"
@@ -21939,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;
@@ -21968,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 = {
@@ -22011,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;
@@ -22146,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) {
@@ -22603,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)) {
@@ -22659,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");
@@ -22676,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
@@ -22698,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") {
@@ -22756,6 +23034,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Stop editing if within rendered katex node, if somehow the cursor ends up there (it shouldn't)
         var params = _this2._getRangeParams();
+        // No range means no caret to protect — a field the browser has not placed a selection in yet. It
+        // reads as null on the first keystroke after a click on a toolbar button, and dereferencing it threw
+        // on every Cmd, every Cmd+A and every Cmd+V the teacher pressed.
+        if (params === null || params === undefined) return;
         var startNode = _this2._findNodeWithIndex(params.startNodeIndex);
         var endNode = _this2._findNodeWithIndex(params.endNodeIndex);
         if (!_this2.editableDivIsPlainText()) {
@@ -22794,13 +23076,26 @@ 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;
 
         // If the cursor is in a katex node, then move it to the next node (unless there is no
         // net node in which case move it to the previous node)
         if (e.key === "ArrowRight") {
+          // `_getRangeParams` returns null whenever the document's selection is not inside this field —
+          // which happens in ordinary use, not only in error: a toolbar button taking focus is enough. It
+          // was dereferenced straight away, so the key handler THREW and everything after it in the same
+          // press was skipped.
           var rangeParams = _this2._getRangeParams();
+          if (!rangeParams) return;
           var index = rangeParams.startNodeIndex;
           if (index >= 0) {
             if (isKatexNode(_this2._findNodeWithIndex(index))) {
@@ -22829,7 +23124,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           }
         }
         if (e.key === "ArrowLeft") {
+          // Same guard, same reason — see ArrowRight above.
           var _rangeParams = _this2._getRangeParams();
+          if (!_rangeParams) return;
           var _index = _rangeParams.startNodeIndex;
 
           // If the cursor is in a katex node, then move it to the previous node (unless there is no
@@ -22869,8 +23166,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"
@@ -22889,7 +23200,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(
@@ -22910,6 +23224,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 || {
@@ -22920,7 +23235,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);
       }
@@ -22965,44 +23289,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);
       }
@@ -23054,8 +23342,29 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var pasteHtml = clipboardData.getData("text/html");
         var pasteText = clipboardData.getData("text/plain");
 
-        // Get current cursor position
-        var rangeParams = _this2._getRangeParams();
+        // Remove whatever was selected FIRST, then read the caret.
+        //
+        // The order used to be the other way round, and that is why pasting over a selection emptied the
+        // field instead of replacing it. `rangeParams` is a NODE INDEX plus an offset, and
+        // `deleteFromDocument()` removes the very nodes it counts: read before the delete, the index points
+        // at something that no longer exists, so `_findNodeWithIndex` below finds nothing, the marked text
+        // it builds carries no mark, and the pasted text is inserted nowhere. The value the component then
+        // reports is correct while the editable div is left empty — which is exactly what a teacher sees.
+        //
+        // It only ever worked on an empty field because the canonical empty state is a single `<p>` holding
+        // one small space: deleting that selection leaves the same node structure standing, so the stale
+        // index still happens to resolve.
+        // Read the caret BEFORE, so there is something to fall back on, and AGAIN after the delete.
+        var paramsBeforeDelete = _this2._getRangeParams();
+        var selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+          selection.deleteFromDocument();
+        }
+
+        // The caret AFTER the delete is the one that counts: `rangeParams` is a node index, and the delete
+        // removed the very nodes it counts. The pre-delete value is kept only as a fallback — bailing out
+        // here having already emptied the selection is how a paste turns into a deletion.
+        var rangeParams = _this2._getRangeParams() || paramsBeforeDelete;
         if (!rangeParams) {
           console.warn("Could not get range params for paste");
           return;
@@ -23063,12 +23372,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Store old range params for cursor positioning (like equation editor)
         _this2.setOldRangeParams(rangeParams);
-
-        // Clear any existing selection
-        var selection = window.getSelection();
-        if (selection.rangeCount > 0) {
-          selection.deleteFromDocument();
-        }
         var finalText = "";
         var finalMimeType = _this2.props.mimeType || "text/html";
         var hasMathContent = false;
@@ -23171,38 +23474,41 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
           // Insert the new content at the marked position
           var newRawText = removeMarks(insertCharacterBeforeMarks(markedText, finalText));
-
           // Convert any remaining \[...\] LaTeX expressions to <math>...</math> format
           // This ensures consistency when paste adds <math> tags alongside existing \[...\] expressions
           if (_this2.enableMath()) {
             newRawText = newRawText.replace(/\\\[([^\]]*?)\\\]/g, "<math>$1</math>");
           }
 
-          // Calculate cursor position exactly like equation editor does
+          /*
+           * Where the caret lands after a paste: at the END of what was pasted.
+           *
+           * The node index walks to just past the last formula, and that part was always right. The OFFSET
+           * within that node was not: it stopped at the boundary, so pasting "…multiply it by 3." left the
+           * caret between the 3 and the full stop. Everything after the last `</math>` is plain text, and
+           * plain text is the one thing whose rendered length is its written length — so the tail can
+           * simply be stepped over. (Markup in the tail is not that, and keeps the old position rather than
+           * a guessed one.)
+           *
+           * Deriving the position from scratch was tried twice and both attempts landed FURTHER away, each
+           * needing an exact model of how the rendered document is measured and each getting a corner of it
+           * wrong. Walking the structure that is already there needs no such model.
+           */
           var newRangeParams = null;
           if (hasMathContent) {
-            // Use same approach as equation editor for math content
             var oldRangeParams = _this2.getOldRangeParams();
             var mathTagCount = (finalText.match(/<math>/gi) || []).length;
-            if (_this2.props.value === "") {
-              // Special case of previously empty text input (like equation editor)
-              newRangeParams = {
-                startNodeIndex: mathTagCount * 2,
-                startOffset: SMALL_SPACE_LENGTH,
-                endNodeIndex: mathTagCount * 2,
-                endOffset: SMALL_SPACE_LENGTH
-              };
-            } else {
-              // Normal case - position cursor after inserted math content (like equation editor)
-              newRangeParams = {
-                startNodeIndex: oldRangeParams.startNodeIndex + mathTagCount * 2,
-                startOffset: SMALL_SPACE_LENGTH,
-                endNodeIndex: oldRangeParams.startNodeIndex + mathTagCount * 2,
-                endOffset: SMALL_SPACE_LENGTH
-              };
-            }
+            var startNodeIndex = _this2.props.value === "" ? mathTagCount * 2 : oldRangeParams.startNodeIndex + mathTagCount * 2;
+            var lastMathEnd = finalText.toLowerCase().lastIndexOf("</math>");
+            var tail = lastMathEnd === -1 ? "" : finalText.substring(lastMathEnd + "</math>".length);
+            var startOffset = tail.indexOf("<") === -1 ? SMALL_SPACE_LENGTH + tail.length : SMALL_SPACE_LENGTH;
+            newRangeParams = {
+              startNodeIndex: startNodeIndex,
+              startOffset: startOffset,
+              endNodeIndex: startNodeIndex,
+              endOffset: startOffset
+            };
           } else {
-            // For text content, use global offset like before
             var newGlobalOffset = rangeParams.startGlobalOffset + finalText.length;
             newRangeParams = {
               startGlobalOffset: newGlobalOffset,
@@ -23225,6 +23531,23 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
           // Apply the change using the component's standard flow
           _this2.applyChangesToComponent(cleanedRawText, actualMimeType, newRangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+
+          // 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
+          // field they came from — no prop changes, nothing re-renders, and the field is left empty while
+          // the value is correct everywhere else. So: give a real render its chance, then put the content
+          // back if none came.
+          var rangeAfterPaste = newRangeParams;
+          queueMicrotask(function () {
+            try {
+              if (_this2.reconcileEditableDomWithRender(true)) {
+                _this2._setRangeParams(rangeAfterPaste);
+                _this2.updateActiveButtons();
+              }
+            } catch (error) {
+              console.error(error);
+            }
+          });
         }
       } catch (error) {
         console.error("Error in paste handler:", error);
@@ -23237,6 +23560,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({
@@ -23279,6 +23610,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;
@@ -23286,11 +23618,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 {
@@ -23325,7 +23667,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Clear selection anchor on mouse click
         _this2.selectionAnchor = null;
+
+        // 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.
         var params = _this2._getRangeParams();
+        if (!params) return;
+        _this2.setOldRangeParams(params);
         var startNode = _this2._findNodeWithIndex(params.startNodeIndex);
         var endNode = _this2._findNodeWithIndex(params.endNodeIndex);
         if (startNode === null || endNode === null) {
@@ -23381,7 +23728,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();
@@ -23423,6 +23778,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;
         }
@@ -23441,28 +23800,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);
@@ -23479,13 +23858,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, " ");
@@ -23494,78 +23882,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);
@@ -23573,8 +23904,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);
@@ -23886,13 +24224,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);
@@ -23900,6 +24261,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();
       }
@@ -23909,6 +24286,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           hasFocus: false,
           showAccentBar: false
         });
+        debugMathRichInput("handleBlur:after-setState", {
+          selection: getSelectionSnapshot(_this2.editableDiv)
+        });
       } catch (error) {
         console.error(error);
       }
@@ -24040,18 +24420,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;
 
@@ -24141,12 +24523,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;
     }
   }, {
@@ -24175,6 +24948,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);
@@ -24196,14 +24977,137 @@ 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;
+    }
+
+    /**
+     * The browser's own reading of an HTML string.
+     *
+     * React renders `<p>&#8203;…</P>`; the DOM reports `<p>​…</p>` — same content, different bytes. So a
+     * comparison against `innerHTML` has to be made in the DOM's spelling, or it never matches and the
+     * reconciliation below would rewrite the field on every single update.
+     */
+  }, {
+    key: "normaliseHtml",
+    value: function normaliseHtml(html) {
+      var probe = document.createElement("span");
+      probe.innerHTML = html;
+      return probe.innerHTML;
+    }
+
+    /**
+     * Put back what React believes it rendered, when the live DOM has drifted away from it.
+     *
+     * WHY THIS IS NEEDED AT ALL. `dangerouslySetInnerHTML` writes only when the html STRING changes: React
+     * compares the new `__html` with the previous one and, finding them equal, leaves the DOM alone. That is
+     * sound as long as React is the only thing that touches the DOM — and here it is not. `handlePaste`
+     * removes the selected content itself, through `selection.deleteFromDocument()`, so the field empties
+     * behind React's back while React's record of it still says "full".
+     *
+     * Paste the same words back into the field they came from and the two mistakes meet: the DOM is empty,
+     * the html React computes is identical to the html it rendered last time, so it writes nothing — and
+     * the field stays blank while `value`, the command, and the row in the database are all correct. The
+     * teacher sees their text vanish on paste; nothing anywhere reports an error.
+     *
+     * It writes back the SAME string React itself passed to `dangerouslySetInnerHTML` on this render, so
+     * nothing reaches the DOM here that React was not already putting there — the trust boundary is the
+     * one that existed before, not a new one.
+     *
+     * Only reconciled after a PROGRAMMATIC edit (`afterComponentUpdateData` is set), or when the paste
+     * asks directly (`force`). Ordinary typing goes down the native-input path, where the browser has
+     * already put the character in the right place and the caret with it, and rewriting the DOM there
+     * would move the caret to the front on every keystroke.
+     *
+     * `force` exists because a re-render is not guaranteed to happen AT ALL. When the host already holds
+     * the value being applied — paste the same words back into the field they came from — the prop never
+     * changes, so nothing re-renders and `componentDidUpdate` never runs. `lastRenderedEditableHtml` is
+     * then exactly right: it is the html for that unchanged value, which is what the DOM should hold.
+     *
+     * Returns whether it wrote, so the caller knows whether the caret needs putting back.
+     */
+  }, {
+    key: "reconcileEditableDomWithRender",
+    value: function reconcileEditableDomWithRender() {
+      var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      if (!this.editableDiv) return false;
+      if (!force && (this.afterComponentUpdateData === null || this.afterComponentUpdateData === undefined)) return false;
+      var html = force ? rawTextToHtml(katex$1, this.props.value || "", this.props.mimeType) : this.lastRenderedEditableHtml;
+      if (html === null || html === undefined) return false;
+      if (this.editableDiv.innerHTML === this.normaliseHtml(html)) return false;
+      debugMathRichInput("reconcile", {
+        force: force,
+        liveInnerHTML: this.editableDiv.innerHTML,
+        html: html
+      });
+      this.editableDiv.innerHTML = html;
+      this.lastRenderedEditableHtml = html;
+      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)
+        });
+        // Before the caret is restored, not after: the offsets below are counted through the text, so
+        // restoring them against an empty field puts the caret at 0 and loses the position as well.
+        this.reconcileEditableDomWithRender();
         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);
@@ -24216,20 +25120,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);
       }
@@ -24243,6 +25158,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>")) {
@@ -24301,7 +25233,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, {
@@ -24320,7 +25252,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) {
@@ -24345,8 +25277,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;