@underverse-ui/underverse 2.0.0 → 2.0.2

package/dist/index.cjs

@@ -4928,6 +4928,9 @@ function getClipboardData(dataTransfer, type) {
     return "";
   }
 }
+function hasClipboardHtmlTable(dataTransfer) {
+  return /<table(?:\s|>)/i.test(getClipboardData(dataTransfer, "text/html"));
+}
 function extractClipboardHtmlFragment(html) {
   const startMarker = "<!--StartFragment-->";
   const endMarker = "<!--EndFragment-->";
@@ -4938,6 +4941,13 @@ function extractClipboardHtmlFragment(html) {
   }
   return html;
 }
+function hasMeaningfulContentOutsideTable(container) {
+  const clone = container.cloneNode(true);
+  clone.querySelectorAll("table, style, script, meta, link").forEach((element) => element.remove());
+  const remainingText = (clone.textContent ?? "").replace(/\u00a0/g, " ").replace(/\u200b/g, "").trim();
+  if (remainingText) return true;
+  return !!clone.querySelector("img, video, audio, iframe, object, embed, svg, canvas, hr, input, textarea, select, button");
+}
 function normalizeClipboardCellText(value) {
   return value.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\u00a0/g, " ").replace(/[ \t]+\n/g, "\n").replace(/\n[ \t]+/g, "\n").replace(/\n+$/g, "").replace(/^\n+/g, "").trim();
 }
@@ -5548,7 +5558,10 @@ function getClipboardTableContent(dataTransfer) {
   const fragment = extractClipboardHtmlFragment(html);
   const fragmentDoc = new DOMParser().parseFromString(fragment, "text/html");
   const styleMap = parseClipboardCssClassStyles(doc);
-  const table = fragmentDoc.querySelector("table") ?? doc.querySelector("table");
+  const sourceBody = fragmentDoc.querySelector("table") ? fragmentDoc.body : doc.body;
+  const tables = sourceBody.querySelectorAll("table");
+  if (tables.length !== 1 || hasMeaningfulContentOutsideTable(sourceBody)) return null;
+  const table = tables[0];
   if (!(table instanceof HTMLTableElement)) return null;
   return createTableContent(getHtmlTableRows(table, styleMap), 1, {
     backgroundColor: DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR
@@ -5727,6 +5740,7 @@ var init_clipboard_images = __esm({
                   editor.chain().focus().insertContent(tableContent).run();
                   return true;
                 }
+                if (hasClipboardHtmlTable(event.clipboardData)) return false;
                 const tsvTableContent = getClipboardTsvTableContent(event.clipboardData);
                 if (tsvTableContent) {
                   event.preventDefault();
@@ -6416,7 +6430,7 @@ var init_colors = __esm({
   "src/components/UEditor/colors.tsx"() {
     "use strict";
     "use client";
-    import_react71 = require("react");
+    import_react71 = __toESM(require("react"), 1);
     init_useSmartTranslations();
     import_lucide_react50 = require("lucide-react");
     init_cn();
@@ -6584,12 +6598,25 @@ var init_colors = __esm({
       colors,
       currentColor,
       onSelect,
+      onCustomColorSelect,
       label
     }) => {
       const t = useSmartTranslations("UEditor");
       const colorInputRef = (0, import_react71.useRef)(null);
       const automaticColor = colors[0]?.color ?? "";
       const paletteColors = colors.slice(1);
+      const customColorSelect = onCustomColorSelect ?? onSelect;
+      import_react71.default.useEffect(() => {
+        const input = colorInputRef.current;
+        if (!input) return;
+        const commitColor = () => customColorSelect(input.value);
+        input.addEventListener("change", commitColor);
+        return () => input.removeEventListener("change", commitColor);
+      }, [customColorSelect]);
+      import_react71.default.useEffect(() => {
+        const input = colorInputRef.current;
+        if (input) input.value = currentColor.startsWith("#") ? currentColor : "#000000";
+      }, [currentColor]);
       return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "w-56 p-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
@@ -6643,20 +6670,19 @@ var init_colors = __esm({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "flex-1 text-center", children: t("colors.moreColors") }),
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react50.Palette, { className: "h-4 w-4 text-muted-foreground" }),
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-                "input",
-                {
-                  ref: colorInputRef,
-                  type: "color",
-                  value: currentColor.startsWith("#") ? currentColor : "#000000",
-                  onChange: (event) => onSelect(event.target.value),
-                  className: "sr-only",
-                  tabIndex: -1
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react50.Palette, { className: "h-4 w-4 text-muted-foreground" })
             ]
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          "input",
+          {
+            ref: colorInputRef,
+            type: "color",
+            defaultValue: currentColor.startsWith("#") ? currentColor : "#000000",
+            className: "sr-only",
+            tabIndex: -1
+          }
         )
       ] });
     };
@@ -13684,19 +13710,19 @@ var variantStyles5 = {
   },
   underline: {
     container: "relative border-b border-border/60",
-    tab: "relative transition-colors duration-200 pb-3 border-b-2 border-transparent hover:border-primary/30",
+    tab: "relative transition-colors duration-200 border-b-2 border-transparent hover:border-primary/30",
     activeTab: "text-primary border-primary font-semibold",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   },
   card: {
-    container: "space-y-1.5 bg-muted/20 p-2 rounded-2xl border border-border/30",
+    container: "bg-muted/20 p-1.5 rounded-2xl border border-border/30",
     tab: "rounded-xl border border-transparent transition-all duration-200",
     activeTab: "bg-primary text-primary-foreground border-primary shadow-md",
     inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border/50"
   },
   "underline-card": {
     container: "border-b border-border/60 bg-card/80 backdrop-blur-sm rounded-t-2xl p-1",
-    tab: "relative transition-all duration-200 pb-3 px-4 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
+    tab: "relative transition-all duration-200 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
     activeTab: "text-primary border-primary font-semibold bg-accent/30",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
@@ -13806,7 +13832,7 @@ var Tabs = ({
   }, [baseId, tabs]);
   const containerClasses = cn(
     "relative",
-    orientation === "horizontal" ? "w-full flex space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
+    orientation === "horizontal" ? "w-full flex items-center space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
     variantStyles5[variant].container,
     className
   );
@@ -13841,10 +13867,7 @@ var Tabs = ({
           tab.href && tab.disabled && "pointer-events-none cursor-not-allowed opacity-50"
         );
         const sharedStyle = {
-          boxShadow: "none",
-          transform: "none",
-          outline: "none",
-          border: "none"
+          outline: "none"
         };
         const sharedProps = {
           ref: (el) => {
@@ -24800,7 +24823,7 @@ var MultiCombobox = ({
             );
           }),
           hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg shrink-0", sizeStyles8[size].tag), children: gi18n.moreCount ? gi18n.moreCount(hiddenCount) : `+${hiddenCount} more` })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "text-muted-foreground"), children: placeholder }) }),
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "text-left text-muted-foreground"), children: placeholder }) }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-1.5 shrink-0", children: [
           showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "div",
@@ -26247,9 +26270,8 @@ var defaultLabels = {
   searchPlaceholder: "Search...",
   noResultsText: "No results found"
 };
-var TREE_NODE_BASE_PADDING_REM = 0.75;
-var TREE_NODE_INDENT_REM = 1;
-var TREE_BRANCH_OFFSET_CLASS = "ml-1.5 pl-1.5";
+var TREE_NODE_BASE_PADDING_REM = 0;
+var TREE_NODE_INDENT_REM = 0.75;
 var TREE_NODE_GAP_CLASS = "gap-1.5";
 var TREE_EXPANDER_PLACEHOLDER_CLASS = "w-5";
 var CATEGORY_TREE_DROPDOWN_MAX_HEIGHT = 320;
@@ -26379,7 +26401,7 @@ function CategoryTreeSelect(props) {
     useOverlayScrollbar = false,
     leafOnlySelect = false,
     virtualized = false,
-    estimatedItemHeight = 44,
+    estimatedItemHeight = 36,
     overscan = 8,
     maxInitialOptions,
     searchMode = "auto",
@@ -26389,6 +26411,7 @@ function CategoryTreeSelect(props) {
     showSearchPromptWhenEmptyQuery = false,
     baseIndent = TREE_NODE_BASE_PADDING_REM,
     indentSize = TREE_NODE_INDENT_REM,
+    showTreeLines = true,
     renderItemActions,
     singleSelect = false,
     borderMode
@@ -26676,7 +26699,7 @@ function CategoryTreeSelect(props) {
       {
         ref: virtualItem ? treeVirtualizer.measureElement : void 0,
         "data-index": virtualItem?.index,
-        className: cn("min-w-0 [content-visibility:auto] [contain-intrinsic-size:44px]", !virtualItem && "animate-in fade-in-50 duration-200"),
+        className: cn("min-w-0 [content-visibility:auto] [contain-intrinsic-size:36px]", !virtualItem && "animate-in fade-in-50 duration-200"),
         style: { animationDelay: virtualItem ? void 0 : `${level * 30}ms`, ...rowStyle },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
@@ -26688,7 +26711,7 @@ function CategoryTreeSelect(props) {
               "aria-selected": viewOnly ? void 0 : isSelected,
               onClick: () => !viewOnly && handleSelect(category.id, category),
               className: cn(
-                "relative flex min-w-0 items-center px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
+                "relative flex min-h-9 min-w-0 items-center rounded-3xl transition-all duration-200",
                 TREE_NODE_GAP_CLASS,
                 !viewOnly && (isSelectable ? "cursor-pointer" : "cursor-default"),
                 isSelectable && !isSelected && "hover:bg-accent/50",
@@ -26698,6 +26721,16 @@ function CategoryTreeSelect(props) {
               ),
               style: { paddingLeft: `${level * indentSize + baseIndent}rem` },
               children: [
+                virtualItem && showTreeLines && Array.from({ length: level }, (_, ancestorLevel) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "span",
+                  {
+                    "data-tree-line": true,
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute inset-y-0 w-px border-l border-dashed border-border/50",
+                    style: { left: `${ancestorLevel * indentSize + baseIndent + 0.5}rem` }
+                  },
+                  ancestorLevel
+                )),
                 hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                   "button",
                   {
@@ -26746,16 +26779,23 @@ function CategoryTreeSelect(props) {
               ]
             }
           ),
-          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
             "div",
             {
               role: "group",
-              className: cn(
-                TREE_BRANCH_OFFSET_CLASS,
-                "border-l-2 border-dashed border-border/50",
-                "animate-in slide-in-from-top-2 fade-in-50 duration-200"
-              ),
-              children: children.map((child) => renderCategoryRow(child, level + 1))
+              className: "relative animate-in fade-in-50 slide-in-from-top-2 duration-200",
+              children: [
+                showTreeLines && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "span",
+                  {
+                    "data-tree-line": true,
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute inset-y-0 w-px border-l border-dashed border-border/50",
+                    style: { left: `${level * indentSize + baseIndent + 0.5}rem` }
+                  }
+                ),
+                children.map((child) => renderCategoryRow(child, level + 1))
+              ]
             }
           )
         ]
@@ -30902,6 +30942,7 @@ function DataTableBodyRows({
                 style: getStickyColumnStyle(col),
                 className: cn(
                   cellPadding,
+                  (!col.align || col.align === "left") && "text-left",
                   col.align === "right" && "text-right",
                   col.align === "center" && "text-center",
                   showBorderLeft && "border-l border-border/60",
@@ -31107,16 +31148,17 @@ function DataTableHeader({
             className: cn(
               "flex items-center gap-1",
               headerMinHeightClass,
-              col.align === "right" && "justify-end",
-              col.align === "center" && "justify-center",
-              !col.align && "justify-start"
+              (col.headerAlign ?? headerAlign) === "right" && "justify-end",
+              (col.headerAlign ?? headerAlign) === "center" && "justify-center",
+              (col.headerAlign ?? headerAlign) === "left" && "justify-start"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title })
           }
         );
       }
-      const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
-      const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+      const resolvedHeaderAlign = col.headerAlign ?? headerAlign;
+      const isRightAlign = resolvedHeaderAlign === "right";
+      const isCenterAlign = resolvedHeaderAlign === "center";
       const columnLabel = getColumnLabel(col.title) || col.key;
       const sortByText = sortByLabel ?? gi18n.sortBy ?? "Sort by";
       const sortLabel = `${sortByText} ${columnLabel}`;
@@ -31278,8 +31320,8 @@ function DataTableHeader({
         },
         className: cn(
           "relative",
-          (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
-          (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
+          (col.headerAlign ?? headerAlign) === "right" && "text-right",
+          (col.headerAlign ?? headerAlign) === "center" && "text-center",
           showBorderLeft && "border-l border-border/60",
           getStickyHeaderClass(col)
         ),
@@ -31801,7 +31843,7 @@ function useDataTableState({
   const allLeafColumns = import_react40.default.useMemo(() => getLeafColumns(columns), [columns]);
   const defaultVisibleLeafKeys = import_react40.default.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
   const knownLeafKeysRef = import_react40.default.useRef(new Set(defaultVisibleLeafKeys));
-  const [headerAlign, setHeaderAlign] = import_react40.default.useState("left");
+  const [headerAlign, setHeaderAlign] = import_react40.default.useState("center");
   const [visibleCols, setVisibleCols] = import_react40.default.useState(defaultVisibleLeafKeys);
   const [filters, setFilters] = import_react40.default.useState({});
   const [sort, setSort] = import_react40.default.useState(null);
@@ -38601,15 +38643,18 @@ var FloatingMenuContent = ({ editor }) => {
     }
   );
 };
-function applyTableCellBackground(editor, color) {
+function applyTableCellBackground(editor, color, options = {}) {
+  const shouldFocus = options.focus ?? true;
   const value = color || null;
   const { state, view } = editor;
   const applied = (0, import_tables8.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
   if (applied) {
-    view.focus();
+    if (shouldFocus) view.focus();
     return;
   }
-  editor.chain().focus().setCellAttribute("backgroundColor", value).run();
+  const chain = editor.chain();
+  if (shouldFocus) chain.focus();
+  chain.setCellAttribute("backgroundColor", value).run();
 }
 function applyTableCellAttribute2(editor, name, value, options = {}) {
   const shouldFocus = options.focus ?? true;
@@ -38667,6 +38712,30 @@ function BorderPositionPreviewIcon({ position }) {
     showVertical && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M10 2V18", strokeWidth: "2" })
   ] });
 }
+function getBubbleMenuPosition({
+  start,
+  end,
+  menuSize,
+  viewport,
+  offset = 16,
+  padding = 8
+}) {
+  const selectionTop = Math.min(start.top, end.top);
+  const selectionBottom = Math.max(start.bottom, end.bottom);
+  const spaceAbove = selectionTop - offset - padding;
+  const spaceBelow = viewport.height - padding - selectionBottom - offset;
+  const placement = menuSize.height <= spaceAbove || spaceAbove >= spaceBelow ? "top" : "bottom";
+  const halfWidth = menuSize.width / 2;
+  const minLeft = padding + halfWidth;
+  const maxLeft = viewport.width - padding - halfWidth;
+  const selectionCenter = (start.left + end.left) / 2;
+  const left = maxLeft >= minLeft ? Math.min(maxLeft, Math.max(minLeft, selectionCenter)) : viewport.width / 2;
+  const requestedTop = placement === "top" ? selectionTop - offset : selectionBottom + offset;
+  const minTop = placement === "top" ? padding + menuSize.height : padding;
+  const maxTop = placement === "top" ? viewport.height - padding : viewport.height - padding - menuSize.height;
+  const top = maxTop >= minTop ? Math.min(maxTop, Math.max(minTop, requestedTop)) : Math.max(padding, requestedTop);
+  return { top, left, placement };
+}
 function getBubbleMenuContext(editor) {
   const { selection } = editor.state;
   if (editor.isActive("image")) return "image";
@@ -38832,24 +38901,34 @@ var BubbleMenuContent = ({
     setActiveColorPalette(null);
     onKeepOpenChange?.(false);
   }, [onKeepOpenChange]);
-  const applyInlineColorAndClose = (0, import_react75.useCallback)((color) => {
+  const applyInlineColor = (0, import_react75.useCallback)((color, focus) => {
     if (activeColorPalette === "text") {
+      const chain = editor.chain();
+      if (focus) chain.focus();
       if (color === "inherit") {
-        editor.chain().focus().unsetColor().run();
+        chain.unsetColor().run();
       } else {
-        editor.chain().focus().setColor(color).run();
+        chain.setColor(color).run();
       }
     } else if (activeColorPalette === "highlight") {
+      const chain = editor.chain();
+      if (focus) chain.focus();
       if (color === "") {
-        editor.chain().focus().unsetHighlight().run();
+        chain.unsetHighlight().run();
       } else {
-        editor.chain().focus().toggleHighlight({ color }).run();
+        chain.toggleHighlight({ color }).run();
       }
     } else {
-      applyTableCellBackground(editor, color);
+      applyTableCellBackground(editor, color, { focus });
     }
+  }, [activeColorPalette, editor]);
+  const applyInlineColorAndClose = (0, import_react75.useCallback)((color) => {
+    applyInlineColor(color, true);
     closeColorPalette();
-  }, [activeColorPalette, closeColorPalette, editor]);
+  }, [applyInlineColor, closeColorPalette]);
+  const applyCustomColor = (0, import_react75.useCallback)((color) => {
+    applyInlineColor(color, false);
+  }, [applyInlineColor]);
   (0, import_react75.useEffect)(() => {
     if (!showLinkInput) return;
     const close2 = () => setShowLinkInput(false);
@@ -39044,6 +39123,7 @@ var BubbleMenuContent = ({
         colors: isTextPalette ? textColors : highlightColors,
         currentColor: isTextPalette ? currentTextColor : isHighlightPalette ? currentHighlightColor : currentCellBgColor,
         onSelect: applyInlineColorAndClose,
+        onCustomColorSelect: applyCustomColor,
         label: isTextPalette ? t("colors.textColor") : isHighlightPalette ? t("colors.highlight") : t("tableMenu.cellBackground") || "Cell background"
       }
     ) });
@@ -39330,6 +39410,7 @@ var BubbleMenuContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         ToolbarButton,
         {
+          onMouseDown: () => onKeepOpenChange?.(true),
           onClick: () => setActiveColorPalette("cell-bg"),
           active: Boolean(currentCellBgColor),
           title: t("tableMenu.cellBackground") || "Cell background",
@@ -39561,6 +39642,8 @@ var CustomBubbleMenu = ({
     placement: "top"
   });
   const menuRef = (0, import_react75.useRef)(null);
+  const updatePositionRef = (0, import_react75.useRef)(() => {
+  });
   const keepOpenRef = (0, import_react75.useRef)(false);
   const [keepOpen, setKeepOpenState] = (0, import_react75.useState)(false);
   const showTimeoutRef = (0, import_react75.useRef)(null);
@@ -39618,19 +39701,15 @@ var CustomBubbleMenu = ({
         setIsVisible(false);
         return;
       }
-      const viewportPadding = 8;
       const menuHeight = menuRef.current?.getBoundingClientRect().height || BUBBLE_MENU_ESTIMATED_HEIGHT;
-      const editorTop = view.dom.getBoundingClientRect().top;
-      const selectionTop = Math.min(start.top, end.top);
-      const selectionBottom = Math.max(start.bottom, end.bottom);
-      const hasRoomAboveEditor = selectionTop - BUBBLE_MENU_OFFSET - menuHeight >= editorTop + viewportPadding;
-      const placement = hasRoomAboveEditor ? "top" : "bottom";
-      const left = Math.min(
-        window.innerWidth - viewportPadding,
-        Math.max(viewportPadding, (start.left + end.left) / 2)
-      );
-      const top = placement === "top" ? Math.max(viewportPadding, selectionTop - BUBBLE_MENU_OFFSET) : Math.min(window.innerHeight - viewportPadding, selectionBottom + BUBBLE_MENU_OFFSET);
-      setPosition2({ top, left, placement });
+      const menuWidth = menuRef.current?.getBoundingClientRect().width || 0;
+      setPosition2(getBubbleMenuPosition({
+        start,
+        end,
+        menuSize: { width: menuWidth, height: menuHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        offset: BUBBLE_MENU_OFFSET
+      }));
       if (keepOpenRef.current) {
         clearShowTimeout();
         setIsVisible(true);
@@ -39659,8 +39738,11 @@ var CustomBubbleMenu = ({
     editor.on("transaction", schedulePositionUpdate);
     editor.on("focus", schedulePositionUpdate);
     editor.on("blur", handleBlur);
+    updatePositionRef.current = updatePosition;
     schedulePositionUpdate();
     return () => {
+      updatePositionRef.current = () => {
+      };
       if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
       clearShowTimeout();
       editor.off("transaction", schedulePositionUpdate);
@@ -39668,6 +39750,24 @@ var CustomBubbleMenu = ({
       editor.off("blur", handleBlur);
     };
   }, [editor]);
+  (0, import_react75.useEffect)(() => {
+    if (!isVisible || typeof ResizeObserver === "undefined") return;
+    const menu = menuRef.current;
+    if (!menu) return;
+    let animationFrameId = null;
+    const observer = new ResizeObserver(() => {
+      if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+      animationFrameId = requestAnimationFrame(() => {
+        animationFrameId = null;
+        updatePositionRef.current();
+      });
+    });
+    observer.observe(menu);
+    return () => {
+      if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+      observer.disconnect();
+    };
+  }, [isVisible]);
   (0, import_react75.useEffect)(() => {
     if (!isVisible) return;
     const handlePointerDown = (event) => {