@zzish/math-rich-input 0.1.54 → 0.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -13,10 +13,11 @@
   },
   "main": "dist/index.js",
   "scripts": {
+    "test": "playwright test tests/caret-regression.spec.js --workers=1",
     "build": "rollup --config && webpack --config webpack.standalone.config.js",
     "build:legacy": "rollup --config",
     "build:standalone": "webpack --config webpack.standalone.config.js",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm test && npm run build"
   },
   "dependencies": {
     "katex": "^0.12.0",
@@ -36,6 +37,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/register": "^7.13.8",
+    "@playwright/test": "^1.62.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",

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

@@ -84,6 +84,7 @@ const EMPTY_INLINE_FORMATTING_REG_EXP =
 // const LATEX_MARKER_END = "</annotation>"
 
 const MAX_HISTORY_LENGTH = 100;
+const CONTROLLED_VALUE_ECHO_TIMEOUT_MS = 50;
 
 const DEFAULT_OPTIONS = {
   useExpertMode: false,
@@ -367,6 +368,21 @@ export default class MathRichInput extends React.Component {
 
     // Call the parent handler to apply the changes
     this.onChangeCallback({ value, mimeType }, { isExpertMode, selectedTab });
+    if (applyOptions.skipControlledRender === true) {
+      const pendingNativeValue = value;
+      // Give a scheduled controlled echo one short render window. If the host
+      // never echoes the value, release the gate rather than preserving a
+      // rejected native edit indefinitely.
+      setTimeout(() => {
+        if (
+          this.skipNextControlledValueRender === true &&
+          this.skipNextControlledValue === pendingNativeValue
+        ) {
+          this.skipNextControlledValueRender = false;
+          this.skipNextControlledValue = null;
+        }
+      }, CONTROLLED_VALUE_ECHO_TIMEOUT_MS);
+    }
     debugMathRichInput("applyChangesToComponent:after-onChange", {
       afterComponentUpdateData: this.afterComponentUpdateData,
       selection: getSelectionSnapshot(this.editableDiv),
@@ -587,6 +603,9 @@ export default class MathRichInput extends React.Component {
       ? this.getCurrentRawTextForProps(this.props)
       : null;
     const liveEditableHtml = this.editableDiv ? this.editableDiv.innerHTML : null;
+    const pendingNativeInputMatchesLiveDom =
+      this.skipNextControlledValueRender === true &&
+      currentRawText === this.skipNextControlledValue;
     const canPreserveNativeDom =
       this.state.hasFocus === true &&
       this.editableDiv !== null &&
@@ -594,7 +613,7 @@ export default class MathRichInput extends React.Component {
       (this.afterComponentUpdateData === null ||
         this.afterComponentUpdateData === undefined) &&
       this.lastRenderedEditableHtml !== null &&
-      currentRawText === this.props.value;
+      (currentRawText === this.props.value || pendingNativeInputMatchesLiveDom);
     const preserveRangeParams = canPreserveNativeDom
       ? this.getRangeParamsPreservingInlinePlaceholder()
       : null;
@@ -609,6 +628,7 @@ export default class MathRichInput extends React.Component {
       liveEditableHtml,
       lastRenderedEditableHtml: this.lastRenderedEditableHtml,
       currentRawText,
+      pendingNativeInputMatchesLiveDom,
       preserveRangeParams,
       afterComponentUpdateData: this.afterComponentUpdateData,
       hasFocus: this.state.hasFocus,
@@ -2694,22 +2714,32 @@ export default class MathRichInput extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     if (this.skipNextControlledValueRender === true) {
+      const controlledValueArrived =
+        nextProps.value === this.skipNextControlledValue;
       const canSkip =
-        nextProps.value === this.skipNextControlledValue &&
-        nextState === this.state;
+        controlledValueArrived && nextState === this.state;
 
       debugMathRichInput("shouldComponentUpdate:native-input-gate", {
         canSkip,
         nextValue: nextProps.value,
         skipNextControlledValue: this.skipNextControlledValue,
+        controlledValueArrived,
         currentPropsValue: this.props.value,
         stateChanged: nextState !== this.state,
         innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
         selection: getSelectionSnapshot(this.editableDiv),
       });
 
-      this.skipNextControlledValueRender = false;
-      this.skipNextControlledValue = null;
+      // A controlled host may commit an unrelated render before it echoes the
+      // value from this native input event. Keep the gate armed through that
+      // stale render so getEditableHtmlForRender can preserve the browser DOM
+      // and its selection. The time-bounded fallback armed by
+      // applyChangesToComponent keeps a host that rejects the value from
+      // leaving the gate armed indefinitely.
+      if (controlledValueArrived) {
+        this.skipNextControlledValueRender = false;
+        this.skipNextControlledValue = null;
+      }
 
       if (canSkip) return false;
     }
@@ -2726,6 +2756,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 +4076,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() {