@underverse-ui/underverse 2.0.14 → 2.0.16

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "sourceEntry": "src/index.ts",
   "totalExports": 257,
   "exports": [

package/dist/{EmojiPicker-CGMUDB4I.js → EmojiPicker-3X2S7XPP.js}

@@ -2,13 +2,13 @@
 import {
   EmojiPicker,
   EmojiPicker_default
-} from "./chunk-N2S6RI4Y.js";
-import "./chunk-DXLSCUYA.js";
+} from "./chunk-HTGAV4IG.js";
+import "./chunk-SKCO2GFM.js";
 import "./chunk-4TYW5K4J.js";
-import "./chunk-PV2G2XME.js";
+import "./chunk-EPBYGZHZ.js";
 import "./chunk-NSBPE2FW.js";
 export {
   EmojiPicker,
   EmojiPicker_default as default
 };
-//# sourceMappingURL=EmojiPicker-CGMUDB4I.js.map
+//# sourceMappingURL=EmojiPicker-3X2S7XPP.js.map

package/dist/{chunk-3Q5EE2ZA.js → chunk-23VKHYEB.js}

@@ -7,9 +7,11 @@ import {
   formControlSizeStyles,
   formControlValueClass,
   mergeRefs,
+  resolveUEditorPortalContainer,
   setRefValue,
-  useSmartTranslations
-} from "./chunk-PV2G2XME.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();
@@ -2637,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) {
@@ -2661,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);
@@ -2691,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 };
       }
     }
@@ -2704,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);
@@ -2719,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 };
     }
   }
@@ -3201,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",
@@ -3424,6 +3444,8 @@ var EditorToolbar = ({
   const [showImageInput, setShowImageInput] = useState4(false);
   const [showLinkInput, setShowLinkInput] = useState4(false);
   const [isTableMenuOpen, setIsTableMenuOpen] = useState4(false);
+  const [fontSizeDraft, setFontSizeDraft] = useState4("");
+  const [isEditingFontSize, setIsEditingFontSize] = useState4(false);
   const fileInputRef = useRef4(null);
   const [isUploadingImage, setIsUploadingImage] = useState4(false);
   const [imageUploadError, setImageUploadError] = useState4(null);
@@ -3453,7 +3475,7 @@ var EditorToolbar = ({
   const availableLetterSpacings = React7.useMemo(() => letterSpacings ?? getDefaultLetterSpacings(), [letterSpacings]);
   const currentFontFamilyDisplayValue = currentFontFamily.split(",")[0]?.trim() ?? currentFontFamily;
   const currentFontFamilyLabel = availableFontFamilies.find((option) => normalizeStyleValue(option.value) === currentFontFamily)?.label ?? (currentFontFamilyDisplayValue || t("toolbar.fontDefault"));
-  const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? "13";
+  const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? (currentFontSize.replace(/px$/i, "") || "13");
   const currentLineHeightLabel = availableLineHeights.find((option) => normalizeStyleValue(option.value) === currentLineHeight)?.label ?? t("toolbar.lineHeightDefault");
   const currentLetterSpacingLabel = availableLetterSpacings.find((option) => normalizeStyleValue(option.value) === currentLetterSpacing)?.label ?? t("toolbar.letterSpacingDefault");
   const defaultFontFamilyOption = availableFontFamilies.find((opt) => normalizeStyleValue(opt.value) === normalizeStyleValue(defaultFontFamily)) ?? availableFontFamilies[0];
@@ -3465,6 +3487,12 @@ var EditorToolbar = ({
   const isMedium = variant === "medium";
   const isMediumFull = variant === "medium-full";
   const isFull = variant === "default" || variant === "full" || variant === "notion" || !variant;
+  const applyFontSizeDraft = () => {
+    const parsed = Number.parseFloat(fontSizeDraft);
+    if (!Number.isFinite(parsed)) return;
+    editor.chain().focus().setFontSize(`${parsed}px`).run();
+    setFontSizeDraft(String(parsed));
+  };
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -3633,25 +3661,47 @@ var EditorToolbar = ({
         (isMediumFull || isFull) && /* @__PURE__ */ jsx7(
           DropdownMenu,
           {
-            trigger: /* @__PURE__ */ jsxs5(
-              ToolbarButton,
-              {
-                onClick: () => {
-                },
-                title: t("toolbar.fontSize"),
-                className: "h-7 w-14 justify-between gap-1 border border-[rgba(196,197,213,0.6)] bg-white px-2 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
-                children: [
-                  /* @__PURE__ */ jsx7("span", { className: "text-xs font-normal leading-none", children: displayedFontSizeLabel }),
-                  /* @__PURE__ */ jsx7(FigmaChevronDownIcon, { className: "h-3 w-3 shrink-0 text-[#7B8184]" })
-                ]
-              }
-            ),
+            trigger: /* @__PURE__ */ jsxs5("div", { className: "flex h-7 w-14 items-center rounded-md border border-[rgba(196,197,213,0.6)] bg-white text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] dark:bg-background dark:text-foreground", children: [
+              /* @__PURE__ */ jsx7(
+                "input",
+                {
+                  type: "number",
+                  step: 1,
+                  value: isEditingFontSize ? fontSizeDraft : displayedFontSizeLabel,
+                  onFocus: () => {
+                    setFontSizeDraft(displayedFontSizeLabel);
+                    setIsEditingFontSize(true);
+                  },
+                  onChange: (event) => setFontSizeDraft(event.target.value),
+                  onBlur: () => {
+                    applyFontSizeDraft();
+                    setIsEditingFontSize(false);
+                  },
+                  onMouseDown: (event) => event.stopPropagation(),
+                  onClick: (event) => event.stopPropagation(),
+                  onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      applyFontSizeDraft();
+                      setIsEditingFontSize(false);
+                    }
+                  },
+                  "aria-label": t("toolbar.fontSize"),
+                  className: "min-w-0 flex-1 bg-transparent px-2 text-xs font-normal leading-none outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                }
+              ),
+              /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": t("toolbar.fontSize"), title: t("toolbar.fontSize"), className: "px-1 text-[#7B8184]", children: /* @__PURE__ */ jsx7(FigmaChevronDownIcon, { className: "h-3 w-3" }) })
+            ] }),
             contentClassName: "max-h-80 overflow-y-auto min-w-32 p-2",
             children: availableFontSizes.map((option) => /* @__PURE__ */ jsx7(
               DropdownMenuItem,
               {
                 label: option.label,
-                onClick: () => editor.chain().focus().setFontSize(option.value).run(),
+                onClick: () => {
+                  editor.chain().focus().setFontSize(option.value).run();
+                  setFontSizeDraft(option.label);
+                },
                 active: normalizeStyleValue(option.value) === activeFontSize
               },
               option.value
@@ -4608,4 +4658,4 @@ export {
   EditorToolbar,
   UEDITOR_PROSEMIRROR_CLASS_NAME
 };
-//# sourceMappingURL=chunk-3Q5EE2ZA.js.map
+//# sourceMappingURL=chunk-23VKHYEB.js.map