@trafica/editor 1.0.21 → 1.0.23

package/dist/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/editor/core/DocumentModel.ts
 function isTextNode(node) {
@@ -3321,13 +3321,15 @@ var OPTIONS = [
 function AlignmentDropdown({ engine, activeAlignment }) {
   var _a;
   const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
+  const buttonRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
+      var _a2, _b;
+      const target = e.target;
+      if (!((_a2 = popupRef.current) == null ? void 0 : _a2.contains(target)) && !((_b = buttonRef.current) == null ? void 0 : _b.contains(target))) setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -3341,22 +3343,31 @@ function AlignmentDropdown({ engine, activeAlignment }) {
     return () => document.removeEventListener("keydown", handler);
   }, [open]);
   const activeOption = (_a = OPTIONS.find((o) => o.value === activeAlignment)) != null ? _a : OPTIONS[0];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: buttonRef,
         type: "button",
         title: `Text alignment (${activeOption.label})`,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          setOpen((prev) => !prev);
+          if (open) {
+            setOpen(false);
+            return;
+          }
+          if (buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setPopupPos({ top: rect.bottom + 4, left: rect.left });
+          }
+          setOpen(true);
         },
         className: [
           "flex items-center gap-0.5 px-1.5 h-8 rounded text-sm font-medium transition-colors",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-          open ? "bg-gray-100  text-gray-900 " : "text-gray-700  hover:bg-gray-100 "
+          open ? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
         ].join(" "),
         children: [
           activeOption.icon,
@@ -3364,40 +3375,45 @@ function AlignmentDropdown({ engine, activeAlignment }) {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": "Text alignment",
-        className: "absolute top-full left-0 mt-1 z-50 bg-white  border border-gray-200  rounded-lg shadow-lg py-1 min-w-[168px]",
-        children: OPTIONS.map((option) => {
-          const isActive = activeAlignment === option.value;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": isActive,
-              title: `${option.label} (${option.shortcut})`,
-              onMouseDown: (e) => {
-                e.preventDefault();
-                setAlignment(option.value)(engine);
-                setOpen(false);
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: popupRef,
+          role: "listbox",
+          "aria-label": "Text alignment",
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, minWidth: 168 },
+          className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1",
+          children: OPTIONS.map((option) => {
+            const isActive = activeAlignment === option.value;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isActive,
+                title: `${option.label} (${option.shortcut})`,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  setAlignment(option.value)(engine);
+                  setOpen(false);
+                },
+                className: [
+                  "w-full flex items-center gap-3 px-3 py-1.5 text-sm transition-colors",
+                  isActive ? "bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                ].join(" "),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: option.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: option.label }),
+                  isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {})
+                ]
               },
-              className: [
-                "w-full flex items-center gap-3 px-3 py-1.5 text-sm transition-colors",
-                isActive ? "bg-blue-50  text-blue-700  font-medium" : "text-gray-700  hover:bg-gray-100 "
-              ].join(" "),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: option.icon }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: option.label }),
-                isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {})
-              ]
-            },
-            option.value
-          );
-        })
-      }
+              option.value
+            );
+          })
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -3442,11 +3458,15 @@ function CheckIcon() {
 var SIZES = ["8", "10", "12", "14", "16", "18", "24", "32", "48"];
 function FontSizeDropdown({ engine, activeFontSize }) {
   const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
+  const buttonRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      var _a, _b;
+      const target = e.target;
+      if (!((_a = popupRef.current) == null ? void 0 : _a.contains(target)) && !((_b = buttonRef.current) == null ? void 0 : _b.contains(target))) {
         setOpen(false);
       }
     };
@@ -3461,24 +3481,36 @@ function FontSizeDropdown({ engine, activeFontSize }) {
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [open]);
+  function openDropdown() {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setPopupPos({ top: rect.bottom + 4, left: rect.left });
+    }
+    setOpen(true);
+  }
   const activeNum = activeFontSize ? activeFontSize.replace("px", "") : null;
   const label = activeNum != null ? activeNum : "Size";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: buttonRef,
         type: "button",
         title: "Font size",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          setOpen((prev) => !prev);
+          if (open) {
+            setOpen(false);
+          } else {
+            openDropdown();
+          }
         },
         className: [
           "flex items-center gap-0.5 px-1.5 h-8 rounded text-sm font-medium transition-colors min-w-[52px]",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-          open ? "bg-gray-100  text-gray-900 " : "text-gray-700  hover:bg-gray-100 "
+          open ? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
         ].join(" "),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: label }),
@@ -3486,61 +3518,66 @@ function FontSizeDropdown({ engine, activeFontSize }) {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": "Font size",
-        className: "absolute top-full left-0 mt-1 z-50 bg-white  border border-gray-200  rounded-lg shadow-lg py-1 min-w-[88px] max-h-64 overflow-y-auto",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": activeFontSize === null,
-              onMouseDown: (e) => {
-                e.preventDefault();
-                setFontSize(null)(engine);
-                setOpen(false);
-              },
-              className: [
-                "w-full flex items-center justify-between px-3 py-1.5 text-sm transition-colors",
-                activeFontSize === null ? "bg-blue-50  text-blue-700  font-medium" : "text-gray-700  hover:bg-gray-100 "
-              ].join(" "),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Default" }),
-                activeFontSize === null && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, {})
-              ]
-            }
-          ),
-          SIZES.map((size) => {
-            const isActive = activeNum === size;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: popupRef,
+          role: "listbox",
+          "aria-label": "Font size",
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, minWidth: 88, maxHeight: 256, overflowY: "auto" },
+          className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
                 role: "option",
-                "aria-selected": isActive,
+                "aria-selected": activeFontSize === null,
                 onMouseDown: (e) => {
                   e.preventDefault();
-                  setFontSize(`${size}px`)(engine);
+                  setFontSize(null)(engine);
                   setOpen(false);
                 },
                 className: [
-                  "w-full flex items-center justify-between px-3 py-1.5 transition-colors",
-                  isActive ? "bg-blue-50  text-blue-700  font-medium" : "text-gray-700  hover:bg-gray-100 "
+                  "w-full flex items-center justify-between px-3 py-1.5 text-sm transition-colors",
+                  activeFontSize === null ? "bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                 ].join(" "),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: `${size}px`, lineHeight: 1.3 }, children: size }),
-                  isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, {})
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Default" }),
+                  activeFontSize === null && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, {})
                 ]
-              },
-              size
-            );
-          })
-        ]
-      }
+              }
+            ),
+            SIZES.map((size) => {
+              const isActive = activeNum === size;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isActive,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    setFontSize(`${size}px`)(engine);
+                    setOpen(false);
+                  },
+                  className: [
+                    "w-full flex items-center justify-between px-3 py-1.5 transition-colors",
+                    isActive ? "bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: `${size}px`, lineHeight: 1.3 }, children: size }),
+                    isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, {})
+                  ]
+                },
+                size
+              );
+            })
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -3566,12 +3603,16 @@ function FontFamilyDropdown({ engine, activeFontFamily }) {
   const [open, setOpen] = react.useState(false);
   const [showCustomInput, setShowCustomInput] = react.useState(false);
   const [customValue, setCustomValue] = react.useState("");
-  const containerRef = react.useRef(null);
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
+  const buttonRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   const customInputRef = react.useRef(null);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      var _a2, _b;
+      const target = e.target;
+      if (!((_a2 = popupRef.current) == null ? void 0 : _a2.contains(target)) && !((_b = buttonRef.current) == null ? void 0 : _b.contains(target))) {
         closeDropdown();
       }
     };
@@ -3590,6 +3631,17 @@ function FontFamilyDropdown({ engine, activeFontFamily }) {
     var _a2;
     if (showCustomInput) (_a2 = customInputRef.current) == null ? void 0 : _a2.focus();
   }, [showCustomInput]);
+  function openDropdown() {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const popupWidth = 200;
+      const left = Math.min(rect.left, window.innerWidth - popupWidth - 8);
+      setPopupPos({ top: rect.bottom + 4, left: Math.max(8, left) });
+    }
+    setShowCustomInput(false);
+    setCustomValue("");
+    setOpen(true);
+  }
   function closeDropdown() {
     setOpen(false);
     setShowCustomInput(false);
@@ -3601,10 +3653,11 @@ function FontFamilyDropdown({ engine, activeFontFamily }) {
   }
   const activeOption = activeFontFamily ? (_a = FONTS.find((f) => f.value === activeFontFamily)) != null ? _a : null : null;
   const triggerLabel = activeOption ? activeOption.label : activeFontFamily ? activeFontFamily.split(",")[0].replace(/['"]/g, "").trim().slice(0, 10) : "Font";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: buttonRef,
         type: "button",
         title: "Font family",
         "aria-haspopup": "listbox",
@@ -3613,16 +3666,14 @@ function FontFamilyDropdown({ engine, activeFontFamily }) {
           e.preventDefault();
           if (open) {
             closeDropdown();
-            return;
+          } else {
+            openDropdown();
           }
-          setShowCustomInput(false);
-          setCustomValue("");
-          setOpen(true);
         },
         className: [
           "flex items-center gap-0.5 px-1.5 h-8 rounded text-sm font-medium transition-colors min-w-[60px] max-w-[120px]",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-          open ? "bg-gray-100  text-gray-900 " : "text-gray-700  hover:bg-gray-100 "
+          open ? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
         ].join(" "),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(FontIcon, {}),
@@ -3631,60 +3682,65 @@ function FontFamilyDropdown({ engine, activeFontFamily }) {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": "Font family",
-        className: "absolute top-full left-0 mt-1 z-50 bg-white  border border-gray-200  rounded-lg shadow-lg py-1 min-w-[200px]",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": activeFontFamily === null,
-              onMouseDown: (e) => {
-                e.preventDefault();
-                applyFont(null);
-              },
-              className: [
-                "w-full flex items-center justify-between px-3 py-1.5 text-sm transition-colors",
-                activeFontFamily === null ? "bg-blue-50  text-blue-700  font-medium" : "text-gray-700  hover:bg-gray-100 "
-              ].join(" "),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Default" }),
-                activeFontFamily === null && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon3, {})
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-gray-100 " }),
-          FONTS.map((font) => {
-            const isActive = activeFontFamily === font.value;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: popupRef,
+          role: "listbox",
+          "aria-label": "Font family",
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, minWidth: 200 },
+          className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
                 role: "option",
-                "aria-selected": isActive,
+                "aria-selected": activeFontFamily === null,
                 onMouseDown: (e) => {
                   e.preventDefault();
-                  applyFont(font.value);
+                  applyFont(null);
                 },
                 className: [
                   "w-full flex items-center justify-between px-3 py-1.5 text-sm transition-colors",
-                  isActive ? "bg-blue-50  text-blue-700  font-medium" : "text-gray-700  hover:bg-gray-100 "
+                  activeFontFamily === null ? "bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                 ].join(" "),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: font.value }, children: font.label }),
-                  isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon3, {})
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Default" }),
+                  activeFontFamily === null && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon3, {})
                 ]
-              },
-              font.value
-            );
-          })
-        ]
-      }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-gray-100 dark:border-gray-700" }),
+            FONTS.map((font) => {
+              const isActive = activeFontFamily === font.value;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isActive,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    applyFont(font.value);
+                  },
+                  className: [
+                    "w-full flex items-center justify-between px-3 py-1.5 text-sm transition-colors",
+                    isActive ? "bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: font.value }, children: font.label }),
+                    isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon3, {})
+                  ]
+                },
+                font.value
+              );
+            })
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -3730,11 +3786,15 @@ function BackgroundColorDropdown({
   const [lastColor, setLastColor] = react.useState(PRESET_COLORS[6].value);
   const [hexInput, setHexInput] = react.useState("");
   const [hexError, setHexError] = react.useState(false);
-  const containerRef = react.useRef(null);
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
+  const chevronRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target))
+      var _a, _b;
+      const target = e.target;
+      if (!((_a = popupRef.current) == null ? void 0 : _a.contains(target)) && !((_b = chevronRef.current) == null ? void 0 : _b.contains(target)))
         setOpen(false);
     };
     document.addEventListener("mousedown", handler);
@@ -3777,7 +3837,7 @@ function BackgroundColorDropdown({
     (c) => !PRESET_COLORS.some((p) => normalizeHex(p.value) === normalizeHex(c))
   );
   const normActive = activeColor ? normalizeHex(activeColor) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative flex items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -3787,7 +3847,7 @@ function BackgroundColorDropdown({
           e.preventDefault();
           handleQuickApply();
         },
-        className: "flex flex-col items-center justify-center gap-0.5 w-8 h-8 rounded-l\n                   text-gray-700 \n                   hover:bg-gray-100 \n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500\n                   transition-colors",
+        className: "flex flex-col items-center justify-center gap-0.5 w-8 h-8 rounded-l\n                   text-gray-700 dark:text-gray-300\n                   hover:bg-gray-100 dark:hover:bg-gray-700\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500\n                   transition-colors",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(BgColorIcon, {}),
           /* @__PURE__ */ jsxRuntime.jsx(ColorBar, { color: normActive != null ? normActive : lastColor })
@@ -3797,140 +3857,150 @@ function BackgroundColorDropdown({
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        ref: chevronRef,
         type: "button",
         title: "More background colors",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          setOpen((p) => {
-            if (!p) {
-              setHexInput("");
-              setHexError(false);
-            }
-            return !p;
-          });
+          if (open) {
+            setOpen(false);
+            return;
+          }
+          if (chevronRef.current) {
+            const rect = chevronRef.current.getBoundingClientRect();
+            setPopupPos({ top: rect.bottom + 4, left: rect.left - 190 });
+          }
+          setHexInput("");
+          setHexError(false);
+          setOpen(true);
         },
         className: [
-          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 ",
+          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 dark:border-gray-600",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500",
           "transition-colors",
-          open ? "bg-gray-100  text-gray-700 " : "text-gray-400 hover:bg-gray-100 "
+          open ? "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200" : "text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
         ].join(" "),
         children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon4, {})
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "dialog",
-        "aria-label": "Background color",
-        className: "absolute top-full left-0 mt-1 z-50\n                     bg-white \n                     border border-gray-200 \n                     rounded-lg shadow-xl\n                     p-3 w-[208px]",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onMouseDown: (e) => {
-                e.preventDefault();
-                applyColor(null);
-              },
-              className: "flex items-center gap-2 w-full px-2 py-1.5 mb-2.5 text-xs font-medium\n                       text-gray-600 \n                       rounded hover:bg-gray-100 \n                       transition-colors",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(RemoveColorIcon, {}),
-                "Remove background"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100  mb-2.5" }),
-          extraDocColors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400  mb-1.5 px-0.5", children: "Document colors" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1 mb-2.5", children: extraDocColors.slice(0, 10).map((c) => /* @__PURE__ */ jsxRuntime.jsx(
-              Swatch,
-              {
-                color: { label: c, value: c },
-                isActive: normActive === normalizeHex(c),
-                onSelect: applyColor
-              },
-              c
-            )) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100  mb-2.5" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1 mb-3", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
-            Swatch,
-            {
-              color: c,
-              isActive: normActive === normalizeHex(c.value),
-              onSelect: applyColor
-            },
-            c.value
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100  mb-2.5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400  mb-1.5 px-0.5", children: "Custom color" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "shrink-0 w-7 h-7 rounded border border-gray-300 ",
-                style: { backgroundColor: hexInputToPreview(hexInput) }
-              }
-            ),
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: popupRef,
+          role: "dialog",
+          "aria-label": "Background color",
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, width: 208 },
+          className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-xl p-3",
+          children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex flex-1 items-center border rounded overflow-hidden\n                            border-gray-300 \n                            focus-within:ring-2 focus-within:ring-blue-500",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-xs text-gray-400 select-none", children: "#" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
-                    {
-                      type: "text",
-                      maxLength: 6,
-                      value: hexInput,
-                      onChange: (e) => {
-                        setHexInput(e.target.value.replace(/[^0-9a-fA-F]/g, ""));
-                        setHexError(false);
-                      },
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter") {
-                          e.preventDefault();
-                          commitHexInput();
-                        }
-                        if (e.key === "Escape") setOpen(false);
-                      },
-                      placeholder: "e.g. ffff00",
-                      className: [
-                        "flex-1 px-1 py-1.5 text-xs bg-transparent outline-none font-mono",
-                        "text-gray-900 ",
-                        hexError ? "text-red-500" : ""
-                      ].join(" "),
-                      "aria-label": "Hex colour value"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 onMouseDown: (e) => {
                   e.preventDefault();
-                  commitHexInput();
+                  applyColor(null);
                 },
-                className: "shrink-0 px-2 py-1.5 text-xs bg-blue-600 text-white rounded\n                         hover:bg-blue-700 transition-colors",
-                children: "\u2713"
+                className: "flex items-center gap-2 w-full px-2 py-1.5 mb-2.5 text-xs font-medium\n                       text-gray-600 dark:text-gray-300\n                       rounded hover:bg-gray-100 dark:hover:bg-gray-700\n                       transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(RemoveColorIcon, {}),
+                  "Remove background"
+                ]
               }
-            )
-          ] }),
-          hexError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-red-500 mt-1 px-0.5", children: "Invalid hex colour" })
-        ]
-      }
-    )
-  ] });
-}
-function Swatch({
-  color,
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" }),
+            extraDocColors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5 px-0.5", children: "Document colors" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1 mb-2.5", children: extraDocColors.slice(0, 10).map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+                Swatch,
+                {
+                  color: { label: c, value: c },
+                  isActive: normActive === normalizeHex(c),
+                  onSelect: applyColor
+                },
+                c
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1 mb-3", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+              Swatch,
+              {
+                color: c,
+                isActive: normActive === normalizeHex(c.value),
+                onSelect: applyColor
+              },
+              c.value
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5 px-0.5", children: "Custom color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "shrink-0 w-7 h-7 rounded border border-gray-300 dark:border-gray-600",
+                  style: { backgroundColor: hexInputToPreview(hexInput) }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex flex-1 items-center border rounded overflow-hidden\n                            border-gray-300 dark:border-gray-600\n                            focus-within:ring-2 focus-within:ring-blue-500",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-xs text-gray-400 select-none", children: "#" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "text",
+                        maxLength: 6,
+                        value: hexInput,
+                        onChange: (e) => {
+                          setHexInput(e.target.value.replace(/[^0-9a-fA-F]/g, ""));
+                          setHexError(false);
+                        },
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            commitHexInput();
+                          }
+                          if (e.key === "Escape") setOpen(false);
+                        },
+                        placeholder: "e.g. ffff00",
+                        className: [
+                          "flex-1 px-1 py-1.5 text-xs bg-transparent outline-none font-mono",
+                          "text-gray-900 dark:text-gray-100",
+                          hexError ? "text-red-500" : ""
+                        ].join(" "),
+                        "aria-label": "Hex colour value"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    commitHexInput();
+                  },
+                  className: "shrink-0 px-2 py-1.5 text-xs bg-blue-600 text-white rounded\n                         hover:bg-blue-700 transition-colors",
+                  children: "\u2713"
+                }
+              )
+            ] }),
+            hexError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-red-500 mt-1 px-0.5", children: "Invalid hex colour" })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function Swatch({
+  color,
   isActive,
   onSelect
 }) {
@@ -3950,7 +4020,7 @@ function Swatch({
         "hover:scale-110 focus:outline-none",
         "focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500",
         isActive ? "ring-2 ring-offset-1 ring-blue-500 scale-105" : "",
-        color.hasBorder ? "border border-gray-300 " : ""
+        color.hasBorder ? "border border-gray-300 dark:border-gray-500" : ""
       ].join(" "),
       style: { backgroundColor: color.value },
       children: isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon4, { light: isLight(color.value) })
@@ -4073,11 +4143,15 @@ function TextColorDropdown({
   const [lastColor, setLastColor] = react.useState(PRESET_COLORS2[0].value);
   const [hexInput, setHexInput] = react.useState("");
   const [hexError, setHexError] = react.useState(false);
-  const containerRef = react.useRef(null);
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
+  const chevronRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target))
+      var _a, _b;
+      const target = e.target;
+      if (!((_a = popupRef.current) == null ? void 0 : _a.contains(target)) && !((_b = chevronRef.current) == null ? void 0 : _b.contains(target)))
         setOpen(false);
     };
     document.addEventListener("mousedown", handler);
@@ -4117,7 +4191,7 @@ function TextColorDropdown({
     (c) => !PRESET_COLORS2.some((p) => normalizeHex2(p.value) === normalizeHex2(c))
   );
   const normActive = activeColor ? normalizeHex2(activeColor) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative flex items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -4127,7 +4201,7 @@ function TextColorDropdown({
           e.preventDefault();
           handleQuickApply();
         },
-        className: "flex flex-col items-center justify-center gap-0.5 w-8 h-8 rounded-l\n                   text-gray-700 \n                   hover:bg-gray-100 \n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500\n                   transition-colors",
+        className: "flex flex-col items-center justify-center gap-0.5 w-8 h-8 rounded-l\n                   text-gray-700 dark:text-gray-300\n                   hover:bg-gray-100 dark:hover:bg-gray-700\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500\n                   transition-colors",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(TextColorIcon, {}),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4143,129 +4217,139 @@ function TextColorDropdown({
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        ref: chevronRef,
         type: "button",
         title: "More text colors",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          setOpen((p) => {
-            if (!p) {
-              setHexInput("");
-              setHexError(false);
-            }
-            return !p;
-          });
+          if (open) {
+            setOpen(false);
+            return;
+          }
+          if (chevronRef.current) {
+            const rect = chevronRef.current.getBoundingClientRect();
+            setPopupPos({ top: rect.bottom + 4, left: rect.left - 190 });
+          }
+          setHexInput("");
+          setHexError(false);
+          setOpen(true);
         },
         className: [
-          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 ",
+          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 dark:border-gray-600",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500",
           "transition-colors",
-          open ? "bg-gray-100  text-gray-700 " : "text-gray-400 hover:bg-gray-100 "
+          open ? "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200" : "text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
         ].join(" "),
         children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon5, {})
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "dialog",
-        "aria-label": "Text color",
-        className: "absolute top-full left-0 mt-1 z-50\n                     bg-white \n                     border border-gray-200 \n                     rounded-lg shadow-xl\n                     p-3 w-[208px]",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onMouseDown: (e) => {
-                e.preventDefault();
-                applyColor(null);
-              },
-              className: "flex items-center gap-2 w-full px-2 py-1.5 mb-2.5 text-xs font-medium\n                       text-gray-600 \n                       rounded hover:bg-gray-100 \n                       transition-colors",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(RemoveColorIcon2, {}),
-                "Remove color"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100  mb-2.5" }),
-          extraDocColors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400  mb-1.5 px-0.5", children: "Document colors" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1 mb-2.5", children: extraDocColors.slice(0, 10).map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: popupRef,
+          role: "dialog",
+          "aria-label": "Text color",
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, width: 208 },
+          className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-xl p-3",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  applyColor(null);
+                },
+                className: "flex items-center gap-2 w-full px-2 py-1.5 mb-2.5 text-xs font-medium\n                       text-gray-600 dark:text-gray-300\n                       rounded hover:bg-gray-100 dark:hover:bg-gray-700\n                       transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(RemoveColorIcon2, {}),
+                  "Remove color"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" }),
+            extraDocColors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5 px-0.5", children: "Document colors" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1 mb-2.5", children: extraDocColors.slice(0, 10).map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+                Swatch2,
+                {
+                  color: { label: c, value: c },
+                  isActive: normActive === normalizeHex2(c),
+                  onSelect: applyColor
+                },
+                c
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1 mb-3", children: PRESET_COLORS2.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
               Swatch2,
               {
-                color: { label: c, value: c },
-                isActive: normActive === normalizeHex2(c),
+                color: c,
+                isActive: normActive === normalizeHex2(c.value),
                 onSelect: applyColor
               },
-              c
+              c.value
             )) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100  mb-2.5" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1 mb-3", children: PRESET_COLORS2.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
-            Swatch2,
-            {
-              color: c,
-              isActive: normActive === normalizeHex2(c.value),
-              onSelect: applyColor
-            },
-            c.value
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100  mb-2.5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400  mb-1.5 px-0.5", children: "Custom color" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "shrink-0 w-7 h-7 rounded border border-gray-300 ",
-                style: { backgroundColor: hexInputToPreview2(hexInput) }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center border rounded overflow-hidden\n                            border-gray-300 \n                            focus-within:ring-2 focus-within:ring-blue-500", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-xs text-gray-400 select-none", children: "#" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5 px-0.5", children: "Custom color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+                "div",
                 {
-                  type: "text",
-                  maxLength: 6,
-                  value: hexInput,
-                  onChange: (e) => {
-                    setHexInput(e.target.value.replace(/[^0-9a-fA-F]/g, ""));
-                    setHexError(false);
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      commitHexInput();
-                    }
-                    if (e.key === "Escape") setOpen(false);
+                  className: "shrink-0 w-7 h-7 rounded border border-gray-300 dark:border-gray-600",
+                  style: { backgroundColor: hexInputToPreview2(hexInput) }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center border rounded overflow-hidden\n                            border-gray-300 dark:border-gray-600\n                            focus-within:ring-2 focus-within:ring-blue-500", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-xs text-gray-400 select-none", children: "#" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "text",
+                    maxLength: 6,
+                    value: hexInput,
+                    onChange: (e) => {
+                      setHexInput(e.target.value.replace(/[^0-9a-fA-F]/g, ""));
+                      setHexError(false);
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        commitHexInput();
+                      }
+                      if (e.key === "Escape") setOpen(false);
+                    },
+                    placeholder: "e.g. 000000",
+                    className: [
+                      "flex-1 px-1 py-1.5 text-xs bg-transparent outline-none font-mono",
+                      "text-gray-900 dark:text-gray-100",
+                      hexError ? "text-red-500" : ""
+                    ].join(" "),
+                    "aria-label": "Hex colour value"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    commitHexInput();
                   },
-                  placeholder: "e.g. 000000",
-                  className: [
-                    "flex-1 px-1 py-1.5 text-xs bg-transparent outline-none font-mono",
-                    "text-gray-900 ",
-                    hexError ? "text-red-500" : ""
-                  ].join(" "),
-                  "aria-label": "Hex colour value"
+                  className: "shrink-0 px-2 py-1.5 text-xs bg-blue-600 text-white rounded\n                         hover:bg-blue-700 transition-colors",
+                  children: "\u2713"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  commitHexInput();
-                },
-                className: "shrink-0 px-2 py-1.5 text-xs bg-blue-600 text-white rounded\n                         hover:bg-blue-700 transition-colors",
-                children: "\u2713"
-              }
-            )
-          ] }),
-          hexError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-red-500 mt-1 px-0.5", children: "Invalid hex colour" })
-        ]
-      }
+            hexError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-red-500 mt-1 px-0.5", children: "Invalid hex colour" })
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -4290,7 +4374,7 @@ function Swatch2({
         "hover:scale-110 focus:outline-none",
         "focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500",
         isActive ? "ring-2 ring-offset-1 ring-blue-500 scale-105" : "",
-        color.hasBorder ? "border border-gray-300 " : ""
+        color.hasBorder ? "border border-gray-300 dark:border-gray-500" : ""
       ].join(" "),
       style: { backgroundColor: color.value },
       children: isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon5, { light: isLight2(color.value) })
@@ -5822,7 +5906,9 @@ function CodeBlockButton({ engine }) {
   const activeBlock = getActiveBlockType(state.doc, state.selection);
   const isActive = activeBlock === "code_block";
   const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
+  const chevronRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   const currentLang = (() => {
     var _a2;
     if (!isActive || !state.selection) return "plaintext";
@@ -5835,9 +5921,9 @@ function CodeBlockButton({ engine }) {
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        closeDropdown();
-      }
+      var _a2, _b;
+      const target = e.target;
+      if (!((_a2 = popupRef.current) == null ? void 0 : _a2.contains(target)) && !((_b = chevronRef.current) == null ? void 0 : _b.contains(target))) closeDropdown();
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -5864,7 +5950,7 @@ function CodeBlockButton({ engine }) {
     setOpen(false);
   };
   const activeLang = LANGUAGES.find((l) => l.value === currentLang);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative flex items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -5876,7 +5962,7 @@ function CodeBlockButton({ engine }) {
         },
         className: [
           "flex items-center justify-center w-8 h-8 rounded-l text-sm transition-colors",
-          isActive ? "bg-blue-100  text-blue-700 " : "text-gray-700  hover:bg-gray-100 "
+          isActive ? "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
         ].join(" "),
         children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlockIcon, {})
       }
@@ -5884,55 +5970,69 @@ function CodeBlockButton({ engine }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        ref: chevronRef,
         type: "button",
         title: isActive ? `Language: ${(_a = activeLang == null ? void 0 : activeLang.label) != null ? _a : "Plain text"}` : "Select language",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          setOpen((p) => !p);
+          if (open) {
+            closeDropdown();
+            return;
+          }
+          if (chevronRef.current) {
+            const rect = chevronRef.current.getBoundingClientRect();
+            setPopupPos({ top: rect.bottom + 4, left: rect.left - 160 });
+          }
+          setOpen(true);
         },
         className: [
-          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200  transition-colors",
-          open ? "bg-gray-100  text-gray-700 " : "text-gray-400 hover:bg-gray-100 "
+          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 dark:border-gray-600 transition-colors",
+          open ? "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200" : "text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
         ].join(" "),
         children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {})
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": "Code block language",
-        className: "absolute top-full left-0 mt-1 z-50 bg-white  border border-gray-200  rounded-lg shadow-xl py-1 w-44 max-h-72 overflow-y-auto",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-1.5 text-[10px] font-semibold uppercase tracking-widest text-gray-400 ", children: "Language" }),
-          LANGUAGES.map((lang) => {
-            const isSelected = isActive && currentLang === lang.value;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                "aria-selected": isSelected,
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  handleSelectLanguage(lang.value);
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: popupRef,
+          role: "listbox",
+          "aria-label": "Code block language",
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, width: 176, maxHeight: 288, overflowY: "auto" },
+          className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-xl py-1",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-1.5 text-[10px] font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500", children: "Language" }),
+            LANGUAGES.map((lang) => {
+              const isSelected = isActive && currentLang === lang.value;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    handleSelectLanguage(lang.value);
+                  },
+                  className: [
+                    "w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 transition-colors",
+                    isSelected ? "bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                  ].join(" "),
+                  children: [
+                    isSelected && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 shrink-0", viewBox: "0 0 12 12", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1 6 4.5 9.5 11 2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: isSelected ? "" : "ml-5", children: lang.label })
+                  ]
                 },
-                className: [
-                  "w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 transition-colors",
-                  isSelected ? "bg-blue-50  text-blue-700  font-medium" : "text-gray-700  hover:bg-gray-100 "
-                ].join(" "),
-                children: [
-                  isSelected && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 shrink-0", viewBox: "0 0 12 12", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1 6 4.5 9.5 11 2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: isSelected ? "" : "ml-5", children: lang.label })
-                ]
-              },
-              lang.value
-            );
-          })
-        ]
-      }
+                lang.value
+              );
+            })
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -6262,12 +6362,16 @@ function HeadingDropdown({
 }) {
   var _a;
   const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
+  const buttonRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   const run = (command) => command(engine);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target))
+      var _a2, _b;
+      const target = e.target;
+      if (!((_a2 = popupRef.current) == null ? void 0 : _a2.contains(target)) && !((_b = buttonRef.current) == null ? void 0 : _b.contains(target)))
         setOpen(false);
     };
     document.addEventListener("mousedown", handler);
@@ -6285,14 +6389,23 @@ function HeadingDropdown({
     code_block: "Code"
   };
   const label = (_a = BLOCK_LABELS[activeBlock]) != null ? _a : "Paragraph";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: buttonRef,
         type: "button",
         onMouseDown: (e) => {
           e.preventDefault();
-          setOpen((v) => !v);
+          if (open) {
+            setOpen(false);
+            return;
+          }
+          if (buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setPopupPos({ top: rect.bottom + 2, left: rect.left });
+          }
+          setOpen(true);
         },
         className: "flex items-center gap-1 px-2 h-8 rounded text-sm font-medium text-gray-700  hover:bg-gray-100  cursor-pointer",
         children: [
@@ -6301,7 +6414,7 @@ function HeadingDropdown({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 mt-0.5 w-40 bg-white  border border-gray-200  rounded shadow-lg z-50", children: [
+    open && reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { ref: popupRef, style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, width: 160 }, className: "bg-white  border border-gray-200  rounded shadow-lg", children: [
       {
         label: "Paragraph",
         cmd: setParagraph,
@@ -6353,7 +6466,7 @@ function HeadingDropdown({
         children: label2
       },
       label2
-    )) })
+    )) }), document.body)
   ] });
 }
 function LinkButton({
@@ -6368,10 +6481,16 @@ function LinkButton({
   const [editMode, setEditMode] = react.useState(false);
   const [url, setUrl] = react.useState("");
   const [displayText, setDisplayText] = react.useState("");
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
   const containerRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   const urlInputRef = react.useRef(null);
   const textInputRef = react.useRef(null);
   const openPopup = () => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setPopupPos({ top: rect.bottom + 4, left: rect.left });
+    }
     if (isActive) {
       setUrl(activeHref != null ? activeHref : "");
       setDisplayText("");
@@ -6403,7 +6522,9 @@ function LinkButton({
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      var _a, _b;
+      const target = e.target;
+      if (!((_a = popupRef.current) == null ? void 0 : _a.contains(target)) && !((_b = containerRef.current) == null ? void 0 : _b.contains(target))) {
         closePopup();
       }
     };
@@ -6443,7 +6564,7 @@ function LinkButton({
     setEditMode(true);
   };
   const showTextInput = !hasTextSelected && !isActive;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
       {
@@ -6454,115 +6575,43 @@ function LinkButton({
         icon: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, {})
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        role: "dialog",
-        "aria-label": "Link editor",
-        className: "absolute top-full left-0 mt-1 z-50 bg-white  border border-gray-200  rounded-lg shadow-xl p-3 w-80",
-        children: isActive && !editMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-400  mb-2 uppercase tracking-wide", children: "Link" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                href: activeHref != null ? activeHref : "#",
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "flex-1 text-sm text-blue-600  hover:underline truncate",
-                title: activeHref != null ? activeHref : "",
-                children: activeHref
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  handleStartEdit();
-                },
-                className: "shrink-0 text-xs text-gray-500  hover:text-gray-700  px-2 py-1 rounded hover:bg-gray-100 ",
-                "aria-label": "Edit link",
-                children: "Edit"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  handleRemove();
-                },
-                className: "shrink-0 text-xs text-red-500  hover:text-red-700 px-2 py-1 rounded hover:bg-red-50 ",
-                "aria-label": "Remove link",
-                children: "Remove"
-              }
-            )
-          ] })
-        ] }) : (
-          /* ── Edit / Insert mode ── */
-          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-400  mb-3 uppercase tracking-wide", children: isActive ? "Edit link" : "Insert link" }),
-            showTextInput && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-600  mb-1", children: "Display text" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  ref: textInputRef,
-                  type: "text",
-                  value: displayText,
-                  onChange: (e) => setDisplayText(e.target.value),
-                  onKeyDown: (e) => {
-                    var _a;
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      (_a = urlInputRef.current) == null ? void 0 : _a.focus();
-                    }
-                    if (e.key === "Escape") closePopup();
-                  },
-                  placeholder: "Link text",
-                  className: "w-full border border-gray-300  rounded px-2 py-1.5 text-sm bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-600  mb-1", children: "URL" }),
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: popupRef,
+          role: "dialog",
+          "aria-label": "Link editor",
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, width: 320 },
+          className: "bg-white  border border-gray-200  rounded-lg shadow-xl p-3",
+          children: isActive && !editMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-400  mb-2 uppercase tracking-wide", children: "Link" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+                "a",
                 {
-                  ref: urlInputRef,
-                  type: "url",
-                  value: url,
-                  onChange: (e) => setUrl(e.target.value),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      handleApply();
-                    }
-                    if (e.key === "Escape") closePopup();
-                  },
-                  placeholder: "https://example.com",
-                  className: "w-full border border-gray-300  rounded px-2 py-1.5 text-sm bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  href: activeHref != null ? activeHref : "#",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "flex-1 text-sm text-blue-600  hover:underline truncate",
+                  title: activeHref != null ? activeHref : "",
+                  children: activeHref
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
                   onMouseDown: (e) => {
                     e.preventDefault();
-                    handleApply();
+                    handleStartEdit();
                   },
-                  disabled: !url.trim() || showTextInput && !displayText.trim() && !hasTextSelected && !isActive,
-                  className: "flex-1 px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed",
-                  children: isActive ? "Update" : "Insert"
+                  className: "shrink-0 text-xs text-gray-500  hover:text-gray-700  px-2 py-1 rounded hover:bg-gray-100 ",
+                  "aria-label": "Edit link",
+                  children: "Edit"
                 }
               ),
-              isActive && /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
@@ -6570,27 +6619,104 @@ function LinkButton({
                     e.preventDefault();
                     handleRemove();
                   },
-                  className: "px-3 py-1.5 text-sm text-red-600  border border-red-200  rounded hover:bg-red-50 ",
+                  className: "shrink-0 text-xs text-red-500  hover:text-red-700 px-2 py-1 rounded hover:bg-red-50 ",
+                  "aria-label": "Remove link",
                   children: "Remove"
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onMouseDown: (e) => {
-                    e.preventDefault();
-                    closePopup();
-                  },
-                  className: "px-3 py-1.5 text-sm text-gray-500  hover:text-gray-700 ",
-                  "aria-label": "Cancel",
-                  children: "\u2715"
-                }
               )
             ] })
-          ] })
-        )
-      }
+          ] }) : (
+            /* ── Edit / Insert mode ── */
+            /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-400  mb-3 uppercase tracking-wide", children: isActive ? "Edit link" : "Insert link" }),
+              showTextInput && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-600  mb-1", children: "Display text" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: textInputRef,
+                    type: "text",
+                    value: displayText,
+                    onChange: (e) => setDisplayText(e.target.value),
+                    onKeyDown: (e) => {
+                      var _a;
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        (_a = urlInputRef.current) == null ? void 0 : _a.focus();
+                      }
+                      if (e.key === "Escape") closePopup();
+                    },
+                    placeholder: "Link text",
+                    className: "w-full border border-gray-300  rounded px-2 py-1.5 text-sm bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-600  mb-1", children: "URL" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: urlInputRef,
+                    type: "url",
+                    value: url,
+                    onChange: (e) => setUrl(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        handleApply();
+                      }
+                      if (e.key === "Escape") closePopup();
+                    },
+                    placeholder: "https://example.com",
+                    className: "w-full border border-gray-300  rounded px-2 py-1.5 text-sm bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      handleApply();
+                    },
+                    disabled: !url.trim() || showTextInput && !displayText.trim() && !hasTextSelected && !isActive,
+                    className: "flex-1 px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed",
+                    children: isActive ? "Update" : "Insert"
+                  }
+                ),
+                isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      handleRemove();
+                    },
+                    className: "px-3 py-1.5 text-sm text-red-600  border border-red-200  rounded hover:bg-red-50 ",
+                    children: "Remove"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      closePopup();
+                    },
+                    className: "px-3 py-1.5 text-sm text-gray-500  hover:text-gray-700 ",
+                    "aria-label": "Cancel",
+                    children: "\u2715"
+                  }
+                )
+              ] })
+            ] })
+          )
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -8629,6 +8755,53 @@ function prettyPrintHTML(html) {
 }
 
 // src/editor/table/TablePlugin.ts
+function getCellDOMElement(cellPathJson) {
+  return document.querySelector(`[data-block-path='${cellPathJson}']`);
+}
+function isCaretAtContainerStart(container) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const range = sel.getRangeAt(0);
+  if (range.startOffset !== 0) return false;
+  let node = range.startContainer;
+  while (node && node !== container) {
+    if (node.previousSibling) return false;
+    node = node.parentNode;
+  }
+  return node === container;
+}
+function isCaretAtContainerEnd(container) {
+  var _a, _b;
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const range = sel.getRangeAt(0);
+  const endNode = range.endContainer;
+  const endOffset = range.endOffset;
+  const len = endNode.nodeType === Node.TEXT_NODE ? (_b = (_a = endNode.textContent) == null ? void 0 : _a.length) != null ? _b : 0 : endNode.childNodes.length;
+  if (endOffset !== len) return false;
+  let node = endNode;
+  while (node && node !== container) {
+    if (node.nextSibling) return false;
+    node = node.parentNode;
+  }
+  return node === container;
+}
+function isCaretOnEdgeLine(container, direction) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const caretRange = sel.getRangeAt(0).cloneRange();
+  caretRange.collapse(true);
+  const caretRects = caretRange.getClientRects();
+  if (!caretRects.length) return true;
+  const caretRect = caretRects[0];
+  const containerRect = container.getBoundingClientRect();
+  const lineHeight = parseFloat(getComputedStyle(container).lineHeight) || 20;
+  if (direction === "up") {
+    return caretRect.top < containerRect.top + lineHeight;
+  } else {
+    return caretRect.bottom > containerRect.bottom - lineHeight;
+  }
+}
 var TablePlugin = {
   name: "table",
   keyBindings: {
@@ -8679,6 +8852,125 @@ var TablePlugin = {
       engine.dispatch(tr);
       return true;
     },
+    "ArrowRight": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretAtContainerEnd(cellEl)) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { rows, cols } = getTableDimensions(table);
+      let nextRow = row;
+      let nextCol = col + 1;
+      while (nextRow < rows) {
+        if (nextCol >= cols) {
+          nextCol = 0;
+          nextRow++;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, nextCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        nextCol++;
+      }
+      if (nextRow >= rows) return true;
+      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, nextCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowLeft": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretAtContainerStart(cellEl)) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { cols } = getTableDimensions(table);
+      let prevRow = row;
+      let prevCol = col - 1;
+      while (prevRow >= 0) {
+        if (prevCol < 0) {
+          prevCol = cols - 1;
+          prevRow--;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, prevRow, prevCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        prevCol--;
+      }
+      if (prevRow < 0) return true;
+      const pos = getCellLastPosition(state.doc, tablePath, prevRow, prevCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowDown": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretOnEdgeLine(cellEl, "down")) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { rows, cols } = getTableDimensions(table);
+      let nextRow = row + 1;
+      while (nextRow < rows) {
+        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, col]);
+        if (c && !((_a = c.attrs) == null ? void 0 : _a.covered)) break;
+        nextRow++;
+      }
+      if (nextRow >= rows) return false;
+      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, col < cols ? col : 0);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowUp": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretOnEdgeLine(cellEl, "up")) return false;
+      let prevRow = row - 1;
+      while (prevRow >= 0) {
+        const c = getNodeAtPath(state.doc, [...tablePath, prevRow, col]);
+        if (c && !((_a = c.attrs) == null ? void 0 : _a.covered)) break;
+        prevRow--;
+      }
+      if (prevRow < 0) return false;
+      const { cols } = getTableDimensions(getNodeAtPath(state.doc, tablePath));
+      const pos = getCellLastPosition(state.doc, tablePath, prevRow, col < cols ? col : 0);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
     "Shift+Tab": (engine) => {
       var _a;
       const state = engine.getState();