@zzish/math-rich-input 0.1.49 → 0.1.50

package/package.json

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

package/src/standalone.js

@@ -10,19 +10,66 @@ import "./Toolbar.css";
 import "./EquationEditor.css";
 import "./SymbolButton.css";
 
+// Global drag state tracking for SortableJS compatibility
+let globalDragState = {
+  isDragging: false,
+  activeElement: null,
+  timeoutId: null,
+  dragStartTime: 0,
+  maxDragDuration: 2000, // 2 seconds max drag duration (reduced)
+  disconnectedElements: new Set(),
+  reconnectionTimeouts: new Map(),
+  forceRenderQueue: new Set(),
+};
+
 class MathRichInputElement extends HTMLElement {
   constructor() {
     super();
     this.root = null;
+    this.renderTimeout = null;
+    this.isRendering = false;
+    this.lastRenderTime = 0;
+    this.renderThrottleMs = 16; // ~60fps throttle
+    this.isDuringDrag = false;
+
+    // Setup global drag event listeners once
+    this.setupDragListeners();
   }
 
   connectedCallback() {
-    this.render();
+    // Handle reconnection after disconnect (common in SortableJS)
+    this.handleReconnection();
+
+    // Detect if we're during a SortableJS operation
+    this.detectDragOperation();
+
+    // Use throttled, safe render
+    this.safeRender();
   }
 
   disconnectedCallback() {
+    // 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;
+    }
+
+    // Reset state flags
+    this.isRendering = false;
+    this.isDuringDrag = false;
+
+    // Unmount React root
     if (this.root) {
-      this.root.unmount();
+      try {
+        this.root.unmount();
+      } catch (error) {
+        console.error("❌ MathRichInput: Error unmounting React root:", error);
+      } finally {
+        this.root = null;
+      }
     }
   }
 
@@ -40,67 +87,371 @@ class MathRichInputElement extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     // Avoid infinite re-render loop by checking if value actually changed
     if (oldValue !== newValue) {
-      this.render();
+      this.safeRender();
     }
   }
 
-  render() {
-    const value = this.getAttribute("value") || "";
-    const placeholder = this.getAttribute("placeholder") || "";
-    const readonly = this.hasAttribute("readonly");
-    const disabled = this.hasAttribute("disabled");
-    const mimeType = this.getAttribute("mimetype") || "";
-    const outputTexAttr = this.getAttribute("outputtex");
-    const outputTex =
-      outputTexAttr !== "false" && this.hasAttribute("outputtex");
-
-    // Create container if it doesn't exist
-    if (!this.querySelector(".math-rich-input-container")) {
-      const container = document.createElement("div");
-      container.className = "math-rich-input-container";
-      this.appendChild(container);
-    }
-
-    const container = this.querySelector(".math-rich-input-container");
-
-    if (!this.root) {
-      this.root = createRoot(container);
-    }
-
-    this.root.render(
-      React.createElement(MathRichInput, {
-        value: value,
-        placeholder: placeholder,
-        readOnly: readonly,
-        disabled: disabled,
-        mimeType: mimeType,
-        outputTex: outputTex,
-        className: this.className || "",
-        onChange: (data, options) => {
-          const { value: newValue, mimeType: newMimeType } = data;
-
-          // Only update attributes if they actually changed to avoid infinite re-render
-          const currentValue = this.getAttribute("value") || "";
-          const currentMimeType = this.getAttribute("mimetype") || "";
-
-          if (newValue !== currentValue) {
-            this.setAttribute("value", newValue);
+  /**
+   * Setup global drag event listeners for SortableJS compatibility
+   */
+  setupDragListeners() {
+    // Only setup once
+    if (globalDragState.listenersSetup) return;
+    globalDragState.listenersSetup = true;
+
+    // Listen for SortableJS drag events on document
+    document.addEventListener("sortableStart", () => {
+      globalDragState.isDragging = true;
+      globalDragState.dragStartTime = Date.now();
+    });
+
+    document.addEventListener("sortableEnd", () => {
+      // IMMEDIATE state reset - don't wait for any timeouts
+      globalDragState.isDragging = false;
+      globalDragState.dragStartTime = 0;
+
+      // Force render all elements after very short delay
+      setTimeout(() => {
+        MathRichInputElement.forceResetDragState();
+      }, 1); // Minimal delay to ensure DOM operations complete
+    });
+
+    // Fallback: Monitor DOM mutations for drag classes
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "class"
+        ) {
+          const element = mutation.target;
+          const hasGhost = element.classList.contains("sortable-ghost");
+          const hasChosen = element.classList.contains("sortable-chosen");
+
+          if (hasGhost || hasChosen) {
+            if (!globalDragState.isDragging) {
+              globalDragState.isDragging = true;
+              globalDragState.dragStartTime = Date.now();
+              globalDragState.activeElement = element;
+            }
           }
-          if (newMimeType !== currentMimeType) {
-            this.setAttribute("mimetype", newMimeType);
+        }
+      });
+    });
+
+    observer.observe(document.body, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["class"],
+    });
+
+    // Add drag timeout safety
+    setInterval(() => {
+      if (globalDragState.isDragging && globalDragState.dragStartTime > 0) {
+        const elapsed = Date.now() - globalDragState.dragStartTime;
+        if (elapsed > globalDragState.maxDragDuration) {
+          MathRichInputElement.forceResetDragState();
+        }
+      }
+    }, 1000);
+  }
+
+  /**
+   * Force reset drag state (emergency cleanup)
+   */
+  static forceResetDragState() {
+    globalDragState.isDragging = false;
+    globalDragState.dragStartTime = 0;
+    globalDragState.activeElement = null;
+
+    if (globalDragState.timeoutId) {
+      clearTimeout(globalDragState.timeoutId);
+      globalDragState.timeoutId = null;
+    }
+
+    // Force render ALL elements immediately (aggressive approach)
+    const allElements = document.querySelectorAll("math-rich-input");
+
+    allElements.forEach((element) => {
+      if (element.isConnected) {
+        // Add to force render queue and trigger immediate render
+        globalDragState.forceRenderQueue.add(element);
+        setTimeout(() => {
+          element.forceRender();
+          globalDragState.forceRenderQueue.delete(element);
+        }, 10);
+      }
+    });
+
+    // Clear all tracking sets and maps
+    globalDragState.disconnectedElements.clear();
+    globalDragState.reconnectionTimeouts.forEach((timeout) =>
+      clearTimeout(timeout)
+    );
+    globalDragState.reconnectionTimeouts.clear();
+    globalDragState.forceRenderQueue.clear();
+  }
+
+  /**
+   * Handle element reconnection after disconnect (common in SortableJS DOM manipulation)
+   */
+  handleReconnection() {
+    // Remove from disconnected set
+    globalDragState.disconnectedElements.delete(this);
+
+    // Clear any existing reconnection timeout for this element
+    if (globalDragState.reconnectionTimeouts.has(this)) {
+      clearTimeout(globalDragState.reconnectionTimeouts.get(this));
+      globalDragState.reconnectionTimeouts.delete(this);
+    }
+
+    // Add to force render queue for immediate processing
+    globalDragState.forceRenderQueue.add(this);
+
+    // React StrictMode pattern: Clean setup on reconnect
+    // Force immediate render regardless of drag state
+    setTimeout(() => {
+      if (this.isConnected) {
+        this.forceRender();
+        globalDragState.forceRenderQueue.delete(this);
+      }
+    }, 5); // Very short delay to ensure DOM is settled
+  }
+
+  /**
+   * Detect if element is being manipulated by SortableJS or similar drag libraries
+   */
+  detectDragOperation() {
+    // Primary check: Use global drag state
+    if (globalDragState.isDragging) {
+      this.isDuringDrag = true;
+      return;
+    }
+
+    // Secondary check: Direct element inspection (more conservative)
+    const hasDirectDragClass =
+      this.classList.contains("sortable-ghost") ||
+      this.classList.contains("sortable-chosen") ||
+      this.classList.contains("sortable-drag");
+
+    // Tertiary check: Check immediate parent only (not deep search)
+    const parentHasDragClass =
+      this.parentElement &&
+      (this.parentElement.classList.contains("sortable-ghost") ||
+        this.parentElement.classList.contains("sortable-chosen") ||
+        this.parentElement.classList.contains("sortable-drag"));
+
+    this.isDuringDrag = hasDirectDragClass || parentHasDragClass;
+
+    if (this.isDuringDrag && !globalDragState.isDragging) {
+      // Local drag operation detected
+    }
+  }
+
+  /**
+   * Force render bypassing all safety checks (for reconnection after SortableJS)
+   */
+  forceRender() {
+    // Reset all flags for clean start
+    this.isRendering = false;
+    this.isDuringDrag = false;
+
+    // Clear any pending timeouts
+    if (this.renderTimeout) {
+      clearTimeout(this.renderTimeout);
+      this.renderTimeout = null;
+    }
+
+    // Directly call render without any checks
+    try {
+      this.render();
+    } catch (error) {
+      console.error("❌ MathRichInput: Force render failed:", error);
+
+      // Try one more time after a brief delay
+      setTimeout(() => {
+        if (this.isConnected) {
+          try {
+            this.render();
+          } catch (retryError) {
+            console.error(
+              "❌ MathRichInput: Force render retry failed:",
+              retryError
+            );
           }
+        }
+      }, 50);
+    }
+  }
+
+  /**
+   * Throttled, error-safe rendering method
+   */
+  safeRender() {
+    // Force render for elements in the force render queue
+    if (globalDragState.forceRenderQueue.has(this)) {
+      this.forceRender();
+      return;
+    }
+
+    // Skip rendering during drag operations to prevent React conflicts
+    if (this.isDuringDrag) {
+      return;
+    }
+
+    // Throttle rapid render calls
+    const now = Date.now();
+    if (now - this.lastRenderTime < this.renderThrottleMs) {
+      // Clear previous timeout and schedule new one
+      if (this.renderTimeout) {
+        clearTimeout(this.renderTimeout);
+      }
+
+      this.renderTimeout = setTimeout(() => {
+        this.safeRender();
+      }, this.renderThrottleMs);
+      return;
+    }
+
+    // Prevent concurrent renders
+    if (this.isRendering) {
+      return;
+    }
+
+    this.lastRenderTime = now;
+    this.isRendering = true;
+
+    try {
+      this.render();
+    } catch (error) {
+      console.error("❌ MathRichInput: Render error caught:", error);
+
+      // Attempt graceful recovery
+      setTimeout(() => {
+        if (!this.isDuringDrag) {
+          this.render();
+        }
+      }, 100);
+    } finally {
+      this.isRendering = false;
+    }
+  }
 
-          this.dispatchEvent(
-            new CustomEvent("change", {
-              detail: {
-                value: newValue,
-                mimeType: newMimeType,
-              },
-            })
+  render() {
+    // Check if this is a force render (bypass all safety checks)
+    const isForceRender = globalDragState.forceRenderQueue.has(this);
+
+    if (!isForceRender) {
+      // Normal defensive checks
+      if (!this.isConnected) {
+        return;
+      }
+
+      // Double check drag state before proceeding
+      this.detectDragOperation();
+      if (this.isDuringDrag) {
+        return;
+      }
+    }
+
+    try {
+      const value = this.getAttribute("value") || "";
+      const placeholder = this.getAttribute("placeholder") || "";
+      const readonly = this.hasAttribute("readonly");
+      const disabled = this.hasAttribute("disabled");
+      const mimeType = this.getAttribute("mimetype") || "";
+      const outputTexAttr = this.getAttribute("outputtex");
+      const outputTex =
+        outputTexAttr !== "false" && this.hasAttribute("outputtex");
+
+      // Create container if it doesn't exist
+      if (!this.querySelector(".math-rich-input-container")) {
+        const container = document.createElement("div");
+        container.className = "math-rich-input-container";
+        this.appendChild(container);
+      }
+
+      const container = this.querySelector(".math-rich-input-container");
+
+      // Safety check for container
+      if (!container) {
+        console.error("❌ MathRichInput: Container not found after creation");
+        return;
+      }
+
+      // Create React root if it doesn't exist
+      if (!this.root) {
+        try {
+          this.root = createRoot(container);
+        } catch (error) {
+          console.error(
+            "❌ MathRichInput: Failed to create React root:",
+            error
           );
-        },
-      })
-    );
+          return;
+        }
+      }
+
+      // Safety check for root
+      if (!this.root) {
+        console.error("❌ MathRichInput: React root not available");
+        return;
+      }
+
+      // Render with additional error boundary
+      this.root.render(
+        React.createElement(MathRichInput, {
+          value: value,
+          placeholder: placeholder,
+          readOnly: readonly,
+          disabled: disabled,
+          mimeType: mimeType,
+          outputTex: outputTex,
+          className: this.className || "",
+          onChange: (data, options) => {
+            try {
+              const { value: newValue, mimeType: newMimeType } = data;
+
+              // Only update attributes if they actually changed to avoid infinite re-render
+              const currentValue = this.getAttribute("value") || "";
+              const currentMimeType = this.getAttribute("mimetype") || "";
+
+              if (newValue !== currentValue) {
+                this.setAttribute("value", newValue);
+              }
+              if (newMimeType !== currentMimeType) {
+                this.setAttribute("mimetype", newMimeType);
+              }
+
+              this.dispatchEvent(
+                new CustomEvent("change", {
+                  detail: {
+                    value: newValue,
+                    mimeType: newMimeType,
+                  },
+                })
+              );
+            } catch (error) {
+              console.error("❌ MathRichInput: onChange error:", error);
+            }
+          },
+        })
+      );
+
+      // Render completed successfully
+    } catch (error) {
+      console.error("❌ MathRichInput: Render failed:", error);
+
+      // If this is a React error #409, attempt graceful recovery
+      if (error.message && error.message.includes("409")) {
+        setTimeout(() => {
+          if (!this.isDuringDrag && this.isConnected) {
+            this.render();
+          }
+        }, 200);
+      }
+
+      throw error; // Re-throw for debugging
+    }
   }
 }