@zzish/math-rich-input 0.1.57 → 0.1.58

package/dist/index.js

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