@zzish/math-rich-input 0.1.54 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.54",
+  "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

@@ -2726,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.
    *
@@ -4028,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/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() {