tetrons 2.2.1 → 2.2.3

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/tetrons/EditorContent.tsx
-import React13 from "react";
+import React10 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 React9, { useEffect as useEffect3 } from "react";
+import React6, { useEffect as useEffect3 } from "react";
 
 // src/components/tetrons/toolbar/ActionGroup.tsx
-import React2, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   MdZoomIn,
   MdZoomOut,
@@ -14359,9 +14359,10 @@ 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__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -14370,9 +14371,9 @@ var ToolbarButton = React.forwardRef(
         disabled,
         title: title ?? label,
         "aria-label": title ?? label,
-        className: `p-2 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed ${isActive ? "bg-gray-300" : ""}`
-      },
-      /* @__PURE__ */ React.createElement(Icon, { size: 20 })
+        className: `toolbar-button ${isActive ? "active" : ""}`,
+        children: /* @__PURE__ */ jsx(Icon, { size: 20 })
+      }
     );
   }
 );
@@ -14380,6 +14381,7 @@ 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);
@@ -14403,9 +14405,10 @@ function ActionGroup({ editor }) {
       ".ProseMirror"
     );
     if (element) {
-      const currentZoom = parseFloat(element.style.zoom || "1");
+      const style = element.style;
+      const currentZoom = parseFloat(style.zoom || "1");
       const next = Math.min(currentZoom + 0.1, 2);
-      element.style.zoom = next.toString();
+      style.zoom = next.toString();
     }
   };
   const zoomOut = () => {
@@ -14413,9 +14416,10 @@ function ActionGroup({ editor }) {
       ".ProseMirror"
     );
     if (element) {
-      const currentZoom = parseFloat(element.style.zoom || "1");
+      const style = element.style;
+      const currentZoom = parseFloat(style.zoom || "1");
       const next = Math.max(currentZoom - 0.1, 0.5);
-      element.style.zoom = next.toString();
+      style.zoom = next.toString();
     }
   };
   const handlePrint = () => {
@@ -14504,64 +14508,64 @@ function ActionGroup({ editor }) {
     link.click();
     document.body.removeChild(link);
   };
-  return /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      className: "relative flex items-center gap-1",
-      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: "flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 focus:outline-none",
-        title: "Export"
-      },
-      /* @__PURE__ */ React2.createElement(MdDownload, null),
-      /* @__PURE__ */ React2.createElement("span", { className: "text-sm" })
-    ), dropdownOpen && /* @__PURE__ */ React2.createElement("div", { className: "absolute z-10 mt-2 w-40 bg-white border rounded shadow-md" }, /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setDropdownOpen(false);
-          handleDownloadPDF();
-        },
-        className: "w-full text-left px-4 py-2 hover:bg-gray-100"
-      },
-      "Export as PDF"
-    ), /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setDropdownOpen(false);
-          handleDownloadHTML();
-        },
-        className: "w-full text-left px-4 py-2 hover:bg-gray-100"
-      },
-      "Export as HTML"
-    ), /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setDropdownOpen(false);
-          handleDownloadDOCX();
-        },
-        className: "w-full text-left px-4 py-2 hover:bg-gray-100"
-      },
-      "Export as DOCX"
-    )))
-  );
+  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"
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
 
 // src/components/tetrons/toolbar/ClipboardGroup.tsx
@@ -14571,59 +14575,64 @@ import {
   MdContentCopy,
   MdFormatPaint
 } from "react-icons/md";
-import React3 from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ClipboardGroup({ editor }) {
-  return /* @__PURE__ */ React3.createElement("div", { className: "flex gap-1 border-r pr-3" }, /* @__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);
+  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);
+          }
         }
       }
-    }
-  ), /* @__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: 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: 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: 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: MdFormatPaint,
-      title: "Format Painter",
-      onClick: () => {
-        const currentMarks = editor.getAttributes("textStyle");
-        localStorage.setItem("formatPainter", JSON.stringify(currentMarks));
+    ),
+    /* @__PURE__ */ jsx3(
+      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
@@ -14639,7 +14648,8 @@ import {
 } from "react-icons/md";
 import { ImTextColor } from "react-icons/im";
 import { BiSolidColorFill } from "react-icons/bi";
-import React4, { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function FontStyleGroup({ editor }) {
   const [textColor, setTextColor] = useState2("#000000");
   const [highlightColor, setHighlightColor] = useState2("#ffff00");
@@ -14665,165 +14675,182 @@ function FontStyleGroup({ editor }) {
       editor.off("transaction", updateStates);
     };
   }, [editor]);
-  return /* @__PURE__ */ React4.createElement("div", { className: "flex gap-1 border-r pr-3 items-center" }, /* @__PURE__ */ React4.createElement(
-    "select",
-    {
-      title: "Font Family",
-      className: "text-sm border rounded px-1 py-0.5 mr-2",
-      value: fontFamily,
-      onChange: (e) => {
-        const value = e.target.value;
-        setFontFamily(value);
-        editor.chain().focus().setFontFamily(value).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",
-      className: "text-sm border rounded px-1 py-0.5 mr-2",
-      value: fontSize,
-      onChange: (e) => {
-        const value = e.target.value;
-        setFontSize(value);
-        editor.chain().focus().setFontSize(value).run();
-      }
-    },
-    /* @__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: "relative w-8 h-8 flex items-center justify-center cursor-pointer color-label",
-      style: { "--indicator-color": textColor }
-    },
-    /* @__PURE__ */ React4.createElement(ImTextColor, { size: 20, className: "text-gray-700" }),
-    /* @__PURE__ */ React4.createElement("div", { className: "color-indicator" }),
-    /* @__PURE__ */ React4.createElement(
-      "input",
+  return /* @__PURE__ */ jsxs3("div", { className: "font-style-group", children: [
+    /* @__PURE__ */ jsxs3(
+      "select",
       {
-        type: "color",
-        value: textColor,
+        title: "Font Family",
+        value: fontFamily,
         onChange: (e) => {
-          const color = e.target.value;
-          setTextColor(color);
-          editor.chain().focus().setColor(color).run();
+          const value = e.target.value;
+          setFontFamily(value);
+          editor.chain().focus().setFontFamily(value).run();
         },
-        className: "absolute inset-0 opacity-0 cursor-pointer"
+        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__ */ React4.createElement(
-    "label",
-    {
-      title: "Highlight Color",
-      "aria-label": "Highlight Color",
-      className: "relative w-8 h-8 flex items-center justify-center cursor-pointer color-label",
-      style: { "--indicator-color": highlightColor }
-    },
-    /* @__PURE__ */ React4.createElement(BiSolidColorFill, { size: 20, className: "text-gray-700" }),
-    /* @__PURE__ */ React4.createElement("div", { className: "color-indicator" }),
-    /* @__PURE__ */ React4.createElement(
-      "input",
+    ),
+    /* @__PURE__ */ jsxs3(
+      "select",
       {
-        type: "color",
-        value: highlightColor,
+        title: "Font Size",
+        value: fontSize,
         onChange: (e) => {
-          const color = e.target.value;
-          setHighlightColor(color);
-          editor.chain().focus().setHighlight({ color }).run();
+          const value = e.target.value;
+          setFontSize(value);
+          editor.chain().focus().setFontSize(value).run();
         },
-        className: "absolute inset-0 opacity-0 cursor-pointer"
+        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__ */ 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();
+    ),
+    /* @__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();
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__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__ */ jsx4(
+      ToolbarButton_default,
+      {
+        icon: MdFormatClear,
+        label: "Clear Formatting",
+        onClick: () => editor.chain().focus().unsetAllMarks().run()
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      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 React5, { useRef as useRef2, useState as useState3 } from "react";
+import { useRef as useRef2, useState as useState3 } from "react";
 import {
   MdTableChart,
   MdInsertPhoto,
@@ -14835,6 +14862,7 @@ 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);
@@ -14910,144 +14938,165 @@ function InsertGroup({ editor }) {
       return url;
     }
   }
-  return /* @__PURE__ */ React5.createElement("div", { className: "flex gap-1 border-r pr-3 relative" }, /* @__PURE__ */ React5.createElement(
-    "input",
-    {
-      type: "file",
-      accept: "image/*",
-      ref: imageInputRef,
-      className: "hidden",
-      onChange: handleImageUpload,
-      "aria-label": "Upload Image",
-      title: "Upload Image"
-    }
-  ), /* @__PURE__ */ React5.createElement(
-    "input",
-    {
-      type: "file",
-      accept: "video/*",
-      ref: videoInputRef,
-      className: "hidden",
-      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: "absolute top-10 left-0 bg-white border rounded shadow p-2 z-20",
-      onMouseLeave: () => setShowTableGrid(false)
-    },
-    /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-10 gap-[1px]" }, [...Array(10)].map(
-      (_, row) => [...Array(10)].map((_2, col) => {
-        const isSelected = row < selectedRows && col < selectedCols;
-        return /* @__PURE__ */ React5.createElement(
-          "div",
-          {
-            key: `${row}-${col}`,
-            className: `w-5 h-5 border cursor-pointer ${isSelected ? "bg-blue-500" : "bg-gray-100"}`,
-            onMouseEnter: () => handleTableCellHover(row + 1, col + 1),
-            onClick: () => handleTableInsert(row + 1, col + 1)
+  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__ */ React5.createElement("div", { className: "text-sm mt-2 text-center text-gray-600" }, 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__ */ 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: 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__ */ React5.createElement("div", { className: "relative" }, /* @__PURE__ */ React5.createElement(
-    ToolbarButton_default,
-    {
-      icon: MdInsertEmoticon,
-      label: "Emoji",
-      onClick: () => setShowPicker(!showPicker)
-    }
-  ), showPicker && /* @__PURE__ */ React5.createElement("div", { className: "absolute z-50 top-10 left-0" }, /* @__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();
+    ),
+    /* @__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__ */ 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();
+        }
+      }
+    )
+  ] });
 }
 
 // src/components/tetrons/toolbar/ListAlignGroup.tsx
-import React6 from "react";
 import {
   MdFormatListBulleted,
   MdFormatListNumbered,
@@ -15058,76 +15107,85 @@ import {
   MdFormatAlignRight,
   MdFormatAlignJustify
 } from "react-icons/md";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ListAlignGroup({ editor }) {
-  return /* @__PURE__ */ React6.createElement("div", { className: "flex gap-1 border-r pr-3" }, /* @__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")
-    }
-  ));
+  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")
+      }
+    )
+  ] });
 }
 
 // src/components/tetrons/toolbar/MiscGroup.tsx
-import React7 from "react";
 import {
   MdUndo,
   MdRedo,
@@ -15135,6 +15193,7 @@ 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();
@@ -15155,51 +15214,58 @@ function MiscGroup({ editor }) {
       previewWindow.document.close();
     }
   };
-  return /* @__PURE__ */ React7.createElement("div", { className: "flex gap-1 items-center border-r pr-3" }, /* @__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
-    }
-  ));
+  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
+      }
+    )
+  ] });
 }
 
 // src/components/tetrons/toolbar/FileGroup.tsx
 import { FaRegFolderOpen } from "react-icons/fa";
 import { VscNewFile } from "react-icons/vsc";
-import React8, { useRef as useRef3 } from "react";
+import { useRef as useRef3 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function FileGroup({ editor }) {
   const fileInputRef = useRef3(null);
   const handleNew = () => {
@@ -15228,14 +15294,8 @@ function FileGroup({ editor }) {
       e.target.value = "";
     }
   };
-  return /* @__PURE__ */ React8.createElement(
-    "div",
-    {
-      className: "flex items-center gap-1 border-r pr-3",
-      role: "group",
-      "aria-label": "File actions"
-    },
-    /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ jsxs7("div", { className: "file-group", role: "group", "aria-label": "File actions", children: [
+    /* @__PURE__ */ jsx8(
       "input",
       {
         type: "file",
@@ -15246,8 +15306,8 @@ function FileGroup({ editor }) {
         "aria-label": "Open JSON file"
       }
     ),
-    /* @__PURE__ */ React8.createElement(ToolbarButton_default, { icon: VscNewFile, onClick: handleNew, title: "New" }),
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ jsx8(ToolbarButton_default, { icon: VscNewFile, onClick: handleNew, title: "New" }),
+    /* @__PURE__ */ jsx8(
       ToolbarButton_default,
       {
         icon: FaRegFolderOpen,
@@ -15255,12 +15315,13 @@ function FileGroup({ editor }) {
         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] = React9.useState(false);
+  const [autoSave, setAutoSave] = React6.useState(false);
   useEffect3(() => {
     if (!editor) return;
     const handleUpdate = () => {
@@ -15277,16 +15338,27 @@ function TetronsToolbar({ editor }) {
       editor.off("update", handleUpdate);
     };
   }, [autoSave, editor]);
-  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-wrap items-center gap-4 p-3 border-b bg-white shadow-sm relative z-10" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-2 border-r pr-3" }, /* @__PURE__ */ React9.createElement(
-    "input",
-    {
-      type: "checkbox",
-      id: "autoSave",
-      checked: autoSave,
-      onChange: (e) => setAutoSave(e.target.checked),
-      className: "w-4 h-4"
-    }
-  ), /* @__PURE__ */ React9.createElement("label", { htmlFor: "autoSave", className: "text-sm select-none" }, "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 }));
+  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 })
+  ] });
 }
 
 // src/components/tetrons/ResizableImage.ts
@@ -15294,8 +15366,9 @@ import Image from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 
 // src/components/tetrons/ResizableImageComponent.tsx
-import React10, { useRef as useRef4, useEffect as useEffect4 } from "react";
+import { 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,
@@ -15315,7 +15388,7 @@ var ResizableImageComponent = ({
     observer.observe(img);
     return () => observer.disconnect();
   }, [updateAttributes2]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ jsx10(
     NodeViewWrapper,
     {
       ref: wrapperRef,
@@ -15328,26 +15401,26 @@ var ResizableImageComponent = ({
         padding: 2,
         display: "inline-block",
         maxWidth: "100%"
-      }
-    },
-    /* @__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
-      }
-    )
+      },
+      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
+        }
+      )
+    }
   );
 };
 var ResizableImageComponent_default = ResizableImageComponent;
@@ -15388,8 +15461,9 @@ var ResizableImage = Image.extend({
 import { ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 
 // src/components/tetrons/ResizableVideoComponent.tsx
-import React11, { useRef as useRef5, useEffect as useEffect5 } from "react";
+import { 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,
@@ -15409,7 +15483,7 @@ var ResizableVideoComponent = ({
     observer.observe(video);
     return () => observer.disconnect();
   }, [updateAttributes2]);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ jsx11(
     NodeViewWrapper2,
     {
       ref: wrapperRef,
@@ -15421,20 +15495,20 @@ var ResizableVideoComponent = ({
         border: "1px solid #ccc",
         padding: "2px",
         display: "inline-block"
-      }
-    },
-    /* @__PURE__ */ React11.createElement(
-      "video",
-      {
-        ref: videoRef,
-        src,
-        controls,
-        style: {
-          width: width ? `${width}px` : "auto",
-          height: height ? `${height}px` : "auto"
+      },
+      children: /* @__PURE__ */ jsx11(
+        "video",
+        {
+          ref: videoRef,
+          src,
+          controls,
+          style: {
+            width: width ? `${width}px` : "auto",
+            height: height ? `${height}px` : "auto"
+          }
         }
-      }
-    )
+      )
+    }
   );
 };
 var ResizableVideoComponent_default = ResizableVideoComponent;
@@ -15487,7 +15561,8 @@ var ResizableVideo = Node2.create({
 });
 
 // src/components/tetrons/toolbar/TableContextMenu.tsx
-import React12, { useEffect as useEffect6, useState as useState4 } from "react";
+import { useEffect as useEffect6, useState as useState4 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function TableContextMenu({ editor }) {
   const [menuPosition, setMenuPosition] = useState4(null);
   useEffect6(() => {
@@ -15515,60 +15590,62 @@ function TableContextMenu({ editor }) {
   const deleteRow = () => editor.chain().focus().deleteRow().run();
   const deleteCol = () => editor.chain().focus().deleteColumn().run();
   if (!menuPosition) return null;
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ jsxs9(
     "ul",
     {
       className: "absolute bg-white shadow border rounded text-sm z-50",
-      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"
-    )
+      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"
+          }
+        )
+      ]
+    }
   );
 }
 
@@ -17092,12 +17169,13 @@ 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] = React13.useState([]);
-  const [currentVersionIndex, setCurrentVersionIndex] = React13.useState(null);
+  const [versions, setVersions] = React10.useState([]);
+  const [currentVersionIndex, setCurrentVersionIndex] = React10.useState(null);
   const editor = useEditor({
     extensions: [
       Document,
@@ -17181,32 +17259,47 @@ function EditorContent() {
       setCurrentVersionIndex(index);
     }
   };
-  return /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col h-full" }, /* @__PURE__ */ React13.createElement("div", { className: "p-2 border-b border-gray-300 bg-gray-50 flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React13.createElement(
-    "button",
-    {
-      onClick: saveVersion,
-      disabled: !editor,
-      className: "px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
-    },
-    "Save Version"
-  ), /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-2 overflow-x-auto max-w-full" }, versions.length === 0 && /* @__PURE__ */ React13.createElement("span", { className: "text-gray-500 text-sm" }, "No saved versions"), versions.map((_, idx) => /* @__PURE__ */ React13.createElement(
-    "button",
-    {
-      key: idx,
-      onClick: () => restoreVersion(idx),
-      className: `px-2 py-1 rounded border ${idx === currentVersionIndex ? "border-blue-600 font-semibold text-blue-600" : "border-gray-300 text-gray-700 hover:border-gray-600"}`,
-      title: `Restore Version ${idx + 1}`
-    },
-    `V${idx + 1}`
-  )))), editor && /* @__PURE__ */ React13.createElement(TetronsToolbar, { editor }), /* @__PURE__ */ React13.createElement(
-    "div",
-    {
-      ref: wrapperRef,
-      className: "flex-grow p-4 md:p-6 bg-white border border-gray-300 rounded shadow-sm overflow-auto min-h-0 prose relative",
-      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: "text-gray-500" }, "Loading editor...")
-  ));
+  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..." })
+      }
+    )
+  ] });
 }
 
 // src/index.ts