@zzish/math-rich-input 0.1.55 → 0.1.57

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/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 } : {}),
                   },
                 })
               );