@zzish/math-rich-input 0.1.51 → 0.1.52

package/src/Toolbar.jsx

@@ -33,10 +33,6 @@ export default class Toolbar extends React.Component {
     this.shouldUpdatePosition = true;
   }
 
-  handleButtonClick = (event, buttonName) => {
-    this.suppliedClickHandler(event, buttonName);
-  };
-
   showAccentBar = (event) => {
     if (!this.state.showAccents)
       this.accentLetter = this.suppliedAccentLetterFetcher();
@@ -55,6 +51,8 @@ export default class Toolbar extends React.Component {
   };
 
   handleButtonClick = (event, buttonName) => {
+    event.preventDefault();
+    event.stopPropagation();
     this.suppliedClickHandler(event, buttonName);
   };
 
@@ -236,6 +234,7 @@ export default class Toolbar extends React.Component {
           <button
             name="Equation"
             className="Toolbar-button TB-wide"
+            onClick={(e) => e.preventDefault()}
             onMouseDown={(e) => this.handleButtonClick(e, "Equation")}
           >
             <div dangerouslySetInnerHTML={{ __html: katexHTML }} />

package/src/mathRichInputDebug.js

@@ -0,0 +1,98 @@
+export const DEBUG_MATH_RICH_INPUT = false;
+
+const DEBUG_PREFIX = "[MRI]";
+
+function getNodePath(node, root = null) {
+  if (!node) return null;
+
+  const parts = [];
+  let current = node;
+  while (current && current !== root && parts.length < 8) {
+    if (current.nodeType === 3) {
+      parts.unshift(`#text("${current.nodeValue}")`);
+    } else {
+      const name = current.nodeName ? current.nodeName.toLowerCase() : "unknown";
+      const className =
+        current.className && typeof current.className === "string"
+          ? `.${current.className.split(" ").filter(Boolean).join(".")}`
+          : "";
+      parts.unshift(`${name}${className}`);
+    }
+    current = current.parentNode;
+  }
+
+  if (root) parts.unshift("root");
+  return parts.join(" > ");
+}
+
+export function describeNode(node, root = null) {
+  if (!node) return null;
+
+  return {
+    nodeName: node.nodeName,
+    nodeType: node.nodeType,
+    text:
+      node.nodeType === 3 && typeof node.nodeValue === "string"
+        ? node.nodeValue
+        : undefined,
+    textLength:
+      node.nodeType === 3 && typeof node.nodeValue === "string"
+        ? node.nodeValue.length
+        : undefined,
+    childCount: node.childNodes ? node.childNodes.length : undefined,
+    path: getNodePath(node, root),
+  };
+}
+
+export function getSelectionSnapshot(editableDiv = null) {
+  if (typeof window === "undefined" || !window.getSelection) return null;
+
+  const selection = window.getSelection();
+  if (!selection) return null;
+
+  const snapshot = {
+    activeElement:
+      typeof document !== "undefined" && document.activeElement
+        ? {
+            nodeName: document.activeElement.nodeName,
+            className: document.activeElement.className,
+          }
+        : null,
+    rangeCount: selection.rangeCount,
+    isCollapsed: selection.isCollapsed,
+    anchorOffset: selection.anchorOffset,
+    focusOffset: selection.focusOffset,
+    anchorNode: describeNode(selection.anchorNode, editableDiv),
+    focusNode: describeNode(selection.focusNode, editableDiv),
+  };
+
+  if (selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    snapshot.range = {
+      collapsed: range.collapsed,
+      startOffset: range.startOffset,
+      endOffset: range.endOffset,
+      startContainer: describeNode(range.startContainer, editableDiv),
+      endContainer: describeNode(range.endContainer, editableDiv),
+    };
+  }
+
+  return snapshot;
+}
+
+export function debugMathRichInput(label, payload = {}) {
+  if (!DEBUG_MATH_RICH_INPUT) return;
+
+  try {
+    if (typeof window !== "undefined") {
+      window.__MRI_DEBUG__ = true;
+    }
+    console.log(`${DEBUG_PREFIX} ${label}`, payload);
+  } catch (error) {
+    // Debug logging must never affect editor behavior.
+  }
+}
+
+if (typeof window !== "undefined") {
+  window.__MRI_DEBUG__ = DEBUG_MATH_RICH_INPUT;
+}

package/src/mathRichInputHelper.js

@@ -1,4 +1,9 @@
 import { determineMimeType } from "./mimeTypeHelper";
+import {
+  debugMathRichInput,
+  describeNode,
+  getSelectionSnapshot,
+} from "./mathRichInputDebug";
 
 export const RAW_TEXT_MATH_START_TAG_TEX = "\\[";
 export const RAW_TEXT_MATH_END_TAG_TEX = "\\]";
@@ -849,6 +854,54 @@ export function findFirstTextNode(node) {
   return null;
 }
 
+function findLastTextNode(node) {
+  if (isTextNode(node)) return node;
+
+  const nodes = node.childNodes;
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    let found_node = findLastTextNode(nodes[i]);
+    if (found_node !== null) return found_node;
+  }
+
+  return null;
+}
+
+function getTextPositionFromElementRangeEndpoint(container, offset) {
+  if (isTextNode(container)) return { node: container, offset };
+
+  const nodes = container.childNodes;
+  if (nodes === null || nodes === undefined || nodes.length === 0) return null;
+
+  // A collapsed selection inside contentEditable may report the editable SPAN
+  // itself as the container and the child index as the offset. The previous
+  // implementation always picked the first descendant text node, which moved
+  // the caret to the beginning after React re-rendered the controlled input.
+  if (offset > 0) {
+    const previousChild = nodes[Math.min(offset - 1, nodes.length - 1)];
+    const previousTextNode = findLastTextNode(previousChild);
+    if (previousTextNode !== null) {
+      return {
+        node: previousTextNode,
+        offset: previousTextNode.nodeValue.length,
+      };
+    }
+  }
+
+  if (offset < nodes.length) {
+    const nextTextNode = findFirstTextNode(nodes[offset]);
+    if (nextTextNode !== null) {
+      return { node: nextTextNode, offset: 0 };
+    }
+  }
+
+  const fallbackTextNode = findFirstTextNode(container);
+  if (fallbackTextNode !== null) {
+    return { node: fallbackTextNode, offset: 0 };
+  }
+
+  return null;
+}
+
 function findNodeAndOffsetForGlobalOffsetInEditableDiv(
   editableDiv,
   globalOffset
@@ -902,6 +955,10 @@ function findNodeAndOffsetForGlobalOffsetInEditableDiv(
 export function getRangeParams(editableDiv) {
   // console.log ("getRangeParams")
   // console.log("Inner html: "+editableDiv.innerHTML)
+  debugMathRichInput("getRangeParams:start", {
+    innerHTML: editableDiv ? editableDiv.innerHTML : null,
+    selection: getSelectionSnapshot(editableDiv),
+  });
   const isSupported = typeof window.getSelection !== "undefined";
   if (!isSupported) {
     console.error(
@@ -919,18 +976,30 @@ export function getRangeParams(editableDiv) {
   }
 
   const range = selection.getRangeAt(0);
+  debugMathRichInput("getRangeParams:range-before-normalize", {
+    startContainer: describeNode(range.startContainer, editableDiv),
+    startOffset: range.startOffset,
+    endContainer: describeNode(range.endContainer, editableDiv),
+    endOffset: range.endOffset,
+  });
   
   // logAllDescendants(editableDiv)
-  // If the range is not within a text node, move it to a text node
-  // This typically happens when the end of a range is at the start of a new line
+  // If the range is not within a text node, move it to the text node implied
+  // by the element-container offset. This typically happens when the browser
+  // reports a collapsed contentEditable selection as (SPAN, childIndex).
   if (range.startContainer.nodeType !== 3) {
-    let textNode = findFirstTextNode(range.startContainer);
-    if (textNode !== null) {
-      console.warn(
-        "Adjusting start pos in getRangeParams as container was of type: " +
-          range.startContainer.nodeName
-      );
-      range.setStart(textNode, 0);
+    const textPosition = getTextPositionFromElementRangeEndpoint(
+      range.startContainer,
+      range.startOffset
+    );
+    if (textPosition !== null) {
+      debugMathRichInput("getRangeParams:normalize-start-element", {
+        from: describeNode(range.startContainer, editableDiv),
+        fromOffset: range.startOffset,
+        to: describeNode(textPosition.node, editableDiv),
+        toOffset: textPosition.offset,
+      });
+      range.setStart(textPosition.node, textPosition.offset);
     } else {
       // Handle empty content case - return default range params
       // This is normal behavior after selecting all and deleting content
@@ -950,13 +1019,18 @@ export function getRangeParams(editableDiv) {
     }
   }
   if (range.endContainer.nodeType !== 3) {
-    let textNode = findFirstTextNode(range.endContainer);
-    if (textNode !== null) {
-      console.warn(
-        "Adjusting end pos in getRangeParams as container was of type: " +
-          range.endContainer.nodeName
-      );
-      range.setEnd(textNode, 0);
+    const textPosition = getTextPositionFromElementRangeEndpoint(
+      range.endContainer,
+      range.endOffset
+    );
+    if (textPosition !== null) {
+      debugMathRichInput("getRangeParams:normalize-end-element", {
+        from: describeNode(range.endContainer, editableDiv),
+        fromOffset: range.endOffset,
+        to: describeNode(textPosition.node, editableDiv),
+        toOffset: textPosition.offset,
+      });
+      range.setEnd(textPosition.node, textPosition.offset);
     } else {
       // Handle empty content case - return default range params
       // This is normal behavior after selecting all and deleting content
@@ -1008,12 +1082,22 @@ export function getRangeParams(editableDiv) {
     endGlobalOffset: endResult.offset,
   };
 
+  debugMathRichInput("getRangeParams:result", {
+    rangeParams,
+    selection: getSelectionSnapshot(editableDiv),
+  });
+
     return rangeParams;
 }
 
 function setRangeParamsFromGlobalOffsets(editableDiv, params) {
   let new_range = null;
   try {
+    debugMathRichInput("setRangeParamsFromGlobalOffsets:start", {
+      params,
+      innerHTML: editableDiv ? editableDiv.innerHTML : null,
+      selectionBefore: getSelectionSnapshot(editableDiv),
+    });
     if (params === null || params === undefined)
       throw new Error("Can't set range params: params === " + params);
     let startResult = findNodeAndOffsetForGlobalOffsetInEditableDiv(
@@ -1043,6 +1127,18 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
     const selection = window.getSelection();
     selection.removeAllRanges();
     selection.addRange(new_range);
+    debugMathRichInput("setRangeParamsFromGlobalOffsets:after", {
+      params,
+      startResult: {
+        node: describeNode(startResult.node, editableDiv),
+        offset: startResult.offset,
+      },
+      endResult: {
+        node: describeNode(endResult.node, editableDiv),
+        offset: endResult.offset,
+      },
+      selectionAfter: getSelectionSnapshot(editableDiv),
+    });
   } catch (error) {
     console.error(error);
     console.log("Trying to set range:");
@@ -1057,6 +1153,11 @@ export function setRangeParams(editableDiv, params) {
 
   let new_range = null;
   try {
+    debugMathRichInput("setRangeParams:start", {
+      params,
+      innerHTML: editableDiv ? editableDiv.innerHTML : null,
+      selectionBefore: getSelectionSnapshot(editableDiv),
+    });
     if (params === null || params === undefined) {
       console.error("Can't set range params: params === " + params);
       return;
@@ -1140,6 +1241,7 @@ export function setRangeParams(editableDiv, params) {
       startNode = findFirstTextNode(editableDiv);
       startOffset = 0;
     }
+    if (startNode === null) return;
 
     if (!isTextNode(startNode)) {
       console.warn("Start node found for range start is not a text a node");
@@ -1159,6 +1261,7 @@ export function setRangeParams(editableDiv, params) {
       endNode = findFirstTextNode(editableDiv);
       endOffset = 0;
     }
+    if (endNode === null) return;
 
     if (!isTextNode(endNode)) {
       console.warn("End node found for range start is not a text a node");
@@ -1179,7 +1282,7 @@ export function setRangeParams(editableDiv, params) {
           " > " +
           startNode.nodeValue.length +
           " - " +
-          stateNode.nodeType +
+          startNode.nodeType +
           " - " +
           startNode.nodeValue
       );
@@ -1207,6 +1310,14 @@ export function setRangeParams(editableDiv, params) {
     const selection = window.getSelection();
     selection.removeAllRanges();
     selection.addRange(new_range);
+    debugMathRichInput("setRangeParams:after", {
+      params,
+      startNode: describeNode(startNode, editableDiv),
+      startOffset,
+      endNode: describeNode(endNode, editableDiv),
+      endOffset,
+      selectionAfter: getSelectionSnapshot(editableDiv),
+    });
   } catch (error) {
     console.error(error);
     console.log("Trying to set range:");