@zzish/math-rich-input 0.1.48 → 0.1.49

package/src/standalone.js

@@ -0,0 +1,110 @@
+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";
+
+class MathRichInputElement extends HTMLElement {
+  constructor() {
+    super();
+    this.root = null;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this.root) {
+      this.root.unmount();
+    }
+  }
+
+  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.render();
+    }
+  }
+
+  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);
+          }
+          if (newMimeType !== currentMimeType) {
+            this.setAttribute("mimetype", newMimeType);
+          }
+
+          this.dispatchEvent(
+            new CustomEvent("change", {
+              detail: {
+                value: newValue,
+                mimeType: newMimeType,
+              },
+            })
+          );
+        },
+      })
+    );
+  }
+}
+
+// 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
+  },
+};
+