@zzish/math-rich-input 0.1.56 → 0.1.58

package/src/MathRichInput.jsx

@@ -39,6 +39,10 @@ import {
   debugMathRichInput,
   getSelectionSnapshot,
 } from "./mathRichInputDebug";
+import {
+  editableText,
+  transactionFromBeforeInput,
+} from "./editTransaction";
 
 import "./MathRichInput.css";
 import AccentBar from "./AccentBar";
@@ -234,6 +238,14 @@ export default class MathRichInput extends React.Component {
     this.isMouseDownInEditable = false;
     this.lastRenderedEditableHtml = null;
     this.preserveNativeDomRangeParams = null;
+    // The `dangerouslySetInnerHTML` prop object, reused while the html is unchanged. React re-applies
+    // the markup on a commit when it is handed a fresh object, replacing the editable's nodes and the
+    // caret with them; the same object tells React there is nothing to write.
+    this.lastEditableHtmlProp = undefined;
+    this.lastEditableHtmlPropHtml = null;
+    // Which of the field's formulas the current mouse press started on. The node itself cannot be
+    // kept: focusing a field redraws it, so the element that was pressed is already gone at mouseup.
+    this.equationEditorMouseDownKatexIndex = -1;
 
     this.lastSetActiveButtons = null;
 
@@ -245,6 +257,9 @@ export default class MathRichInput extends React.Component {
     this.initialHistoryState = null;
     this.undoHistory = [];
     this.redoHistory = [];
+    this.historySequence = 0;
+    this.pendingTransaction = null;
+    this.compositionStart = null;
     this.accent = "";
 
     // keeps track of whether user is composing in an IME - see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
@@ -359,15 +374,29 @@ export default class MathRichInput extends React.Component {
     if (isExpertMode === null) isExpertMode = options.isExpertMode;
     if (selectedTab === null) selectedTab = options.selectedTab;
 
-    // Add this to the history
-    this.undoHistory.push({ value, mimeType, rangeParams });
-    if (this.undoHistory.length > MAX_HISTORY_LENGTH) this.undoHistory.shift();
+    const transaction = applyOptions.transaction || null;
+    const historyState = { value, mimeType, rangeParams, transaction };
+    if (applyOptions.recordHistory !== false) {
+      // Add this to the history. The transaction is retained beside the rendered value so a host can
+      // restore annotation snapshots on undo/redo instead of interpreting an inverse spelling anew.
+      this.undoHistory.push(historyState);
+      if (this.undoHistory.length > MAX_HISTORY_LENGTH) this.undoHistory.shift();
+    }
 
     // Debug what's being passed to parent
     // console.log("APPLY CHANGES:", { value, mimeType });
 
     // Call the parent handler to apply the changes
-    this.onChangeCallback({ value, mimeType }, { isExpertMode, selectedTab });
+    this.onChangeCallback(
+      {
+        value,
+        mimeType,
+        ...(transaction?.edit ? { edit: transaction.edit } : {}),
+        ...(transaction?.intent ? { intent: transaction.intent } : {}),
+        ...(transaction?.history ? { history: transaction.history } : {}),
+      },
+      { isExpertMode, selectedTab }
+    );
     if (applyOptions.skipControlledRender === true) {
       const pendingNativeValue = value;
       // Give a scheduled controlled echo one short render window. If the host
@@ -395,6 +424,7 @@ export default class MathRichInput extends React.Component {
         value: this.props.value,
         mimeType: this.props.mimeType,
         rangeParams: this._getRangeParams(),
+        transaction: null,
       };
   };
 
@@ -425,37 +455,62 @@ export default class MathRichInput extends React.Component {
   };
 
   undo = () => {
-    const currentState = this.undoHistory.pop();
+    const currentState = this.undoHistory[this.undoHistory.length - 1];
+    if (!currentState) return;
+		this.undoHistory.pop();
 
-    let previousState = this.undoHistory.pop();
-    if (previousState === null || previousState === undefined) {
-      previousState = this.initialHistoryState;
-    }
-
-    if (this.redoHistory.length > 0) {
-      let redoLast = this.redoHistory[this.redoHistory.length - 1];
-      if (!this.deepEqual(redoLast, currentState))
-        this.redoHistory.push(currentState);
-    } else this.redoHistory.push(currentState);
+		const previousState = this.undoHistory[this.undoHistory.length - 1] || this.initialHistoryState;
+    if (!previousState) return;
+		this.redoHistory.push(currentState);
 
+    const transaction = this.historyTransaction(currentState, "undo");
     this.applyChangesToComponent(
       previousState.value,
       previousState.mimeType,
-      previousState.rangeParams
+      previousState.rangeParams,
+      null,
+      null,
+      { transaction, recordHistory: false }
     );
   };
 
   redo = () => {
     const redoState = this.redoHistory.pop();
-    if ((redoState !== null) & (redoState !== undefined)) {
+    if (redoState !== null && redoState !== undefined) {
       this.applyChangesToComponent(
         redoState.value,
         redoState.mimeType,
-        redoState.rangeParams
+        redoState.rangeParams,
+        null,
+        null,
+        { transaction: this.historyTransaction(redoState, "redo"), recordHistory: false }
       );
+			this.undoHistory.push(redoState);
     }
   };
 
+  /** Build an explicit forward/inverse transaction for one history entry. */
+  historyTransaction = (state, direction) => {
+    const original = state?.transaction;
+    if (!original?.history?.id || !original.edit) {
+      return { intent: direction, history: original?.history ? { id: original.history.id, direction } : undefined };
+    }
+    const edit = original.edit;
+    const after = edit.before.slice(0, edit.from) + edit.insert + edit.before.slice(edit.to);
+    const inverse = {
+      before: after,
+      from: edit.from,
+      to: edit.from + edit.insert.length,
+      insert: edit.before.slice(edit.from, edit.to),
+      ...(edit.boundary ? { boundary: edit.boundary } : {}),
+    };
+    return {
+      intent: direction,
+      history: { id: original.history.id, direction },
+      edit: direction === "undo" ? inverse : edit,
+    };
+  };
+
   setOldRangeParams(params) {
     this.oldRangeParams = params;
   }
@@ -598,6 +653,36 @@ export default class MathRichInput extends React.Component {
     };
   }
 
+  /** The caret's params, only when the selection is inside this field. */
+  selectionRangeParams() {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return null;
+    if (!this.editableDiv || !this.editableDiv.contains(selection.anchorNode)) {
+      return null;
+    }
+    return this.getRangeParamsPreservingInlinePlaceholder();
+  }
+
+  /**
+   * The `dangerouslySetInnerHTML` prop, REUSED while the html is unchanged.
+   *
+   * React re-applies `dangerouslySetInnerHTML` on a commit when it is handed a new prop object, even
+   * when the string in it is the one already in the DOM (measured with React 19: three writes of an
+   * identical-length string, each replacing the editable's children — and with them the caret, which
+   * then sat at the start of the field). The same object is what tells React there is nothing to
+   * write, and that is how the field keeps the browser's own DOM and selection.
+   */
+  editableHtmlProp(html) {
+    if (
+      this.lastEditableHtmlProp === undefined ||
+      this.lastEditableHtmlPropHtml !== html
+    ) {
+      this.lastEditableHtmlPropHtml = html;
+      this.lastEditableHtmlProp = { __html: html };
+    }
+    return this.lastEditableHtmlProp;
+  }
+
   getEditableHtmlForRender(html) {
     const currentRawText = this.editableDiv
       ? this.getCurrentRawTextForProps(this.props)
@@ -641,8 +726,14 @@ export default class MathRichInput extends React.Component {
       return liveEditableHtml;
     }
 
+    // React will write this string: it differs from the one it last rendered. Remember where the
+    // caret is so it can be put back if the write takes the selection with it. A click elsewhere
+    // blurs the field before the commit, so the restore below never overrides another control.
+    this.preserveNativeDomRangeParams =
+      this.state.hasFocus === true && html !== this.lastRenderedEditableHtml
+        ? this.selectionRangeParams()
+        : null;
     this.lastRenderedEditableHtml = html;
-    this.preserveNativeDomRangeParams = null;
     return html;
   }
 
@@ -913,7 +1004,11 @@ export default class MathRichInput extends React.Component {
     const rangeParams = this._getRangeParams();
     if (rangeParams) {
       this.setOldRangeParams(rangeParams);
-      this.applyCurrentEditableDomToComponent(rangeParams);
+      this.applyCurrentEditableDomToComponent(rangeParams, {
+        edit: { before: editableText(this.editableDiv), from: 0, to: 0, insert: "" },
+        intent: "format",
+        history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+      });
     }
 
     debugMathRichInput("moveTrailingWhitespaceOutsideInlineStyle:after", {
@@ -927,7 +1022,7 @@ export default class MathRichInput extends React.Component {
     return true;
   }
 
-  applyCurrentEditableDomToComponent(rangeParams = null) {
+  applyCurrentEditableDomToComponent(rangeParams = null, transaction = null) {
     if (!this.editableDiv) return;
     if (rangeParams === null || rangeParams === undefined) {
       rangeParams = this._getRangeParams();
@@ -960,7 +1055,7 @@ export default class MathRichInput extends React.Component {
       rangeParams,
       this.props.useExpertMode,
       this.props.selectedTab,
-      { skipControlledRender: true }
+      { skipControlledRender: true, transaction }
     );
   }
 
@@ -1028,6 +1123,7 @@ export default class MathRichInput extends React.Component {
   }
 
   handleKeyDownBackspace = (e) => {
+    const beforeText = editableText(this.editableDiv);
     let rangeParams = this._getRangeParams();
     let start_node_index = rangeParams.startNodeIndex;
     let end_node_index = rangeParams.endNodeIndex;
@@ -1082,7 +1178,14 @@ export default class MathRichInput extends React.Component {
         this.getMimeType(false, false),
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: { before: beforeText, from: 0, to: beforeText.length, insert: "" },
+            intent: "cut",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
       e.preventDefault();
       return;
@@ -2141,6 +2244,12 @@ export default class MathRichInput extends React.Component {
     try {
       // console.log("handleInput")
       if (this.isComposing) return;
+      // execCommand emits a synchronous input event; styleText records the
+      // complete format transaction once after the command returns.
+      if (this.formatCommandActive) return;
+
+      const transaction = this.pendingTransaction;
+      this.pendingTransaction = null;
 
       debugMathRichInput("handleInput:start", {
         inputType: event && event.nativeEvent ? event.nativeEvent.inputType : null,
@@ -2202,7 +2311,7 @@ export default class MathRichInput extends React.Component {
           defaultParams,
           this.props.useExpertMode,
           this.props.selectedTab,
-          { skipControlledRender: true }
+          { skipControlledRender: true, transaction }
         );
         return;
       } else if (
@@ -2252,7 +2361,7 @@ export default class MathRichInput extends React.Component {
         validParams,
         this.props.useExpertMode,
         this.props.selectedTab,
-        { skipControlledRender: true }
+        { skipControlledRender: true, transaction }
       );
       debugMathRichInput("handleInput:after-apply", {
         raw_text,
@@ -2350,6 +2459,7 @@ export default class MathRichInput extends React.Component {
 
   handlePaste = (event) => {
     try {
+      this.pendingTransaction = null;
       let clipboardData = event.clipboardData || window.clipboardData;
       if (!clipboardData) {
         return;
@@ -2375,6 +2485,8 @@ export default class MathRichInput extends React.Component {
         console.warn("Could not get range params for paste");
         return;
       }
+      const beforePaste = editableText(this.editableDiv);
+      const pasteSelection = this.captureSelectionOffsets();
 
       // Store old range params for cursor positioning (like equation editor)
       this.setOldRangeParams(rangeParams);
@@ -2647,12 +2759,32 @@ export default class MathRichInput extends React.Component {
         );
 
         // Apply the change using the component's standard flow
+        const insertionText = (() => {
+          if (!/<[^>]+>/.test(finalText)) return finalText;
+          const probe = document.createElement("div");
+          probe.innerHTML = finalText;
+          return editableText(probe).replace(/\ufffc/g, "");
+        })();
+        const transaction = pasteSelection
+          ? {
+              edit: {
+                before: beforePaste,
+                from: pasteSelection.from,
+                to: pasteSelection.to,
+                insert: insertionText,
+              },
+              intent: "paste",
+              history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+            }
+          : { intent: "paste", history: { id: `mri-${++this.historySequence}`, direction: "forward" } };
+
         this.applyChangesToComponent(
           cleanedRawText,
           actualMimeType,
           newRangeParams,
           this.props.useExpertMode,
-          this.props.selectedTab
+          this.props.selectedTab,
+          { transaction }
         );
 
         // A paste cannot rely on being re-rendered. It removed the selected content from the DOM itself,
@@ -2693,6 +2825,7 @@ export default class MathRichInput extends React.Component {
 
       this.editableDiv.addEventListener("keydown", this.handleKeyDown);
       this.editableDiv.addEventListener("keyup", this.handleKeyUp);
+      this.editableDiv.addEventListener("beforeinput", this.handleBeforeInput);
       this.editableDiv.addEventListener("paste", this.handlePaste);
       this.editableDiv.addEventListener("copy", this.handleCopy);
       if (this.props.autofocus === true) this.editableDiv.focus();
@@ -2705,6 +2838,7 @@ export default class MathRichInput extends React.Component {
     try {
       this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
       this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
+      this.editableDiv.removeEventListener("beforeinput", this.handleBeforeInput);
       this.editableDiv.removeEventListener("paste", this.handlePaste);
       this.editableDiv.removeEventListener("copy", this.handleCopy);
     } catch (error) {
@@ -2869,14 +3003,23 @@ export default class MathRichInput extends React.Component {
       ) {
         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),
-        });
+        // Only when the commit really did take the caret. A selection still in the field is the
+        // user's and is not ours to move; a click elsewhere has blurred the field, which is why the
+        // focus check above owns that case.
+        const liveRangeParams = this._getRangeParams();
+        if (
+          liveRangeParams === null ||
+          this.rangeIsAtStart(liveRangeParams)
+        ) {
+          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);
@@ -2886,6 +3029,7 @@ export default class MathRichInput extends React.Component {
   showEquationEditor = (moveCursorOnInsert = false, node = null) => {
     try {
       let rangeParams = this._getRangeParams();
+      const hasNode = node !== null && node !== undefined;
       debugMathRichInput("showEquationEditor:start", {
         moveCursorOnInsert,
         nodeProvided: Boolean(node),
@@ -2894,8 +3038,30 @@ export default class MathRichInput extends React.Component {
         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");
+      // A node handed in by a click is enough to open the editor, even when the selection resolves to
+      // nothing (-1) or is missing entirely: the node carries the latex and where it sits.
+      if (
+        !hasNode &&
+        (rangeParams === null || rangeParams.startNodeIndex < 0) &&
+        !this.isVisuallyEmpty()
+      ) {
+        // No usable caret in a field that has content. The empty-field fallback below must never run
+        // here: its marks stand for the WHOLE value, so Insert would replace the answer with the formula.
+        // Put the caret at the end of the field and resolve it again; if that still fails, do not open.
+        const endOfField = document.createRange();
+        endOfField.selectNodeContents(this.editableDiv);
+        endOfField.collapse(false);
+        this.setCaretToRange(endOfField);
+        rangeParams = this._getRangeParams();
+        if (rangeParams === null || rangeParams.startNodeIndex < 0) {
+          console.error("Could not find position of cursor in node list");
+          return;
+        }
+      }
+
+      if (!hasNode && (rangeParams === null || rangeParams.startNodeIndex < 0)) {
+        // An empty field: there is nothing to keep, so the equation becomes its whole value.
+        debugMathRichInput("showEquationEditor:empty-field", { rangeParams });
 
         this.setOldRangeParams({
           startNodeIndex: 2,
@@ -2904,6 +3070,9 @@ export default class MathRichInput extends React.Component {
           endOffset: 1,
         });
         this.markedRawText = MARK + " " + MARK;
+        // A new equation: never the formula an earlier opening was editing.
+        this.editingExistingEquation = false;
+        this.editingNode = null;
         this.moveCursorOnInsert = moveCursorOnInsert;
         this.setState({
           showEquationEditor: true,
@@ -2915,9 +3084,23 @@ export default class MathRichInput extends React.Component {
       let latex = "";
       let offset = 0;
 
-      if (node === null)
+      if (!hasNode)
         node = this._findNodeWithIndex(rangeParams.startNodeIndex);
 
+      // The toolbar preserves a caret AFTER the formula, in the renderer's zero-width text node.
+      // Resolve that boundary to the preceding formula so f(x) edits it instead of opening empty.
+      // Ordinary text or a non-collapsed selection still starts a new equation.
+      if (
+        !hasNode &&
+        node?.nodeType === Node.TEXT_NODE &&
+        rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
+        rangeParams.startOffset === rangeParams.endOffset &&
+        node.textContent.slice(0, rangeParams.startOffset).replace(/\u200b/g, "") === "" &&
+        isKatexNode(node.previousSibling)
+      ) {
+        node = node.previousSibling;
+      }
+
       // console.log(rangeParams)
       // console.log(this.editableDiv.childNodes)
       // console.log(node)
@@ -2939,7 +3122,7 @@ export default class MathRichInput extends React.Component {
         this.editingNode = node;
       } else {
         latex = "";
-        offset = rangeParams.startOffset;
+        offset = rangeParams ? rangeParams.startOffset : 0;
         this.editingExistingEquation = false;
         this.editingNode = null;
       }
@@ -2974,6 +3157,7 @@ export default class MathRichInput extends React.Component {
       this.isMouseDownInEditable = false;
     }, 0);
     this.showEquationEditorOnMouseUp = false;
+    this.equationEditorMouseDownKatexIndex = -1;
     let node = null;
     try {
       node = event.target;
@@ -2991,6 +3175,12 @@ export default class MathRichInput extends React.Component {
       }
 
       this.showEquationEditorOnMouseUp = true;
+      // The browser has no selection yet at mousedown and a click inside KaTeX may leave it inside the
+      // rendered subtree or outside the field. The formula's POSITION is what survives until mouseup:
+      // focusing the field redraws the editable and replaces every node with an identical one, so the
+      // element pressed here is detached by the time the mouse is released.
+      this.equationEditorMouseDownKatexIndex =
+        this.katexNodesInField().indexOf(node);
       // Save current range parameters so that we can restore them later if we wish
       this.setOldRangeParams(this._getRangeParams());
 
@@ -3004,6 +3194,47 @@ export default class MathRichInput extends React.Component {
     }
   };
 
+  /** The field's rendered formulas, in document order — the positions a click can land on. */
+  katexNodesInField() {
+    return [...this.editableDiv.querySelectorAll(".katex, .katex-error")];
+  }
+
+  /**
+   * Put the browser's selection at `range` and remember the position it resolves to.
+   *
+   * Used to place the caret where the component — not the browser — knows it belongs: after a formula
+   * that was clicked, and at the end of a field that was focused without a click.
+   */
+  setCaretToRange(range) {
+    try {
+      const selection = window.getSelection();
+      if (!selection) return;
+      selection.removeAllRanges();
+      selection.addRange(range);
+      const params = this._getRangeParams();
+      if (params) this.setOldRangeParams(params);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * A range that starts immediately after `node`, in the text that follows it.
+   *
+   * `setStartAfter` alone reads back as a position INSIDE the KaTeX subtree — the last text node of the
+   * formula is the nearest text — and the text model treats that as the position BEFORE the maths. The
+   * renderer always leaves a zero-width text node after a formula, so the caret starts there instead:
+   * after the maths, where typing continues.
+   */
+  caretRangeAfterNode(node) {
+    const range = document.createRange();
+    const next = node.nextSibling;
+    if (next !== null && next !== undefined) range.setStart(next, 0);
+    else range.setStartAfter(node);
+    range.collapse(true);
+    return range;
+  }
+
   handleMouseUp = (event) => {
     try {
       this.initialiseHistory();
@@ -3011,6 +3242,30 @@ export default class MathRichInput extends React.Component {
       // Clear selection anchor on mouse click
       this.selectionAnchor = null;
 
+      const selection = window.getSelection();
+      const collapsedClick =
+        selection === null ||
+        selection.rangeCount === 0 ||
+        selection.isCollapsed;
+
+      // A click on a formula opens the equation editor for THAT formula. The selection is not used to
+      // find it: clicking KaTeX leaves the selection inside the rendered subtree (which the text model
+      // reads as the position before the maths) or outside the field, and the editor then opened empty
+      // and the caret came back at the start. The caret is put after the formula, which is one logical
+      // character, so typing and Insert continue to its right.
+      if (collapsedClick && this.showEquationEditorOnMouseUp) {
+        // Focus BEFORE the node is looked up: focusing redraws the field, and a node resolved from the
+        // old DOM would be detached by the time the range is built.
+        this.editableDiv.focus();
+        const mathNode =
+          this.katexNodesInField()[this.equationEditorMouseDownKatexIndex] || null;
+        if (mathNode !== null) {
+          this.setCaretToRange(this.caretRangeAfterNode(mathNode));
+          this.showEquationEditor(false, mathNode);
+          return;
+        }
+      }
+
       // A click that lands with the selection outside this field — a toolbar button, another field —
       // gives no range at all. Dereferenced unguarded, this threw on every such click.
       let params = this._getRangeParams();
@@ -3024,16 +3279,6 @@ export default class MathRichInput extends React.Component {
         return;
       }
 
-      if (
-        params.startNodeIndex === params.endNodeIndex &&
-        params.startOffset === params.endOffset &&
-        this.showEquationEditorOnMouseUp
-      ) {
-        this.editableDiv.focus();
-        this.showEquationEditor(false, startNode);
-        return;
-      }
-
       // If our range starts or ends inside a katex node, move it out
       let new_rangeParams = null;
       if (isKatexNode(startNode)) {
@@ -3057,6 +3302,10 @@ export default class MathRichInput extends React.Component {
       }
 
       if (new_rangeParams !== null) {
+        // These node positions replace a selection inside KaTeX. Its old global offsets still point
+        // before the atomic formula, so they must not override the corrected positions after it.
+        new_rangeParams.startGlobalOffset = null;
+        new_rangeParams.endGlobalOffset = null;
         this._setRangeParams(new_rangeParams);
         event.preventDefault();
         return;
@@ -3092,6 +3341,32 @@ export default class MathRichInput extends React.Component {
         selection: getSelectionSnapshot(this.editableDiv),
       });
 
+      // Insert with nothing to write: a formula that was opened and not edited, or a new equation left
+      // empty. Writing back would send the host a change event for a value it already holds, and hosts
+      // show "unsaved changes" on any change event. Close as Escape does and put the caret back.
+      if (
+        (this.editingExistingEquation &&
+          latex === this.state.equationEditorLatex) ||
+        (!this.editingExistingEquation && latex === "")
+      ) {
+        const unchangedRangeParams = this.getOldRangeParams();
+        this.setState({ showEquationEditor: false }, () => {
+          try {
+            this.editableDiv.focus();
+            if (unchangedRangeParams !== null) {
+              this._setRangeParams(unchangedRangeParams);
+              this.restoreRangeAfterBrowserWork(
+                unchangedRangeParams,
+                "equation-unchanged"
+              );
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        });
+        return;
+      }
+
       let start_pos = this.markedRawText.indexOf(MARK);
       let end_pos = this.markedRawText.indexOf(MARK, start_pos + MARK.length);
       let oldRangeParams = this.getOldRangeParams();
@@ -3254,6 +3529,9 @@ export default class MathRichInput extends React.Component {
 
   styleText = (event, style) => {
     try {
+      this.initialiseHistory();
+      this.resetHistoryRedo();
+      this.formatCommandActive = true;
       style = style.toLowerCase();
       const command = this.getStyleCommand(style);
       const activeBefore = this.getActiveButtonsFromSelection();
@@ -3264,6 +3542,7 @@ export default class MathRichInput extends React.Component {
         selection.getRangeAt(0).collapsed;
       let success = false;
       let insertedTypingStylePlaceholder = false;
+      let publishedByWhitespaceMove = false;
 
       // This first part is a workaround whereby executing subscript or superscript
       // within an existing subscript or superscript makes the text even smaller instead
@@ -3274,6 +3553,7 @@ export default class MathRichInput extends React.Component {
         this.moveTrailingWhitespaceOutsideInlineStyle(style, command)
       ) {
         success = true;
+        publishedByWhitespaceMove = true;
       } else if (
         isCollapsed &&
         !activeBefore[style] &&
@@ -3310,12 +3590,19 @@ export default class MathRichInput extends React.Component {
       }
 
       const rangeParams = this._getRangeParams();
-      const removedEmptyTags =
-        !insertedTypingStylePlaceholder &&
-        this.cleanupEmptyInlineFormattingElements();
-      if (removedEmptyTags && rangeParams !== null && rangeParams !== undefined) {
+      if (!insertedTypingStylePlaceholder) this.cleanupEmptyInlineFormattingElements();
+      if (!publishedByWhitespaceMove && rangeParams !== null && rangeParams !== undefined) {
         this._setRangeParams(rangeParams);
-        this.applyCurrentEditableDomToComponent(rangeParams);
+        this.applyCurrentEditableDomToComponent(rangeParams, {
+          edit: {
+            before: editableText(this.editableDiv),
+            from: 0,
+            to: 0,
+            insert: "",
+          },
+          intent: "format",
+          history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+        });
       }
       this.setActiveButtonsIfChanged(
         this.getActiveButtonsFromSelection(rangeParams)
@@ -3323,6 +3610,8 @@ export default class MathRichInput extends React.Component {
       return success;
     } catch (error) {
       console.error(error);
+    } finally {
+      this.formatCommandActive = false;
     }
   };
 
@@ -3371,6 +3660,7 @@ export default class MathRichInput extends React.Component {
 
   insertRawText = (new_text, selectInsertedText = false) => {
     try {
+      const beforeText = editableText(this.editableDiv);
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
       let offset = rangeParams.endOffset;
@@ -3422,7 +3712,19 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: rangeParams.startGlobalOffset,
+              to: rangeParams.endGlobalOffset,
+              insert: new_text,
+            },
+            intent: "input",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
     } catch (error) {
       console.error(error);
@@ -3577,6 +3879,7 @@ export default class MathRichInput extends React.Component {
 
   removeNewLine = () => {
     try {
+      const beforeText = editableText(this.editableDiv);
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
       let prevNode = this._findNodeWithIndex(rangeParams.endNodeIndex - 1);
@@ -3613,7 +3916,19 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: Math.max(0, rangeParams.endGlobalOffset - 1),
+              to: rangeParams.endGlobalOffset,
+              insert: "",
+            },
+            intent: "input",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
     } catch (error) {
       console.error(error);
@@ -3622,6 +3937,7 @@ export default class MathRichInput extends React.Component {
 
   insertNewLine = () => {
     try {
+      const beforeText = editableText(this.editableDiv);
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
       let offset = rangeParams.endOffset;
@@ -3678,14 +3994,26 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: rangeParams.startGlobalOffset,
+              to: rangeParams.endGlobalOffset,
+              insert: "\n",
+            },
+            intent: "input",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
     } catch (error) {
       console.error(error);
     }
   };
 
-	  insertAfterSmallSpace(new_char, rangeParams) {
+	insertAfterSmallSpace(new_char, rangeParams) {
 	    try {
 	      if (rangeParams === null || rangeParams === undefined)
 	        rangeParams = this._getRangeParams();
@@ -3697,6 +4025,7 @@ export default class MathRichInput extends React.Component {
             " in insertAfterSmallSpace"
         );
 
+	      const beforeText = editableText(this.editableDiv);
 	      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
 	      if (node === null || node === undefined || node.nodeValue === null) {
 	        console.warn("Could not find small-space text node");
@@ -3736,14 +4065,21 @@ export default class MathRichInput extends React.Component {
         this.enableHtml()
       );
 
-      this.applyChangesToComponent(
+	      this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,
 	        new_rangeParams,
 	        this.props.useExpertMode,
 	        this.props.selectedTab,
-	        { skipControlledRender: true }
-	      );
+	        {
+	          skipControlledRender: true,
+	          transaction: {
+	            edit: { before: beforeText, from: rangeParams.startGlobalOffset, to: rangeParams.startGlobalOffset, insert: new_char },
+	            intent: "input",
+	            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+	          },
+	        }
+      );
 	    } catch (error) {
 	      console.error(error);
     }
@@ -3751,6 +4087,7 @@ export default class MathRichInput extends React.Component {
 
   insertAccentLetter = (event, old_char, new_char) => {
     try {
+      const beforeText = editableText(this.editableDiv);
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
       let offset = rangeParams.startOffset;
@@ -3797,7 +4134,19 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
-        this.props.selectedTab
+        this.props.selectedTab,
+        {
+          transaction: {
+            edit: {
+              before: beforeText,
+              from: old_char === null ? rangeParams.startGlobalOffset : Math.max(0, rangeParams.startGlobalOffset - 1),
+              to: old_char === null ? rangeParams.startGlobalOffset : rangeParams.startGlobalOffset,
+              insert: new_char,
+            },
+            intent: "input",
+            history: { id: `mri-${++this.historySequence}`, direction: "forward" },
+          },
+        }
       );
     } catch (error) {
       console.error(error);
@@ -3849,16 +4198,30 @@ export default class MathRichInput extends React.Component {
       currentRangeParams = null;
     }
     const savedRangeParams = this.getOldRangeParams();
+    // A missing selection at focus time is not "somewhere else": the browser has not placed a caret
+    // yet, which reads as the START of the field. Treating null as "leave it alone" skipped both the
+    // restore below and the move to the end, so the caret stayed where the browser had left it — 0.
+    const currentIsAtStart =
+      currentRangeParams === null || this.rangeIsAtStart(currentRangeParams);
     const shouldRestoreSavedRange =
       !this.isMouseDownInEditable &&
       this.props.value !== "" &&
-      this.rangeIsAtStart(currentRangeParams) &&
+      currentIsAtStart &&
       this.rangeHasNonZeroPosition(savedRangeParams);
+    // Focus without a click inside the field (a host focusing it, Tab, a click on the row around it)
+    // carries no position of its own. Editing an existing answer means continuing at its end, so the
+    // caret goes there; a click inside the field keeps the position the browser gave it.
+    const shouldMoveToEnd =
+      !this.isMouseDownInEditable &&
+      this.props.value !== "" &&
+      currentIsAtStart &&
+      !this.rangeHasNonZeroPosition(savedRangeParams);
     debugMathRichInput("handleFocus:start", {
       propsValue: this.props.value,
       oldRangeParams: this.oldRangeParams,
       currentRangeParams,
       shouldRestoreSavedRange,
+      shouldMoveToEnd,
       innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
       selection: getSelectionSnapshot(this.editableDiv),
     });
@@ -3870,6 +4233,25 @@ export default class MathRichInput extends React.Component {
         if (shouldRestoreSavedRange) {
           this._setRangeParams(savedRangeParams);
           this.restoreRangeAfterBrowserWork(savedRangeParams, "focus-restore");
+        } else if (shouldMoveToEnd) {
+          // One task later, not here: the browser places the caret as part of the focus default
+          // action, and for a keyboard focus (Tab) that happens AFTER this callback — moving now was
+          // simply overwritten. A task boundary is after both the pointer and the keyboard default.
+          // The guard keeps a selection placed meanwhile (a host restoring its own range) untouched.
+          window.setTimeout(() => {
+            if (this.state.hasFocus !== true) return;
+            const liveRangeParams = this._getRangeParams();
+            if (
+              liveRangeParams !== null &&
+              !this.rangeIsAtStart(liveRangeParams)
+            ) {
+              return;
+            }
+            const endOfField = document.createRange();
+            endOfField.selectNodeContents(this.editableDiv);
+            endOfField.collapse(false);
+            this.setCaretToRange(endOfField);
+          }, 0);
         }
         debugMathRichInput("handleFocus:after-setState", {
           selection: getSelectionSnapshot(this.editableDiv),
@@ -3885,7 +4267,7 @@ export default class MathRichInput extends React.Component {
     let currentRangeParams = null;
     try {
       currentRangeParams = this._getRangeParams();
-      if (this.rangeHasNonZeroPosition(currentRangeParams)) {
+      if (currentRangeParams !== null) {
         this.setOldRangeParams(currentRangeParams);
       }
     } catch (error) {
@@ -3898,6 +4280,10 @@ export default class MathRichInput extends React.Component {
       innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
       selection: getSelectionSnapshot(this.editableDiv),
     });
+    // Keyboard focus on this editor's tools is still inside the editor. Keep both
+    // the toolbar and the captured range until focus leaves the whole control.
+    if (event.relatedTarget === this.editableDiv ||
+        this.toolbar?.toolbar?.contains(event.relatedTarget)) return;
     if (onBlur != null) {
       onBlur();
     }
@@ -3913,11 +4299,63 @@ export default class MathRichInput extends React.Component {
   };
 
   handleCompositionStart = (event) => {
+    const offsets = this.captureSelectionOffsets();
+    this.compositionStart = {
+      before: editableText(this.editableDiv),
+      from: offsets?.from ?? 0,
+      to: offsets?.to ?? 0,
+    };
     this.isComposing = true;
   };
 
   handleCompositionEnd = (event) => {
     this.isComposing = false;
+    this.compositionStart = null;
+  };
+
+  captureSelectionOffsets = () => {
+    try {
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return null;
+      const range = selection.getRangeAt(0);
+      const before = editableText(this.editableDiv);
+      const endpoint = (container, offset) => {
+        const probe = document.createRange();
+        probe.selectNodeContents(this.editableDiv);
+        probe.setEnd(container, offset);
+        const wrapper = document.createElement("span");
+        wrapper.appendChild(probe.cloneContents());
+        return editableText(wrapper).length;
+      };
+      const from = endpoint(range.startContainer, range.startOffset);
+      const to = endpoint(range.endContainer, range.endOffset);
+      return { before, from: Math.min(from, to), to: Math.max(from, to) };
+    } catch (_error) {
+      return null;
+    }
+  };
+
+  /** Capture an input intent before the browser mutates the contenteditable DOM. */
+  handleBeforeInput = (event) => {
+    try {
+      const captured = transactionFromBeforeInput(
+        this.editableDiv,
+        event,
+        this.compositionStart
+          ? { before: this.compositionStart.before, from: this.compositionStart.from, to: this.compositionStart.to }
+          : null
+      );
+      const id = `mri-${++this.historySequence}`;
+      this.pendingTransaction = {
+        edit: captured.edit || undefined,
+        intent: captured.intent,
+        history: { id, direction: "forward" },
+      };
+    } catch (_error) {
+      this.pendingTransaction = {
+        intent: "programmatic",
+      };
+    }
   };
 
   // Comprehensive LaTeX pattern detection and auto-wrapping in math tags
@@ -4112,6 +4550,16 @@ export default class MathRichInput extends React.Component {
             )}
             {this.state.hasFocus && (
               <Toolbar
+                ref={(r) => (this.toolbar = r)}
+                onBlur={this.handleBlur}
+                beforeAction={() => {
+                  if (document.activeElement !== this.editableDiv) {
+                    const range = this.getOldRangeParams();
+                    this.editableDiv.focus({ preventScroll: true });
+                    if (range !== null) this._setRangeParams(range);
+                  }
+                  this.initialiseHistory();
+                }}
                 className="Toolbar"
                 enableMath={this.enableMath()}
                 enableFontStyling={this.enableFontStyling()}
@@ -4146,9 +4594,7 @@ export default class MathRichInput extends React.Component {
               onBlur={this.handleBlur}
               onCompositionStart={this.handleCompositionStart}
               onCompositionEnd={this.handleCompositionEnd}
-              dangerouslySetInnerHTML={{
-                __html: editableHtml,
-              }}
+              dangerouslySetInnerHTML={this.editableHtmlProp(editableHtml)}
               data-placeholder={this.props.placeholder || ""}
             ></span>
           </div>