@zzish/math-rich-input 0.1.52 → 0.1.54

package/dist/index.js

@@ -21963,6 +21963,15 @@ function plainTextOffsetToGlobalOffset(editableDiv, plainTextOffset) {
   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.
+ */
+var SELECTION_MARK = MARK$1;
+
 var MIME_TYPE_PLAIN_TEXT = "text/plain";
 var MIME_TYPE_HTML = "text/html";
 var MIME_TYPE_TEX = "application/x-tex";
@@ -23034,6 +23043,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Stop editing if within rendered katex node, if somehow the cursor ends up there (it shouldn't)
         var params = _this2._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;
         var startNode = _this2._findNodeWithIndex(params.startNodeIndex);
         var endNode = _this2._findNodeWithIndex(params.endNodeIndex);
         if (!_this2.editableDivIsPlainText()) {
@@ -23086,7 +23099,12 @@ var MathRichInput = /*#__PURE__*/function (_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.
           var rangeParams = _this2._getRangeParams();
+          if (!rangeParams) return;
           var index = rangeParams.startNodeIndex;
           if (index >= 0) {
             if (isKatexNode(_this2._findNodeWithIndex(index))) {
@@ -23115,7 +23133,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           }
         }
         if (e.key === "ArrowLeft") {
+          // Same guard, same reason — see ArrowRight above.
           var _rangeParams = _this2._getRangeParams();
+          if (!_rangeParams) return;
           var _index = _rangeParams.startNodeIndex;
 
           // If the cursor is in a katex node, then move it to the previous node (unless there is no
@@ -23331,7 +23351,17 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var pasteHtml = clipboardData.getData("text/html");
         var 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.
+         */
         var rangeParams = _this2._getRangeParams();
         if (!rangeParams) {
           console.warn("Could not get range params for paste");
@@ -23343,7 +23373,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Clear any existing selection
         var selection = window.getSelection();
-        if (selection.rangeCount > 0) {
+        if (selection && selection.rangeCount > 0) {
           selection.deleteFromDocument();
         }
         var finalText = "";
@@ -23442,44 +23472,105 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Use the component's insert mechanism to handle paste properly
         if (finalText) {
-          // Get current node and create marked text at cursor position
-          var currentNode = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
-          var markedText = elementToMarkedRawText(_this2.editableDiv, currentNode, rangeParams.startOffset, _this2.enableHtml());
+          /*
+           * 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.
+           */
+          var live = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+          var liveNode = live && _this2.editableDiv.contains(live.startContainer) ? live.startContainer : null;
+          var currentNode = liveNode !== null ? liveNode : _this2._findNodeWithIndex(rangeParams.startNodeIndex);
+          var currentOffset = liveNode !== null ? live.startOffset : rangeParams.startOffset;
+          var markedText = elementToMarkedRawText(_this2.editableDiv, currentNode, currentOffset, _this2.enableHtml());
+
+          /*
+           * 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.
+           */
+          var remainingText = _this2.editableDiv.textContent.split(SMALL_SPACE).join("").trim();
+          var fieldIsEmpty = remainingText === "" && _this2.editableDiv.querySelector(".katex") === null;
+          var 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: rangeParams,
+              hadLiveSelection: liveNode !== null
+            });
+            queueMicrotask(function () {
+              try {
+                _this2.reconcileEditableDomWithRender(true);
+              } catch (error) {
+                console.error(error);
+              }
+            });
+            return;
+          }
 
           // Insert the new content at the marked position
-          var newRawText = removeMarks(insertCharacterBeforeMarks(markedText, finalText));
-
+          var 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 (_this2.enableMath()) {
             newRawText = newRawText.replace(/\\\[([^\]]*?)\\\]/g, "<math>$1</math>");
           }
 
-          // 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.
+           */
           var newRangeParams = null;
           if (hasMathContent) {
-            // Use same approach as equation editor for math content
             var oldRangeParams = _this2.getOldRangeParams();
             var mathTagCount = (finalText.match(/<math>/gi) || []).length;
-            if (_this2.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
-              };
-            }
+            var startNodeIndex = _this2.props.value === "" ? mathTagCount * 2 : oldRangeParams.startNodeIndex + mathTagCount * 2;
+            var lastMathEnd = finalText.toLowerCase().lastIndexOf("</math>");
+            var tail = lastMathEnd === -1 ? "" : finalText.substring(lastMathEnd + "</math>".length);
+            var startOffset = tail.indexOf("<") === -1 ? SMALL_SPACE_LENGTH + tail.length : SMALL_SPACE_LENGTH;
+            newRangeParams = {
+              startNodeIndex: startNodeIndex,
+              startOffset: startOffset,
+              endNodeIndex: startNodeIndex,
+              endOffset: startOffset
+            };
           } else {
-            // For text content, use global offset like before
             var newGlobalOffset = rangeParams.startGlobalOffset + finalText.length;
             newRangeParams = {
               startGlobalOffset: newGlobalOffset,
@@ -23502,6 +23593,23 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
           // Apply the change using the component's standard flow
           _this2.applyChangesToComponent(cleanedRawText, actualMimeType, newRangeParams, _this2.props.useExpertMode, _this2.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.
+          var rangeAfterPaste = newRangeParams;
+          queueMicrotask(function () {
+            try {
+              if (_this2.reconcileEditableDomWithRender(true)) {
+                _this2._setRangeParams(rangeAfterPaste);
+                _this2.updateActiveButtons();
+              }
+            } catch (error) {
+              console.error(error);
+            }
+          });
         }
       } catch (error) {
         console.error("Error in paste handler:", error);
@@ -23621,7 +23729,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Clear selection anchor on mouse click
         _this2.selectionAnchor = null;
+
+        // 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.
         var params = _this2._getRangeParams();
+        if (!params) return;
         _this2.setOldRangeParams(params);
         var startNode = _this2._findNodeWithIndex(params.startNodeIndex);
         var endNode = _this2._findNodeWithIndex(params.endNodeIndex);
@@ -24955,6 +25067,70 @@ var MathRichInput = /*#__PURE__*/function (_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.
+     */
+  }, {
+    key: "normaliseHtml",
+    value: function normaliseHtml(html) {
+      var 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.
+     */
+  }, {
+    key: "reconcileEditableDomWithRender",
+    value: function reconcileEditableDomWithRender() {
+      var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      if (!this.editableDiv) return false;
+      if (!force && (this.afterComponentUpdateData === null || this.afterComponentUpdateData === undefined)) return false;
+      var html = force ? rawTextToHtml(katex$1, 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: force,
+        liveInnerHTML: this.editableDiv.innerHTML,
+        html: html
+      });
+      this.editableDiv.innerHTML = html;
+      this.lastRenderedEditableHtml = html;
+      return true;
+    }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
@@ -24968,6 +25144,9 @@ var MathRichInput = /*#__PURE__*/function (_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 && this.afterComponentUpdateData.value === this.props.value) {
           debugMathRichInput("componentDidUpdate:restore-before", {
             rangeParams: this.afterComponentUpdateData.rangeParams,