@zzish/math-rich-input 0.1.56 → 0.1.58

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">

package/src/editTransaction.js

@@ -0,0 +1,173 @@
+/**
+ * Capture browser editing intent in the logical text coordinates used by MathRichInput.
+ *
+ * The component deliberately reports a measured replacement range instead of asking a host to diff the
+ * old and new strings. A host can therefore retain two equal names independently and reject a stale
+ * event before it changes protected content.
+ */
+
+const ZERO_WIDTH_SPACE = "\u200b";
+const BLOCK_TAGS = new Set([
+  "p", "div", "section", "article", "blockquote", "pre", "li", "ul", "ol",
+  "h1", "h2", "h3", "h4", "h5", "h6", "table", "thead", "tbody", "tfoot",
+  "tr", "td", "th", "hr",
+]);
+const INERT_TAGS = new Set(["script", "style", "template", "head", "title"]);
+
+/** Return whether a node is the rendered KaTeX island that cannot be edited character by character. */
+function isMathNode(node) {
+  return node && node.nodeType === 1 &&
+    (node.classList?.contains("katex") || node.classList?.contains("katex-error"));
+}
+
+/** Return whether a tag contributes a logical line boundary to the source text. */
+function isBlock(node) {
+  if (!node || node.nodeType !== 1) return false;
+  return BLOCK_TAGS.has(node.tagName.toLowerCase());
+}
+
+function isInert(node) {
+  if (!node || node.nodeType !== 1) return false;
+  return INERT_TAGS.has(node.tagName.toLowerCase());
+}
+
+function trimZeroWidth(value) {
+  return value.split(ZERO_WIDTH_SPACE).join("");
+}
+
+/** Build the text coordinate string without reading attributes or rendered math markup. */
+export function editableText(root) {
+  if (!root) return "";
+  const pieces = [];
+  let pendingBoundary = false;
+  const walk = (node) => {
+    if (isInert(node)) return;
+    if (isMathNode(node)) {
+      if (pendingBoundary && pieces.length && pieces[pieces.length - 1] !== "\n") pieces.push("\n");
+      const latex = node.querySelector?.('annotation[encoding="application/x-tex"]')?.textContent || "";
+      pieces.push(latex);
+      pendingBoundary = false;
+      return;
+    }
+    if (node.nodeType === 3) {
+      const text = trimZeroWidth(node.nodeValue || "");
+      if (text && pendingBoundary && pieces.length && pieces[pieces.length - 1] !== "\n") pieces.push("\n");
+      if (text) pieces.push(text);
+      if (text) pendingBoundary = false;
+      return;
+    }
+    if (node.nodeType !== 1 && node.nodeType !== 11) return;
+    if (node.nodeType === 1 && node.tagName.toLowerCase() === "br") {
+      pieces.push("\n");
+      pendingBoundary = false;
+      return;
+    }
+    const block = isBlock(node);
+    if (block && pieces.length) pendingBoundary = true;
+    for (const child of node.childNodes || []) walk(child);
+    if (block) pendingBoundary = true;
+  };
+  for (const child of root.childNodes || []) walk(child);
+  return pieces.join("");
+}
+
+function textBeforeEndpoint(root, container, offset) {
+  if (!root || !container || !root.contains(container)) return null;
+  const range = document.createRange();
+  range.selectNodeContents(root);
+  try {
+    range.setEnd(container, offset);
+  } catch (_error) {
+    return null;
+  }
+  const clone = document.createElement("span");
+  clone.appendChild(range.cloneContents());
+  return editableText(clone).length;
+}
+
+/** Read a collapsed or selected DOM range in logical UTF-16 offsets. */
+export function selectionOffsets(root, selection = window.getSelection?.()) {
+  if (!root || !selection || selection.rangeCount === 0) return null;
+  const range = selection.getRangeAt(0);
+  const from = textBeforeEndpoint(root, range.startContainer, range.startOffset);
+  const to = textBeforeEndpoint(root, range.endContainer, range.endOffset);
+  if (from === null || to === null) return null;
+  return from <= to ? { from, to } : { from: to, to: from };
+}
+
+function expandSurrogateBoundary(text, from, to) {
+  const before = text.charCodeAt(from - 1);
+  const after = text.charCodeAt(from);
+  if (before >= 0xd800 && before <= 0xdbff && after >= 0xdc00 && after <= 0xdfff) {
+    return { from: from - 1, to: Math.max(to, from + 1) };
+  }
+  const at = text.charCodeAt(to - 1);
+  const next = text.charCodeAt(to);
+  if (at >= 0xd800 && at <= 0xdbff && next >= 0xdc00 && next <= 0xdfff) {
+    return { from: Math.min(from, to - 1), to: to + 1 };
+  }
+  return { from, to };
+}
+
+function textFromTransfer(dataTransfer) {
+  if (!dataTransfer) return "";
+  const plain = dataTransfer.getData?.("text/plain") || "";
+  if (plain) return plain;
+  const html = dataTransfer.getData?.("text/html") || "";
+  if (!html || typeof document === "undefined") return "";
+  const probe = document.createElement("div");
+  probe.innerHTML = html;
+  return editableText(probe);
+}
+
+/**
+ * Convert a browser `beforeinput` event into an explicit replacement.
+ *
+ * A null return means the browser supplied no safe range or the operation is outside the supported text
+ * edits. The caller still emits the intent, without an edit, so a protected host can refuse it loudly.
+ */
+export function transactionFromBeforeInput(root, event, compositionStart = null) {
+  const before = editableText(root);
+  const selection = selectionOffsets(root);
+  if (!selection) return { before, intent: intentForInputType(event?.inputType), edit: null };
+  const inputType = event?.inputType || "insertText";
+  const intent = intentForInputType(inputType);
+  let { from, to } = selection;
+  let insert = event?.data ?? "";
+
+  if (inputType === "insertFromPaste" || inputType === "insertFromDrop") {
+    insert = textFromTransfer(event?.dataTransfer);
+  } else if (inputType === "insertLineBreak" || inputType === "insertParagraph") {
+    insert = "\n";
+  } else if (inputType === "deleteContentBackward" && from === to) {
+    ({ from, to } = expandSurrogateBoundary(before, Math.max(0, from - 1), from));
+  } else if (inputType === "deleteContentForward" && from === to) {
+    ({ from, to } = expandSurrogateBoundary(before, from, Math.min(before.length, to + 1)));
+  } else if (inputType.startsWith("delete") && from === to) {
+    return { before, intent, edit: null };
+  }
+
+  const base = compositionStart && intent === "composition" ? compositionStart : { before, from, to };
+  return {
+    before: base.before,
+    intent,
+    edit: { before: base.before, from: base.from, to: base.to, insert },
+  };
+}
+
+/** Give hosts a stable vocabulary while preserving the browser's native inputType for diagnostics. */
+export function intentForInputType(inputType) {
+  if (!inputType) return "input";
+  if (inputType.includes("Composition")) return "composition";
+  if (inputType.includes("Paste")) return "paste";
+  if (inputType.includes("Drop")) return "drop";
+  if (inputType.includes("Cut")) return "cut";
+  if (inputType === "historyUndo") return "undo";
+  if (inputType === "historyRedo") return "redo";
+  return "input";
+}
+
+/** Make a text replacement for component-owned operations such as a toolbar accent. */
+export function explicitReplacement(before, from, to, insert, intent = "programmatic") {
+  return { before, from, to, insert, intent };
+}

package/src/mathRichInputHelper.js

@@ -52,6 +52,8 @@ export function getMark() {
 }
 
 export 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";
 }
 
@@ -969,9 +971,11 @@ export function getRangeParams(editableDiv) {
   
   const selection = window.getSelection();
   if (selection.rangeCount === 0) {
-    console.error(
-      "Can't get range params, window.getSelection did not return any ranges"
-    );
+    // No selection yet is ordinary, not an error. A mousedown reaches this before the browser has
+    // placed a caret, and a toolbar button takes the selection out of the field; every click used to
+    // print an error to the console for a state the callers handle. Return null, and say so only when
+    // debug logging is on.
+    debugMathRichInput("getRangeParams:no-selection");
     return null;
   }
 

package/src/standalone.js

@@ -467,11 +467,14 @@ class MathRichInputElement extends HTMLElement {
                 this.setAttribute("mimetype", newMimeType);
               }
 
-              this.dispatchEvent(
+                this.dispatchEvent(
                 new CustomEvent("change", {
                   detail: {
                     value: newValue,
                     mimeType: newMimeType,
+                    ...(data.edit ? { edit: data.edit } : {}),
+                    ...(data.intent ? { intent: data.intent } : {}),
+                    ...(data.history ? { history: data.history } : {}),
                   },
                 })
               );