@zzish/math-rich-input 0.1.52 → 0.1.53

package/dist/index.js

@@ -23034,6 +23034,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 +23090,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 +23124,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,8 +23342,29 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var pasteHtml = clipboardData.getData("text/html");
         var pasteText = clipboardData.getData("text/plain");
 
-        // Get current cursor position
-        var rangeParams = _this2._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.
+        var paramsBeforeDelete = _this2._getRangeParams();
+        var 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.
+        var rangeParams = _this2._getRangeParams() || paramsBeforeDelete;
         if (!rangeParams) {
           console.warn("Could not get range params for paste");
           return;
@@ -23340,12 +23372,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Store old range params for cursor positioning (like equation editor)
         _this2.setOldRangeParams(rangeParams);
-
-        // Clear any existing selection
-        var selection = window.getSelection();
-        if (selection.rangeCount > 0) {
-          selection.deleteFromDocument();
-        }
         var finalText = "";
         var finalMimeType = _this2.props.mimeType || "text/html";
         var hasMathContent = false;
@@ -23448,38 +23474,41 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
           // Insert the new content at the marked position
           var 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 (_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 +23531,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 +23667,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 +25005,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 +25082,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,