@zzish/math-rich-input 0.1.48 → 0.1.50

package/src/standalone.js

@@ -0,0 +1,461 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { MathRichInput } from "./index.js";
+
+// Import CSS files
+import "./MathRichInput.css";
+import "./EquationEditorModal.css";
+import "./AccentBar.css";
+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() {
+    // 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) {
+      try {
+        this.root.unmount();
+      } catch (error) {
+        console.error("❌ MathRichInput: Error unmounting React root:", error);
+      } finally {
+        this.root = null;
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return [
+      "value",
+      "placeholder",
+      "readonly",
+      "disabled",
+      "mimetype",
+      "outputtex",
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Avoid infinite re-render loop by checking if value actually changed
+    if (oldValue !== newValue) {
+      this.safeRender();
+    }
+  }
+
+  /**
+   * 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;
+            }
+          }
+        }
+      });
+    });
+
+    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;
+    }
+  }
+
+  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
+    }
+  }
+}
+
+// Define the web component
+customElements.define("math-rich-input", MathRichInputElement);
+
+export default MathRichInputElement;

package/webpack.standalone.config.js

@@ -0,0 +1,63 @@
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: "./src/standalone.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "standalone.js",
+    library: {
+      type: "module",
+    },
+    environment: {
+      module: true,
+    },
+  },
+  experiments: {
+    outputModule: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              ["@babel/preset-env", { targets: "defaults" }],
+              ["@babel/preset-react", { runtime: "classic" }],
+            ],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: [require("postcss-nested")],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+    alias: {
+      react: require.resolve("react"),
+      "react-dom/client": require.resolve("react-dom/client"),
+      "react-dom": require.resolve("react-dom"),
+    },
+  },
+  externals: {
+    // No externals - bundle everything
+  },
+};
+