@zzish/math-rich-input 0.1.58 → 0.1.59

package/src/standalone.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
 import { MathRichInput } from "./index.js";
+import { setupKatex } from "./katexHelper";
 
 // Import CSS files
 import "./MathRichInput.css";
@@ -31,6 +33,8 @@ class MathRichInputElement extends HTMLElement {
     this.lastRenderTime = 0;
     this.renderThrottleMs = 16; // ~60fps throttle
     this.isDuringDrag = false;
+    /** The element waiting for the first, synchronous render (`drawFirstRender`); null once drawn. */
+    this.firstElement = null;
     /** Pending teardown, cancelled when a disconnect turns out to have been a move. */
     this.teardownTimeout = null;
 
@@ -376,6 +380,38 @@ class MathRichInputElement extends HTMLElement {
     }
   }
 
+  /**
+   * DRAW THE FIRST RENDER BEFORE THE PAGE CAN PAINT.
+   *
+   * `root.render()` is not synchronous. React picks its priority from `window.event`: inside a discrete
+   * event such as a click it is drawn at once, anywhere else it is scheduled and drawn in slices with the
+   * browser painting in between. A host that connects fields outside an event — a framework flushing its
+   * DOM in a microtask, or this bundle arriving and upgrading fields already on the page — showed every
+   * field empty, then filled them one at a time while the layout around them grew (the Notebook's Studio,
+   * WORK-491). The first render is therefore flushed synchronously.
+   *
+   * In a microtask rather than here, because a field can be connected while React is committing (a
+   * React host renders `<math-rich-input>` in its own tree), and `flushSync` cannot flush from inside a
+   * commit: it warns and does nothing. A microtask runs once the commit has finished and still before the
+   * browser paints — React's own documented pattern for this case. A render asked for again before then
+   * replaces the element, so what is drawn is the latest.
+   */
+  drawFirstRender(root, element) {
+    const pending = this.firstElement;
+    this.firstElement = element;
+    if (pending) return;
+    queueMicrotask(() => {
+      const latest = this.firstElement;
+      this.firstElement = null;
+      if (this.root !== root || !latest) return;
+      try {
+        flushSync(() => root.render(latest));
+      } catch (error) {
+        console.error("❌ MathRichInput: First render failed:", error);
+      }
+    });
+  }
+
   render() {
     // Check if this is a force render (bypass all safety checks)
     const isForceRender = globalDragState.forceRenderQueue.has(this);
@@ -423,9 +459,11 @@ class MathRichInputElement extends HTMLElement {
       }
 
       // Create React root if it doesn't exist
+      let firstRender = false;
       if (!this.root) {
         try {
           this.root = createRoot(container);
+          firstRender = true;
         } catch (error) {
           console.error(
             "❌ MathRichInput: Failed to create React root:",
@@ -441,9 +479,7 @@ class MathRichInputElement extends HTMLElement {
         return;
       }
 
-      // Render with additional error boundary
-      this.root.render(
-        React.createElement(MathRichInput, {
+      const element = React.createElement(MathRichInput, {
           value: value,
           placeholder: placeholder,
           readOnly: readonly,
@@ -482,8 +518,10 @@ class MathRichInputElement extends HTMLElement {
               console.error("❌ MathRichInput: onChange error:", error);
             }
           },
-        })
-      );
+        });
+
+      if (firstRender || this.firstElement) this.drawFirstRender(this.root, element);
+      else this.root.render(element);
 
       // Render completed successfully
     } catch (error) {
@@ -503,6 +541,11 @@ class MathRichInputElement extends HTMLElement {
   }
 }
 
+// KaTeX's stylesheet goes on the page when the element is defined, not when the first field mounts: a
+// host that loads this bundle ahead of its first field (the Notebook does, at idle) then has the
+// stylesheet and its fonts in place before any field is drawn. Same stylesheet, same id; see katexHelper.
+setupKatex();
+
 // Define the web component
 customElements.define("math-rich-input", MathRichInputElement);