@zzish/math-rich-input 0.1.57 → 0.1.59

package/src/MathRichInput.jsx

@@ -238,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;
 
@@ -645,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)
@@ -688,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;
   }
 
@@ -2200,6 +2244,9 @@ 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;
@@ -2956,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);
@@ -2973,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),
@@ -2981,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,
@@ -2991,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,
@@ -3002,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)
@@ -3026,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;
       }
@@ -3061,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;
@@ -3078,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());
 
@@ -3091,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();
@@ -3098,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();
@@ -3111,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)) {
@@ -3144,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;
@@ -3179,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();
@@ -3341,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();
@@ -3351,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
@@ -3361,6 +3553,7 @@ export default class MathRichInput extends React.Component {
         this.moveTrailingWhitespaceOutsideInlineStyle(style, command)
       ) {
         success = true;
+        publishedByWhitespaceMove = true;
       } else if (
         isCollapsed &&
         !activeBefore[style] &&
@@ -3398,7 +3591,7 @@ export default class MathRichInput extends React.Component {
 
       const rangeParams = this._getRangeParams();
       if (!insertedTypingStylePlaceholder) this.cleanupEmptyInlineFormattingElements();
-      if (rangeParams !== null && rangeParams !== undefined) {
+      if (!publishedByWhitespaceMove && rangeParams !== null && rangeParams !== undefined) {
         this._setRangeParams(rangeParams);
         this.applyCurrentEditableDomToComponent(rangeParams, {
           edit: {
@@ -3417,6 +3610,8 @@ export default class MathRichInput extends React.Component {
       return success;
     } catch (error) {
       console.error(error);
+    } finally {
+      this.formatCommandActive = false;
     }
   };
 
@@ -4003,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),
     });
@@ -4024,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),
@@ -4039,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) {
@@ -4052,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();
     }
@@ -4318,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()}
@@ -4352,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>

package/src/Toolbar.jsx

@@ -53,6 +53,7 @@ export default class Toolbar extends React.Component {
   handleButtonClick = (event, buttonName) => {
     event.preventDefault();
     event.stopPropagation();
+    this.props.beforeAction?.();
     this.suppliedClickHandler(event, buttonName);
   };
 
@@ -147,70 +148,75 @@ export default class Toolbar extends React.Component {
     }
 
     return (
-      <div className="Toolbar" style={style} ref={(r) => (this.toolbar = r)}>
+      <div className="Toolbar" style={style} ref={(r) => (this.toolbar = r)} onBlur={this.props.onBlur}>
         {enableFontStyling && (
           <>
             <button
+              type="button"
               name="Bold"
+              aria-label="Bold"
               className={
                 "Toolbar-button TB-narrow" +
                 (this.props.activeButtons.bold ? " TB-selected" : "")
               }
-              onClick={(e) => e.preventDefault()}
+              onClick={(e) => this.handleButtonClick(e, "Bold")}
               onMouseDown={(e) => e.preventDefault()}
-              onMouseUp={(e) => this.handleButtonClick(e, "Bold")}
             >
               <b>B</b>
             </button>
 
             <button
+              type="button"
               name="Italic"
+              aria-label="Italic"
               className={
                 "Toolbar-button TB-narrow" +
                 (this.props.activeButtons.italic ? " TB-selected" : "")
               }
-              onClick={(e) => e.preventDefault()}
+              onClick={(e) => this.handleButtonClick(e, "Italic")}
               onMouseDown={(e) => e.preventDefault()}
-              onMouseUp={(e) => this.handleButtonClick(e, "Italic")}
             >
               <i>I</i>
             </button>
 
             <button
+              type="button"
               name="Underline"
+              aria-label="Underline"
               className={
                 "Toolbar-button TB-narrow" +
                 (this.props.activeButtons.underline ? " TB-selected" : "")
               }
-              onClick={(e) => e.preventDefault()}
+              onClick={(e) => this.handleButtonClick(e, "Underline")}
               onMouseDown={(e) => e.preventDefault()}
-              onMouseUp={(e) => this.handleButtonClick(e, "Underline")}
             >
               <u>U</u>
             </button>
 
             <button
+              type="button"
               name="Superscript"
+              aria-label="Superscript"
               className={
                 "Toolbar-button TB-narrow" +
                 (this.props.activeButtons.superscript ? " TB-selected" : "")
               }
-              onClick={(e) => e.preventDefault()}
+              onClick={(e) => this.handleButtonClick(e, "Superscript")}
               onMouseDown={(e) => e.preventDefault()}
-              onMouseUp={(e) => this.handleButtonClick(e, "Superscript")}
             >
               a<sup>x</sup>
             </button>
 
             <button
+              type="button"
               name="Subscript"
+              aria-label="Subscript"
               className={
                 "Toolbar-button TB-narrow" +
                 (this.props.activeButtons.subscript ? " TB-selected" : "")
               }
-              onClick={(e) => e.preventDefault()}
+              onClick={(e) => this.handleButtonClick(e, "Subscript")}
               onMouseDown={(e) => e.preventDefault()}
-              onMouseUp={(e) => this.handleButtonClick(e, "Subscript")}
             >
               a<sub>x</sub>
             </button>
@@ -218,24 +224,32 @@ export default class Toolbar extends React.Component {
         )}
 
         <button
+          type="button"
           name="Accents"
+          aria-label="Accents"
+          aria-expanded={this.state.showAccents}
           className={
             "Toolbar-button TB-narrow" +
             (this.state.showAccents ? " TB-selected" : "")
           }
           onMouseDown={(e) => e.preventDefault()}
-          onClick={(e) => e.preventDefault()}
-          onMouseUp={(e) => this.showOrHideAccentBar(e)}
+          onClick={(e) => {
+            e.preventDefault(); e.stopPropagation();
+            this.props.beforeAction?.();
+            this.showOrHideAccentBar(e);
+          }}
         >
           á
         </button>
 
         {enableMath && (
           <button
+            type="button"
             name="Equation"
+            aria-label="Insert equation"
             className="Toolbar-button TB-wide"
-            onClick={(e) => e.preventDefault()}
-            onMouseDown={(e) => this.handleButtonClick(e, "Equation")}
+            onClick={(e) => this.handleButtonClick(e, "Equation")}
+            onMouseDown={(e) => e.preventDefault()}
           >
             <div dangerouslySetInnerHTML={{ __html: katexHTML }} />
             <span className="tooltiptext">