@zzish/math-rich-input 0.1.52 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.52",
+  "version": "0.1.54",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/src/MathRichInput.jsx

@@ -33,6 +33,7 @@ import {
   getPlainTextFromEditableDiv,
   globalOffsetToPlainTextOffset,
   plainTextOffsetToGlobalOffset,
+  SELECTION_MARK,
 } from "./mathRichInputHelper";
 import {
   debugMathRichInput,
@@ -1972,6 +1973,10 @@ export default class MathRichInput extends React.Component {
 
       // Stop editing if within rendered katex node, if somehow the cursor ends up there (it shouldn't)
       let params = this._getRangeParams();
+      // No range means no caret to protect — a field the browser has not placed a selection in yet. It
+      // reads as null on the first keystroke after a click on a toolbar button, and dereferencing it threw
+      // on every Cmd, every Cmd+A and every Cmd+V the teacher pressed.
+      if (params === null || params === undefined) return;
       let startNode = this._findNodeWithIndex(params.startNodeIndex);
       let endNode = this._findNodeWithIndex(params.endNodeIndex);
       if (!this.editableDivIsPlainText()) {
@@ -2028,7 +2033,12 @@ export default class MathRichInput extends React.Component {
       // If the cursor is in a katex node, then move it to the next node (unless there is no
       // net node in which case move it to the previous node)
       if (e.key === "ArrowRight") {
+        // `_getRangeParams` returns null whenever the document's selection is not inside this field —
+        // which happens in ordinary use, not only in error: a toolbar button taking focus is enough. It
+        // was dereferenced straight away, so the key handler THREW and everything after it in the same
+        // press was skipped.
         let rangeParams = this._getRangeParams();
+        if (!rangeParams) return;
         let index = rangeParams.startNodeIndex;
 
         if (index >= 0) {
@@ -2063,7 +2073,9 @@ export default class MathRichInput extends React.Component {
       }
 
       if (e.key === "ArrowLeft") {
+        // Same guard, same reason — see ArrowRight above.
         let rangeParams = this._getRangeParams();
+        if (!rangeParams) return;
         let index = rangeParams.startNodeIndex;
 
         // If the cursor is in a katex node, then move it to the previous node (unless there is no
@@ -2327,7 +2339,17 @@ export default class MathRichInput extends React.Component {
       let pasteHtml = clipboardData.getData("text/html");
       let pasteText = clipboardData.getData("text/plain");
 
-      // Get current cursor position
+      /*
+       * The caret is read BEFORE the selection is removed, and that order is deliberate.
+       *
+       * Reading it afterwards looks more correct — `deleteFromDocument()` removes the very nodes the
+       * index counts — and it was tried, on the theory that a stale index was why pasting over a
+       * selection emptied the field. It was not: the field emptied because React never wrote the
+       * content back (see `reconcileEditableDomWithRender`), and the reordering was left in on a theory
+       * that had already been disproved. In a host whose field holds unwrapped text rather than a `<p>`,
+       * the emptied div yields a caret that `elementToMarkedRawText` cannot mark at all — no mark, so the
+       * pasted text is inserted nowhere and the paste becomes a deletion.
+       */
       const rangeParams = this._getRangeParams();
       if (!rangeParams) {
         console.warn("Could not get range params for paste");
@@ -2339,7 +2361,7 @@ export default class MathRichInput extends React.Component {
 
       // Clear any existing selection
       const selection = window.getSelection();
-      if (selection.rangeCount > 0) {
+      if (selection && selection.rangeCount > 0) {
         selection.deleteFromDocument();
       }
 
@@ -2451,20 +2473,84 @@ export default class MathRichInput extends React.Component {
 
       // Use the component's insert mechanism to handle paste properly
       if (finalText) {
-        // Get current node and create marked text at cursor position
-        const currentNode = this._findNodeWithIndex(rangeParams.startNodeIndex);
+        /*
+         * WHERE TO PUT THE PASTED TEXT, found in the document rather than by index.
+         *
+         * `elementToMarkedRawText` marks ONE position — a node and an offset — and the selection has to
+         * be gone from the document before that position means anything. It was, and then the position
+         * was looked up by INDEX, which is where every version of this went wrong: an index read before
+         * the delete counts nodes the delete then removes, and an index read after it does not resolve in
+         * a field whose content is unwrapped text. Either way `_findNodeWithIndex` returns nothing, no
+         * mark is placed, `insertCharacterBeforeMarks` warns "Start: -1" and returns the text UNCHANGED —
+         * so the pasted words go nowhere, and what the teacher sees is their field emptied.
+         *
+         * The browser's own selection is the answer: after `deleteFromDocument()` it is left collapsed at
+         * exactly the point where the pasted text belongs, in a node that exists by construction. The
+         * index lookup stays as a fallback for the case where the selection has gone elsewhere.
+         */
+        const live = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+        const liveNode =
+          live && this.editableDiv.contains(live.startContainer) ? live.startContainer : null;
+        const currentNode =
+          liveNode !== null ? liveNode : this._findNodeWithIndex(rangeParams.startNodeIndex);
+        const currentOffset = liveNode !== null ? live.startOffset : rangeParams.startOffset;
+
         const markedText = elementToMarkedRawText(
           this.editableDiv,
           currentNode,
-          rangeParams.startOffset,
+          currentOffset,
           this.enableHtml()
         );
 
-        // Insert the new content at the marked position
-        let newRawText = removeMarks(
-          insertCharacterBeforeMarks(markedText, finalText)
-        );
+        /*
+         * A FIELD WITH NOTHING LEFT IN IT NEEDS NO MARK.
+         *
+         * Marking only works on a TEXT node, and an emptied field has none: the browser leaves the caret
+         * in the element itself, so `elementToMarkedRawText` has nothing to mark and returns text with no
+         * mark in it. `insertCharacterBeforeMarks` then warns and hands back its input UNCHANGED, which
+         * reads as success — the value comes out valid with the pasted words missing, and the teacher
+         * watches their field empty itself.
+         *
+         * But an empty field after the delete says something exact: the selection covered everything, so
+         * the result of the paste IS the pasted text. Nothing needs to be worked out. This is the
+         * select-all-and-paste that every report of this bug has been.
+         */
+        const remainingText = this.editableDiv.textContent
+          .split(SMALL_SPACE)
+          .join("")
+          .trim();
+        const fieldIsEmpty =
+          remainingText === "" && this.editableDiv.querySelector(".katex") === null;
+        const marked = markedText.indexOf(SELECTION_MARK) !== -1;
+
+        /*
+         * NOTHING IS BETTER THAN DESTRUCTION.
+         *
+         * No mark and content still standing means the caret cannot be located inside text that must be
+         * kept. Carrying on would write a value with the pasted text missing over a field whose selection
+         * has already been removed from the document — a paste that performs a deletion. Stopping leaves
+         * `props.value` untouched and `reconcileEditableDomWithRender` puts the document back from it:
+         * the paste does nothing, which is a disappointment rather than a loss.
+         */
+        if (!marked && !fieldIsEmpty) {
+          console.warn(
+            "[math-rich-input] paste found nowhere to insert; the field is left as it was",
+            { rangeParams, hadLiveSelection: liveNode !== null }
+          );
+          queueMicrotask(() => {
+            try {
+              this.reconcileEditableDomWithRender(true);
+            } catch (error) {
+              console.error(error);
+            }
+          });
+          return;
+        }
 
+        // Insert the new content at the marked position
+        let newRawText = marked
+          ? removeMarks(insertCharacterBeforeMarks(markedText, finalText))
+          : finalText;
         // Convert any remaining \[...\] LaTeX expressions to <math>...</math> format
         // This ensures consistency when paste adds <math> tags alongside existing \[...\] expressions
         if (this.enableMath()) {
@@ -2474,35 +2560,46 @@ export default class MathRichInput extends React.Component {
           );
         }
 
-        // Calculate cursor position exactly like equation editor does
+        /*
+         * Where the caret lands after a paste: at the END of what was pasted.
+         *
+         * The node index walks to just past the last formula, and that part was always right. The OFFSET
+         * within that node was not: it stopped at the boundary, so pasting "…multiply it by 3." left the
+         * caret between the 3 and the full stop. Everything after the last `</math>` is plain text, and
+         * plain text is the one thing whose rendered length is its written length — so the tail can
+         * simply be stepped over. (Markup in the tail is not that, and keeps the old position rather than
+         * a guessed one.)
+         *
+         * Deriving the position from scratch was tried twice and both attempts landed FURTHER away, each
+         * needing an exact model of how the rendered document is measured and each getting a corner of it
+         * wrong. Walking the structure that is already there needs no such model.
+         */
         let newRangeParams = null;
 
         if (hasMathContent) {
-          // Use same approach as equation editor for math content
           const oldRangeParams = this.getOldRangeParams();
           const mathTagCount = (finalText.match(/<math>/gi) || []).length;
-
-          if (this.props.value === "") {
-            // Special case of previously empty text input (like equation editor)
-            newRangeParams = {
-              startNodeIndex: mathTagCount * 2,
-              startOffset: SMALL_SPACE_LENGTH,
-              endNodeIndex: mathTagCount * 2,
-              endOffset: SMALL_SPACE_LENGTH,
-            };
-          } else {
-            // Normal case - position cursor after inserted math content (like equation editor)
-            newRangeParams = {
-              startNodeIndex: oldRangeParams.startNodeIndex + mathTagCount * 2,
-              startOffset: SMALL_SPACE_LENGTH,
-              endNodeIndex: oldRangeParams.startNodeIndex + mathTagCount * 2,
-              endOffset: SMALL_SPACE_LENGTH,
-            };
-          }
+          const startNodeIndex =
+            this.props.value === ""
+              ? mathTagCount * 2
+              : oldRangeParams.startNodeIndex + mathTagCount * 2;
+          const lastMathEnd = finalText.toLowerCase().lastIndexOf("</math>");
+          const tail =
+            lastMathEnd === -1
+              ? ""
+              : finalText.substring(lastMathEnd + "</math>".length);
+          const startOffset =
+            tail.indexOf("<") === -1
+              ? SMALL_SPACE_LENGTH + tail.length
+              : SMALL_SPACE_LENGTH;
+          newRangeParams = {
+            startNodeIndex,
+            startOffset,
+            endNodeIndex: startNodeIndex,
+            endOffset: startOffset,
+          };
         } else {
-          // For text content, use global offset like before
-          const newGlobalOffset =
-            rangeParams.startGlobalOffset + finalText.length;
+          const newGlobalOffset = rangeParams.startGlobalOffset + finalText.length;
           newRangeParams = {
             startGlobalOffset: newGlobalOffset,
             endGlobalOffset: newGlobalOffset,
@@ -2537,6 +2634,23 @@ export default class MathRichInput extends React.Component {
           this.props.useExpertMode,
           this.props.selectedTab
         );
+
+        // A paste cannot rely on being re-rendered. It removed the selected content from the DOM itself,
+        // and if the host already holds the value being applied — the same words pasted back into the
+        // field they came from — no prop changes, nothing re-renders, and the field is left empty while
+        // the value is correct everywhere else. So: give a real render its chance, then put the content
+        // back if none came.
+        const rangeAfterPaste = newRangeParams;
+        queueMicrotask(() => {
+          try {
+            if (this.reconcileEditableDomWithRender(true)) {
+              this._setRangeParams(rangeAfterPaste);
+              this.updateActiveButtons();
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        });
       }
     } catch (error) {
       console.error("Error in paste handler:", error);
@@ -2612,6 +2726,64 @@ export default class MathRichInput extends React.Component {
     return true;
   }
 
+  /**
+   * The browser's own reading of an HTML string.
+   *
+   * React renders `<p>&#8203;…</P>`; the DOM reports `<p>​…</p>` — same content, different bytes. So a
+   * comparison against `innerHTML` has to be made in the DOM's spelling, or it never matches and the
+   * reconciliation below would rewrite the field on every single update.
+   */
+  normaliseHtml(html) {
+    const probe = document.createElement("span");
+    probe.innerHTML = html;
+    return probe.innerHTML;
+  }
+
+  /**
+   * Put back what React believes it rendered, when the live DOM has drifted away from it.
+   *
+   * WHY THIS IS NEEDED AT ALL. `dangerouslySetInnerHTML` writes only when the html STRING changes: React
+   * compares the new `__html` with the previous one and, finding them equal, leaves the DOM alone. That is
+   * sound as long as React is the only thing that touches the DOM — and here it is not. `handlePaste`
+   * removes the selected content itself, through `selection.deleteFromDocument()`, so the field empties
+   * behind React's back while React's record of it still says "full".
+   *
+   * Paste the same words back into the field they came from and the two mistakes meet: the DOM is empty,
+   * the html React computes is identical to the html it rendered last time, so it writes nothing — and
+   * the field stays blank while `value`, the command, and the row in the database are all correct. The
+   * teacher sees their text vanish on paste; nothing anywhere reports an error.
+   *
+   * It writes back the SAME string React itself passed to `dangerouslySetInnerHTML` on this render, so
+   * nothing reaches the DOM here that React was not already putting there — the trust boundary is the
+   * one that existed before, not a new one.
+   *
+   * Only reconciled after a PROGRAMMATIC edit (`afterComponentUpdateData` is set), or when the paste
+   * asks directly (`force`). Ordinary typing goes down the native-input path, where the browser has
+   * already put the character in the right place and the caret with it, and rewriting the DOM there
+   * would move the caret to the front on every keystroke.
+   *
+   * `force` exists because a re-render is not guaranteed to happen AT ALL. When the host already holds
+   * the value being applied — paste the same words back into the field they came from — the prop never
+   * changes, so nothing re-renders and `componentDidUpdate` never runs. `lastRenderedEditableHtml` is
+   * then exactly right: it is the html for that unchanged value, which is what the DOM should hold.
+   *
+   * Returns whether it wrote, so the caller knows whether the caret needs putting back.
+   */
+  reconcileEditableDomWithRender(force = false) {
+    if (!this.editableDiv) return false;
+    if (!force && (this.afterComponentUpdateData === null || this.afterComponentUpdateData === undefined))
+      return false;
+    const html = force
+      ? rawTextToHtml(katex, this.props.value || "", this.props.mimeType)
+      : this.lastRenderedEditableHtml;
+    if (html === null || html === undefined) return false;
+    if (this.editableDiv.innerHTML === this.normaliseHtml(html)) return false;
+    debugMathRichInput("reconcile", { force, liveInnerHTML: this.editableDiv.innerHTML, html });
+    this.editableDiv.innerHTML = html;
+    this.lastRenderedEditableHtml = html;
+    return true;
+  }
+
   componentDidUpdate() {
     try {
       debugMathRichInput("componentDidUpdate:start", {
@@ -2623,6 +2795,9 @@ export default class MathRichInput extends React.Component {
         innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
         selection: getSelectionSnapshot(this.editableDiv),
       });
+      // Before the caret is restored, not after: the offsets below are counted through the text, so
+      // restoring them against an empty field puts the caret at 0 and loses the position as well.
+      this.reconcileEditableDomWithRender();
       if (
         this.afterComponentUpdateData !== null &&
         this.afterComponentUpdateData !== undefined &&
@@ -2788,9 +2963,12 @@ export default class MathRichInput extends React.Component {
       // Clear selection anchor on mouse click
       this.selectionAnchor = null;
 
-	      let params = this._getRangeParams();
-	      this.setOldRangeParams(params);
-	      let startNode = this._findNodeWithIndex(params.startNodeIndex);
+      // 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();
+      if (!params) return;
+      this.setOldRangeParams(params);
+      let startNode = this._findNodeWithIndex(params.startNodeIndex);
       let endNode = this._findNodeWithIndex(params.endNodeIndex);
 
       if (startNode === null || endNode === null) {

package/src/mathRichInputHelper.js

@@ -1582,3 +1582,12 @@ export function plainTextOffsetToGlobalOffset(editableDiv, plainTextOffset) {
   let plainText = getPlainTextFromEditableDiv(editableDiv);
   return Math.min(plainTextOffset, plainText.length);
 }
+
+/**
+ * The character used to mark a position in text while content is being rewritten.
+ *
+ * Exported so a caller can tell whether a mark was actually placed. `insertCharacterBeforeMarks` warns
+ * and returns its input UNCHANGED when there is no mark, which reads as success at the call site — the
+ * value comes back looking valid with the inserted text silently missing.
+ */
+export const SELECTION_MARK = MARK;