@zzish/math-rich-input 0.1.53 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.53",
+  "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,
@@ -2338,30 +2339,18 @@ export default class MathRichInput extends React.Component {
       let pasteHtml = clipboardData.getData("text/html");
       let pasteText = clipboardData.getData("text/plain");
 
-      // 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;
+      /*
+       * 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");
         return;
@@ -2370,6 +2359,12 @@ 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 && selection.rangeCount > 0) {
+        selection.deleteFromDocument();
+      }
+
       let finalText = "";
       let finalMimeType = this.props.mimeType || "text/html";
       let hasMathContent = false;
@@ -2478,19 +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()
         );
 
+        /*
+         * 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 = removeMarks(
-          insertCharacterBeforeMarks(markedText, finalText)
-        );
+        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()) {

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;