@underverse-ui/underverse 2.0.13 → 2.0.15

package/dist/{chunk-VNSCI3OK.js → chunk-SKCO2GFM.js}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PYC5EY5W.js";
+} from "./chunk-EPBYGZHZ.js";
 
 // src/components/emoji-ui.tsx
 import React from "react";
@@ -71,4 +71,4 @@ export {
   getEmojiImageUrl,
   EmojiGridButton
 };
-//# sourceMappingURL=chunk-VNSCI3OK.js.map
+//# sourceMappingURL=chunk-SKCO2GFM.js.map

package/dist/{chunk-MMMCBJ2L.js → chunk-WEGE3MZ5.js}

@@ -7,9 +7,11 @@ import {
   formControlSizeStyles,
   formControlValueClass,
   mergeRefs,
+  resolveUEditorPortalContainer,
   setRefValue,
-  useSmartTranslations
-} from "./chunk-PYC5EY5W.js";
+  useSmartTranslations,
+  useUEditorPortalContainerGetter
+} from "./chunk-EPBYGZHZ.js";
 
 // src/contexts/UnderverseConfigContext.tsx
 import * as React from "react";
@@ -349,6 +351,10 @@ var Popover = ({
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.popover?.borderMode ?? globalConfig.borderMode;
   const isOpen = isControlled ? open : internalOpen;
+  const getPortalContainer = useUEditorPortalContainerGetter();
+  const portalContainer = isOpen ? resolveUEditorPortalContainer(getPortalContainer) : null;
+  const portalDocument = portalContainer?.ownerDocument ?? null;
+  const portalWindow = portalDocument?.defaultView ?? null;
   const setIsOpen = React2.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
@@ -392,7 +398,10 @@ var Popover = ({
       placement,
       offset,
       padding,
-      viewport: { width: window.innerWidth, height: window.innerHeight }
+      viewport: {
+        width: portalWindow?.innerWidth ?? window.innerWidth,
+        height: portalWindow?.innerHeight ?? window.innerHeight
+      }
     });
     const top = Math.round(next.top);
     const left = Math.round(next.left);
@@ -403,57 +412,58 @@ var Popover = ({
     panelEl.style.transformOrigin = getTransformOrigin(next.side, next.align);
     if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
     if (positionerEl.style.pointerEvents !== "auto") positionerEl.style.pointerEvents = "auto";
-  }, [placement, matchTriggerWidth, contentWidth]);
+  }, [placement, matchTriggerWidth, contentWidth, portalWindow]);
   React2.useLayoutEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !portalWindow) return;
     updatePosition();
     let raf1 = 0;
     let raf2 = 0;
-    raf1 = window.requestAnimationFrame(() => {
+    raf1 = portalWindow.requestAnimationFrame(() => {
       updatePosition();
-      raf2 = window.requestAnimationFrame(() => updatePosition());
+      raf2 = portalWindow.requestAnimationFrame(() => updatePosition());
     });
     return () => {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
+      portalWindow.cancelAnimationFrame(raf1);
+      portalWindow.cancelAnimationFrame(raf2);
     };
-  }, [isOpen, updatePosition]);
+  }, [isOpen, portalWindow, updatePosition]);
   React2.useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !portalWindow) return;
     let raf = 0;
     const tick = () => {
       updatePosition();
-      raf = window.requestAnimationFrame(tick);
+      raf = portalWindow.requestAnimationFrame(tick);
     };
-    raf = window.requestAnimationFrame(tick);
-    return () => window.cancelAnimationFrame(raf);
-  }, [isOpen, updatePosition]);
+    raf = portalWindow.requestAnimationFrame(tick);
+    return () => portalWindow.cancelAnimationFrame(raf);
+  }, [isOpen, portalWindow, updatePosition]);
   React2.useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !portalDocument || !portalWindow) return;
     let raf = 0;
     const handler = () => {
-      cancelAnimationFrame(raf);
-      raf = window.requestAnimationFrame(() => updatePosition());
+      portalWindow.cancelAnimationFrame(raf);
+      raf = portalWindow.requestAnimationFrame(() => updatePosition());
     };
     handler();
-    window.addEventListener("resize", handler);
-    window.addEventListener("scroll", handler, true);
-    document.addEventListener("scroll", handler, true);
+    portalWindow.addEventListener("resize", handler);
+    portalWindow.addEventListener("scroll", handler, true);
+    portalDocument.addEventListener("scroll", handler, true);
     return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("resize", handler);
-      window.removeEventListener("scroll", handler, true);
-      document.removeEventListener("scroll", handler, true);
+      portalWindow.cancelAnimationFrame(raf);
+      portalWindow.removeEventListener("resize", handler);
+      portalWindow.removeEventListener("scroll", handler, true);
+      portalDocument.removeEventListener("scroll", handler, true);
     };
-  }, [isOpen, updatePosition]);
+  }, [isOpen, portalDocument, portalWindow, updatePosition]);
   React2.useEffect(() => {
-    if (!isOpen) return;
-    if (typeof ResizeObserver === "undefined") return;
-    const ro = new ResizeObserver(() => updatePosition());
+    if (!isOpen || !portalWindow) return;
+    const ResizeObserverCtor = portalWindow.ResizeObserver;
+    if (!ResizeObserverCtor) return;
+    const ro = new ResizeObserverCtor(() => updatePosition());
     if (positionerRef.current) ro.observe(positionerRef.current);
     if (triggerRef.current) ro.observe(triggerRef.current);
     return () => ro.disconnect();
-  }, [isOpen, updatePosition]);
+  }, [isOpen, portalWindow, updatePosition]);
   React2.useLayoutEffect(() => {
     if (!isOpen) {
       lastAppliedRef.current = null;
@@ -461,7 +471,7 @@ var Popover = ({
     }
   }, [isOpen]);
   React2.useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !portalDocument || !portalWindow) return;
     const handleClickOutside = (event) => {
       const target = event.target;
       const triggerEl = triggerRef.current;
@@ -469,7 +479,7 @@ var Popover = ({
       if (!triggerEl || !popoverEl) return;
       if (triggerEl.contains(target)) return;
       if (popoverEl.contains(target)) return;
-      if (target instanceof Element && target.closest("[data-popover]")) return;
+      if (target instanceof portalWindow.Element && target.closest("[data-popover]")) return;
       setIsOpen(false);
     };
     const handleEscape = (event) => {
@@ -477,21 +487,19 @@ var Popover = ({
         setIsOpen(false);
       }
     };
-    if (typeof document !== "undefined") {
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-        document.removeEventListener("keydown", handleEscape);
-      };
-    }
-  }, [isOpen, setIsOpen]);
+    portalDocument.addEventListener("mousedown", handleClickOutside);
+    portalDocument.addEventListener("keydown", handleEscape);
+    return () => {
+      portalDocument.removeEventListener("mousedown", handleClickOutside);
+      portalDocument.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, portalDocument, portalWindow, setIsOpen]);
   const handleTriggerClick = () => {
     if (!disabled) {
       setIsOpen(!isOpen);
     }
   };
-  const popoverContent = isOpen && typeof window !== "undefined" ? createPortal(
+  const popoverContent = isOpen && portalContainer ? createPortal(
     /* @__PURE__ */ jsx2(
       "div",
       {
@@ -542,7 +550,7 @@ var Popover = ({
         )
       }
     ),
-    document.body
+    portalContainer
   ) : null;
   return /* @__PURE__ */ jsxs(Fragment2, { children: [
     (() => {
@@ -632,6 +640,7 @@ var DropdownMenu = ({
   const [activeIndex, setActiveIndex] = useResettingIndex(open);
   const parentMenu = React3.useContext(DropdownMenuContext);
   const hoverCloseTimeoutRef = React3.useRef(null);
+  const getPortalContainer = useUEditorPortalContainerGetter();
   const cancelHoverClose = React3.useCallback(() => {
     if (hoverCloseTimeoutRef.current === null) return;
     clearTimeout(hoverCloseTimeoutRef.current);
@@ -670,9 +679,9 @@ var DropdownMenu = ({
   React3.useEffect(() => {
     if (!open) return;
     const handleKeyNav = (e) => {
-      const active = document.activeElement;
       const triggerEl = triggerRef.current;
       const menuEl = menuRef.current;
+      const active = menuEl?.ownerDocument.activeElement;
       if (!active || !triggerEl || !menuEl) return;
       const isInMenu = menuEl.contains(active);
       const isOnTrigger = triggerEl.contains(active);
@@ -699,9 +708,11 @@ var DropdownMenu = ({
         closeMenu();
       }
     };
-    document.addEventListener("keydown", handleKeyNav, true);
+    const menuDocument = menuRef.current?.ownerDocument;
+    if (!menuDocument) return;
+    menuDocument.addEventListener("keydown", handleKeyNav, true);
     return () => {
-      document.removeEventListener("keydown", handleKeyNav, true);
+      menuDocument.removeEventListener("keydown", handleKeyNav, true);
     };
   }, [open, activeIndex, closeMenu, focusMenuItem, getEnabledMenuItems]);
   const menuContext = React3.useMemo(
@@ -783,15 +794,17 @@ var DropdownMenu = ({
     triggerRef.current = node;
   }, [childRef]);
   const handleTriggerKeyDown = React3.useCallback((event) => {
+    const portalWindow = resolveUEditorPortalContainer(getPortalContainer)?.ownerDocument.defaultView;
+    const scheduleFrame = portalWindow?.requestAnimationFrame.bind(portalWindow) ?? requestAnimationFrame;
     if (!disabled) {
       if (event.key === "ArrowDown") {
         event.preventDefault();
         setOpen(true);
-        requestAnimationFrame(() => focusMenuItem(0));
+        scheduleFrame(() => focusMenuItem(0));
       } else if (event.key === "ArrowUp") {
         event.preventDefault();
         setOpen(true);
-        requestAnimationFrame(() => {
+        scheduleFrame(() => {
           const enabled = getEnabledMenuItems();
           focusMenuItem(enabled.length - 1);
         });
@@ -801,7 +814,7 @@ var DropdownMenu = ({
       }
     }
     triggerOnKeyDown?.(event);
-  }, [disabled, focusMenuItem, getEnabledMenuItems, setOpen, triggerOnKeyDown]);
+  }, [disabled, focusMenuItem, getEnabledMenuItems, getPortalContainer, setOpen, triggerOnKeyDown]);
   const handleTriggerClick = React3.useCallback((event) => {
     if (openOnHover && !disabled) {
       cancelHoverClose();
@@ -2033,6 +2046,8 @@ import {
   List as ListIcon,
   ListOrdered as ListOrderedIcon,
   ListTodo,
+  PanelTopClose,
+  PanelTopOpen,
   Quote as QuoteIcon,
   RotateCcw,
   SquareCheckBig,
@@ -2635,8 +2650,10 @@ function findTableRowNodeInfo(view, rowElement) {
   return null;
 }
 function resolveEventElement(target) {
-  if (target instanceof Element) return target;
-  if (target instanceof Node) return target.parentElement;
+  const ownerDocument = target?.ownerDocument;
+  const realm = ownerDocument?.defaultView;
+  if (realm && target instanceof realm.Element) return target;
+  if (realm && target instanceof realm.Node) return target.parentElement;
   return null;
 }
 function isPointOverRenderedText(root, clientX, clientY) {
@@ -2659,22 +2676,24 @@ function isPointOverRenderedText(root, clientX, clientY) {
   return false;
 }
 function getSelectionTableCell(view) {
-  const browserSelection = window.getSelection();
+  const realm = view.dom.ownerDocument.defaultView;
+  const browserSelection = realm?.getSelection();
   const anchorElement = resolveEventElement(browserSelection?.anchorNode ?? null);
   const anchorCell = anchorElement?.closest?.("th,td");
-  if (anchorCell instanceof HTMLElement) {
+  if (realm && anchorCell instanceof realm.HTMLElement) {
     return anchorCell;
   }
   const { from } = view.state.selection;
   const domAtPos = view.domAtPos(from);
   const element = resolveEventElement(domAtPos.node);
   const cell = element?.closest?.("th,td");
-  return cell instanceof HTMLElement ? cell : null;
+  return realm && cell instanceof realm.HTMLElement ? cell : null;
 }
 function resolveRowResizeTarget(cell, clientX, clientY) {
   const rect = cell.getBoundingClientRect();
   const row = cell.closest("tr");
-  if (!(row instanceof HTMLTableRowElement) || !(cell instanceof HTMLTableCellElement)) {
+  const realm = cell.ownerDocument.defaultView;
+  if (!realm || !(row instanceof realm.HTMLTableRowElement) || !(cell instanceof realm.HTMLTableCellElement)) {
     return null;
   }
   const distToBottom = Math.abs(clientY - rect.bottom);
@@ -2689,10 +2708,10 @@ function resolveRowResizeTarget(cell, clientX, clientY) {
   }
   if (distToTop <= TABLE_RESIZE_HIT_ZONE) {
     const prevRow = row.previousElementSibling;
-    if (prevRow instanceof HTMLTableRowElement) {
+    if (prevRow instanceof realm.HTMLTableRowElement) {
       const cellIndex = cell.cellIndex;
       const prevCell = prevRow.children[cellIndex] ?? prevRow.firstElementChild;
-      if (prevCell instanceof HTMLTableCellElement) {
+      if (prevCell instanceof realm.HTMLTableCellElement) {
         return { row: prevRow, cell: prevCell };
       }
     }
@@ -2702,7 +2721,8 @@ function resolveRowResizeTarget(cell, clientX, clientY) {
 function resolveColumnResizeTarget(cell, clientX, clientY) {
   const rect = cell.getBoundingClientRect();
   const row = cell.closest("tr");
-  if (!(row instanceof HTMLTableRowElement) || !(cell instanceof HTMLTableCellElement)) {
+  const realm = cell.ownerDocument.defaultView;
+  if (!realm || !(row instanceof realm.HTMLTableRowElement) || !(cell instanceof realm.HTMLTableCellElement)) {
     return null;
   }
   const distToRight = Math.abs(clientX - rect.right);
@@ -2717,7 +2737,7 @@ function resolveColumnResizeTarget(cell, clientX, clientY) {
   }
   if (distToLeft <= TABLE_RESIZE_HIT_ZONE) {
     const prevCell = cell.previousElementSibling;
-    if (prevCell instanceof HTMLTableCellElement) {
+    if (prevCell instanceof realm.HTMLTableCellElement) {
       return { row, cell: prevCell };
     }
   }
@@ -3199,20 +3219,22 @@ import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-run
 function getTableAnchorPos(editor) {
   const tableInfo = findTableNodeInfoFromState(editor.state);
   if (tableInfo) return editor.state.selection.from;
-  const selectionAnchor = resolveEventElement(window.getSelection()?.anchorNode ?? null);
+  const editorDocument = editor.view.dom.ownerDocument;
+  const editorWindow = editorDocument.defaultView;
+  const selectionAnchor = resolveEventElement(editorWindow?.getSelection()?.anchorNode ?? null);
   const selectionCell = selectionAnchor?.closest?.("th,td");
-  if (selectionCell instanceof HTMLTableCellElement && editor.view.dom.contains(selectionCell)) {
+  if (editorWindow && selectionCell instanceof editorWindow.HTMLTableCellElement && editor.view.dom.contains(selectionCell)) {
     return editor.view.posAtDOM(selectionCell, 0) + 1;
   }
-  const activeElement = document.activeElement instanceof Element ? document.activeElement : null;
+  const activeElement = editorWindow && editorDocument.activeElement instanceof editorWindow.Element ? editorDocument.activeElement : null;
   const activeCell = activeElement?.closest?.("th,td");
-  if (activeCell instanceof HTMLTableCellElement && editor.view.dom.contains(activeCell)) {
+  if (editorWindow && activeCell instanceof editorWindow.HTMLTableCellElement && editor.view.dom.contains(activeCell)) {
     return editor.view.posAtDOM(activeCell, 0) + 1;
   }
   const tables = editor.view.dom.querySelectorAll("table");
   if (tables.length !== 1) return null;
   const firstCell = tables[0]?.querySelector("th,td");
-  return firstCell instanceof HTMLTableCellElement ? editor.view.posAtDOM(firstCell, 0) + 1 : null;
+  return editorWindow && firstCell instanceof editorWindow.HTMLTableCellElement ? editor.view.posAtDOM(firstCell, 0) + 1 : null;
 }
 var EDITOR_UI_ACTIVE_MARKS = [
   "blockquote",
@@ -3404,6 +3426,8 @@ function applyTableCellAttribute(editor, name, value) {
 var EditorToolbar = ({
   editor,
   variant,
+  isMenuBarVisible,
+  onToggleMenuBar,
   uploadImage,
   imageInsertMode = "base64",
   maxImageFileSize = DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
@@ -3578,6 +3602,15 @@ var EditorToolbar = ({
             )
           ] })
         }
+      ),
+      onToggleMenuBar && /* @__PURE__ */ jsx7(
+        ToolbarButton,
+        {
+          onClick: onToggleMenuBar,
+          active: isMenuBarVisible,
+          title: t(isMenuBarVisible ? "toolbar.hideMenuBar" : "toolbar.showMenuBar"),
+          children: isMenuBarVisible ? /* @__PURE__ */ jsx7(PanelTopClose, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(PanelTopOpen, { className: "h-4 w-4" })
+        }
       )
     ] });
   }
@@ -3586,7 +3619,7 @@ var EditorToolbar = ({
     "div",
     {
       role: "toolbar",
-      className: "flex min-h-9 flex-nowrap items-center gap-0.5 overflow-x-auto border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-1.5 py-1 dark:bg-muted/60",
+      className: "flex min-h-9 flex-wrap items-center gap-0.5 border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-1.5 py-1 dark:bg-muted/60",
       children: [
         isFull && /* @__PURE__ */ jsx7(
           DropdownMenu,
@@ -4301,7 +4334,16 @@ var EditorToolbar = ({
               children: /* @__PURE__ */ jsx7(TableCellsMerge, { className: "w-4 h-4" })
             }
           )
-        ] })
+        ] }),
+        onToggleMenuBar && /* @__PURE__ */ jsx7(
+          ToolbarButton,
+          {
+            onClick: onToggleMenuBar,
+            active: isMenuBarVisible,
+            title: t(isMenuBarVisible ? "toolbar.hideMenuBar" : "toolbar.showMenuBar"),
+            children: isMenuBarVisible ? /* @__PURE__ */ jsx7(PanelTopClose, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(PanelTopOpen, { className: "h-4 w-4" })
+          }
+        )
       ]
     }
   );
@@ -4586,4 +4628,4 @@ export {
   EditorToolbar,
   UEDITOR_PROSEMIRROR_CLASS_NAME
 };
-//# sourceMappingURL=chunk-MMMCBJ2L.js.map
+//# sourceMappingURL=chunk-WEGE3MZ5.js.map