@zzish/math-rich-input 0.1.51 → 0.1.53

package/src/MathRichInput.jsx

@@ -34,6 +34,10 @@ import {
   globalOffsetToPlainTextOffset,
   plainTextOffsetToGlobalOffset,
 } from "./mathRichInputHelper";
+import {
+  debugMathRichInput,
+  getSelectionSnapshot,
+} from "./mathRichInputDebug";
 
 import "./MathRichInput.css";
 import AccentBar from "./AccentBar";
@@ -50,6 +54,30 @@ const SMALL_SPACE_LENGTH = SMALL_SPACE.length;
 
 const MARK = getMark();
 const MARK_REG_EXP = new RegExp(MARK, "g");
+const INLINE_STYLE_COMMANDS = {
+  bold: "bold",
+  italic: "italic",
+  underline: "underline",
+  subscript: "subscript",
+  superscript: "superscript",
+};
+const INLINE_STYLE_TAGS = {
+  bold: ["b", "strong"],
+  italic: ["i", "em"],
+  underline: ["u"],
+  subscript: ["sub"],
+  superscript: ["sup"],
+};
+const INLINE_STYLE_TAG_NAMES = ["b", "strong", "i", "em", "u", "sub", "sup"];
+const INLINE_STYLE_WRAPPER_TAGS = {
+  bold: "strong",
+  italic: "em",
+  underline: "u",
+  subscript: "sub",
+  superscript: "sup",
+};
+const 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>"
@@ -190,17 +218,20 @@ export default class MathRichInput extends React.Component {
 
     // Elements that need to be set before the equation editor is shown
     this.markedRawText = null;
-    this.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.
+    this.oldRangeParams = null;
     this.moveCursorOnInsert = false;
 
     // Elements defining the current state of range
     this.afterComponentUpdateData = null; // Set this to update the selection after rendering
-    this.lastSetRangeParmas = null; // This is set automatically each time the range params are set with setRangeParams
+    this.lastSetRangeParams = null; // This is set automatically each time the range params are set with setRangeParams
+    this.skipNextControlledValueRender = false;
+    this.skipNextControlledValue = null;
+    this.isMouseDownInEditable = false;
+    this.lastRenderedEditableHtml = null;
+    this.preserveNativeDomRangeParams = null;
 
     this.lastSetActiveButtons = null;
 
@@ -292,12 +323,35 @@ export default class MathRichInput extends React.Component {
     mimeType,
     rangeParams,
     isExpertMode,
-    selectedTab
+    selectedTab,
+    applyOptions = {}
   ) => {
     // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
     if (rangeParams === null) rangeParams = this.lastSetRangeParams;
 
-    this.afterComponentUpdateData = { rangeParams, value };
+    debugMathRichInput("applyChangesToComponent:start", {
+      value,
+      mimeType,
+      rangeParams,
+      propsValue: this.props.value,
+      propsMimeType: this.props.mimeType,
+      innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+      selection: getSelectionSnapshot(this.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.
+      this.skipNextControlledValueRender = true;
+      this.skipNextControlledValue = value;
+      this.afterComponentUpdateData = null;
+    } else {
+      this.afterComponentUpdateData = { rangeParams, value };
+    }
 
     let options = this.props.options || DEFAULT_OPTIONS;
     if (isExpertMode === null) isExpertMode = options.isExpertMode;
@@ -312,6 +366,10 @@ export default class MathRichInput extends React.Component {
 
     // Call the parent handler to apply the changes
     this.onChangeCallback({ value, mimeType }, { isExpertMode, selectedTab });
+    debugMathRichInput("applyChangesToComponent:after-onChange", {
+      afterComponentUpdateData: this.afterComponentUpdateData,
+      selection: getSelectionSnapshot(this.editableDiv),
+    });
   };
 
   initialiseHistory = () => {
@@ -392,23 +450,550 @@ export default class MathRichInput extends React.Component {
     return params;
   }
 
+  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
+    );
+  }
+
+  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
+    );
+  }
+
+  getCurrentRawTextForProps(nextProps) {
+    if (!this.editableDiv) return null;
+    try {
+      let 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,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
+      return null;
+    }
+  }
+
+  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;
+    }
+
+    const currentRawText = this.getCurrentRawTextForProps(nextProps);
+    const shouldSkip = currentRawText === nextProps.value;
+    debugMathRichInput("shouldComponentUpdate:redundant-focused-check", {
+      shouldSkip,
+      currentRawText,
+      nextValue: nextProps.value,
+      currentPropsValue: this.props.value,
+      nextMimeType: nextProps.mimeType,
+      currentMimeType: this.props.mimeType,
+      selection: getSelectionSnapshot(this.editableDiv),
+    });
+
+    if (shouldSkip) {
+      const currentRangeParams = this.getRangeParamsPreservingInlinePlaceholder();
+      if (this.rangeHasNonZeroPosition(currentRangeParams)) {
+        this.setOldRangeParams(currentRangeParams);
+      }
+    }
+
+    return shouldSkip;
+  }
+
+  isSelectionInsideInlinePlaceholder() {
+    if (typeof document === "undefined") return false;
+
+    const selection = document.getSelection ? document.getSelection() : null;
+    if (!selection || selection.rangeCount === 0) return false;
+
+    const range = selection.getRangeAt(0);
+    if (!range.collapsed) return false;
+
+    const 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;
+
+    const parent = node.parentNode;
+    if (!parent || parent.nodeType !== 1) return false;
+
+    const tagName = parent.nodeName.toLowerCase();
+    if (!INLINE_STYLE_TAG_NAMES.includes(tagName)) return false;
+
+    return parent.textContent === SMALL_SPACE;
+  }
+
+  getRangeParamsPreservingInlinePlaceholder() {
+    const selectionInsideInlinePlaceholder =
+      this.isSelectionInsideInlinePlaceholder();
+    const rangeParams = this._getRangeParams();
+
+    if (!selectionInsideInlinePlaceholder || !rangeParams) {
+      return rangeParams;
+    }
+
+    // Global offsets ignore the zero-width placeholder; node index preserves it.
+    return {
+      ...rangeParams,
+      startGlobalOffset: null,
+      endGlobalOffset: null,
+    };
+  }
+
+  getEditableHtmlForRender(html) {
+    const currentRawText = this.editableDiv
+      ? this.getCurrentRawTextForProps(this.props)
+      : null;
+    const liveEditableHtml = this.editableDiv ? this.editableDiv.innerHTML : null;
+    const canPreserveNativeDom =
+      this.state.hasFocus === true &&
+      this.editableDiv !== null &&
+      this.editableDiv !== undefined &&
+      (this.afterComponentUpdateData === null ||
+        this.afterComponentUpdateData === undefined) &&
+      this.lastRenderedEditableHtml !== null &&
+      currentRawText === this.props.value;
+    const preserveRangeParams = canPreserveNativeDom
+      ? this.getRangeParamsPreservingInlinePlaceholder()
+      : null;
+
+    debugMathRichInput("render:editable-html", {
+      canPreserveNativeDom,
+      selectionInsideInlinePlaceholder:
+        this.isSelectionInsideInlinePlaceholder(),
+      propsValue: this.props.value,
+      generatedHtml: html,
+      renderedHtml: canPreserveNativeDom ? liveEditableHtml : html,
+      liveEditableHtml,
+      lastRenderedEditableHtml: this.lastRenderedEditableHtml,
+      currentRawText,
+      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;
+  }
+
+  stripEmptyInlineFormattingTags(rawText) {
+    if (rawText === null || rawText === undefined) return rawText;
+    let cleaned = rawText;
+    let previous = null;
+    while (previous !== cleaned) {
+      previous = cleaned;
+      cleaned = cleaned.replace(EMPTY_INLINE_FORMATTING_REG_EXP, "");
+    }
+    return cleaned;
+  }
+
+  cleanupEmptyInlineFormattingElements() {
+    if (!this.editableDiv) return false;
+
+    let removed = false;
+    this.editableDiv
+      .querySelectorAll("b,strong,i,em,u,sub,sup")
+      .forEach((node) => {
+        const text = node.textContent || "";
+        const hasMeaningfulText = text.replace(/[\s\u00a0\u200b\ufeff]/g, "") !== "";
+        const hasProtectedContent =
+          node.querySelector("br,img,math,.katex") !== null;
+
+        if (!hasMeaningfulText && !hasProtectedContent) {
+          node.remove();
+          removed = true;
+        }
+      });
+
+    if (removed) {
+      this.editableDiv.normalize();
+    }
+
+    return removed;
+  }
+
+  getStyleCommand(style) {
+    return INLINE_STYLE_COMMANDS[style] || style;
+  }
+
+  insertInlineStylePlaceholder(style) {
+    const wrapperTag = INLINE_STYLE_WRAPPER_TAGS[style] || "span";
+    const selection = document.getSelection();
+    if (!selection || selection.rangeCount === 0) return false;
+
+    const range = selection.getRangeAt(0);
+    if (!range.collapsed) return false;
+
+    range.deleteContents();
+
+    const wrapper = document.createElement(wrapperTag);
+    const textNode = document.createTextNode(SMALL_SPACE);
+    wrapper.appendChild(textNode);
+    range.insertNode(wrapper);
+
+    const nextRange = document.createRange();
+    nextRange.setStart(textNode, SMALL_SPACE_LENGTH);
+    nextRange.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(nextRange);
+
+    const rangeParams = this.getRangeParamsPreservingInlinePlaceholder();
+    if (rangeParams) this.setOldRangeParams(rangeParams);
+
+    debugMathRichInput("insertInlineStylePlaceholder:after", {
+      style,
+      wrapperTag,
+      innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+      rangeParams,
+      selection: getSelectionSnapshot(this.editableDiv),
+    });
+
+    return true;
+  }
+
+  getActiveButtonsFromCommandState() {
+    const 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"),
+    };
+  }
+
+  isSelectionCollapsed() {
+    const selection = document.getSelection();
+    if (!selection || selection.rangeCount === 0) return true;
+    return selection.getRangeAt(0).collapsed;
+  }
+
+  getActiveButtonsFromAncestorState(rangeParams = null) {
+    if (rangeParams === null || rangeParams === undefined) {
+      rangeParams = this._getRangeParams();
+    }
+
+    let activeButtons = {
+      bold: false,
+      italic: false,
+      underline: false,
+      subscript: false,
+      superscript: false,
+    };
+
+    if (
+      rangeParams === null ||
+      rangeParams === undefined ||
+      rangeParams.startNodeIndex < 0
+    ) {
+      return activeButtons;
+    }
+
+    let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+    if (node === null || node === undefined) return activeButtons;
+
+    do {
+      if (node.nodeType === 1) {
+        let 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;
+  }
+
+  getActiveButtonsFromSelection(rangeParams = null) {
+    const commandState = this.getActiveButtonsFromCommandState();
+    const 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,
+    };
+  }
+
+  setActiveButtonsIfChanged(activeButtons) {
+    let 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 });
+    }
+  }
+
+  getInlineStyleAncestor(style) {
+    const tags = INLINE_STYLE_TAGS[style];
+    if (!tags) return null;
+
+    const selection = document.getSelection();
+    if (!selection || selection.rangeCount === 0) return null;
+
+    let 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;
+  }
+
+  isRangeAtEndOfNode(range, node) {
+    try {
+      const afterRange = document.createRange();
+      afterRange.setStart(range.startContainer, range.startOffset);
+      afterRange.setEnd(node, node.childNodes.length);
+      const 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.
+    }
+
+    const nodeEndRange = document.createRange();
+    nodeEndRange.selectNodeContents(node);
+    nodeEndRange.collapse(false);
+    return range.compareBoundaryPoints(Range.START_TO_START, nodeEndRange) === 0;
+  }
+
+  moveTrailingWhitespaceOutsideInlineStyle(style, command) {
+    const selection = document.getSelection();
+    if (!selection || selection.rangeCount === 0) return false;
+
+    const range = selection.getRangeAt(0);
+    if (!range.collapsed) return false;
+
+    const ancestor = this.getInlineStyleAncestor(style);
+    if (!ancestor || !this.isRangeAtEndOfNode(range, ancestor)) return false;
+    if (range.startContainer.nodeType !== Node.TEXT_NODE) return false;
+
+    const textNode = range.startContainer;
+    const text = textNode.nodeValue || "";
+    let moveStart = range.startOffset;
+    while (moveStart > 0) {
+      const char = text.charAt(moveStart - 1);
+      if (char !== " " && char !== "\u00a0") break;
+      moveStart -= 1;
+    }
+
+    if (moveStart === range.startOffset) return false;
+
+    const movedText = text.substring(moveStart, range.startOffset);
+    textNode.nodeValue =
+      text.substring(0, moveStart) + text.substring(range.startOffset);
+
+    let 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;
+    }
+
+    const 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.
+    }
+
+    const rangeParams = this._getRangeParams();
+    if (rangeParams) {
+      this.setOldRangeParams(rangeParams);
+      this.applyCurrentEditableDomToComponent(rangeParams);
+    }
+
+    debugMathRichInput("moveTrailingWhitespaceOutsideInlineStyle:after", {
+      style,
+      command,
+      movedText,
+      innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+      rangeParams,
+      selection: getSelectionSnapshot(this.editableDiv),
+    });
+    return true;
+  }
+
+  applyCurrentEditableDomToComponent(rangeParams = null) {
+    if (!this.editableDiv) return;
+    if (rangeParams === null || rangeParams === undefined) {
+      rangeParams = this._getRangeParams();
+    }
+    if (rangeParams === null || rangeParams === undefined) return;
+
+    let rawText = elementToMarkedRawText(
+      this.editableDiv,
+      null,
+      0,
+      this.enableHtml()
+    );
+    rawText = this.stripEmptyInlineFormattingTags(rawText);
+
+    const nodeCounts = this._countNodeTypes();
+    const hasMath = /<math>/i.test(rawText) || nodeCounts.math > 0;
+    const hasHtml = nodeCounts.html > 0 || /<[^>]+>/i.test(rawText);
+    const 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 }
+    );
+  }
+
   _getRangeParams(editableDiv = null) {
     if (editableDiv === null) editableDiv = this.editableDiv;
     let rangeParams = getRangeParams(editableDiv);
+    debugMathRichInput("MathRichInput:_getRangeParams", {
+      rangeParams,
+      selection: getSelectionSnapshot(editableDiv),
+    });
     return rangeParams;
   }
 
   _setRangeParams = (params) => {
     try {
+      debugMathRichInput("MathRichInput:_setRangeParams:start", {
+        params,
+        selectionBefore: getSelectionSnapshot(this.editableDiv),
+      });
       setRangeParams(this.editableDiv, params);
       this.setOldRangeParams(params);
-      this.lastSetRangeParmas = params;
+      this.lastSetRangeParams = params;
+      debugMathRichInput("MathRichInput:_setRangeParams:after", {
+        params,
+        oldRangeParams: this.oldRangeParams,
+        selectionAfter: getSelectionSnapshot(this.editableDiv),
+      });
     } catch (error) {
       console.error(error);
       // console.log(this.editableDiv.childNodes);
     }
   };
 
+  restoreRangeAfterBrowserWork = (params, reason) => {
+    if (params === null || params === undefined) return;
+    const restore = (delay) => {
+      window.setTimeout(() => {
+        if (this.state.showEquationEditor) return;
+        if (!this.state.hasFocus && document.activeElement !== this.editableDiv) {
+          return;
+        }
+        debugMathRichInput("restoreRangeAfterBrowserWork", {
+          reason,
+          delay,
+          params,
+          selectionBefore: getSelectionSnapshot(this.editableDiv),
+        });
+        this._setRangeParams(params);
+      }, delay);
+    };
+    restore(0);
+    restore(50);
+  };
+
   _findNodeWithIndex(index) {
     return findNodeWithIndex(this.editableDiv, index);
   }
@@ -596,7 +1181,11 @@ export default class MathRichInput extends React.Component {
   // Check if word navigation modifier is pressed
   isWordModifier = (e) => {
     const { isMac } = this.getPlatformModifiers();
-    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
@@ -1160,6 +1749,17 @@ export default class MathRichInput extends React.Component {
 
   handleKeyDown = (e) => {
     try {
+      debugMathRichInput("handleKeyDown:start", {
+        key: e.key,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        hasFocus: this.state.hasFocus,
+        propsValue: this.props.value,
+        innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
       // Lets set up or update the undo redo history
       this.initialiseHistory();
 
@@ -1246,7 +1846,8 @@ export default class MathRichInput extends React.Component {
         }
       }
 
-      if (e.altKey && e.key === "Alt") {
+      const { isMac } = this.getPlatformModifiers();
+      if (!isMac && e.altKey && e.key === "Alt") {
         let key = this.fetchAccentLetter();
         if (
           key === "a" ||
@@ -1262,7 +1863,9 @@ export default class MathRichInput extends React.Component {
           key === "!"
         ) {
           // console.log("showing/hiding accent bar");
-          this.setState({ showAccentBar: !this.state.showAccentBar });
+          this.setState({
+            showAccentBar: !this.state.showAccentBar,
+          });
         } else {
           // console.log("hiding accent bar");
           this.setState({ showAccentBar: false });
@@ -1272,7 +1875,9 @@ export default class MathRichInput extends React.Component {
       }
 
       this.keyPressed = e.key; // store for use in methods
-      this.setState({ keyPressed: e.key });
+      if (this.state.showAccentBar) {
+        this.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
@@ -1291,10 +1896,16 @@ export default class MathRichInput extends React.Component {
       }
       if (e.key === "ArrowLeft") {
         this.handleKeyDownArrowLeft(e);
+        debugMathRichInput("handleKeyDown:after-arrow-left", {
+          selection: getSelectionSnapshot(this.editableDiv),
+        });
         return;
       }
       if (e.key === "ArrowRight") {
         this.handleKeyDownArrowRight(e);
+        debugMathRichInput("handleKeyDown:after-arrow-right", {
+          selection: getSelectionSnapshot(this.editableDiv),
+        });
         return;
       }
       if (e.key === "ArrowUp") {
@@ -1361,6 +1972,10 @@ export default class MathRichInput extends React.Component {
 
       // Stop editing if within rendered katex node, if somehow the cursor ends up there (it shouldn't)
       let params = this._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;
       let startNode = this._findNodeWithIndex(params.startNodeIndex);
       let endNode = this._findNodeWithIndex(params.endNodeIndex);
       if (!this.editableDivIsPlainText()) {
@@ -1403,13 +2018,26 @@ export default class MathRichInput extends React.Component {
 
   handleKeyUp = (e) => {
     try {
+      debugMathRichInput("handleKeyUp:start", {
+        key: e.key,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
       this.keyPressed = e.key;
       this.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.
         let rangeParams = this._getRangeParams();
+        if (!rangeParams) return;
         let index = rangeParams.startNodeIndex;
 
         if (index >= 0) {
@@ -1444,7 +2072,9 @@ export default class MathRichInput extends React.Component {
       }
 
       if (e.key === "ArrowLeft") {
+        // Same guard, same reason — see ArrowRight above.
         let rangeParams = this._getRangeParams();
+        if (!rangeParams) return;
         let index = rangeParams.startNodeIndex;
 
         // If the cursor is in a katex node, then move it to the previous node (unless there is no
@@ -1491,6 +2121,17 @@ export default class MathRichInput extends React.Component {
       // console.log("handleInput")
       if (this.isComposing) return;
 
+      debugMathRichInput("handleInput:start", {
+        inputType: event && event.nativeEvent ? event.nativeEvent.inputType : null,
+        data: event && event.nativeEvent ? event.nativeEvent.data : null,
+        propsValue: this.props.value,
+        propsMimeType: this.props.mimeType,
+        innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
+
+      this.cleanupEmptyInlineFormattingElements();
+
       let raw_text = elementToMarkedRawText(
         this.editableDiv,
         null,
@@ -1498,6 +2139,11 @@ export default class MathRichInput extends React.Component {
         this.enableHtml()
       );
       const params = this._getRangeParams();
+      debugMathRichInput("handleInput:after-range", {
+        raw_text,
+        params,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
       if (params === null || params === undefined) {
         // console.log(
         //   "handleInput: Empty content detected, using default range params"
@@ -1528,12 +2174,14 @@ export default class MathRichInput extends React.Component {
           mimeType,
           this.enableHtml()
         );
+        raw_text = this.stripEmptyInlineFormattingTags(raw_text);
         this.applyChangesToComponent(
           raw_text,
           mimeType,
           defaultParams,
           this.props.useExpertMode,
-          this.props.selectedTab
+          this.props.selectedTab,
+          { skipControlledRender: true }
         );
         return;
       } else if (
@@ -1564,23 +2212,33 @@ export default class MathRichInput extends React.Component {
         this.enableHtml()
       );
 
-      // Use valid params or fallback to defaults
-      const validParams = params || {
-        startNodeIndex: 0,
-        startOffset: 0,
-        endNodeIndex: 0,
-        endOffset: 0,
-        startGlobalOffset: 0,
-        endGlobalOffset: 0,
-      };
+      raw_text = this.stripEmptyInlineFormattingTags(raw_text);
 
-      this.applyChangesToComponent(
-        raw_text,
-        mimeType,
+      // Use valid params or fallback to defaults
+	      const validParams = params || {
+	        startNodeIndex: 0,
+	        startOffset: 0,
+	        endNodeIndex: 0,
+	        endOffset: 0,
+	        startGlobalOffset: 0,
+	        endGlobalOffset: 0,
+	      };
+	      this.setOldRangeParams(validParams);
+
+	      this.applyChangesToComponent(
+	        raw_text,
+	        mimeType,
         validParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        { skipControlledRender: true }
       );
+      debugMathRichInput("handleInput:after-apply", {
+        raw_text,
+        mimeType,
+        validParams,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
     } catch (error) {
       console.error(error);
     }
@@ -1622,46 +2280,8 @@ export default class MathRichInput extends React.Component {
         this.setState({ activeButtons: activeButtons });
         return;
       }
-      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
-      let bold = false;
-      let italic = false;
-      let underline = false;
-      let superscript = false;
-      let subscript = false;
-      do {
-        if (node.nodeType === 1) {
-          let 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);
-
-      let activeButtons = { bold, italic, underline, subscript, superscript };
-      // console.log(activeButtons)
-
-      let 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 });
-      }
+      let activeButtons = this.getActiveButtonsFromSelection(rangeParams);
+      this.setActiveButtonsIfChanged(activeButtons);
     } catch (error) {
       console.error(error);
     }
@@ -1718,8 +2338,30 @@ export default class MathRichInput extends React.Component {
       let pasteHtml = clipboardData.getData("text/html");
       let pasteText = clipboardData.getData("text/plain");
 
-      // Get current cursor position
-      const rangeParams = this._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.
+      const paramsBeforeDelete = this._getRangeParams();
+
+      const 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.
+      const rangeParams = this._getRangeParams() || paramsBeforeDelete;
       if (!rangeParams) {
         console.warn("Could not get range params for paste");
         return;
@@ -1728,12 +2370,6 @@ export default class MathRichInput extends React.Component {
       // Store old range params for cursor positioning (like equation editor)
       this.setOldRangeParams(rangeParams);
 
-      // Clear any existing selection
-      const selection = window.getSelection();
-      if (selection.rangeCount > 0) {
-        selection.deleteFromDocument();
-      }
-
       let finalText = "";
       let finalMimeType = this.props.mimeType || "text/html";
       let hasMathContent = false;
@@ -1855,7 +2491,6 @@ export default class MathRichInput extends React.Component {
         let 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 (this.enableMath()) {
@@ -1865,35 +2500,46 @@ export default class MathRichInput extends React.Component {
           );
         }
 
-        // 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.
+         */
         let newRangeParams = null;
 
         if (hasMathContent) {
-          // Use same approach as equation editor for math content
           const oldRangeParams = this.getOldRangeParams();
           const mathTagCount = (finalText.match(/<math>/gi) || []).length;
-
-          if (this.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,
-            };
-          }
+          const startNodeIndex =
+            this.props.value === ""
+              ? mathTagCount * 2
+              : oldRangeParams.startNodeIndex + mathTagCount * 2;
+          const lastMathEnd = finalText.toLowerCase().lastIndexOf("</math>");
+          const tail =
+            lastMathEnd === -1
+              ? ""
+              : finalText.substring(lastMathEnd + "</math>".length);
+          const startOffset =
+            tail.indexOf("<") === -1
+              ? SMALL_SPACE_LENGTH + tail.length
+              : SMALL_SPACE_LENGTH;
+          newRangeParams = {
+            startNodeIndex,
+            startOffset,
+            endNodeIndex: startNodeIndex,
+            endOffset: startOffset,
+          };
         } else {
-          // For text content, use global offset like before
-          const newGlobalOffset =
-            rangeParams.startGlobalOffset + finalText.length;
+          const newGlobalOffset = rangeParams.startGlobalOffset + finalText.length;
           newRangeParams = {
             startGlobalOffset: newGlobalOffset,
             endGlobalOffset: newGlobalOffset,
@@ -1928,6 +2574,23 @@ export default class MathRichInput extends React.Component {
           this.props.useExpertMode,
           this.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.
+        const rangeAfterPaste = newRangeParams;
+        queueMicrotask(() => {
+          try {
+            if (this.reconcileEditableDomWithRender(true)) {
+              this._setRangeParams(rangeAfterPaste);
+              this.updateActiveButtons();
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        });
       }
     } catch (error) {
       console.error("Error in paste handler:", error);
@@ -1939,6 +2602,14 @@ export default class MathRichInput extends React.Component {
   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);
@@ -1961,16 +2632,143 @@ export default class MathRichInput extends React.Component {
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.skipNextControlledValueRender === true) {
+      const canSkip =
+        nextProps.value === this.skipNextControlledValue &&
+        nextState === this.state;
+
+      debugMathRichInput("shouldComponentUpdate:native-input-gate", {
+        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.
+   */
+  normaliseHtml(html) {
+    const 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.
+   */
+  reconcileEditableDomWithRender(force = false) {
+    if (!this.editableDiv) return false;
+    if (!force && (this.afterComponentUpdateData === null || this.afterComponentUpdateData === undefined))
+      return false;
+    const html = force
+      ? rawTextToHtml(katex, 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, liveInnerHTML: this.editableDiv.innerHTML, html });
+    this.editableDiv.innerHTML = html;
+    this.lastRenderedEditableHtml = html;
+    return true;
+  }
+
   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
+      ) {
+        const rangeParams = this.preserveNativeDomRangeParams;
+        this.preserveNativeDomRangeParams = null;
+        debugMathRichInput("componentDidUpdate:preserve-restore-before", {
+          rangeParams,
+          selection: getSelectionSnapshot(this.editableDiv),
+        });
+        this._setRangeParams(rangeParams);
+        debugMathRichInput("componentDidUpdate:preserve-restore-after", {
+          selection: getSelectionSnapshot(this.editableDiv),
+        });
       }
     } catch (error) {
       console.error(error);
@@ -1980,6 +2778,14 @@ export default class MathRichInput extends React.Component {
   showEquationEditor = (moveCursorOnInsert = false, node = null) => {
     try {
       let rangeParams = this._getRangeParams();
+      debugMathRichInput("showEquationEditor:start", {
+        moveCursorOnInsert,
+        nodeProvided: Boolean(node),
+        rangeParams,
+        oldRangeParams: this.oldRangeParams,
+        innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
       if (rangeParams.startNodeIndex < 0) {
         console.error("Could not find position of cursor in node list");
 
@@ -2030,6 +2836,7 @@ export default class MathRichInput extends React.Component {
         this.editingNode = null;
       }
 
+      this.setOldRangeParams(rangeParams);
       this.markedRawText = elementToMarkedRawText(
         this.editableDiv,
         node,
@@ -2042,12 +2849,22 @@ export default class MathRichInput extends React.Component {
         showEquationEditor: true,
         equationEditorLatex: latex,
       });
+      debugMathRichInput("showEquationEditor:after-setState", {
+        rangeParams,
+        markedRawText: this.markedRawText,
+        latex,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
     } catch (error) {
       console.error(error);
     }
   };
 
   handleMouseDown = (event) => {
+    this.isMouseDownInEditable = true;
+    window.setTimeout(() => {
+      this.isMouseDownInEditable = false;
+    }, 0);
     this.showEquationEditorOnMouseUp = false;
     let node = null;
     try {
@@ -2086,7 +2903,11 @@ export default class MathRichInput extends React.Component {
       // Clear selection anchor on mouse click
       this.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.
       let params = this._getRangeParams();
+      if (!params) return;
+      this.setOldRangeParams(params);
       let startNode = this._findNodeWithIndex(params.startNodeIndex);
       let endNode = this._findNodeWithIndex(params.endNodeIndex);
 
@@ -2153,6 +2974,15 @@ export default class MathRichInput extends React.Component {
   handleEquationEditorInsert = (latex) => {
     try {
       // console.log("Inserting latex: "+latex)
+      debugMathRichInput("handleEquationEditorInsert:start", {
+        latex,
+        markedRawText: this.markedRawText,
+        oldRangeParams: this.getOldRangeParams(),
+        moveCursorOnInsert: this.moveCursorOnInsert,
+        propsValue: this.props.value,
+        innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
 
       let start_pos = this.markedRawText.indexOf(MARK);
       let end_pos = this.markedRawText.indexOf(MARK, start_pos + MARK.length);
@@ -2205,15 +3035,19 @@ export default class MathRichInput extends React.Component {
           this.enableHtml()
         );
 
-        this.applyChangesToComponent(
-          new_raw_text,
-          mimeType,
-          new_rangeParams,
-          this.props.useExpertMode,
-          this.props.selectedTab
-        );
-        this.setState({ showEquationEditor: false });
-        return;
+	      this.applyChangesToComponent(
+	        new_raw_text,
+	        mimeType,
+	        new_rangeParams,
+	        this.props.useExpertMode,
+	        this.props.selectedTab
+	      );
+	      this.setState({ showEquationEditor: false }, () => {
+	        this.editableDiv.focus();
+	        this._setRangeParams(new_rangeParams);
+	        this.restoreRangeAfterBrowserWork(new_rangeParams, "equation-empty");
+	      });
+	      return;
       }
 
       // Handle case of latex returned, in which case we update the katex node
@@ -2235,25 +3069,42 @@ export default class MathRichInput extends 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
-          const mathTagMatches = [
-            ...new_raw_text.matchAll(/<math>[^<]*<\/math>/gi),
-          ];
-          if (mathTagMatches.length > 0) {
-            const lastMatch = mathTagMatches[mathTagMatches.length - 1];
-            const 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.
+          const oldRangeParams = this.getOldRangeParams();
+          if (
+            oldRangeParams !== null &&
+            oldRangeParams.startGlobalOffset !== null &&
+            oldRangeParams.startGlobalOffset !== undefined
+          ) {
+            const 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)
       this.setOldRangeParams(new_rangeParams);
+      debugMathRichInput("handleEquationEditorInsert:before-apply", {
+        new_raw_text,
+        new_rangeParams,
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
 
       let nodeCounts = this._countNodeTypes();
       let mimeType = this.getMimeType(nodeCounts.html > 0, true);
@@ -2270,7 +3121,15 @@ export default class MathRichInput extends React.Component {
         this.props.useExpertMode,
         this.props.selectedTab
       );
-      this.setState({ showEquationEditor: false });
+	      this.setState({ showEquationEditor: false }, () => {
+	        this.editableDiv.focus();
+	        this._setRangeParams(new_rangeParams);
+	        this.restoreRangeAfterBrowserWork(new_rangeParams, "equation-insert");
+	        debugMathRichInput("handleEquationEditorInsert:after-close-restore", {
+	          new_rangeParams,
+	          selection: getSelectionSnapshot(this.editableDiv),
+        });
+      });
     } catch (error) {
       console.error(error);
     }
@@ -2288,16 +3147,37 @@ export default class MathRichInput extends React.Component {
   styleText = (event, style) => {
     try {
       style = style.toLowerCase();
+      const command = this.getStyleCommand(style);
+      const activeBefore = this.getActiveButtonsFromSelection();
+      const selection = document.getSelection();
+      const isCollapsed =
+        selection === null ||
+        selection.rangeCount === 0 ||
+        selection.getRangeAt(0).collapsed;
       let success = false;
+      let 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" && this.state.activeButtons.subscript) ||
-        (style === "superscript" && this.state.activeButtons.superscript)
+        isCollapsed &&
+        activeBefore[style] &&
+        this.moveTrailingWhitespaceOutsideInlineStyle(style, command)
+      ) {
+        success = true;
+      } else if (
+        isCollapsed &&
+        !activeBefore[style] &&
+        selection &&
+        selection.rangeCount > 0
+      ) {
+        success = this.insertInlineStylePlaceholder(style);
+        insertedTypingStylePlaceholder = success;
+      } else if (
+        (style === "subscript" && activeBefore.subscript) ||
+        (style === "superscript" && activeBefore.superscript)
       ) {
-        const selection = document.getSelection();
         let range = selection.getRangeAt(0);
         if (
           range.endContainer === range.startContainer &&
@@ -2309,90 +3189,29 @@ export default class MathRichInput extends React.Component {
           selection.addRange(range);
         }
         success = document.execCommand("removeFormat", false, null);
-        if (this.state.activeButtons.bold)
+        if (activeBefore.bold)
           success = document.execCommand("bold", false, null);
-        if (this.state.activeButtons.italic)
+        if (activeBefore.italic)
           success = document.execCommand("italic", false, null);
-        if (this.state.activeButtons.underline)
+        if (activeBefore.underline)
           success = document.execCommand("underline", false, null);
       } else {
-        const selection = document.getSelection();
         if (selection && selection.rangeCount > 0) {
-          const 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
-            const isToggleOff = this.state.activeButtons[style];
-
-            if (!isToggleOff) {
-              // Turning style ON - insert a styled wrapper element
-              let 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
-              const styledElement = `<${wrapperTag}>\u200B</${wrapperTag}>`;
-              success = document.execCommand(
-                "insertHTML",
-                false,
-                styledElement
-              );
-
-              // Move cursor inside the styled element
-              setTimeout(() => {
-                const newSelection = document.getSelection();
-                if (newSelection && newSelection.rangeCount > 0) {
-                  const newRange = newSelection.getRangeAt(0);
-                  const 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);
-          }
+          success = document.execCommand(command, false, null);
         }
       }
 
-      let buttonState = this.state.activeButtons[style];
-      if (buttonState === null || buttonState === undefined) return success;
-
-      buttonState = !buttonState;
-      let new_activeButtons = { ...this.state.activeButtons };
-      new_activeButtons[style] = buttonState;
-      this.setState({ activeButtons: new_activeButtons });
+      const rangeParams = this._getRangeParams();
+      const removedEmptyTags =
+        !insertedTypingStylePlaceholder &&
+        this.cleanupEmptyInlineFormattingElements();
+      if (removedEmptyTags && rangeParams !== null && rangeParams !== undefined) {
+        this._setRangeParams(rangeParams);
+        this.applyCurrentEditableDomToComponent(rangeParams);
+      }
+      this.setActiveButtonsIfChanged(
+        this.getActiveButtonsFromSelection(rangeParams)
+      );
       return success;
     } catch (error) {
       console.error(error);
@@ -2401,8 +3220,15 @@ export default class MathRichInput extends React.Component {
 
   handleToolbarButtonClick = (event, buttonName) => {
     try {
+      debugMathRichInput("handleToolbarButtonClick:start", {
+        buttonName,
+        eventType: event ? event.type : null,
+        selection: getSelectionSnapshot(this.editableDiv),
+        oldRangeParams: this.oldRangeParams,
+      });
       if (buttonName === "Equation") {
         this.showEquationEditor(true);
+        return;
       }
       let style = buttonName;
       let success = this.styleText(event, style);
@@ -2751,10 +3577,10 @@ export default class MathRichInput extends React.Component {
     }
   };
 
-  insertAfterSmallSpace(new_char, rangeParams) {
-    try {
-      if (rangeParams === null || rangeParams === undefined)
-        rangeParams = this._getRangeParams();
+	  insertAfterSmallSpace(new_char, rangeParams) {
+	    try {
+	      if (rangeParams === null || rangeParams === undefined)
+	        rangeParams = this._getRangeParams();
 
       if (rangeParams.startOffset !== 0)
         console.warn(
@@ -2763,29 +3589,41 @@ export default class MathRichInput extends React.Component {
             " in insertAfterSmallSpace"
         );
 
-      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
-      let raw_text = elementToMarkedRawText(
-        this.editableDiv,
-        node,
-        1, // after small space
-        this.enableHtml()
-      );
-
-      let new_raw_text = removeMarks(
-        insertCharacterBeforeMarks(raw_text, new_char)
-      );
-
-      let new_rangeParams = {
-        startNodeIndex: rangeParams.startNodeIndex,
-        startNodeOffset: 1 + new_char.length,
-        endNodeIndex: rangeParams.startNodeIndex,
-        endNodeOffset: 1 + new_char.length,
-        startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
-        endGlobalOffset: rangeParams.endGlobalOffset + new_char.length,
-      };
-
-      new_raw_text = removeEncodingIfPlainText(
-        new_raw_text,
+	      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+	      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);
+
+	      let new_rangeParams = {
+	        startNodeIndex: rangeParams.startNodeIndex,
+	        startOffset: 1 + new_char.length,
+	        endNodeIndex: rangeParams.startNodeIndex,
+	        endOffset: 1 + new_char.length,
+	        startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+	        endGlobalOffset: rangeParams.endGlobalOffset + new_char.length,
+	      };
+	      this._setRangeParams(new_rangeParams);
+
+	      let new_raw_text = elementToMarkedRawText(
+	        this.editableDiv,
+	        null,
+	        0,
+	        this.enableHtml()
+	      );
+
+	      new_raw_text = removeEncodingIfPlainText(
+	        new_raw_text,
         this.props.mimeType,
         this.enableHtml()
       );
@@ -2793,12 +3631,13 @@ export default class MathRichInput extends React.Component {
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,
-        new_rangeParams,
-        this.props.useExpertMode,
-        this.props.selectedTab
-      );
-    } catch (error) {
-      console.error(error);
+	        new_rangeParams,
+	        this.props.useExpertMode,
+	        this.props.selectedTab,
+	        { skipControlledRender: true }
+	      );
+	    } catch (error) {
+	      console.error(error);
     }
   }
 
@@ -2895,12 +3734,39 @@ export default class MathRichInput extends React.Component {
 
   handleFocus = (event) => {
     const { onFocus } = this.props;
+    let currentRangeParams = null;
+    try {
+      currentRangeParams = this._getRangeParams();
+    } catch (error) {
+      currentRangeParams = null;
+    }
+    const savedRangeParams = this.getOldRangeParams();
+    const shouldRestoreSavedRange =
+      !this.isMouseDownInEditable &&
+      this.props.value !== "" &&
+      this.rangeIsAtStart(currentRangeParams) &&
+      this.rangeHasNonZeroPosition(savedRangeParams);
+    debugMathRichInput("handleFocus:start", {
+      propsValue: this.props.value,
+      oldRangeParams: this.oldRangeParams,
+      currentRangeParams,
+      shouldRestoreSavedRange,
+      innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+      selection: getSelectionSnapshot(this.editableDiv),
+    });
     if (onFocus != null) {
       onFocus();
     }
     try {
-      this._setRangeParams(this.getOldRangeParams());
-      this.setState({ hasFocus: true });
+      this.setState({ hasFocus: true }, () => {
+        if (shouldRestoreSavedRange) {
+          this._setRangeParams(savedRangeParams);
+          this.restoreRangeAfterBrowserWork(savedRangeParams, "focus-restore");
+        }
+        debugMathRichInput("handleFocus:after-setState", {
+          selection: getSelectionSnapshot(this.editableDiv),
+        });
+      });
     } catch (error) {
       console.error(error);
     }
@@ -2908,12 +3774,31 @@ export default class MathRichInput extends React.Component {
 
   handleBlur = (event) => {
     const { onBlur } = this.props;
+    let currentRangeParams = null;
+    try {
+      currentRangeParams = this._getRangeParams();
+      if (this.rangeHasNonZeroPosition(currentRangeParams)) {
+        this.setOldRangeParams(currentRangeParams);
+      }
+    } catch (error) {
+      currentRangeParams = null;
+    }
+    debugMathRichInput("handleBlur:start", {
+      propsValue: this.props.value,
+      oldRangeParams: this.oldRangeParams,
+      currentRangeParams,
+      innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
+      selection: getSelectionSnapshot(this.editableDiv),
+    });
     if (onBlur != null) {
       onBlur();
     }
     try {
       // console.log("Hiding accent bar 4");
       this.setState({ hasFocus: false, showAccentBar: false });
+      debugMathRichInput("handleBlur:after-setState", {
+        selection: getSelectionSnapshot(this.editableDiv),
+      });
     } catch (error) {
       console.error(error);
     }
@@ -3039,6 +3924,23 @@ export default class MathRichInput extends React.Component {
       this.props.value || "",
       this.props.mimeType
     );
+    const editableHtml = this.getEditableHtmlForRender(html);
+    debugMathRichInput("render", {
+      propsValue: this.props.value,
+      propsMimeType: this.props.mimeType,
+      html,
+      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>")) {
@@ -3103,7 +4005,7 @@ export default class MathRichInput extends React.Component {
               onCompositionStart={this.handleCompositionStart}
               onCompositionEnd={this.handleCompositionEnd}
               dangerouslySetInnerHTML={{
-                __html: html,
+                __html: editableHtml,
               }}
               data-placeholder={this.props.placeholder || ""}
             ></span>