@zzish/math-rich-input 0.1.52 → 0.1.53

package/package.json

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

package/src/MathRichInput.jsx

@@ -1972,6 +1972,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 +2032,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 +2072,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,8 +2338,30 @@ export default class MathRichInput extends React.Component {
       let pasteHtml = clipboardData.getData("text/html");
       let pasteText = clipboardData.getData("text/plain");
 
-      // Get current cursor position
-      const rangeParams = this._getRangeParams();
+      // Remove whatever was selected FIRST, then read the caret.
+      //
+      // The order used to be the other way round, and that is why pasting over a selection emptied the
+      // field instead of replacing it. `rangeParams` is a NODE INDEX plus an offset, and
+      // `deleteFromDocument()` removes the very nodes it counts: read before the delete, the index points
+      // at something that no longer exists, so `_findNodeWithIndex` below finds nothing, the marked text
+      // it builds carries no mark, and the pasted text is inserted nowhere. The value the component then
+      // reports is correct while the editable div is left empty — which is exactly what a teacher sees.
+      //
+      // It only ever worked on an empty field because the canonical empty state is a single `<p>` holding
+      // one small space: deleting that selection leaves the same node structure standing, so the stale
+      // index still happens to resolve.
+      // Read the caret BEFORE, so there is something to fall back on, and AGAIN after the delete.
+      const paramsBeforeDelete = this._getRangeParams();
+
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        selection.deleteFromDocument();
+      }
+
+      // The caret AFTER the delete is the one that counts: `rangeParams` is a node index, and the delete
+      // removed the very nodes it counts. The pre-delete value is kept only as a fallback — bailing out
+      // here having already emptied the selection is how a paste turns into a deletion.
+      const rangeParams = this._getRangeParams() || paramsBeforeDelete;
       if (!rangeParams) {
         console.warn("Could not get range params for paste");
         return;
@@ -2337,12 +2370,6 @@ export default class MathRichInput extends React.Component {
       // Store old range params for cursor positioning (like equation editor)
       this.setOldRangeParams(rangeParams);
 
-      // Clear any existing selection
-      const selection = window.getSelection();
-      if (selection.rangeCount > 0) {
-        selection.deleteFromDocument();
-      }
-
       let finalText = "";
       let finalMimeType = this.props.mimeType || "text/html";
       let hasMathContent = false;
@@ -2464,7 +2491,6 @@ export default class MathRichInput extends React.Component {
         let newRawText = removeMarks(
           insertCharacterBeforeMarks(markedText, 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 +2500,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 +2574,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 +2666,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 +2735,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 +2903,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) {