@underverse-ui/underverse 2.0.0 → 2.0.1

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "sourceEntry": "src/index.ts",
   "totalExports": 256,
   "exports": [

package/dist/{chunk-MNZVW2QX.js → chunk-UNDGI6ZI.js}

@@ -1,7 +1,7 @@
 import {
   getPanelBorderRadiusClass,
   useUnderverseUIConfig
-} from "./chunk-LTIU5FQY.js";
+} from "./chunk-Z6WE65J2.js";
 import {
   cn,
   useGlobalI18n
@@ -196,4 +196,4 @@ var Modal_default = Modal;
 export {
   Modal_default
 };
-//# sourceMappingURL=chunk-MNZVW2QX.js.map
+//# sourceMappingURL=chunk-UNDGI6ZI.js.map

package/dist/{chunk-QIMAN4VF.js → chunk-Y7SQKJ7X.js}

@@ -53,7 +53,7 @@ import {
   sanitizeUEditorUrl,
   useEditorColors,
   useSharedEditorUiRenderState
-} from "./chunk-LTIU5FQY.js";
+} from "./chunk-Z6WE65J2.js";
 import {
   Tooltip,
   cn,
@@ -5928,15 +5928,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 = setCellAttr2("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 applyTableCellAttribute(editor, name, value, options = {}) {
   const shouldFocus = options.focus ?? true;
@@ -5994,6 +5997,30 @@ function BorderPositionPreviewIcon({ position }) {
     showVertical && /* @__PURE__ */ jsx12("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";
@@ -6159,24 +6186,34 @@ var BubbleMenuContent = ({
     setActiveColorPalette(null);
     onKeepOpenChange?.(false);
   }, [onKeepOpenChange]);
-  const applyInlineColorAndClose = useCallback((color) => {
+  const applyInlineColor = 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 = useCallback((color) => {
+    applyInlineColor(color, true);
     closeColorPalette();
-  }, [activeColorPalette, closeColorPalette, editor]);
+  }, [applyInlineColor, closeColorPalette]);
+  const applyCustomColor = useCallback((color) => {
+    applyInlineColor(color, false);
+  }, [applyInlineColor]);
   useEffect5(() => {
     if (!showLinkInput) return;
     const close2 = () => setShowLinkInput(false);
@@ -6371,6 +6408,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"
       }
     ) });
@@ -6657,6 +6695,7 @@ var BubbleMenuContent = ({
       /* @__PURE__ */ jsx12(
         ToolbarButton,
         {
+          onMouseDown: () => onKeepOpenChange?.(true),
           onClick: () => setActiveColorPalette("cell-bg"),
           active: Boolean(currentCellBgColor),
           title: t("tableMenu.cellBackground") || "Cell background",
@@ -6888,6 +6927,8 @@ var CustomBubbleMenu = ({
     placement: "top"
   });
   const menuRef = useRef4(null);
+  const updatePositionRef = useRef4(() => {
+  });
   const keepOpenRef = useRef4(false);
   const [keepOpen, setKeepOpenState] = useState5(false);
   const showTimeoutRef = useRef4(null);
@@ -6945,19 +6986,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);
@@ -6986,8 +7023,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);
@@ -6995,6 +7035,24 @@ var CustomBubbleMenu = ({
       editor.off("blur", handleBlur);
     };
   }, [editor]);
+  useEffect5(() => {
+    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]);
   useEffect5(() => {
     if (!isVisible) return;
     const handlePointerDown = (event) => {
@@ -14245,7 +14303,7 @@ function useUEditorOutput({
 // src/components/UEditor/UEditor.tsx
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var LazyMenuBar = React15.lazy(async () => {
-  const { MenuBar } = await import("./menu-bar-SPAAI5X6.js");
+  const { MenuBar } = await import("./menu-bar-AAD3LQTN.js");
   return { default: MenuBar };
 });
 var UEditor = React15.forwardRef(({
@@ -14695,4 +14753,4 @@ export {
   prepareUEditorContentForSave,
   UEditor_default
 };
-//# sourceMappingURL=chunk-QIMAN4VF.js.map
+//# sourceMappingURL=chunk-Y7SQKJ7X.js.map