tetrons 2.2.3 → 2.2.4

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/tetrons/EditorContent.tsx
-import React10 from "react";
+import React13 from "react";
 
 // node_modules/orderedmap/dist/index.js
 function OrderedMap(content) {
@@ -14345,10 +14345,10 @@ var FontSize = Mark2.create({
 });
 
 // src/components/tetrons/toolbar/TetronsToolbar.tsx
-import React6, { useEffect as useEffect3 } from "react";
+import React9, { useEffect as useEffect3 } from "react";
 
 // src/components/tetrons/toolbar/ActionGroup.tsx
-import { useEffect, useRef, useState } from "react";
+import React2, { useEffect, useRef, useState } from "react";
 import {
   MdZoomIn,
   MdZoomOut,
@@ -14359,10 +14359,9 @@ import {
 
 // src/components/tetrons/toolbar/ToolbarButton.tsx
 import React from "react";
-import { jsx } from "react/jsx-runtime";
 var ToolbarButton = React.forwardRef(
   ({ icon: Icon, onClick, disabled = false, title, label, isActive = false }, ref) => {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
@@ -14371,9 +14370,9 @@ var ToolbarButton = React.forwardRef(
         disabled,
         title: title ?? label,
         "aria-label": title ?? label,
-        className: `toolbar-button ${isActive ? "active" : ""}`,
-        children: /* @__PURE__ */ jsx(Icon, { size: 20 })
-      }
+        className: `toolbar-button ${isActive ? "active" : ""}`
+      },
+      /* @__PURE__ */ React.createElement(Icon, { size: 20 })
     );
   }
 );
@@ -14381,7 +14380,6 @@ ToolbarButton.displayName = "ToolbarButton";
 var ToolbarButton_default = ToolbarButton;
 
 // src/components/tetrons/toolbar/ActionGroup.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function ActionGroup({ editor }) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -14508,64 +14506,49 @@ function ActionGroup({ editor }) {
     link.click();
     document.body.removeChild(link);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "action-group", role: "group", "aria-label": "Editor actions", children: [
-    /* @__PURE__ */ jsx2(ToolbarButton_default, { icon: MdZoomIn, onClick: zoomIn, title: "Zoom In" }),
-    /* @__PURE__ */ jsx2(ToolbarButton_default, { icon: MdZoomOut, onClick: zoomOut, title: "Zoom Out" }),
-    /* @__PURE__ */ jsx2(ToolbarButton_default, { icon: MdPrint, onClick: handlePrint, title: "Print" }),
-    /* @__PURE__ */ jsx2(ToolbarButton_default, { icon: MdSave, onClick: handleSave, title: "Save" }),
-    /* @__PURE__ */ jsxs("div", { className: "relative", ref: dropdownRef, children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setDropdownOpen((open) => !open),
-          "aria-haspopup": "menu",
-          "aria-expanded": dropdownOpen ? "true" : "false",
-          className: "export-button",
-          title: "Export",
-          children: [
-            /* @__PURE__ */ jsx2(MdDownload, {}),
-            /* @__PURE__ */ jsx2("span", { className: "text-sm" })
-          ]
-        }
-      ),
-      dropdownOpen && /* @__PURE__ */ jsxs("div", { className: "export-dropdown", children: [
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setDropdownOpen(false);
-              handleDownloadPDF();
-            },
-            children: "Export as PDF"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setDropdownOpen(false);
-              handleDownloadHTML();
-            },
-            children: "Export as HTML"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setDropdownOpen(false);
-              handleDownloadDOCX();
-            },
-            children: "Export as DOCX"
-          }
-        )
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ React2.createElement("div", { className: "action-group", role: "group", "aria-label": "Editor actions" }, /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdZoomIn, onClick: zoomIn, title: "Zoom In" }), /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdZoomOut, onClick: zoomOut, title: "Zoom Out" }), /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdPrint, onClick: handlePrint, title: "Print" }), /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdSave, onClick: handleSave, title: "Save" }), /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: dropdownRef }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setDropdownOpen((open) => !open),
+      "aria-haspopup": "menu",
+      "aria-expanded": dropdownOpen ? "true" : "false",
+      className: "export-button",
+      title: "Export"
+    },
+    /* @__PURE__ */ React2.createElement(MdDownload, null),
+    /* @__PURE__ */ React2.createElement("span", { className: "text-sm" })
+  ), dropdownOpen && /* @__PURE__ */ React2.createElement("div", { className: "export-dropdown" }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setDropdownOpen(false);
+        handleDownloadPDF();
+      }
+    },
+    "Export as PDF"
+  ), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setDropdownOpen(false);
+        handleDownloadHTML();
+      }
+    },
+    "Export as HTML"
+  ), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setDropdownOpen(false);
+        handleDownloadDOCX();
+      }
+    },
+    "Export as DOCX"
+  ))));
 }
 
 // src/components/tetrons/toolbar/ClipboardGroup.tsx
@@ -14575,64 +14558,59 @@ import {
   MdContentCopy,
   MdFormatPaint
 } from "react-icons/md";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import React3 from "react";
 function ClipboardGroup({ editor }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "clipboard-group", children: [
-    /* @__PURE__ */ jsx3(
-      ToolbarButton_default,
-      {
-        icon: MdContentPaste,
-        title: "Paste",
-        onClick: async () => {
-          try {
-            const text = await navigator.clipboard.readText();
-            editor.chain().focus().insertContent(text).run();
-          } catch (error) {
-            console.error("Failed to read clipboard contents:", error);
-          }
+  return /* @__PURE__ */ React3.createElement("div", { className: "clipboard-group" }, /* @__PURE__ */ React3.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdContentPaste,
+      title: "Paste",
+      onClick: async () => {
+        try {
+          const text = await navigator.clipboard.readText();
+          editor.chain().focus().insertContent(text).run();
+        } catch (error) {
+          console.error("Failed to read clipboard contents:", error);
         }
       }
-    ),
-    /* @__PURE__ */ jsx3(
-      ToolbarButton_default,
-      {
-        icon: MdContentCut,
-        title: "Cut",
-        onClick: () => {
-          const { from: from2, to } = editor.state.selection;
-          if (from2 === to) return;
-          const selectedText = editor.state.doc.textBetween(from2, to);
-          navigator.clipboard.writeText(selectedText).then(() => {
-            editor.chain().focus().deleteRange({ from: from2, to }).run();
-          });
-        }
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdContentCut,
+      title: "Cut",
+      onClick: () => {
+        const { from: from2, to } = editor.state.selection;
+        if (from2 === to) return;
+        const selectedText = editor.state.doc.textBetween(from2, to);
+        navigator.clipboard.writeText(selectedText).then(() => {
+          editor.chain().focus().deleteRange({ from: from2, to }).run();
+        });
       }
-    ),
-    /* @__PURE__ */ jsx3(
-      ToolbarButton_default,
-      {
-        icon: MdContentCopy,
-        title: "Copy",
-        onClick: () => {
-          const { from: from2, to } = editor.state.selection;
-          if (from2 === to) return;
-          const selectedText = editor.state.doc.textBetween(from2, to);
-          navigator.clipboard.writeText(selectedText);
-        }
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdContentCopy,
+      title: "Copy",
+      onClick: () => {
+        const { from: from2, to } = editor.state.selection;
+        if (from2 === to) return;
+        const selectedText = editor.state.doc.textBetween(from2, to);
+        navigator.clipboard.writeText(selectedText);
       }
-    ),
-    /* @__PURE__ */ jsx3(
-      ToolbarButton_default,
-      {
-        icon: MdFormatPaint,
-        title: "Format Painter",
-        onClick: () => {
-          const currentMarks = editor.getAttributes("textStyle");
-          localStorage.setItem("formatPainter", JSON.stringify(currentMarks));
-        }
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatPaint,
+      title: "Format Painter",
+      onClick: () => {
+        const currentMarks = editor.getAttributes("textStyle");
+        localStorage.setItem("formatPainter", JSON.stringify(currentMarks));
       }
-    )
-  ] });
+    }
+  ));
 }
 
 // src/components/tetrons/toolbar/FontStyleGroup.tsx
@@ -14648,8 +14626,7 @@ import {
 } from "react-icons/md";
 import { ImTextColor } from "react-icons/im";
 import { BiSolidColorFill } from "react-icons/bi";
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import React4, { useEffect as useEffect2, useState as useState2 } from "react";
 function FontStyleGroup({ editor }) {
   const [textColor, setTextColor] = useState2("#000000");
   const [highlightColor, setHighlightColor] = useState2("#ffff00");
@@ -14675,182 +14652,161 @@ function FontStyleGroup({ editor }) {
       editor.off("transaction", updateStates);
     };
   }, [editor]);
-  return /* @__PURE__ */ jsxs3("div", { className: "font-style-group", children: [
-    /* @__PURE__ */ jsxs3(
-      "select",
-      {
-        title: "Font Family",
-        value: fontFamily,
-        onChange: (e) => {
-          const value = e.target.value;
-          setFontFamily(value);
-          editor.chain().focus().setFontFamily(value).run();
-        },
-        children: [
-          /* @__PURE__ */ jsx4("option", { value: "Arial", children: "Arial" }),
-          /* @__PURE__ */ jsx4("option", { value: "Georgia", children: "Georgia" }),
-          /* @__PURE__ */ jsx4("option", { value: "Times New Roman", children: "Times New Roman" }),
-          /* @__PURE__ */ jsx4("option", { value: "Courier New", children: "Courier New" }),
-          /* @__PURE__ */ jsx4("option", { value: "Verdana", children: "Verdana" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      "select",
-      {
-        title: "Font Size",
-        value: fontSize,
-        onChange: (e) => {
-          const value = e.target.value;
-          setFontSize(value);
-          editor.chain().focus().setFontSize(value).run();
-        },
-        children: [
-          /* @__PURE__ */ jsx4("option", { value: "12px", children: "12" }),
-          /* @__PURE__ */ jsx4("option", { value: "14px", children: "14" }),
-          /* @__PURE__ */ jsx4("option", { value: "16px", children: "16" }),
-          /* @__PURE__ */ jsx4("option", { value: "18px", children: "18" }),
-          /* @__PURE__ */ jsx4("option", { value: "24px", children: "24" }),
-          /* @__PURE__ */ jsx4("option", { value: "36px", children: "36" }),
-          /* @__PURE__ */ jsx4("option", { value: "48px", children: "48" }),
-          /* @__PURE__ */ jsx4("option", { value: "64px", children: "64" }),
-          /* @__PURE__ */ jsx4("option", { value: "72px", children: "72" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      ToolbarButton_default,
-      {
-        icon: MdFormatBold,
-        label: "Bold",
-        onClick: () => editor.chain().focus().toggleBold().run(),
-        isActive: editor.isActive("bold")
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      ToolbarButton_default,
-      {
-        icon: MdFormatItalic,
-        label: "Italic",
-        onClick: () => editor.chain().focus().toggleItalic().run(),
-        isActive: editor.isActive("italic")
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      ToolbarButton_default,
-      {
-        icon: MdFormatUnderlined,
-        label: "Underline",
-        onClick: () => editor.chain().focus().toggleUnderline().run(),
-        isActive: editor.isActive("underline")
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      ToolbarButton_default,
-      {
-        icon: MdStrikethroughS,
-        label: "Strikethrough",
-        onClick: () => editor.chain().focus().toggleStrike().run(),
-        isActive: editor.isActive("strike")
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      ToolbarButton_default,
-      {
-        icon: MdSubscript,
-        label: "Subscript",
-        onClick: () => editor.chain().focus().toggleSubscript().run(),
-        isActive: editor.isActive("subscript")
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      ToolbarButton_default,
-      {
-        icon: MdSuperscript,
-        label: "Superscript",
-        onClick: () => editor.chain().focus().toggleSuperscript().run(),
-        isActive: editor.isActive("superscript")
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      "label",
-      {
-        title: "Font Color",
-        "aria-label": "Font Color",
-        className: "color-label",
-        style: { "--indicator-color": textColor },
-        children: [
-          /* @__PURE__ */ jsx4(ImTextColor, { size: 20 }),
-          /* @__PURE__ */ jsx4("div", { className: "color-indicator" }),
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              type: "color",
-              value: textColor,
-              onChange: (e) => {
-                const color = e.target.value;
-                setTextColor(color);
-                editor.chain().focus().setColor(color).run();
-              }
-            }
-          )
-        ]
+  return /* @__PURE__ */ React4.createElement("div", { className: "font-style-group" }, /* @__PURE__ */ React4.createElement(
+    "select",
+    {
+      title: "Font Family",
+      value: fontFamily,
+      onChange: (e) => {
+        const value = e.target.value;
+        setFontFamily(value);
+        editor.chain().focus().setFontFamily(value).run();
       }
-    ),
-    /* @__PURE__ */ jsxs3(
-      "label",
-      {
-        title: "Highlight Color",
-        "aria-label": "Highlight Color",
-        className: "color-label",
-        style: { "--indicator-color": highlightColor },
-        children: [
-          /* @__PURE__ */ jsx4(BiSolidColorFill, { size: 20 }),
-          /* @__PURE__ */ jsx4("div", { className: "color-indicator" }),
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              type: "color",
-              value: highlightColor,
-              onChange: (e) => {
-                const color = e.target.value;
-                setHighlightColor(color);
-                editor.chain().focus().setHighlight({ color }).run();
-              }
-            }
-          )
-        ]
+    },
+    /* @__PURE__ */ React4.createElement("option", { value: "Arial" }, "Arial"),
+    /* @__PURE__ */ React4.createElement("option", { value: "Georgia" }, "Georgia"),
+    /* @__PURE__ */ React4.createElement("option", { value: "Times New Roman" }, "Times New Roman"),
+    /* @__PURE__ */ React4.createElement("option", { value: "Courier New" }, "Courier New"),
+    /* @__PURE__ */ React4.createElement("option", { value: "Verdana" }, "Verdana")
+  ), /* @__PURE__ */ React4.createElement(
+    "select",
+    {
+      title: "Font Size",
+      value: fontSize,
+      onChange: (e) => {
+        const value = e.target.value;
+        setFontSize(value);
+        editor.chain().focus().setFontSize(value).run();
       }
-    ),
-    /* @__PURE__ */ jsx4(
-      ToolbarButton_default,
+    },
+    /* @__PURE__ */ React4.createElement("option", { value: "12px" }, "12"),
+    /* @__PURE__ */ React4.createElement("option", { value: "14px" }, "14"),
+    /* @__PURE__ */ React4.createElement("option", { value: "16px" }, "16"),
+    /* @__PURE__ */ React4.createElement("option", { value: "18px" }, "18"),
+    /* @__PURE__ */ React4.createElement("option", { value: "24px" }, "24"),
+    /* @__PURE__ */ React4.createElement("option", { value: "36px" }, "36"),
+    /* @__PURE__ */ React4.createElement("option", { value: "48px" }, "48"),
+    /* @__PURE__ */ React4.createElement("option", { value: "64px" }, "64"),
+    /* @__PURE__ */ React4.createElement("option", { value: "72px" }, "72")
+  ), /* @__PURE__ */ React4.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatBold,
+      label: "Bold",
+      onClick: () => editor.chain().focus().toggleBold().run(),
+      isActive: editor.isActive("bold")
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatItalic,
+      label: "Italic",
+      onClick: () => editor.chain().focus().toggleItalic().run(),
+      isActive: editor.isActive("italic")
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatUnderlined,
+      label: "Underline",
+      onClick: () => editor.chain().focus().toggleUnderline().run(),
+      isActive: editor.isActive("underline")
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdStrikethroughS,
+      label: "Strikethrough",
+      onClick: () => editor.chain().focus().toggleStrike().run(),
+      isActive: editor.isActive("strike")
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdSubscript,
+      label: "Subscript",
+      onClick: () => editor.chain().focus().toggleSubscript().run(),
+      isActive: editor.isActive("subscript")
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdSuperscript,
+      label: "Superscript",
+      onClick: () => editor.chain().focus().toggleSuperscript().run(),
+      isActive: editor.isActive("superscript")
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    "label",
+    {
+      title: "Font Color",
+      "aria-label": "Font Color",
+      className: "color-label",
+      style: { "--indicator-color": textColor }
+    },
+    /* @__PURE__ */ React4.createElement(ImTextColor, { size: 20 }),
+    /* @__PURE__ */ React4.createElement("div", { className: "color-indicator" }),
+    /* @__PURE__ */ React4.createElement(
+      "input",
       {
-        icon: MdFormatClear,
-        label: "Clear Formatting",
-        onClick: () => editor.chain().focus().unsetAllMarks().run()
+        type: "color",
+        value: textColor,
+        onChange: (e) => {
+          const color = e.target.value;
+          setTextColor(color);
+          editor.chain().focus().setColor(color).run();
+        }
       }
-    ),
-    /* @__PURE__ */ jsx4(
-      ToolbarButton_default,
+    )
+  ), /* @__PURE__ */ React4.createElement(
+    "label",
+    {
+      title: "Highlight Color",
+      "aria-label": "Highlight Color",
+      className: "color-label",
+      style: { "--indicator-color": highlightColor }
+    },
+    /* @__PURE__ */ React4.createElement(BiSolidColorFill, { size: 20 }),
+    /* @__PURE__ */ React4.createElement("div", { className: "color-indicator" }),
+    /* @__PURE__ */ React4.createElement(
+      "input",
       {
-        icon: MdFormatPaint2,
-        label: "Apply Painter Format",
-        onClick: () => {
-          const format = JSON.parse(
-            localStorage.getItem("formatPainter") || "{}"
-          );
-          if (format.color) editor.chain().focus().setColor(format.color).run();
-          if (format.backgroundColor) {
-            editor.chain().focus().setHighlight({ color: format.backgroundColor }).run();
-          }
+        type: "color",
+        value: highlightColor,
+        onChange: (e) => {
+          const color = e.target.value;
+          setHighlightColor(color);
+          editor.chain().focus().setHighlight({ color }).run();
         }
       }
     )
-  ] });
+  ), /* @__PURE__ */ React4.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatClear,
+      label: "Clear Formatting",
+      onClick: () => editor.chain().focus().unsetAllMarks().run()
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatPaint2,
+      label: "Apply Painter Format",
+      onClick: () => {
+        const format = JSON.parse(
+          localStorage.getItem("formatPainter") || "{}"
+        );
+        if (format.color) editor.chain().focus().setColor(format.color).run();
+        if (format.backgroundColor) {
+          editor.chain().focus().setHighlight({ color: format.backgroundColor }).run();
+        }
+      }
+    }
+  ));
 }
 
 // src/components/tetrons/toolbar/InsertGroup.tsx
-import { useRef as useRef2, useState as useState3 } from "react";
+import React5, { useRef as useRef2, useState as useState3 } from "react";
 import {
   MdTableChart,
   MdInsertPhoto,
@@ -14862,7 +14818,6 @@ import {
   MdOutlineOndemandVideo
 } from "react-icons/md";
 import Picker from "@emoji-mart/react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function InsertGroup({ editor }) {
   const [showTableGrid, setShowTableGrid] = useState3(false);
   const [selectedRows, setSelectedRows] = useState3(1);
@@ -14938,165 +14893,145 @@ function InsertGroup({ editor }) {
       return url;
     }
   }
-  return /* @__PURE__ */ jsxs4("div", { className: "insert-group", children: [
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        type: "file",
-        accept: "image/*",
-        ref: imageInputRef,
-        className: "hidden-input",
-        onChange: handleImageUpload,
-        "aria-label": "Upload Image",
-        title: "Upload Image"
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        type: "file",
-        accept: "video/*",
-        ref: videoInputRef,
-        className: "hidden-input",
-        onChange: handleVideoUpload,
-        "aria-label": "Upload Video",
-        title: "Upload Video"
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      ToolbarButton_default,
-      {
-        icon: MdTableChart,
-        label: "Insert Table",
-        onClick: () => setShowTableGrid(!showTableGrid)
-      }
-    ),
-    showTableGrid && /* @__PURE__ */ jsxs4(
-      "div",
-      {
-        className: "table-grid-popup",
-        onMouseLeave: () => setShowTableGrid(false),
-        children: [
-          /* @__PURE__ */ jsx5("div", { className: "table-grid", children: [...Array(10)].map(
-            (_, row) => [...Array(10)].map((_2, col) => {
-              const isSelected = row < selectedRows && col < selectedCols;
-              return /* @__PURE__ */ jsx5(
-                "div",
-                {
-                  className: `table-grid-cell ${isSelected ? "selected" : ""}`,
-                  onMouseEnter: () => handleTableCellHover(row + 1, col + 1),
-                  onClick: () => handleTableInsert(row + 1, col + 1)
-                },
-                `${row}-${col}`
-              );
-            })
-          ) }),
-          /* @__PURE__ */ jsxs4("div", { className: "table-grid-label", children: [
-            selectedRows,
-            " x ",
-            selectedCols
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      ToolbarButton_default,
-      {
-        icon: MdInsertPhoto,
-        label: "Insert Image",
-        onClick: () => imageInputRef.current?.click()
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      ToolbarButton_default,
-      {
-        icon: MdVideoLibrary,
-        label: "Insert Video",
-        onClick: () => videoInputRef.current?.click()
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      ToolbarButton_default,
-      {
-        icon: MdInsertLink,
-        label: "Insert Link",
-        onClick: () => {
-          const url = prompt("Enter URL");
-          if (url) {
-            editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      ToolbarButton_default,
-      {
-        icon: MdInsertComment,
-        label: "Insert Comment",
-        onClick: () => {
-          const comment = prompt("Enter your comment");
-          if (comment && editor.can().chain().focus().setComment(comment).run()) {
-            editor.chain().focus().setComment(comment).run();
-          } else {
-            console.warn("Cannot apply comment \u2014 maybe no selection?");
+  return /* @__PURE__ */ React5.createElement("div", { className: "insert-group" }, /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "file",
+      accept: "image/*",
+      ref: imageInputRef,
+      className: "hidden-input",
+      onChange: handleImageUpload,
+      "aria-label": "Upload Image",
+      title: "Upload Image"
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "file",
+      accept: "video/*",
+      ref: videoInputRef,
+      className: "hidden-input",
+      onChange: handleVideoUpload,
+      "aria-label": "Upload Video",
+      title: "Upload Video"
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdTableChart,
+      label: "Insert Table",
+      onClick: () => setShowTableGrid(!showTableGrid)
+    }
+  ), showTableGrid && /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: "table-grid-popup",
+      onMouseLeave: () => setShowTableGrid(false)
+    },
+    /* @__PURE__ */ React5.createElement("div", { className: "table-grid" }, [...Array(10)].map(
+      (_, row) => [...Array(10)].map((_2, col) => {
+        const isSelected = row < selectedRows && col < selectedCols;
+        return /* @__PURE__ */ React5.createElement(
+          "div",
+          {
+            key: `${row}-${col}`,
+            className: `table-grid-cell ${isSelected ? "selected" : ""}`,
+            onMouseEnter: () => handleTableCellHover(row + 1, col + 1),
+            onClick: () => handleTableInsert(row + 1, col + 1)
           }
+        );
+      })
+    )),
+    /* @__PURE__ */ React5.createElement("div", { className: "table-grid-label" }, selectedRows, " x ", selectedCols)
+  ), /* @__PURE__ */ React5.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdInsertPhoto,
+      label: "Insert Image",
+      onClick: () => imageInputRef.current?.click()
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdVideoLibrary,
+      label: "Insert Video",
+      onClick: () => videoInputRef.current?.click()
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdInsertLink,
+      label: "Insert Link",
+      onClick: () => {
+        const url = prompt("Enter URL");
+        if (url) {
+          editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
         }
       }
-    ),
-    /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx5(
-        ToolbarButton_default,
-        {
-          icon: MdInsertEmoticon,
-          label: "Emoji",
-          onClick: () => setShowPicker(!showPicker)
-        }
-      ),
-      showPicker && /* @__PURE__ */ jsx5("div", { className: "emoji-picker", children: /* @__PURE__ */ jsx5(
-        Picker,
-        {
-          onEmojiSelect: addEmoji,
-          theme: "auto",
-          emoji: "point_up",
-          showPreview: false,
-          showSkinTones: true,
-          emojiTooltip: true
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdInsertComment,
+      label: "Insert Comment",
+      onClick: () => {
+        const comment = prompt("Enter your comment");
+        if (comment && editor.can().chain().focus().setComment(comment).run()) {
+          editor.chain().focus().setComment(comment).run();
+        } else {
+          console.warn("Cannot apply comment \u2014 maybe no selection?");
         }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx5(
-      ToolbarButton_default,
-      {
-        icon: MdHorizontalRule,
-        label: "Horizontal Line",
-        onClick: () => editor.chain().focus().setHorizontalRule().run()
       }
-    ),
-    /* @__PURE__ */ jsx5(
-      ToolbarButton_default,
-      {
-        icon: MdOutlineOndemandVideo,
-        label: "Embed",
-        onClick: () => {
-          const url = prompt(
-            "Enter embed URL (YouTube, Vimeo, Google Maps, etc.)"
-          );
-          if (!url) return;
-          const embedUrl = normalizeEmbedUrl(url);
-          const width = prompt("Enter width in pixels", "560");
-          const height = prompt("Enter height in pixels", "315");
-          editor.chain().focus().setEmbed({
-            src: embedUrl,
-            width: width ? parseInt(width) : 560,
-            height: height ? parseInt(height) : 315
-          }).run();
-        }
+    }
+  ), /* @__PURE__ */ React5.createElement("div", { className: "relative" }, /* @__PURE__ */ React5.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdInsertEmoticon,
+      label: "Emoji",
+      onClick: () => setShowPicker(!showPicker)
+    }
+  ), showPicker && /* @__PURE__ */ React5.createElement("div", { className: "emoji-picker" }, /* @__PURE__ */ React5.createElement(
+    Picker,
+    {
+      onEmojiSelect: addEmoji,
+      theme: "auto",
+      emoji: "point_up",
+      showPreview: false,
+      showSkinTones: true,
+      emojiTooltip: true
+    }
+  ))), /* @__PURE__ */ React5.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdHorizontalRule,
+      label: "Horizontal Line",
+      onClick: () => editor.chain().focus().setHorizontalRule().run()
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdOutlineOndemandVideo,
+      label: "Embed",
+      onClick: () => {
+        const url = prompt(
+          "Enter embed URL (YouTube, Vimeo, Google Maps, etc.)"
+        );
+        if (!url) return;
+        const embedUrl = normalizeEmbedUrl(url);
+        const width = prompt("Enter width in pixels", "560");
+        const height = prompt("Enter height in pixels", "315");
+        editor.chain().focus().setEmbed({
+          src: embedUrl,
+          width: width ? parseInt(width) : 560,
+          height: height ? parseInt(height) : 315
+        }).run();
       }
-    )
-  ] });
+    }
+  ));
 }
 
 // src/components/tetrons/toolbar/ListAlignGroup.tsx
+import React6 from "react";
 import {
   MdFormatListBulleted,
   MdFormatListNumbered,
@@ -15107,85 +15042,76 @@ import {
   MdFormatAlignRight,
   MdFormatAlignJustify
 } from "react-icons/md";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ListAlignGroup({ editor }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "list-align-group", children: [
-    /* @__PURE__ */ jsx6(
-      ToolbarButton_default,
-      {
-        icon: MdFormatListBulleted,
-        title: "Bulleted List",
-        onClick: () => editor.chain().focus().toggleBulletList().run(),
-        disabled: !editor.can().toggleBulletList()
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      ToolbarButton_default,
-      {
-        icon: MdFormatListNumbered,
-        title: "Numbered List",
-        onClick: () => editor.chain().focus().toggleOrderedList().run(),
-        disabled: !editor.can().toggleOrderedList()
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      ToolbarButton_default,
-      {
-        icon: MdFormatIndentIncrease,
-        title: "Increase Indent",
-        onClick: () => editor.chain().focus().sinkListItem("listItem").run(),
-        disabled: !editor.can().sinkListItem("listItem")
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      ToolbarButton_default,
-      {
-        icon: MdFormatIndentDecrease,
-        title: "Decrease Indent",
-        onClick: () => editor.chain().focus().liftListItem("listItem").run(),
-        disabled: !editor.can().liftListItem("listItem")
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      ToolbarButton_default,
-      {
-        icon: MdFormatAlignLeft,
-        title: "Align Left",
-        onClick: () => editor.chain().focus().setTextAlign("left").run(),
-        disabled: !editor.can().setTextAlign("left")
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      ToolbarButton_default,
-      {
-        icon: MdFormatAlignCenter,
-        title: "Align Center",
-        onClick: () => editor.chain().focus().setTextAlign("center").run(),
-        disabled: !editor.can().setTextAlign("center")
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      ToolbarButton_default,
-      {
-        icon: MdFormatAlignRight,
-        title: "Align Right",
-        onClick: () => editor.chain().focus().setTextAlign("right").run(),
-        disabled: !editor.can().setTextAlign("right")
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      ToolbarButton_default,
-      {
-        icon: MdFormatAlignJustify,
-        title: "Justify",
-        onClick: () => editor.chain().focus().setTextAlign("justify").run(),
-        disabled: !editor.can().setTextAlign("justify")
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React6.createElement("div", { className: "list-align-group" }, /* @__PURE__ */ React6.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatListBulleted,
+      title: "Bulleted List",
+      onClick: () => editor.chain().focus().toggleBulletList().run(),
+      disabled: !editor.can().toggleBulletList()
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatListNumbered,
+      title: "Numbered List",
+      onClick: () => editor.chain().focus().toggleOrderedList().run(),
+      disabled: !editor.can().toggleOrderedList()
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatIndentIncrease,
+      title: "Increase Indent",
+      onClick: () => editor.chain().focus().sinkListItem("listItem").run(),
+      disabled: !editor.can().sinkListItem("listItem")
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatIndentDecrease,
+      title: "Decrease Indent",
+      onClick: () => editor.chain().focus().liftListItem("listItem").run(),
+      disabled: !editor.can().liftListItem("listItem")
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatAlignLeft,
+      title: "Align Left",
+      onClick: () => editor.chain().focus().setTextAlign("left").run(),
+      disabled: !editor.can().setTextAlign("left")
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatAlignCenter,
+      title: "Align Center",
+      onClick: () => editor.chain().focus().setTextAlign("center").run(),
+      disabled: !editor.can().setTextAlign("center")
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatAlignRight,
+      title: "Align Right",
+      onClick: () => editor.chain().focus().setTextAlign("right").run(),
+      disabled: !editor.can().setTextAlign("right")
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdFormatAlignJustify,
+      title: "Justify",
+      onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+      disabled: !editor.can().setTextAlign("justify")
+    }
+  ));
 }
 
 // src/components/tetrons/toolbar/MiscGroup.tsx
+import React7 from "react";
 import {
   MdUndo,
   MdRedo,
@@ -15193,7 +15119,6 @@ import {
   MdVisibility,
   MdCode
 } from "react-icons/md";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function MiscGroup({ editor }) {
   const handlePreview = () => {
     const html = editor.getHTML();
@@ -15214,58 +15139,51 @@ function MiscGroup({ editor }) {
       previewWindow.document.close();
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "misc-group", children: [
-    /* @__PURE__ */ jsx7(
-      ToolbarButton_default,
-      {
-        icon: MdUndo,
-        label: "Undo",
-        onClick: () => editor.chain().focus().undo().run(),
-        disabled: !editor.can().undo()
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      ToolbarButton_default,
-      {
-        icon: MdRedo,
-        label: "Redo",
-        onClick: () => editor.chain().focus().redo().run(),
-        disabled: !editor.can().redo()
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      ToolbarButton_default,
-      {
-        icon: MdRefresh,
-        label: "Reset Formatting",
-        onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run()
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      ToolbarButton_default,
-      {
-        icon: MdCode,
-        label: "Toggle Code Block",
-        onClick: () => editor.chain().focus().toggleCodeBlock().run(),
-        isActive: editor.isActive("codeBlock")
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      ToolbarButton_default,
-      {
-        icon: MdVisibility,
-        label: "Preview",
-        onClick: handlePreview
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React7.createElement("div", { className: "misc-group" }, /* @__PURE__ */ React7.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdUndo,
+      label: "Undo",
+      onClick: () => editor.chain().focus().undo().run(),
+      disabled: !editor.can().undo()
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdRedo,
+      label: "Redo",
+      onClick: () => editor.chain().focus().redo().run(),
+      disabled: !editor.can().redo()
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdRefresh,
+      label: "Reset Formatting",
+      onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run()
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdCode,
+      label: "Toggle Code Block",
+      onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+      isActive: editor.isActive("codeBlock")
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    ToolbarButton_default,
+    {
+      icon: MdVisibility,
+      label: "Preview",
+      onClick: handlePreview
+    }
+  ));
 }
 
 // src/components/tetrons/toolbar/FileGroup.tsx
 import { FaRegFolderOpen } from "react-icons/fa";
 import { VscNewFile } from "react-icons/vsc";
-import { useRef as useRef3 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import React8, { useRef as useRef3 } from "react";
 function FileGroup({ editor }) {
   const fileInputRef = useRef3(null);
   const handleNew = () => {
@@ -15294,34 +15212,29 @@ function FileGroup({ editor }) {
       e.target.value = "";
     }
   };
-  return /* @__PURE__ */ jsxs7("div", { className: "file-group", role: "group", "aria-label": "File actions", children: [
-    /* @__PURE__ */ jsx8(
-      "input",
-      {
-        type: "file",
-        accept: ".json",
-        ref: fileInputRef,
-        onChange: handleFileChange,
-        className: "hidden",
-        "aria-label": "Open JSON file"
-      }
-    ),
-    /* @__PURE__ */ jsx8(ToolbarButton_default, { icon: VscNewFile, onClick: handleNew, title: "New" }),
-    /* @__PURE__ */ jsx8(
-      ToolbarButton_default,
-      {
-        icon: FaRegFolderOpen,
-        onClick: handleOpen,
-        title: "Open File"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React8.createElement("div", { className: "file-group", role: "group", "aria-label": "File actions" }, /* @__PURE__ */ React8.createElement(
+    "input",
+    {
+      type: "file",
+      accept: ".json",
+      ref: fileInputRef,
+      onChange: handleFileChange,
+      className: "hidden",
+      "aria-label": "Open JSON file"
+    }
+  ), /* @__PURE__ */ React8.createElement(ToolbarButton_default, { icon: VscNewFile, onClick: handleNew, title: "New" }), /* @__PURE__ */ React8.createElement(
+    ToolbarButton_default,
+    {
+      icon: FaRegFolderOpen,
+      onClick: handleOpen,
+      title: "Open File"
+    }
+  ));
 }
 
 // src/components/tetrons/toolbar/TetronsToolbar.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function TetronsToolbar({ editor }) {
-  const [autoSave, setAutoSave] = React6.useState(false);
+  const [autoSave, setAutoSave] = React9.useState(false);
   useEffect3(() => {
     if (!editor) return;
     const handleUpdate = () => {
@@ -15338,27 +15251,15 @@ function TetronsToolbar({ editor }) {
       editor.off("update", handleUpdate);
     };
   }, [autoSave, editor]);
-  return /* @__PURE__ */ jsxs8("div", { className: "tetrons-toolbar", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "group", children: [
-      /* @__PURE__ */ jsx9(
-        "input",
-        {
-          type: "checkbox",
-          id: "autoSave",
-          checked: autoSave,
-          onChange: (e) => setAutoSave(e.target.checked)
-        }
-      ),
-      /* @__PURE__ */ jsx9("label", { htmlFor: "autoSave", children: "Auto Save" })
-    ] }),
-    /* @__PURE__ */ jsx9(FileGroup, { editor }),
-    /* @__PURE__ */ jsx9(ClipboardGroup, { editor }),
-    /* @__PURE__ */ jsx9(FontStyleGroup, { editor }),
-    /* @__PURE__ */ jsx9(ListAlignGroup, { editor }),
-    /* @__PURE__ */ jsx9(InsertGroup, { editor }),
-    /* @__PURE__ */ jsx9(MiscGroup, { editor }),
-    /* @__PURE__ */ jsx9(ActionGroup, { editor })
-  ] });
+  return /* @__PURE__ */ React9.createElement("div", { className: "tetrons-toolbar" }, /* @__PURE__ */ React9.createElement("div", { className: "group" }, /* @__PURE__ */ React9.createElement(
+    "input",
+    {
+      type: "checkbox",
+      id: "autoSave",
+      checked: autoSave,
+      onChange: (e) => setAutoSave(e.target.checked)
+    }
+  ), /* @__PURE__ */ React9.createElement("label", { htmlFor: "autoSave" }, "Auto Save")), /* @__PURE__ */ React9.createElement(FileGroup, { editor }), /* @__PURE__ */ React9.createElement(ClipboardGroup, { editor }), /* @__PURE__ */ React9.createElement(FontStyleGroup, { editor }), /* @__PURE__ */ React9.createElement(ListAlignGroup, { editor }), /* @__PURE__ */ React9.createElement(InsertGroup, { editor }), /* @__PURE__ */ React9.createElement(MiscGroup, { editor }), /* @__PURE__ */ React9.createElement(ActionGroup, { editor }));
 }
 
 // src/components/tetrons/ResizableImage.ts
@@ -15366,9 +15267,8 @@ import Image from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 
 // src/components/tetrons/ResizableImageComponent.tsx
-import { useRef as useRef4, useEffect as useEffect4 } from "react";
+import React10, { useRef as useRef4, useEffect as useEffect4 } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
-import { jsx as jsx10 } from "react/jsx-runtime";
 var ResizableImageComponent = ({
   node,
   updateAttributes: updateAttributes2,
@@ -15388,7 +15288,7 @@ var ResizableImageComponent = ({
     observer.observe(img);
     return () => observer.disconnect();
   }, [updateAttributes2]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ React10.createElement(
     NodeViewWrapper,
     {
       ref: wrapperRef,
@@ -15401,26 +15301,26 @@ var ResizableImageComponent = ({
         padding: 2,
         display: "inline-block",
         maxWidth: "100%"
-      },
-      children: /* @__PURE__ */ jsx10(
-        "img",
-        {
-          ref: imgRef,
-          src,
-          alt: alt ?? "",
-          title: title ?? "",
-          loading: "lazy",
-          style: {
-            width: width ? `${width}px` : "auto",
-            height: height ? `${height}px` : "auto",
-            display: "block",
-            userSelect: "none",
-            pointerEvents: "auto"
-          },
-          draggable: false
-        }
-      )
-    }
+      }
+    },
+    /* @__PURE__ */ React10.createElement(
+      "img",
+      {
+        ref: imgRef,
+        src,
+        alt: alt ?? "",
+        title: title ?? "",
+        loading: "lazy",
+        style: {
+          width: width ? `${width}px` : "auto",
+          height: height ? `${height}px` : "auto",
+          display: "block",
+          userSelect: "none",
+          pointerEvents: "auto"
+        },
+        draggable: false
+      }
+    )
   );
 };
 var ResizableImageComponent_default = ResizableImageComponent;
@@ -15461,9 +15361,8 @@ var ResizableImage = Image.extend({
 import { ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 
 // src/components/tetrons/ResizableVideoComponent.tsx
-import { useRef as useRef5, useEffect as useEffect5 } from "react";
+import React11, { useRef as useRef5, useEffect as useEffect5 } from "react";
 import { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
-import { jsx as jsx11 } from "react/jsx-runtime";
 var ResizableVideoComponent = ({
   node,
   updateAttributes: updateAttributes2,
@@ -15483,7 +15382,7 @@ var ResizableVideoComponent = ({
     observer.observe(video);
     return () => observer.disconnect();
   }, [updateAttributes2]);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ React11.createElement(
     NodeViewWrapper2,
     {
       ref: wrapperRef,
@@ -15495,20 +15394,20 @@ var ResizableVideoComponent = ({
         border: "1px solid #ccc",
         padding: "2px",
         display: "inline-block"
-      },
-      children: /* @__PURE__ */ jsx11(
-        "video",
-        {
-          ref: videoRef,
-          src,
-          controls,
-          style: {
-            width: width ? `${width}px` : "auto",
-            height: height ? `${height}px` : "auto"
-          }
+      }
+    },
+    /* @__PURE__ */ React11.createElement(
+      "video",
+      {
+        ref: videoRef,
+        src,
+        controls,
+        style: {
+          width: width ? `${width}px` : "auto",
+          height: height ? `${height}px` : "auto"
         }
-      )
-    }
+      }
+    )
   );
 };
 var ResizableVideoComponent_default = ResizableVideoComponent;
@@ -15561,8 +15460,7 @@ var ResizableVideo = Node2.create({
 });
 
 // src/components/tetrons/toolbar/TableContextMenu.tsx
-import { useEffect as useEffect6, useState as useState4 } from "react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import React12, { useEffect as useEffect6, useState as useState4 } from "react";
 function TableContextMenu({ editor }) {
   const [menuPosition, setMenuPosition] = useState4(null);
   useEffect6(() => {
@@ -15590,62 +15488,60 @@ function TableContextMenu({ editor }) {
   const deleteRow = () => editor.chain().focus().deleteRow().run();
   const deleteCol = () => editor.chain().focus().deleteColumn().run();
   if (!menuPosition) return null;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ React12.createElement(
     "ul",
     {
       className: "absolute bg-white shadow border rounded text-sm z-50",
-      style: { top: menuPosition.y, left: menuPosition.x },
-      children: [
-        /* @__PURE__ */ jsx12(
-          "li",
-          {
-            className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
-            onClick: insertRowAbove,
-            children: "Insert Row Above"
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "li",
-          {
-            className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
-            onClick: insertRowBelow,
-            children: "Insert Row Below"
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "li",
-          {
-            className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
-            onClick: insertColLeft,
-            children: "Insert Column Left"
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "li",
-          {
-            className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
-            onClick: insertColRight,
-            children: "Insert Column Right"
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "li",
-          {
-            className: "px-3 py-1 hover:bg-red-100 cursor-pointer",
-            onClick: deleteRow,
-            children: "Delete Row"
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "li",
-          {
-            className: "px-3 py-1 hover:bg-red-100 cursor-pointer",
-            onClick: deleteCol,
-            children: "Delete Column"
-          }
-        )
-      ]
-    }
+      style: { top: menuPosition.y, left: menuPosition.x }
+    },
+    /* @__PURE__ */ React12.createElement(
+      "li",
+      {
+        className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
+        onClick: insertRowAbove
+      },
+      "Insert Row Above"
+    ),
+    /* @__PURE__ */ React12.createElement(
+      "li",
+      {
+        className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
+        onClick: insertRowBelow
+      },
+      "Insert Row Below"
+    ),
+    /* @__PURE__ */ React12.createElement(
+      "li",
+      {
+        className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
+        onClick: insertColLeft
+      },
+      "Insert Column Left"
+    ),
+    /* @__PURE__ */ React12.createElement(
+      "li",
+      {
+        className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
+        onClick: insertColRight
+      },
+      "Insert Column Right"
+    ),
+    /* @__PURE__ */ React12.createElement(
+      "li",
+      {
+        className: "px-3 py-1 hover:bg-red-100 cursor-pointer",
+        onClick: deleteRow
+      },
+      "Delete Row"
+    ),
+    /* @__PURE__ */ React12.createElement(
+      "li",
+      {
+        className: "px-3 py-1 hover:bg-red-100 cursor-pointer",
+        onClick: deleteCol
+      },
+      "Delete Column"
+    )
   );
 }
 
@@ -17169,13 +17065,38 @@ function typescript(hljs) {
 }
 
 // src/components/tetrons/EditorContent.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var lowlight = createLowlight();
 lowlight.register("js", javascript);
 lowlight.register("ts", typescript);
-function EditorContent() {
-  const [versions, setVersions] = React10.useState([]);
-  const [currentVersionIndex, setCurrentVersionIndex] = React10.useState(null);
+function EditorContent({ apiKey }) {
+  const [isValid, setIsValid] = React13.useState(null);
+  const [error, setError] = React13.useState(null);
+  const [versions, setVersions] = React13.useState([]);
+  const [currentVersionIndex, setCurrentVersionIndex] = React13.useState(null);
+  useEffect7(() => {
+    const validateKey = async () => {
+      try {
+        const res = await fetch("/api/validate", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ apiKey })
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || "Invalid API Key");
+        setIsValid(true);
+      } catch (err) {
+        if (err instanceof Error) {
+          setError(err.message || "Invalid API Key");
+        } else {
+          setError("Invalid API Key");
+        }
+        setIsValid(false);
+      }
+    };
+    validateKey();
+  }, [apiKey]);
   const editor = useEditor({
     extensions: [
       Document,
@@ -17259,47 +17180,40 @@ function EditorContent() {
       setCurrentVersionIndex(index);
     }
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "editor-container", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "editor-toolbar", children: [
-      /* @__PURE__ */ jsx13(
-        "button",
-        {
-          type: "button",
-          onClick: saveVersion,
-          disabled: !editor,
-          className: "editor-save-btn",
-          children: "Save Version"
-        }
-      ),
-      /* @__PURE__ */ jsxs10("div", { className: "editor-versions-wrapper", children: [
-        versions.length === 0 && /* @__PURE__ */ jsx13("span", { className: "editor-no-versions", children: "No saved versions" }),
-        versions.map((_, idx) => /* @__PURE__ */ jsx13(
-          "button",
-          {
-            type: "button",
-            onClick: () => restoreVersion(idx),
-            className: `editor-version-btn ${idx === currentVersionIndex ? "active" : ""}`,
-            title: `Restore Version ${idx + 1}`,
-            children: `V${idx + 1}`
-          },
-          idx
-        ))
-      ] })
-    ] }),
-    editor && /* @__PURE__ */ jsx13(TetronsToolbar, { editor }),
-    /* @__PURE__ */ jsx13(
-      "div",
-      {
-        ref: wrapperRef,
-        className: "editor-content-wrapper",
-        onClick: handleEditorClick,
-        children: editor ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
-          /* @__PURE__ */ jsx13(TiptapEditorContent, { editor }),
-          editor && /* @__PURE__ */ jsx13(TableContextMenu, { editor })
-        ] }) : /* @__PURE__ */ jsx13("div", { className: "editor-loading", children: "Loading editor..." })
-      }
-    )
-  ] });
+  if (isValid === false) {
+    return /* @__PURE__ */ React13.createElement("div", { className: "editor-error" }, "\u26A0\uFE0F ", error);
+  }
+  if (isValid === null) {
+    return /* @__PURE__ */ React13.createElement("div", { className: "editor-loading" }, "\u{1F50D} Validating license...");
+  }
+  return /* @__PURE__ */ React13.createElement("div", { className: "editor-container" }, /* @__PURE__ */ React13.createElement("div", { className: "editor-toolbar" }, /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: saveVersion,
+      disabled: !editor,
+      className: "editor-save-btn"
+    },
+    "Save Version"
+  ), /* @__PURE__ */ React13.createElement("div", { className: "editor-versions-wrapper" }, versions.length === 0 && /* @__PURE__ */ React13.createElement("span", { className: "editor-no-versions" }, "No saved versions"), versions.map((_, idx) => /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      type: "button",
+      key: idx,
+      onClick: () => restoreVersion(idx),
+      className: `editor-version-btn ${idx === currentVersionIndex ? "active" : ""}`,
+      title: `Restore Version ${idx + 1}`
+    },
+    `V${idx + 1}`
+  )))), editor && /* @__PURE__ */ React13.createElement(TetronsToolbar, { editor }), /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      ref: wrapperRef,
+      className: "editor-content-wrapper",
+      onClick: handleEditorClick
+    },
+    editor ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(TiptapEditorContent, { editor }), editor && /* @__PURE__ */ React13.createElement(TableContextMenu, { editor })) : /* @__PURE__ */ React13.createElement("div", { className: "editor-loading" }, "Loading editor...")
+  ));
 }
 
 // src/index.ts