@trafica/editor 1.0.23 → 1.0.24

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { forwardRef, useRef, useEffect, useCallback, useMemo, useImperativeHandle, useState, useLayoutEffect, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
 // src/editor/core/DocumentModel.ts
 function isTextNode(node) {
@@ -3319,15 +3319,13 @@ var OPTIONS = [
 function AlignmentDropdown({ engine, activeAlignment }) {
   var _a;
   const [open, setOpen] = useState(false);
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
-  const buttonRef = useRef(null);
-  const popupRef = useRef(null);
+  const containerRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      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);
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -3341,31 +3339,22 @@ 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__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: buttonRef,
         type: "button",
         title: `Text alignment (${activeOption.label})`,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          if (open) {
-            setOpen(false);
-            return;
-          }
-          if (buttonRef.current) {
-            const rect = buttonRef.current.getBoundingClientRect();
-            setPopupPos({ top: rect.bottom + 4, left: rect.left });
-          }
-          setOpen(true);
+          setOpen((prev) => !prev);
         },
         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 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"
+          open ? "bg-gray-100  text-gray-900 " : "text-gray-700  hover:bg-gray-100 "
         ].join(" "),
         children: [
           activeOption.icon,
@@ -3373,45 +3362,40 @@ function AlignmentDropdown({ engine, activeAlignment }) {
         ]
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "flex-shrink-0", children: option.icon }),
-                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: option.label }),
-                  isActive && /* @__PURE__ */ jsx(CheckIcon, {})
-                ]
+    open && /* @__PURE__ */ 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__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isActive,
+              title: `${option.label} (${option.shortcut})`,
+              onMouseDown: (e) => {
+                e.preventDefault();
+                setAlignment(option.value)(engine);
+                setOpen(false);
               },
-              option.value
-            );
-          })
-        }
-      ),
-      document.body
+              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__ */ jsx("span", { className: "flex-shrink-0", children: option.icon }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: option.label }),
+                isActive && /* @__PURE__ */ jsx(CheckIcon, {})
+              ]
+            },
+            option.value
+          );
+        })
+      }
     )
   ] });
 }
@@ -3456,15 +3440,11 @@ function CheckIcon() {
 var SIZES = ["8", "10", "12", "14", "16", "18", "24", "32", "48"];
 function FontSizeDropdown({ engine, activeFontSize }) {
   const [open, setOpen] = useState(false);
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
-  const buttonRef = useRef(null);
-  const popupRef = useRef(null);
+  const containerRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      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))) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
       }
     };
@@ -3479,36 +3459,24 @@ 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__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: buttonRef,
         type: "button",
         title: "Font size",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          if (open) {
-            setOpen(false);
-          } else {
-            openDropdown();
-          }
+          setOpen((prev) => !prev);
         },
         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 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"
+          open ? "bg-gray-100  text-gray-900 " : "text-gray-700  hover:bg-gray-100 "
         ].join(" "),
         children: [
           /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: label }),
@@ -3516,66 +3484,61 @@ function FontSizeDropdown({ engine, activeFontSize }) {
         ]
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ 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__ */ jsxs(
+    open && /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { children: "Default" }),
+                activeFontSize === null && /* @__PURE__ */ jsx(CheckIcon2, {})
+              ]
+            }
+          ),
+          SIZES.map((size) => {
+            const isActive = activeNum === size;
+            return /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
                 role: "option",
-                "aria-selected": activeFontSize === null,
+                "aria-selected": isActive,
                 onMouseDown: (e) => {
                   e.preventDefault();
-                  setFontSize(null)(engine);
+                  setFontSize(`${size}px`)(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 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"
+                  "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 "
                 ].join(" "),
                 children: [
-                  /* @__PURE__ */ jsx("span", { children: "Default" }),
-                  activeFontSize === null && /* @__PURE__ */ jsx(CheckIcon2, {})
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: `${size}px`, lineHeight: 1.3 }, children: size }),
+                  isActive && /* @__PURE__ */ jsx(CheckIcon2, {})
                 ]
-              }
-            ),
-            SIZES.map((size) => {
-              const isActive = activeNum === size;
-              return /* @__PURE__ */ 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__ */ jsx("span", { style: { fontSize: `${size}px`, lineHeight: 1.3 }, children: size }),
-                    isActive && /* @__PURE__ */ jsx(CheckIcon2, {})
-                  ]
-                },
-                size
-              );
-            })
-          ]
-        }
-      ),
-      document.body
+              },
+              size
+            );
+          })
+        ]
+      }
     )
   ] });
 }
@@ -3601,16 +3564,12 @@ function FontFamilyDropdown({ engine, activeFontFamily }) {
   const [open, setOpen] = useState(false);
   const [showCustomInput, setShowCustomInput] = useState(false);
   const [customValue, setCustomValue] = useState("");
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
-  const buttonRef = useRef(null);
-  const popupRef = useRef(null);
+  const containerRef = useRef(null);
   const customInputRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      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))) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
         closeDropdown();
       }
     };
@@ -3629,17 +3588,6 @@ 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);
@@ -3651,11 +3599,10 @@ 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__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: buttonRef,
         type: "button",
         title: "Font family",
         "aria-haspopup": "listbox",
@@ -3664,14 +3611,16 @@ function FontFamilyDropdown({ engine, activeFontFamily }) {
           e.preventDefault();
           if (open) {
             closeDropdown();
-          } else {
-            openDropdown();
+            return;
           }
+          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 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"
+          open ? "bg-gray-100  text-gray-900 " : "text-gray-700  hover:bg-gray-100 "
         ].join(" "),
         children: [
           /* @__PURE__ */ jsx(FontIcon, {}),
@@ -3680,65 +3629,60 @@ function FontFamilyDropdown({ engine, activeFontFamily }) {
         ]
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ 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__ */ jsxs(
+    open && /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { children: "Default" }),
+                activeFontFamily === null && /* @__PURE__ */ jsx(CheckIcon3, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-gray-100 " }),
+          FONTS.map((font) => {
+            const isActive = activeFontFamily === font.value;
+            return /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
                 role: "option",
-                "aria-selected": activeFontFamily === null,
+                "aria-selected": isActive,
                 onMouseDown: (e) => {
                   e.preventDefault();
-                  applyFont(null);
+                  applyFont(font.value);
                 },
                 className: [
                   "w-full flex items-center justify-between px-3 py-1.5 text-sm transition-colors",
-                  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"
+                  isActive ? "bg-blue-50  text-blue-700  font-medium" : "text-gray-700  hover:bg-gray-100 "
                 ].join(" "),
                 children: [
-                  /* @__PURE__ */ jsx("span", { children: "Default" }),
-                  activeFontFamily === null && /* @__PURE__ */ jsx(CheckIcon3, {})
+                  /* @__PURE__ */ jsx("span", { style: { fontFamily: font.value }, children: font.label }),
+                  isActive && /* @__PURE__ */ jsx(CheckIcon3, {})
                 ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-gray-100 dark:border-gray-700" }),
-            FONTS.map((font) => {
-              const isActive = activeFontFamily === font.value;
-              return /* @__PURE__ */ 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__ */ jsx("span", { style: { fontFamily: font.value }, children: font.label }),
-                    isActive && /* @__PURE__ */ jsx(CheckIcon3, {})
-                  ]
-                },
-                font.value
-              );
-            })
-          ]
-        }
-      ),
-      document.body
+              },
+              font.value
+            );
+          })
+        ]
+      }
     )
   ] });
 }
@@ -3784,15 +3728,11 @@ function BackgroundColorDropdown({
   const [lastColor, setLastColor] = useState(PRESET_COLORS[6].value);
   const [hexInput, setHexInput] = useState("");
   const [hexError, setHexError] = useState(false);
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
-  const chevronRef = useRef(null);
-  const popupRef = useRef(null);
+  const containerRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      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)))
+      if (containerRef.current && !containerRef.current.contains(e.target))
         setOpen(false);
     };
     document.addEventListener("mousedown", handler);
@@ -3835,7 +3775,7 @@ function BackgroundColorDropdown({
     (c) => !PRESET_COLORS.some((p) => normalizeHex(p.value) === normalizeHex(c))
   );
   const normActive = activeColor ? normalizeHex(activeColor) : null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative flex items-center", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -3845,7 +3785,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 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",
+        className: "flex flex-col items-center justify-center gap-0.5 w-8 h-8 rounded-l\r\n                   text-gray-700 \r\n                   hover:bg-gray-100 \r\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500\r\n                   transition-colors",
         children: [
           /* @__PURE__ */ jsx(BgColorIcon, {}),
           /* @__PURE__ */ jsx(ColorBar, { color: normActive != null ? normActive : lastColor })
@@ -3855,145 +3795,135 @@ function BackgroundColorDropdown({
     /* @__PURE__ */ jsx(
       "button",
       {
-        ref: chevronRef,
         type: "button",
         title: "More background colors",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          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);
+          setOpen((p) => {
+            if (!p) {
+              setHexInput("");
+              setHexError(false);
+            }
+            return !p;
+          });
         },
         className: [
-          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 dark:border-gray-600",
+          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 ",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500",
           "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"
+          open ? "bg-gray-100  text-gray-700 " : "text-gray-400 hover:bg-gray-100 "
         ].join(" "),
         children: /* @__PURE__ */ jsx(ChevronDownIcon4, {})
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ 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: [
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Background color",
+        className: "absolute top-full left-0 mt-1 z-50\r\n                     bg-white \r\n                     border border-gray-200 \r\n                     rounded-lg shadow-xl\r\n                     p-3 w-[208px]",
+        children: [
+          /* @__PURE__ */ 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\r\n                       text-gray-600 \r\n                       rounded hover:bg-gray-100 \r\n                       transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(RemoveColorIcon, {}),
+                "Remove background"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100  mb-2.5" }),
+          extraDocColors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400  mb-1.5 px-0.5", children: "Document colors" }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1 mb-2.5", children: extraDocColors.slice(0, 10).map((c) => /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                color: { label: c, value: c },
+                isActive: normActive === normalizeHex(c),
+                onSelect: applyColor
+              },
+              c
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100  mb-2.5" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1 mb-3", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx(
+            Swatch,
+            {
+              color: c,
+              isActive: normActive === normalizeHex(c.value),
+              onSelect: applyColor
+            },
+            c.value
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100  mb-2.5" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400  mb-1.5 px-0.5", children: "Custom color" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "shrink-0 w-7 h-7 rounded border border-gray-300 ",
+                style: { backgroundColor: hexInputToPreview(hexInput) }
+              }
+            ),
             /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex flex-1 items-center border rounded overflow-hidden\r\n                            border-gray-300 \r\n                            focus-within:ring-2 focus-within:ring-blue-500",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "pl-2 text-xs text-gray-400 select-none", children: "#" }),
+                  /* @__PURE__ */ 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__ */ jsx(
               "button",
               {
                 type: "button",
                 onMouseDown: (e) => {
                   e.preventDefault();
-                  applyColor(null);
+                  commitHexInput();
                 },
-                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__ */ jsx(RemoveColorIcon, {}),
-                  "Remove background"
-                ]
+                className: "shrink-0 px-2 py-1.5 text-xs bg-blue-600 text-white rounded\r\n                         hover:bg-blue-700 transition-colors",
+                children: "\u2713"
               }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" }),
-            extraDocColors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ 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__ */ jsx("div", { className: "grid grid-cols-5 gap-1 mb-2.5", children: extraDocColors.slice(0, 10).map((c) => /* @__PURE__ */ jsx(
-                Swatch,
-                {
-                  color: { label: c, value: c },
-                  isActive: normActive === normalizeHex(c),
-                  onSelect: applyColor
-                },
-                c
-              )) }),
-              /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1 mb-3", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx(
-              Swatch,
-              {
-                color: c,
-                isActive: normActive === normalizeHex(c.value),
-                onSelect: applyColor
-              },
-              c.value
-            )) }),
-            /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" }),
-            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "shrink-0 w-7 h-7 rounded border border-gray-300 dark:border-gray-600",
-                  style: { backgroundColor: hexInputToPreview(hexInput) }
-                }
-              ),
-              /* @__PURE__ */ 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__ */ jsx("span", { className: "pl-2 text-xs text-gray-400 select-none", children: "#" }),
-                    /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { className: "text-[10px] text-red-500 mt-1 px-0.5", children: "Invalid hex colour" })
-          ]
-        }
-      ),
-      document.body
+            )
+          ] }),
+          hexError && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-red-500 mt-1 px-0.5", children: "Invalid hex colour" })
+        ]
+      }
     )
   ] });
 }
@@ -4018,7 +3948,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 dark:border-gray-500" : ""
+        color.hasBorder ? "border border-gray-300 " : ""
       ].join(" "),
       style: { backgroundColor: color.value },
       children: isActive && /* @__PURE__ */ jsx(CheckIcon4, { light: isLight(color.value) })
@@ -4141,15 +4071,11 @@ function TextColorDropdown({
   const [lastColor, setLastColor] = useState(PRESET_COLORS2[0].value);
   const [hexInput, setHexInput] = useState("");
   const [hexError, setHexError] = useState(false);
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
-  const chevronRef = useRef(null);
-  const popupRef = useRef(null);
+  const containerRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      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)))
+      if (containerRef.current && !containerRef.current.contains(e.target))
         setOpen(false);
     };
     document.addEventListener("mousedown", handler);
@@ -4189,7 +4115,7 @@ function TextColorDropdown({
     (c) => !PRESET_COLORS2.some((p) => normalizeHex2(p.value) === normalizeHex2(c))
   );
   const normActive = activeColor ? normalizeHex2(activeColor) : null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative flex items-center", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -4199,7 +4125,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 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",
+        className: "flex flex-col items-center justify-center gap-0.5 w-8 h-8 rounded-l\r\n                   text-gray-700 \r\n                   hover:bg-gray-100 \r\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500\r\n                   transition-colors",
         children: [
           /* @__PURE__ */ jsx(TextColorIcon, {}),
           /* @__PURE__ */ jsx(
@@ -4215,139 +4141,129 @@ function TextColorDropdown({
     /* @__PURE__ */ jsx(
       "button",
       {
-        ref: chevronRef,
         type: "button",
         title: "More text colors",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          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);
+          setOpen((p) => {
+            if (!p) {
+              setHexInput("");
+              setHexError(false);
+            }
+            return !p;
+          });
         },
         className: [
-          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 dark:border-gray-600",
+          "flex items-center justify-center w-4 h-8 rounded-r border-l border-gray-200 ",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500",
           "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"
+          open ? "bg-gray-100  text-gray-700 " : "text-gray-400 hover:bg-gray-100 "
         ].join(" "),
         children: /* @__PURE__ */ jsx(ChevronDownIcon5, {})
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(RemoveColorIcon2, {}),
-                  "Remove color"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" }),
-            extraDocColors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ 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__ */ jsx("div", { className: "grid grid-cols-5 gap-1 mb-2.5", children: extraDocColors.slice(0, 10).map((c) => /* @__PURE__ */ jsx(
-                Swatch2,
-                {
-                  color: { label: c, value: c },
-                  isActive: normActive === normalizeHex2(c),
-                  onSelect: applyColor
-                },
-                c
-              )) }),
-              /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1 mb-3", children: PRESET_COLORS2.map((c) => /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Text color",
+        className: "absolute top-full left-0 mt-1 z-50\r\n                     bg-white \r\n                     border border-gray-200 \r\n                     rounded-lg shadow-xl\r\n                     p-3 w-[208px]",
+        children: [
+          /* @__PURE__ */ 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\r\n                       text-gray-600 \r\n                       rounded hover:bg-gray-100 \r\n                       transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(RemoveColorIcon2, {}),
+                "Remove color"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100  mb-2.5" }),
+          extraDocColors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400  mb-1.5 px-0.5", children: "Document colors" }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1 mb-2.5", children: extraDocColors.slice(0, 10).map((c) => /* @__PURE__ */ jsx(
               Swatch2,
               {
-                color: c,
-                isActive: normActive === normalizeHex2(c.value),
+                color: { label: c, value: c },
+                isActive: normActive === normalizeHex2(c),
                 onSelect: applyColor
               },
-              c.value
+              c
             )) }),
-            /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100 dark:bg-gray-700 mb-2.5" }),
-            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "shrink-0 w-7 h-7 rounded border border-gray-300 dark:border-gray-600",
-                  style: { backgroundColor: hexInputToPreview2(hexInput) }
-                }
-              ),
-              /* @__PURE__ */ 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__ */ jsx("span", { className: "pl-2 text-xs text-gray-400 select-none", children: "#" }),
-                /* @__PURE__ */ 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__ */ jsx("div", { className: "h-px bg-gray-100  mb-2.5" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1 mb-3", children: PRESET_COLORS2.map((c) => /* @__PURE__ */ jsx(
+            Swatch2,
+            {
+              color: c,
+              isActive: normActive === normalizeHex2(c.value),
+              onSelect: applyColor
+            },
+            c.value
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-100  mb-2.5" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-gray-400  mb-1.5 px-0.5", children: "Custom color" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "shrink-0 w-7 h-7 rounded border border-gray-300 ",
+                style: { backgroundColor: hexInputToPreview2(hexInput) }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center border rounded overflow-hidden\r\n                            border-gray-300 \r\n                            focus-within:ring-2 focus-within:ring-blue-500", children: [
+              /* @__PURE__ */ jsx("span", { className: "pl-2 text-xs text-gray-400 select-none", children: "#" }),
               /* @__PURE__ */ jsx(
-                "button",
+                "input",
                 {
-                  type: "button",
-                  onMouseDown: (e) => {
-                    e.preventDefault();
-                    commitHexInput();
+                  type: "text",
+                  maxLength: 6,
+                  value: hexInput,
+                  onChange: (e) => {
+                    setHexInput(e.target.value.replace(/[^0-9a-fA-F]/g, ""));
+                    setHexError(false);
                   },
-                  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"
+                  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 ",
+                    hexError ? "text-red-500" : ""
+                  ].join(" "),
+                  "aria-label": "Hex colour value"
                 }
               )
             ] }),
-            hexError && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-red-500 mt-1 px-0.5", children: "Invalid hex colour" })
-          ]
-        }
-      ),
-      document.body
+            /* @__PURE__ */ 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\r\n                         hover:bg-blue-700 transition-colors",
+                children: "\u2713"
+              }
+            )
+          ] }),
+          hexError && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-red-500 mt-1 px-0.5", children: "Invalid hex colour" })
+        ]
+      }
     )
   ] });
 }
@@ -4372,7 +4288,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 dark:border-gray-500" : ""
+        color.hasBorder ? "border border-gray-300 " : ""
       ].join(" "),
       style: { backgroundColor: color.value },
       children: isActive && /* @__PURE__ */ jsx(CheckIcon5, { light: isLight2(color.value) })
@@ -5904,9 +5820,7 @@ function CodeBlockButton({ engine }) {
   const activeBlock = getActiveBlockType(state.doc, state.selection);
   const isActive = activeBlock === "code_block";
   const [open, setOpen] = useState(false);
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
-  const chevronRef = useRef(null);
-  const popupRef = useRef(null);
+  const containerRef = useRef(null);
   const currentLang = (() => {
     var _a2;
     if (!isActive || !state.selection) return "plaintext";
@@ -5919,9 +5833,9 @@ function CodeBlockButton({ engine }) {
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      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();
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeDropdown();
+      }
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -5948,7 +5862,7 @@ function CodeBlockButton({ engine }) {
     setOpen(false);
   };
   const activeLang = LANGUAGES.find((l) => l.value === currentLang);
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative flex items-center", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -5960,7 +5874,7 @@ function CodeBlockButton({ engine }) {
         },
         className: [
           "flex items-center justify-center w-8 h-8 rounded-l text-sm transition-colors",
-          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"
+          isActive ? "bg-blue-100  text-blue-700 " : "text-gray-700  hover:bg-gray-100 "
         ].join(" "),
         children: /* @__PURE__ */ jsx(CodeBlockIcon, {})
       }
@@ -5968,69 +5882,55 @@ function CodeBlockButton({ engine }) {
     /* @__PURE__ */ 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();
-          if (open) {
-            closeDropdown();
-            return;
-          }
-          if (chevronRef.current) {
-            const rect = chevronRef.current.getBoundingClientRect();
-            setPopupPos({ top: rect.bottom + 4, left: rect.left - 160 });
-          }
-          setOpen(true);
+          setOpen((p) => !p);
         },
         className: [
-          "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"
+          "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 "
         ].join(" "),
         children: /* @__PURE__ */ jsx(ChevronIcon, {})
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("svg", { className: "w-3 h-3 shrink-0", viewBox: "0 0 12 12", fill: "currentColor", children: /* @__PURE__ */ jsx("polyline", { points: "1 6 4.5 9.5 11 2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-                    /* @__PURE__ */ jsx("span", { className: isSelected ? "" : "ml-5", children: lang.label })
-                  ]
+    open && /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isSelected,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  handleSelectLanguage(lang.value);
                 },
-                lang.value
-              );
-            })
-          ]
-        }
-      ),
-      document.body
+                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__ */ jsx("svg", { className: "w-3 h-3 shrink-0", viewBox: "0 0 12 12", fill: "currentColor", children: /* @__PURE__ */ jsx("polyline", { points: "1 6 4.5 9.5 11 2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+                  /* @__PURE__ */ jsx("span", { className: isSelected ? "" : "ml-5", children: lang.label })
+                ]
+              },
+              lang.value
+            );
+          })
+        ]
+      }
     )
   ] });
 }
@@ -6360,16 +6260,12 @@ function HeadingDropdown({
 }) {
   var _a;
   const [open, setOpen] = useState(false);
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
-  const buttonRef = useRef(null);
-  const popupRef = useRef(null);
+  const containerRef = useRef(null);
   const run = (command) => command(engine);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      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)))
+      if (containerRef.current && !containerRef.current.contains(e.target))
         setOpen(false);
     };
     document.addEventListener("mousedown", handler);
@@ -6387,23 +6283,14 @@ function HeadingDropdown({
     code_block: "Code"
   };
   const label = (_a = BLOCK_LABELS[activeBlock]) != null ? _a : "Paragraph";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: buttonRef,
         type: "button",
         onMouseDown: (e) => {
           e.preventDefault();
-          if (open) {
-            setOpen(false);
-            return;
-          }
-          if (buttonRef.current) {
-            const rect = buttonRef.current.getBoundingClientRect();
-            setPopupPos({ top: rect.bottom + 2, left: rect.left });
-          }
-          setOpen(true);
+          setOpen((v) => !v);
         },
         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: [
@@ -6412,7 +6299,7 @@ function HeadingDropdown({
         ]
       }
     ),
-    open && createPortal(/* @__PURE__ */ 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: [
+    open && /* @__PURE__ */ 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: [
       {
         label: "Paragraph",
         cmd: setParagraph,
@@ -6464,7 +6351,7 @@ function HeadingDropdown({
         children: label2
       },
       label2
-    )) }), document.body)
+    )) })
   ] });
 }
 function LinkButton({
@@ -6479,16 +6366,10 @@ function LinkButton({
   const [editMode, setEditMode] = useState(false);
   const [url, setUrl] = useState("");
   const [displayText, setDisplayText] = useState("");
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
   const containerRef = useRef(null);
-  const popupRef = useRef(null);
   const urlInputRef = useRef(null);
   const textInputRef = 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("");
@@ -6520,9 +6401,7 @@ function LinkButton({
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      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))) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
         closePopup();
       }
     };
@@ -6562,7 +6441,7 @@ function LinkButton({
     setEditMode(true);
   };
   const showTextInput = !hasTextSelected && !isActive;
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
     /* @__PURE__ */ jsx(
       ToolbarButton,
       {
@@ -6573,43 +6452,115 @@ function LinkButton({
         icon: /* @__PURE__ */ jsx(LinkIcon, {})
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-400  mb-2 uppercase tracking-wide", children: "Link" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+    open && /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-400  mb-2 uppercase tracking-wide", children: "Link" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-400  mb-3 uppercase tracking-wide", children: isActive ? "Edit link" : "Insert link" }),
+            showTextInput && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-600  mb-1", children: "Display text" }),
               /* @__PURE__ */ jsx(
-                "a",
+                "input",
                 {
-                  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
+                  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__ */ jsxs("div", { className: "mb-3", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-600  mb-1", children: "URL" }),
+              /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onMouseDown: (e) => {
                     e.preventDefault();
-                    handleStartEdit();
+                    handleApply();
                   },
-                  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"
+                  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"
                 }
               ),
-              /* @__PURE__ */ jsx(
+              isActive && /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -6617,104 +6568,27 @@ function LinkButton({
                     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",
+                  className: "px-3 py-1.5 text-sm text-red-600  border border-red-200  rounded hover:bg-red-50 ",
                   children: "Remove"
                 }
+              ),
+              /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-400  mb-3 uppercase tracking-wide", children: isActive ? "Edit link" : "Insert link" }),
-              showTextInput && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-                /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-600  mb-1", children: "Display text" }),
-                /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-3", children: [
-                /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-600  mb-1", children: "URL" }),
-                /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ 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__ */ 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__ */ 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
+          ] })
+        )
+      }
     )
   ] });
 }