@zzish/math-rich-input 0.1.53 → 0.1.55

package/package.json

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

package/src/MathRichInput.css

@@ -23,6 +23,8 @@
 }
 
 .MathRichInput {
+    /* The hint below is laid over this box rather than inside its flow — see `.is-empty::before`. */
+    position: relative;
     font-size: 18px;
     padding: 10px;
     width: 100%;
@@ -32,13 +34,30 @@
     overflow: overlay;
 }
 
-.MathRichInput:empty::before {
-    content: attr(data-placeholder);
+/*
+ * The hint shown in a field with nothing in it.
+ *
+ * Laid over the editable, never inside it: a caret shares that box, and a pseudo-element in a
+ * `contenteditable` host is not drawn dependably. Placed at the field's own padding so the words start
+ * exactly where the first character will.
+ */
+.MathRichInput-hintlayer {
+    position: relative;
+    width: 0;
+    height: 0;
+    flex: 0 0 auto;
+}
+
+.MathRichInput-hint {
+    position: absolute;
+    top: 10px;
+    left: 10px;
     color: #acb6c0;
     font-size: 15px;
-}
-.MathRichInput:empty:focus::before {
-    content: "";
+    /* The field underneath owns every click. */
+    pointer-events: none;
+    user-select: none;
+    white-space: nowrap;
 }
 
 .MathRichInput:focus {

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()) {
@@ -2666,6 +2726,24 @@ export default class MathRichInput extends React.Component {
     return true;
   }
 
+  /**
+   * Whether the field holds nothing a teacher would call content.
+   *
+   * NOT `:empty`, which is what the stylesheet asked and why the placeholder has never once been seen.
+   * An empty field here is not an empty element: the value renders as a paragraph carrying a single
+   * zero-width space, so the element always has a child and the CSS rule never matched. The hint was
+   * written, translated, passed down through every field — and drawn nowhere.
+   *
+   * Markup is stripped rather than counted: `<p>` and `<br>` are the shape of emptiness, not content.
+   * Maths and images are content even though stripping tags would leave nothing behind, so they are
+   * asked about directly.
+   */
+  isVisuallyEmpty() {
+    const value = this.props.value || "";
+    if (/<(math|img)\b/i.test(value)) return false;
+    return value.replace(/<[^>]*>/g, "").split(SMALL_SPACE).join("").trim().length === 0;
+  }
+
   /**
    * The browser's own reading of an HTML string.
    *
@@ -3968,6 +4046,40 @@ export default class MathRichInput extends React.Component {
       <>
         <div className={useClassName}>
           <div className="MathRichInput-scrollview">
+            {/*
+              THE HINT IS A REAL ELEMENT, and it is NOT inside the editable.
+
+              It was a `::before` on the editable span, shown by `:empty`. Two things were wrong with that
+              and each alone was enough. `:empty` is never true here — an empty field still holds a
+              paragraph with a zero-width space in it — and a pseudo-element on a `contenteditable` host is
+              not something browsers draw dependably; it also sits in the same box a caret is moving
+              through. The hint was written, translated and passed down through every field, and drawn in
+              none of them.
+
+              Beside the editable and laid over it, it is ordinary content: it can be inspected, it cannot
+              affect the caret, and it disappears the moment the field has something in it or the teacher
+              starts typing.
+            */}
+            {this.props.placeholder && this.isVisuallyEmpty() && !this.state.hasFocus && (
+              /*
+               * CARRIED BY ITS OWN ANCHOR, a box of no size at the start of the row.
+               *
+               * An absolutely positioned element hangs off the nearest positioned ancestor, and which one
+               * that is belongs to whoever is embedding the field: a host may take the positioning off
+               * this component's own boxes to anchor something else of its own — the toolbar, say — and
+               * the hint then measures from the host's outer card instead of the field, landing on top of
+               * whatever the host has put to the left of it.
+               *
+               * A wrapper of its own settles it. Zero-sized, so it displaces nothing, and positioned, so
+               * it is what the hint measures from — which puts the words where the first character goes,
+               * whatever the host has done around it.
+               */
+              <div className="MathRichInput-hintlayer">
+                <div className="MathRichInput-hint" aria-hidden="true">
+                  {this.props.placeholder}
+                </div>
+              </div>
+            )}
             {this.state.hasFocus && (
               <Toolbar
                 className="Toolbar"

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;

package/src/standalone.js

@@ -31,12 +31,32 @@ class MathRichInputElement extends HTMLElement {
     this.lastRenderTime = 0;
     this.renderThrottleMs = 16; // ~60fps throttle
     this.isDuringDrag = false;
+    /** Pending teardown, cancelled when a disconnect turns out to have been a move. */
+    this.teardownTimeout = null;
 
     // Setup global drag event listeners once
     this.setupDragListeners();
   }
 
   connectedCallback() {
+    /*
+     * A MOVE IS A DISCONNECT FOLLOWED BY A CONNECT, and it must not cost anything.
+     *
+     * Reordering a list moves the row, and moving a row takes this element out of the document and puts
+     * it back. Torn down in between, the field empties: the row loses its height, everything below it
+     * jumps up, and it all lands again when the field has re-rendered. In a drag that happens on every
+     * crossing, which reads as the list bouncing.
+     *
+     * The teardown is scheduled rather than done, so a return within the same turn simply cancels it and
+     * the field never notices it was moved. A real removal has no such return, and tears down as before.
+     */
+    if (this.teardownTimeout) {
+      clearTimeout(this.teardownTimeout);
+      this.teardownTimeout = null;
+      globalDragState.disconnectedElements.delete(this);
+      return;
+    }
+
     // Handle reconnection after disconnect (common in SortableJS)
     this.handleReconnection();
 
@@ -51,26 +71,45 @@ class MathRichInputElement extends HTMLElement {
     // Track this element as disconnected (for potential reconnection)
     globalDragState.disconnectedElements.add(this);
 
-    // Clear any pending render timeouts
-    if (this.renderTimeout) {
-      clearTimeout(this.renderTimeout);
-      this.renderTimeout = null;
-    }
+    // Nothing is torn down yet — see `connectedCallback`. If this is a move, the element is back before
+    // this runs and cancels it; if it is a real removal, it runs and everything goes as it always did.
+    this.teardownTimeout = setTimeout(() => {
+      this.teardownTimeout = null;
+
+      /*
+       * ASK THE DOCUMENT, do not trust the timing.
+       *
+       * Cancelling on reconnect covers a move that finishes in the same turn. A framework is free to take
+       * the element out and put it back a turn later — which is still a move, and tearing down in between
+       * empties the field, collapses the row and jumps everything below it. The element itself knows
+       * whether it ended up back in the document, so that is what decides.
+       */
+      if (this.isConnected) return;
+
+      // Clear any pending render timeouts
+      if (this.renderTimeout) {
+        clearTimeout(this.renderTimeout);
+        this.renderTimeout = null;
+      }
 
-    // Reset state flags
-    this.isRendering = false;
-    this.isDuringDrag = false;
+      // Reset state flags
+      this.isRendering = false;
+      this.isDuringDrag = false;
 
-    // Unmount React root
-    if (this.root) {
-      try {
-        this.root.unmount();
-      } catch (error) {
-        console.error("❌ MathRichInput: Error unmounting React root:", error);
-      } finally {
-        this.root = null;
+      // Unmount React root
+      if (this.root) {
+        try {
+          this.root.unmount();
+        } catch (error) {
+          console.error("❌ MathRichInput: Error unmounting React root:", error);
+        } finally {
+          this.root = null;
+        }
       }
-    }
+      // Long enough for a framework to finish a move it makes in more than one step — a reorder can
+      // remove the row and put it back in separate turns, and a teardown landing between the two rebuilds
+      // the field for nothing. A genuine removal simply tears down a fraction of a second later.
+    }, 60);
   }
 
   static get observedAttributes() {