@underverse-ui/underverse 1.0.211 → 2.0.1

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

@@ -1,11 +1,11 @@
 import {
   getPanelBorderRadiusClass,
   useUnderverseUIConfig
-} from "./chunk-AMAILXHP.js";
+} from "./chunk-Z6WE65J2.js";
 import {
   cn,
   useGlobalI18n
-} from "./chunk-BRDGIALS.js";
+} from "./chunk-PLHJWXCW.js";
 
 // src/components/Modal.tsx
 import * as React from "react";
@@ -196,4 +196,4 @@ var Modal_default = Modal;
 export {
   Modal_default
 };
-//# sourceMappingURL=chunk-GKY5DHGR.js.map
+//# sourceMappingURL=chunk-UNDGI6ZI.js.map

package/dist/{chunk-4E43DRP2.js → chunk-Y7SQKJ7X.js}

@@ -1,7 +1,7 @@
 import {
   EmojiGridButton,
   formatEmojiCountLabel
-} from "./chunk-CYCBSKWI.js";
+} from "./chunk-KGNYK5YF.js";
 import {
   COLUMN_RESIZE_LINE_THICKNESS,
   CellBgColorIcon,
@@ -53,12 +53,12 @@ import {
   sanitizeUEditorUrl,
   useEditorColors,
   useSharedEditorUiRenderState
-} from "./chunk-AMAILXHP.js";
+} from "./chunk-Z6WE65J2.js";
 import {
   Tooltip,
   cn,
   useSmartTranslations
-} from "./chunk-BRDGIALS.js";
+} from "./chunk-PLHJWXCW.js";
 
 // src/components/UEditor/prepare-content-for-save.ts
 var MIME_EXTENSION_MAP = {
@@ -508,7 +508,7 @@ import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 var LazyBaseEmojiPicker = React.lazy(async () => {
-  const { EmojiPicker: EmojiPicker2 } = await import("./EmojiPicker-FEJJDAWZ.js");
+  const { EmojiPicker: EmojiPicker2 } = await import("./EmojiPicker-34YATB7Z.js");
   return { default: EmojiPicker2 };
 });
 var EmojiPicker = ({ onSelect }) => {
@@ -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) => {
@@ -12131,7 +12189,7 @@ function TableResizeHandles({
       "data-resizing": active ? "true" : "false",
       className: cn(
         "pointer-events-none absolute z-[38] box-border border border-primary/55",
-        active && "border-primary bg-primary/[0.03]"
+        active && "border-primary bg-primary/3"
       ),
       style: {
         left: layout.tableLeft,
@@ -14180,11 +14238,17 @@ function useUEditorOutput({
   onJsonChange,
   outputDebounceMs
 }) {
-  const callbacksRef = React14.useRef({});
+  const callbacksRef = React14.useRef({
+    onChange,
+    onHtmlChange,
+    onJsonChange
+  });
   const pendingEditorRef = React14.useRef(null);
   const timeoutRef = React14.useRef(null);
   const debounceMs = normalizeDebounceMs(outputDebounceMs);
-  callbacksRef.current = { onChange, onHtmlChange, onJsonChange };
+  React14.useLayoutEffect(() => {
+    callbacksRef.current = { onChange, onHtmlChange, onJsonChange };
+  }, [onChange, onHtmlChange, onJsonChange]);
   const flushOutputUpdates = React14.useCallback(() => {
     if (timeoutRef.current !== null) {
       clearTimeout(timeoutRef.current);
@@ -14239,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-6GS5LLTD.js");
+  const { MenuBar } = await import("./menu-bar-AAD3LQTN.js");
   return { default: MenuBar };
 });
 var UEditor = React15.forwardRef(({
@@ -14689,4 +14753,4 @@ export {
   prepareUEditorContentForSave,
   UEditor_default
 };
-//# sourceMappingURL=chunk-4E43DRP2.js.map
+//# sourceMappingURL=chunk-Y7SQKJ7X.js.map