art-bd-ui 1.0.39 → 1.0.41

package/dist/cjs/components/ui/rich-editor/bubble-menus/block-drag-handle-controls.js

@@ -0,0 +1,282 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$2 = require('../../../../node_modules/prosemirror-model/dist/index.js');
+var index$1 = require('../../../../node_modules/prosemirror-state/dist/index.js');
+var index = require('../../../../node_modules/@tiptap/extension-drag-handle-react/dist/index.js');
+require('../extensions/slash/slash.js');
+var defaultSuggestions = require('../extensions/slash/default-suggestions.js');
+require('../extensions/slash/slash-menu.js');
+require('../../../../node_modules/@tiptap/suggestion/dist/index.js');
+var button = require('../../../buttons/button/button.js');
+var tooltip = require('../../../popovers/tooltip/tooltip.js');
+var dropdownMenu = require('../../dropdown-menu/dropdown-menu.js');
+var plus = require('../../../../node_modules/lucide-react/dist/esm/icons/plus.js');
+var gripVertical = require('../../../../node_modules/lucide-react/dist/esm/icons/grip-vertical.js');
+var trash2 = require('../../../../node_modules/lucide-react/dist/esm/icons/trash-2.js');
+var eraser = require('../../../../node_modules/lucide-react/dist/esm/icons/eraser.js');
+var clipboard = require('../../../../node_modules/lucide-react/dist/esm/icons/clipboard.js');
+var copy = require('../../../../node_modules/lucide-react/dist/esm/icons/copy.js');
+var textAlignStart = require('../../../../node_modules/lucide-react/dist/esm/icons/text-align-start.js');
+var textAlignCenter = require('../../../../node_modules/lucide-react/dist/esm/icons/text-align-center.js');
+var textAlignEnd = require('../../../../node_modules/lucide-react/dist/esm/icons/text-align-end.js');
+var textAlignJustify = require('../../../../node_modules/lucide-react/dist/esm/icons/text-align-justify.js');
+var listIndentIncrease = require('../../../../node_modules/lucide-react/dist/esm/icons/list-indent-increase.js');
+var listIndentDecrease = require('../../../../node_modules/lucide-react/dist/esm/icons/list-indent-decrease.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ALIGN_OPTIONS = [
+    { value: "left", label: "Left", icon: textAlignStart.default },
+    { value: "center", label: "Center", icon: textAlignCenter.default },
+    { value: "right", label: "Right", icon: textAlignEnd.default },
+    { value: "justify", label: "Justify", icon: textAlignJustify.default },
+];
+const INDENTABLE_NODE_TYPES = new Set(["paragraph", "heading"]);
+const DRAG_CLICK_THRESHOLD_PX = 4;
+const SUPPRESS_OPEN_AFTER_DRAG_MS = 220;
+const CONTROL_BUTTON_CLASS = "size-7 rounded-sm text-foreground/55 hover:bg-muted/40 hover:text-foreground";
+const DRAG_HANDLE_BUTTON_CLASS = `${CONTROL_BUTTON_CLASS} cursor-grab active:cursor-grabbing`;
+function groupItems(items) {
+    return items.reduce((acc, item) => {
+        const key = item.group || "General";
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(item);
+        return acc;
+    }, {});
+}
+function selectNodeTextContent(editor, pos, node) {
+    const from = pos + 1;
+    const to = pos + node.nodeSize - 1;
+    if (to < from)
+        return false;
+    const transaction = editor.state.tr.setSelection(index$1.TextSelection.create(editor.state.doc, from, to));
+    editor.view.dispatch(transaction);
+    editor.view.focus();
+    return true;
+}
+function copyNodeToClipboard(editor, pos, node) {
+    return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        if (typeof navigator === "undefined" || !navigator.clipboard)
+            return;
+        const fragment = editor.state.doc.slice(pos, pos + node.nodeSize).content;
+        const serializer = index$2.DOMSerializer.fromSchema(editor.state.schema);
+        const wrapper = document.createElement("div");
+        wrapper.appendChild(serializer.serializeFragment(fragment));
+        const html = wrapper.innerHTML;
+        const text = wrapper.textContent || "";
+        if (typeof ClipboardItem !== "undefined" && navigator.clipboard.write) {
+            try {
+                yield navigator.clipboard.write([
+                    new ClipboardItem({
+                        "text/plain": new Blob([text], { type: "text/plain" }),
+                        "text/html": new Blob([html], { type: "text/html" }),
+                    }),
+                ]);
+                return;
+            }
+            catch (_a) {
+                // fallback to plain text when rich clipboard write isn't available
+            }
+        }
+        yield navigator.clipboard.writeText(text || html);
+    });
+}
+function BlockDragHandleControls({ editor }) {
+    const [hoveredPos, setHoveredPos] = React__namespace.useState(-1);
+    const [addOpen, setAddOpen] = React__namespace.useState(false);
+    const [actionsOpen, setActionsOpen] = React__namespace.useState(false);
+    const [isDragging, setIsDragging] = React__namespace.useState(false);
+    const pointerStartRef = React__namespace.useRef(null);
+    const dragStartedRef = React__namespace.useRef(false);
+    const suppressOpenUntilRef = React__namespace.useRef(0);
+    const items = React__namespace.useMemo(() => defaultSuggestions.getDefaultSlashItems(editor), [editor]);
+    const groupedItems = React__namespace.useMemo(() => Object.entries(groupItems(items)), [items]);
+    const currentNode = hoveredPos >= 0 ? editor.state.doc.nodeAt(hoveredPos) : null;
+    const canIndent = !!currentNode && INDENTABLE_NODE_TYPES.has(currentNode.type.name);
+    const canClearFormatting = !!(currentNode === null || currentNode === void 0 ? void 0 : currentNode.isTextblock);
+    const getHoveredNodeData = React__namespace.useCallback(() => {
+        if (hoveredPos < 0)
+            return null;
+        const node = editor.state.doc.nodeAt(hoveredPos);
+        if (!node)
+            return null;
+        return { node, pos: hoveredPos };
+    }, [editor, hoveredPos]);
+    React__namespace.useEffect(() => {
+        editor.commands.setMeta("lockDragHandle", addOpen || actionsOpen);
+    }, [addOpen, actionsOpen, editor]);
+    React__namespace.useEffect(() => {
+        if (hoveredPos >= 0)
+            return;
+        setAddOpen(false);
+        setActionsOpen(false);
+    }, [hoveredPos]);
+    const handleDragStart = React__namespace.useCallback(() => {
+        dragStartedRef.current = true;
+        setIsDragging(true);
+        suppressOpenUntilRef.current = Date.now() + SUPPRESS_OPEN_AFTER_DRAG_MS;
+        pointerStartRef.current = null;
+        setAddOpen(false);
+        setActionsOpen(false);
+    }, []);
+    const handleDragEnd = React__namespace.useCallback(() => {
+        dragStartedRef.current = false;
+        setIsDragging(false);
+        suppressOpenUntilRef.current = Date.now() + SUPPRESS_OPEN_AFTER_DRAG_MS;
+        pointerStartRef.current = null;
+    }, []);
+    const handleActionsPointerDown = React__namespace.useCallback((event) => {
+        event.stopPropagation();
+        pointerStartRef.current = {
+            x: event.clientX,
+            y: event.clientY,
+            moved: false,
+        };
+    }, []);
+    const handleActionsPointerMove = React__namespace.useCallback((event) => {
+        const start = pointerStartRef.current;
+        if (!start)
+            return;
+        const dx = Math.abs(event.clientX - start.x);
+        const dy = Math.abs(event.clientY - start.y);
+        if (dx > DRAG_CLICK_THRESHOLD_PX || dy > DRAG_CLICK_THRESHOLD_PX) {
+            start.moved = true;
+        }
+    }, []);
+    const clearActionsPointerState = React__namespace.useCallback(() => {
+        pointerStartRef.current = null;
+    }, []);
+    const handleActionsPointerUp = React__namespace.useCallback((event) => {
+        event.stopPropagation();
+        const start = pointerStartRef.current;
+        pointerStartRef.current = null;
+        if (!start)
+            return;
+        if (start.moved || dragStartedRef.current)
+            return;
+        if (Date.now() < suppressOpenUntilRef.current)
+            return;
+        setAddOpen(false);
+        setActionsOpen((open) => !open);
+    }, []);
+    const handleActionsKeyboardToggle = React__namespace.useCallback((event) => {
+        if (event.key !== "Enter" && event.key !== " ") {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setAddOpen(false);
+        setActionsOpen((open) => !open);
+    }, []);
+    const runInsertCommand = React__namespace.useCallback((item) => {
+        const hovered = getHoveredNodeData();
+        const insertionPos = hovered ? hovered.pos + hovered.node.nodeSize : editor.state.selection.to;
+        editor
+            .chain()
+            .focus()
+            .insertContentAt(insertionPos, { type: "paragraph" })
+            .setTextSelection(insertionPos + 1)
+            .run();
+        item.command({ editor, range: { from: insertionPos + 1, to: insertionPos + 1 } });
+        setAddOpen(false);
+    }, [editor, getHoveredNodeData]);
+    const removeNode = React__namespace.useCallback(() => {
+        const hovered = getHoveredNodeData();
+        if (!hovered)
+            return;
+        editor
+            .chain()
+            .focus()
+            .deleteRange({ from: hovered.pos, to: hovered.pos + hovered.node.nodeSize })
+            .run();
+        setActionsOpen(false);
+    }, [editor, getHoveredNodeData]);
+    const clearFormatting = React__namespace.useCallback(() => {
+        const hovered = getHoveredNodeData();
+        if (!hovered)
+            return;
+        if (!selectNodeTextContent(editor, hovered.pos, hovered.node))
+            return;
+        editor.chain().focus().unsetAllMarks().clearNodes().unsetIndent().run();
+        setActionsOpen(false);
+    }, [editor, getHoveredNodeData]);
+    const duplicateNode = React__namespace.useCallback(() => {
+        const hovered = getHoveredNodeData();
+        if (!hovered)
+            return;
+        editor
+            .chain()
+            .focus()
+            .insertContentAt(hovered.pos + hovered.node.nodeSize, hovered.node.toJSON())
+            .run();
+        setActionsOpen(false);
+    }, [editor, getHoveredNodeData]);
+    const copyCurrentNode = React__namespace.useCallback(() => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        const hovered = getHoveredNodeData();
+        if (!hovered)
+            return;
+        yield copyNodeToClipboard(editor, hovered.pos, hovered.node);
+        setActionsOpen(false);
+    }), [editor, getHoveredNodeData]);
+    const setNodeAlignment = React__namespace.useCallback((alignment) => {
+        const hovered = getHoveredNodeData();
+        if (!hovered || !INDENTABLE_NODE_TYPES.has(hovered.node.type.name))
+            return;
+        if (!selectNodeTextContent(editor, hovered.pos, hovered.node))
+            return;
+        editor.chain().focus().setTextAlign(alignment).run();
+        setActionsOpen(false);
+    }, [editor, getHoveredNodeData]);
+    const changeIndent = React__namespace.useCallback((direction) => {
+        const hovered = getHoveredNodeData();
+        if (!hovered || !INDENTABLE_NODE_TYPES.has(hovered.node.type.name))
+            return;
+        if (!selectNodeTextContent(editor, hovered.pos, hovered.node))
+            return;
+        if (direction === "increase") {
+            editor.chain().focus().increaseIndent().run();
+        }
+        else {
+            editor.chain().focus().decreaseIndent().run();
+        }
+        setActionsOpen(false);
+    }, [editor, getHoveredNodeData]);
+    return (jsxRuntime.jsx(index.DragHandle, { editor: editor, className: "rich-editor-block-controls", onNodeChange: ({ pos }) => setHoveredPos(pos), onElementDragStart: handleDragStart, onElementDragEnd: handleDragEnd, computePositionConfig: {
+            placement: "left-start",
+            strategy: "fixed",
+        }, children: jsxRuntime.jsxs("div", { className: [
+                "flex items-center gap-0.5 transition-opacity",
+                isDragging ? "pointer-events-none opacity-0" : "opacity-100",
+            ].join(" "), children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { open: addOpen, onOpenChange: setAddOpen, children: [jsxRuntime.jsxs(tooltip.Tooltip, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: CONTROL_BUTTON_CLASS, draggable: false, "aria-label": "Add block", children: jsxRuntime.jsx(plus.default, { className: "size-4" }) }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { side: "top", sideOffset: 8, children: "Add block" })] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "start", side: "bottom", className: "max-h-[460px] w-72 overflow-y-auto", children: groupedItems.map(([groupName, groupItems], index) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [index > 0 && jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsx(dropdownMenu.DropdownMenuLabel, { className: "text-xs uppercase tracking-wide", children: groupName }), groupItems.map((item) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => runInsertCommand(item), children: [jsxRuntime.jsx(item.icon, { className: "size-4" }), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [jsxRuntime.jsx("span", { className: "truncate", children: item.title }), jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: item.description })] })] }, item.title)))] }, groupName))) })] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { open: actionsOpen, onOpenChange: setActionsOpen, children: [jsxRuntime.jsxs(tooltip.Tooltip, { children: [jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx("span", { "aria-hidden": "true", tabIndex: -1, className: "pointer-events-none absolute inset-0 block" }) }), jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: DRAG_HANDLE_BUTTON_CLASS, "aria-label": "Block options and drag handle", onPointerDown: handleActionsPointerDown, onPointerMove: handleActionsPointerMove, onPointerUp: handleActionsPointerUp, onPointerCancel: clearActionsPointerState, onPointerLeave: clearActionsPointerState, onClick: (event) => {
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                }, onKeyDown: handleActionsKeyboardToggle, children: jsxRuntime.jsx(gripVertical.default, { className: "size-4" }) }) })] }), jsxRuntime.jsx(tooltip.TooltipContent, { side: "top", sideOffset: 8, className: "max-w-40 text-center", children: "Click for options, hold for drag" })] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "start", side: "bottom", className: "w-56", children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: removeNode, variant: "destructive", children: [jsxRuntime.jsx(trash2.default, { className: "size-4" }), "Remove"] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: clearFormatting, disabled: !canClearFormatting, children: [jsxRuntime.jsx(eraser.default, { className: "size-4" }), "Clear Format"] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => void copyCurrentNode(), children: [jsxRuntime.jsx(clipboard.default, { className: "size-4" }), "Copy to Clipboard"] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: duplicateNode, children: [jsxRuntime.jsx(copy.default, { className: "size-4" }), "Duplicate"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuSubTrigger, { disabled: !canIndent, children: "Align" }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSubContent, { className: "w-40", children: ALIGN_OPTIONS.map((option) => {
+                                                const Icon = option.icon;
+                                                return (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => setNodeAlignment(option.value), children: [jsxRuntime.jsx(Icon, { className: "size-4" }), option.label] }, option.value));
+                                            }) })] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuSubTrigger, { disabled: !canIndent, children: "Indent" }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSubContent, { className: "w-40", children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => changeIndent("increase"), children: [jsxRuntime.jsx(listIndentIncrease.default, { className: "size-4" }), "Increase"] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => changeIndent("decrease"), children: [jsxRuntime.jsx(listIndentDecrease.default, { className: "size-4" }), "Decrease"] })] })] })] })] })] }) }));
+}
+
+exports.BlockDragHandleControls = BlockDragHandleControls;

package/dist/cjs/components/ui/rich-editor/bubble-menus/carousel-bubble-menu.js

@@ -74,7 +74,12 @@ function SortableThumbnail({ image, index, isActive, status, onClick }) {
             event.preventDefault();
             event.stopPropagation();
             onClick();
-        }, children: jsxRuntime.jsxs("div", { className: `relative h-14 w-20 overflow-hidden rounded border-2 transition-all ${isActive ? "border-primary ring-2 ring-primary/20" : "border-transparent hover:border-muted-foreground/50"} ${sortable.isDragging ? "scale-105 opacity-50 shadow-lg" : ""}`, children: [image.url ? (jsxRuntime.jsx("img", { src: image.url, alt: image.alt || "", className: "h-full w-full object-cover" })) : (jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-[10px] text-muted-foreground", children: "Empty" })), status === "uploading" && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: jsxRuntime.jsx(loaderCircle.default, { className: "size-3 animate-spin text-white" }) })), status === "error" && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-destructive/80", children: jsxRuntime.jsx(x.default, { className: "size-3 text-white" }) })), jsxRuntime.jsx("button", { type: "button", ref: sortable.handleRef, className: "absolute inset-0 flex touch-none items-center justify-center bg-black/0 opacity-0 transition-opacity hover:bg-black/40 group-hover:opacity-100", disabled: status === "uploading", children: jsxRuntime.jsx(gripVertical.default, { className: "size-4 text-white drop-shadow" }) })] }) }));
+        }, children: jsxRuntime.jsxs("div", { className: `relative h-14 w-20 overflow-hidden rounded border-2 transition-all ${isActive ? "border-primary ring-2 ring-primary/20" : "border-transparent hover:border-muted-foreground/50"} ${sortable.isDragging ? "scale-105 opacity-50 shadow-lg" : ""}`, children: [image.url ? (jsxRuntime.jsx("img", { src: image.url, alt: image.alt || "", className: "h-full w-full object-cover" })) : (jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-[10px] text-muted-foreground", children: "Empty" })), status === "uploading" && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: jsxRuntime.jsx(loaderCircle.default, { className: "size-3 animate-spin text-white" }) })), status === "error" && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-destructive/80", children: jsxRuntime.jsx(x.default, { className: "size-3 text-white" }) })), jsxRuntime.jsx("button", { type: "button", ref: sortable.handleRef, className: "absolute bottom-1 right-1 flex size-6 touch-none items-center justify-center rounded bg-black/55 opacity-0 transition-opacity hover:bg-black/70 group-hover:opacity-100 focus-visible:opacity-100 disabled:cursor-not-allowed disabled:opacity-40", onPointerDown: (event) => {
+                        event.stopPropagation();
+                    }, onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }, disabled: status === "uploading", "aria-label": "Reorder slide", children: jsxRuntime.jsx(gripVertical.default, { className: "size-4 text-white drop-shadow" }) })] }) }));
 }
 function SortableThumbnailList({ images, currentSlide, getUploadStatus, onReorder, onThumbnailClick, }) {
     const [activeId, setActiveId] = React.useState(null);
@@ -343,7 +348,7 @@ function CarouselBubbleMenu({ editor }) {
                     if (editOpen || settingsOpen || removeConfirmOpen)
                         return true;
                     return shared.isCarouselNodeSelection(state.selection);
-                }, updateDelay: 0, className: "rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1.5 px-2", onClick: openEditDialog, children: [jsxRuntime.jsx(pencil.default, { className: "size-4" }), "Edit"] }), jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1.5 px-2", onClick: openSettingsDialog, children: [jsxRuntime.jsx(settings2.default, { className: "size-4" }), "Settings"] }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1 h-5" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 px-2 text-destructive hover:text-destructive", onClick: () => {
+                }, updateDelay: 0, className: "relative z-30 rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1.5 px-2", onClick: openEditDialog, children: [jsxRuntime.jsx(pencil.default, { className: "size-4" }), "Edit"] }), jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1.5 px-2", onClick: openSettingsDialog, children: [jsxRuntime.jsx(settings2.default, { className: "size-4" }), "Settings"] }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1 h-5" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 px-2 text-destructive hover:text-destructive", onClick: () => {
                                 if (selectedPos !== null) {
                                     selectedPosRef.current = selectedPos;
                                 }

package/dist/cjs/components/ui/rich-editor/bubble-menus/code-block-bubble-menu.js

@@ -16,6 +16,7 @@ var tableSelectionOverlay = require('../extensions/table/table-selection-overlay
 require('../extensions/table/table-hover-extension.js');
 require('react-dom');
 require('../../../../node_modules/prosemirror-tables/dist/index.js');
+require('../toolbar/color-constants.js');
 require('../../dropdown-menu/dropdown-menu.js');
 var button = require('../../../buttons/button/button.js');
 require('../../../popovers/popover/popover.js');
@@ -47,7 +48,9 @@ function CodeBlockBubbleMenu({ editor }) {
     });
     return (jsxRuntime.jsx(index$1.BubbleMenu, { editor: editor, pluginKey: shared.codeBlockBubbleMenuPluginKey, shouldShow: ({ state, editor: bubbleEditor }) => languageMenuOpen ||
             themeMenuOpen ||
-            (bubbleEditor.isActive("codeBlock") && !shared.isImageNodeSelection(state.selection) && !tableSelectionOverlay.isCellSelection(state.selection)), updateDelay: 0, getReferencedVirtualElement: () => {
+            (bubbleEditor.isActive("codeBlock") &&
+                !shared.isImageNodeSelection(state.selection) &&
+                !tableSelectionOverlay.isCellSelection(state.selection)), updateDelay: 0, getReferencedVirtualElement: () => {
             const codeBlockElement = shared.getActiveCodeBlockElement(editor);
             if (!codeBlockElement) {
                 return null;
@@ -65,7 +68,7 @@ function CodeBlockBubbleMenu({ editor }) {
             flip: {
                 fallbackPlacements: ["bottom-end", "top-start", "bottom-start"],
             },
-        }, className: "rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsxs(select.Select, { value: activeCodeBlockLanguage, disabled: !editor.isEditable, onOpenChange: setLanguageMenuOpen, onValueChange: (value) => {
+        }, className: "relative z-30 rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsxs(select.Select, { value: activeCodeBlockLanguage, disabled: !editor.isEditable, onOpenChange: setLanguageMenuOpen, onValueChange: (value) => {
                         editor
                             .chain()
                             .focus()

package/dist/cjs/components/ui/rich-editor/bubble-menus/columns-bubble-menu.js

@@ -53,7 +53,7 @@ function ColumnsBubbleMenu({ editor }) {
             flip: {
                 fallbackPlacements: ["top-start", "bottom-end", "top-end"],
             },
-        }, className: "rounded-xl border bg-popover p-1 shadow-md", children: isInColumn && (jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", onClick: () => editor.chain().focus().addColBefore().run(), "aria-label": "Add column before", title: "Add column before", children: jsxRuntime.jsx(panelLeftOpen.default, { className: "size-4" }) }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", onClick: () => editor.chain().focus().addColAfter().run(), "aria-label": "Add column after", title: "Add column after", children: jsxRuntime.jsx(panelRightOpen.default, { className: "size-4" }) }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", onClick: () => editor.chain().focus().deleteCol().run(), disabled: columnCount <= 1, "aria-label": "Delete column", title: columnCount <= 1 ? "Cannot delete the last column" : "Delete column", children: jsxRuntime.jsx(panelLeftClose.default, { className: "size-4" }) }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1 h-5" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8 text-destructive hover:text-destructive", onClick: () => editor.chain().focus().deleteNode("columns").run(), "aria-label": "Delete columns block", title: "Delete columns block", children: jsxRuntime.jsx(trash2.default, { className: "size-4" }) })] })) }));
+        }, className: "relative z-30 rounded-xl border bg-popover p-1 shadow-md", children: isInColumn && (jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", onClick: () => editor.chain().focus().addColBefore().run(), "aria-label": "Add column before", title: "Add column before", children: jsxRuntime.jsx(panelLeftOpen.default, { className: "size-4" }) }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", onClick: () => editor.chain().focus().addColAfter().run(), "aria-label": "Add column after", title: "Add column after", children: jsxRuntime.jsx(panelRightOpen.default, { className: "size-4" }) }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", onClick: () => editor.chain().focus().deleteCol().run(), disabled: columnCount <= 1, "aria-label": "Delete column", title: columnCount <= 1 ? "Cannot delete the last column" : "Delete column", children: jsxRuntime.jsx(panelLeftClose.default, { className: "size-4" }) }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1 h-5" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8 text-destructive hover:text-destructive", onClick: () => editor.chain().focus().deleteNode("columns").run(), "aria-label": "Delete columns block", title: "Delete columns block", children: jsxRuntime.jsx(trash2.default, { className: "size-4" }) })] })) }));
 }
 
 exports.ColumnsBubbleMenu = ColumnsBubbleMenu;

package/dist/cjs/components/ui/rich-editor/bubble-menus/image-bubble-menu.js

@@ -28,7 +28,7 @@ function ImageBubbleMenu({ editor }) {
             };
         },
     });
-    return (jsxRuntime.jsx(index$1.BubbleMenu, { editor: editor, pluginKey: shared.imageBubbleMenuPluginKey, shouldShow: ({ state }) => shared.isImageNodeSelection(state.selection), updateDelay: 0, className: "rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [shared.IMAGE_ALIGNMENT_OPTIONS.map(({ value, label, icon: Icon }) => (jsxRuntime.jsx(toolbarToggle.ToolbarToggle, { icon: jsxRuntime.jsx(Icon, { className: "size-4" }), pressed: activeImageAlign === value, onPressedChange: () => editor.chain().focus().updateAttributes("image", { align: value }).run(), tooltip: label, ariaLabel: label }, value))), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1 h-5" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", onClick: () => editor.chain().focus().updateAttributes("image", { width: null, height: null }).run(), disabled: !hasCustomSize, "aria-label": "Reset image size", title: "Reset image size", children: jsxRuntime.jsx(rotateCcw.default, { className: "size-4" }) }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8 text-destructive hover:text-destructive", onClick: () => editor.chain().focus().deleteSelection().run(), "aria-label": "Delete image", title: "Delete image", children: jsxRuntime.jsx(trash2.default, { className: "size-4" }) })] }) }));
+    return (jsxRuntime.jsx(index$1.BubbleMenu, { editor: editor, pluginKey: shared.imageBubbleMenuPluginKey, shouldShow: ({ state }) => shared.isImageNodeSelection(state.selection), updateDelay: 0, className: "relative z-30 rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [shared.IMAGE_ALIGNMENT_OPTIONS.map(({ value, label, icon: Icon }) => (jsxRuntime.jsx(toolbarToggle.ToolbarToggle, { icon: jsxRuntime.jsx(Icon, { className: "size-4" }), pressed: activeImageAlign === value, onPressedChange: () => editor.chain().focus().updateAttributes("image", { align: value }).run(), tooltip: label, ariaLabel: label }, value))), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1 h-5" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", onClick: () => editor.chain().focus().updateAttributes("image", { width: null, height: null }).run(), disabled: !hasCustomSize, "aria-label": "Reset image size", title: "Reset image size", children: jsxRuntime.jsx(rotateCcw.default, { className: "size-4" }) }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8 text-destructive hover:text-destructive", onClick: () => editor.chain().focus().deleteSelection().run(), "aria-label": "Delete image", title: "Delete image", children: jsxRuntime.jsx(trash2.default, { className: "size-4" }) })] }) }));
 }
 
 exports.ImageBubbleMenu = ImageBubbleMenu;

package/dist/cjs/components/ui/rich-editor/bubble-menus/link-bubble-menu.js

@@ -60,7 +60,7 @@ function LinkBubbleMenu({ editor }) {
                 !tableSelectionOverlay.isCellSelection(selection) &&
                 !bubbleEditor.isActive("codeBlock") &&
                 bubbleEditor.isActive("link"));
-        }, updateDelay: 0, className: "rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { ref: containerRef, onFocusCapture: () => setIsEditing(true), onBlurCapture: handleBlurCapture, className: "flex items-center gap-2 p-1", children: [jsxRuntime.jsx("span", { className: "inline-flex size-8 items-center justify-center text-muted-foreground", "aria-hidden": true, children: jsxRuntime.jsx(link2.default, { className: "size-4" }) }), jsxRuntime.jsx(input.Input, { value: linkDraft, onChange: (event) => setLinkDraft(event.target.value), placeholder: "https://example.com", className: "h-8 w-64 text-xs", onKeyDown: (event) => {
+        }, updateDelay: 0, className: "relative z-30 rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { ref: containerRef, onFocusCapture: () => setIsEditing(true), onBlurCapture: handleBlurCapture, className: "flex items-center gap-2 p-1", children: [jsxRuntime.jsx("span", { className: "inline-flex size-8 items-center justify-center text-muted-foreground", "aria-hidden": true, children: jsxRuntime.jsx(link2.default, { className: "size-4" }) }), jsxRuntime.jsx(input.Input, { value: linkDraft, onChange: (event) => setLinkDraft(event.target.value), placeholder: "https://example.com", className: "h-8 w-64 text-xs", onKeyDown: (event) => {
                         if (event.key === "Enter") {
                             applyLink();
                         }

package/dist/cjs/components/ui/rich-editor/bubble-menus/shared.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('../../../../node_modules/prosemirror-state/dist/index.js');
-var alignLeft = require('../../../../node_modules/lucide-react/dist/esm/icons/align-left.js');
-var alignCenter = require('../../../../node_modules/lucide-react/dist/esm/icons/align-center.js');
-var alignRight = require('../../../../node_modules/lucide-react/dist/esm/icons/align-right.js');
+var textAlignStart = require('../../../../node_modules/lucide-react/dist/esm/icons/text-align-start.js');
+var textAlignCenter = require('../../../../node_modules/lucide-react/dist/esm/icons/text-align-center.js');
+var textAlignEnd = require('../../../../node_modules/lucide-react/dist/esm/icons/text-align-end.js');
 
 const textBubbleMenuPluginKey = new index.PluginKey("rich-editor-text-bubble");
 const imageBubbleMenuPluginKey = new index.PluginKey("rich-editor-image-bubble");
@@ -13,9 +13,9 @@ const carouselBubbleMenuPluginKey = new index.PluginKey("rich-editor-carousel-bu
 const columnsBubbleMenuPluginKey = new index.PluginKey("rich-editor-columns-bubble");
 const PLAIN_CODE_BLOCK_LANGUAGE_VALUE = "plain";
 const IMAGE_ALIGNMENT_OPTIONS = [
-    { value: "left", label: "Align left", icon: alignLeft.default },
-    { value: "center", label: "Align center", icon: alignCenter.default },
-    { value: "right", label: "Align right", icon: alignRight.default },
+    { value: "left", label: "Align left", icon: textAlignStart.default },
+    { value: "center", label: "Align center", icon: textAlignCenter.default },
+    { value: "right", label: "Align right", icon: textAlignEnd.default },
 ];
 function isImageNodeSelection(selection) {
     var _a, _b;

package/dist/cjs/components/ui/rich-editor/bubble-menus/text-selection-bubble-menu.js

@@ -1,155 +1,25 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../../node_modules/@tiptap/react/dist/menus/index.js');
+var index$1 = require('../../../../node_modules/prosemirror-state/dist/index.js');
 var React = require('react');
-var index = require('../../../../node_modules/@tiptap/react/dist/index.js');
-var index$1 = require('../../../../node_modules/@tiptap/react/dist/menus/index.js');
-var index$2 = require('../../../../node_modules/prosemirror-state/dist/index.js');
 var tableSelectionOverlay = require('../extensions/table/table-selection-overlay.js');
+var alignmentButton = require('../toolbar/alignment-button.js');
+var backgroundColorPicker = require('../toolbar/background-color-picker.js');
+var dropdowns = require('../toolbar/dropdowns.js');
+var markButton = require('../toolbar/mark-button.js');
+var textColorPicker = require('../toolbar/text-color-picker.js');
+var toolbarButton = require('../toolbar/toolbar-button.js');
 var shared = require('./shared.js');
-var button = require('../../../buttons/button/button.js');
-var input = require('../../../forms/input/input.js');
-var popover = require('../../../popovers/popover/popover.js');
-var dropdownMenu = require('../../dropdown-menu/dropdown-menu.js');
 var separator = require('../../../utility/separator/separator.js');
-var utils = require('../../../../lib/utils.js');
-var chevronDown = require('../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js');
-var pilcrow = require('../../../../node_modules/lucide-react/dist/esm/icons/pilcrow.js');
-var heading1 = require('../../../../node_modules/lucide-react/dist/esm/icons/heading-1.js');
-var heading2 = require('../../../../node_modules/lucide-react/dist/esm/icons/heading-2.js');
-var heading3 = require('../../../../node_modules/lucide-react/dist/esm/icons/heading-3.js');
-var list = require('../../../../node_modules/lucide-react/dist/esm/icons/list.js');
-var listOrdered = require('../../../../node_modules/lucide-react/dist/esm/icons/list-ordered.js');
-var quote = require('../../../../node_modules/lucide-react/dist/esm/icons/quote.js');
-var alignLeft = require('../../../../node_modules/lucide-react/dist/esm/icons/align-left.js');
-var code = require('../../../../node_modules/lucide-react/dist/esm/icons/code.js');
-var alignJustify = require('../../../../node_modules/lucide-react/dist/esm/icons/align-justify.js');
-var bold = require('../../../../node_modules/lucide-react/dist/esm/icons/bold.js');
-var italic = require('../../../../node_modules/lucide-react/dist/esm/icons/italic.js');
-var underline = require('../../../../node_modules/lucide-react/dist/esm/icons/underline.js');
-var strikethrough = require('../../../../node_modules/lucide-react/dist/esm/icons/strikethrough.js');
-var alignCenter = require('../../../../node_modules/lucide-react/dist/esm/icons/align-center.js');
-var alignRight = require('../../../../node_modules/lucide-react/dist/esm/icons/align-right.js');
-var link2 = require('../../../../node_modules/lucide-react/dist/esm/icons/link-2.js');
+var eraser = require('../../../../node_modules/lucide-react/dist/esm/icons/eraser.js');
 
-const TEXT_COLORS = ["#dc2626", "#ea580c", "#a16207", "#15803d", "#2563eb", "#7c3aed", "#a21caf", "#6b7280"];
-const BACKGROUND_COLORS = [
-    "#fecaca",
-    "#fed7aa",
-    "#fde68a",
-    "#bbf7d0",
-    "#bfdbfe",
-    "#ddd6fe",
-    "#f5d0fe",
-    "#e5e7eb",
-];
-function BubbleIconButton({ icon, ariaLabel, pressed, onClick, className, disabled }) {
-    return (jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": ariaLabel, "aria-pressed": pressed, onClick: onClick, disabled: disabled, className: utils.cn("size-8 rounded-md", pressed && "bg-accent text-accent-foreground", className), children: icon }));
-}
-function getActiveAlignIcon(align) {
-    if (align === "center")
-        return jsxRuntime.jsx(alignCenter.default, { className: "size-4" });
-    if (align === "right")
-        return jsxRuntime.jsx(alignRight.default, { className: "size-4" });
-    if (align === "justify")
-        return jsxRuntime.jsx(alignJustify.default, { className: "size-4" });
-    return jsxRuntime.jsx(alignLeft.default, { className: "size-4" });
-}
-function TextSelectionBubbleMenu({ editor }) {
-    const [styleMenuOpen, setStyleMenuOpen] = React.useState(false);
-    const [markMenuOpen, setMarkMenuOpen] = React.useState(false);
-    const [colorMenuOpen, setColorMenuOpen] = React.useState(false);
-    const [alignMenuOpen, setAlignMenuOpen] = React.useState(false);
-    const [linkMenuOpen, setLinkMenuOpen] = React.useState(false);
-    const [linkDraft, setLinkDraft] = React.useState("");
-    const { activeBlockLabel, isBold, isItalic, isUnderline, isStrike, isCode, isLink, activeTextColor, activeBackgroundColor, activeAlign, activeLinkHref, canToggleTaskList, isTaskList, isBulletList, isOrderedList, isBlockquote, isCodeBlock, } = index.useEditorState({
-        editor,
-        selector: ({ editor }) => {
-            const textStyleAttrs = editor.getAttributes("textStyle");
-            const activeLinkAttrs = editor.getAttributes("link");
-            const commands = editor.commands;
-            return {
-                activeBlockLabel: editor.isActive("heading", { level: 1 })
-                    ? "H1"
-                    : editor.isActive("heading", { level: 2 })
-                        ? "H2"
-                        : editor.isActive("heading", { level: 3 })
-                            ? "H3"
-                            : "Text",
-                isBold: editor.isActive("bold"),
-                isItalic: editor.isActive("italic"),
-                isUnderline: editor.isActive("underline"),
-                isStrike: editor.isActive("strike"),
-                isCode: editor.isActive("code"),
-                isLink: editor.isActive("link"),
-                activeTextColor: textStyleAttrs.color || null,
-                activeBackgroundColor: textStyleAttrs.backgroundColor || null,
-                activeAlign: editor.isActive({ textAlign: "center" })
-                    ? "center"
-                    : editor.isActive({ textAlign: "right" })
-                        ? "right"
-                        : editor.isActive({ textAlign: "justify" })
-                            ? "justify"
-                            : "left",
-                activeLinkHref: activeLinkAttrs.href || "",
-                canToggleTaskList: typeof commands.toggleTaskList === "function",
-                isTaskList: editor.isActive("taskList"),
-                isBulletList: editor.isActive("bulletList"),
-                isOrderedList: editor.isActive("orderedList"),
-                isBlockquote: editor.isActive("blockquote"),
-                isCodeBlock: editor.isActive("codeBlock"),
-            };
-        },
-    });
-    React.useEffect(() => {
-        if (!linkMenuOpen)
-            return;
-        setLinkDraft(activeLinkHref);
-    }, [linkMenuOpen, activeLinkHref]);
-    const keepMenuVisible = styleMenuOpen || markMenuOpen || colorMenuOpen || alignMenuOpen || linkMenuOpen;
-    const setTextType = (type) => {
-        if (type === "paragraph") {
-            editor.chain().focus().setParagraph().run();
-        }
-        else {
-            const level = type === "h1" ? 1 : type === "h2" ? 2 : 3;
-            editor.chain().focus().setHeading({ level }).run();
-        }
-        setStyleMenuOpen(false);
-    };
-    const applyLink = () => {
-        const href = linkDraft.trim();
-        if (!href)
-            return;
-        const normalizedHref = /^(https?:\/\/|mailto:|tel:)/i.test(href) ? href : `https://${href}`;
-        editor.chain().focus().extendMarkRange("link").setLink({ href: normalizedHref }).run();
-        setLinkMenuOpen(false);
-    };
-    const removeLink = () => {
-        editor.chain().focus().unsetLink().run();
-        setLinkMenuOpen(false);
-    };
-    return (jsxRuntime.jsx(index$1.BubbleMenu, { editor: editor, pluginKey: shared.textBubbleMenuPluginKey, shouldShow: ({ state, editor: bubbleEditor }) => {
-            if (keepMenuVisible)
-                return true;
-            const { selection } = state;
-            return (selection instanceof index$2.TextSelection &&
-                !selection.empty &&
-                !tableSelectionOverlay.isCellSelection(selection) &&
-                !bubbleEditor.isActive("codeBlock"));
-        }, updateDelay: 0, className: "rounded-2xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { open: styleMenuOpen, onOpenChange: setStyleMenuOpen, children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1 rounded-md px-2 text-xs font-medium", children: [jsxRuntime.jsx("span", { children: activeBlockLabel }), jsxRuntime.jsx(chevronDown.default, { className: "size-3.5 text-muted-foreground" })] }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-[260px] rounded-2xl p-3", children: jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsx("p", { className: "px-1 text-sm font-semibold text-muted-foreground", children: "Text" }), jsxRuntime.jsxs("div", { className: "grid grid-cols-4 gap-1", children: [jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(pilcrow.default, { className: "size-4" }), ariaLabel: "Paragraph", pressed: activeBlockLabel === "Text", onClick: () => setTextType("paragraph") }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(heading1.default, { className: "size-4" }), ariaLabel: "Heading 1", pressed: activeBlockLabel === "H1", onClick: () => setTextType("h1") }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(heading2.default, { className: "size-4" }), ariaLabel: "Heading 2", pressed: activeBlockLabel === "H2", onClick: () => setTextType("h2") }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(heading3.default, { className: "size-4" }), ariaLabel: "Heading 3", pressed: activeBlockLabel === "H3", onClick: () => setTextType("h3") })] })] }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsx("p", { className: "px-1 text-sm font-semibold text-muted-foreground", children: "Lists" }), jsxRuntime.jsxs("div", { className: "grid grid-cols-4 gap-1", children: [jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(list.default, { className: "size-4" }), ariaLabel: "Bullet list", pressed: isBulletList, onClick: () => editor.chain().focus().toggleBulletList().run() }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(listOrdered.default, { className: "size-4" }), ariaLabel: "Ordered list", pressed: isOrderedList, onClick: () => editor.chain().focus().toggleOrderedList().run() }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(list.default, { className: "size-4" }), ariaLabel: "Task list", pressed: isTaskList, disabled: !canToggleTaskList, onClick: () => {
-                                                            var _a;
-                                                            const chain = editor.chain().focus();
-                                                            const next = (_a = chain.toggleTaskList) === null || _a === void 0 ? void 0 : _a.call(chain);
-                                                            next === null || next === void 0 ? void 0 : next.run();
-                                                        } }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(quote.default, { className: "size-4" }), ariaLabel: "Block quote", pressed: isBlockquote, onClick: () => editor.chain().focus().toggleBlockquote().run() })] })] }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsx("p", { className: "px-1 text-sm font-semibold text-muted-foreground", children: "Quote" }), jsxRuntime.jsxs("div", { className: "grid grid-cols-4 gap-1", children: [jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(alignLeft.default, { className: "size-4" }), ariaLabel: "Align left", pressed: activeAlign === "left", onClick: () => editor.chain().focus().setTextAlign("left").run() }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(quote.default, { className: "size-4" }), ariaLabel: "Block quote", pressed: isBlockquote, onClick: () => editor.chain().focus().toggleBlockquote().run() }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(code.default, { className: "size-4" }), ariaLabel: "Code block", pressed: isCodeBlock, onClick: () => editor.chain().focus().toggleCodeBlock().run() }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(alignJustify.default, { className: "size-4" }), ariaLabel: "Justify", pressed: activeAlign === "justify", onClick: () => editor.chain().focus().setTextAlign("justify").run() })] })] })] }) })] }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-0.5 h-5" }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(bold.default, { className: "size-4" }), ariaLabel: "Bold", pressed: isBold, onClick: () => editor.chain().focus().toggleBold().run() }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(italic.default, { className: "size-4" }), ariaLabel: "Italic", pressed: isItalic, onClick: () => editor.chain().focus().toggleItalic().run() }), jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { open: markMenuOpen, onOpenChange: setMarkMenuOpen, children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1 rounded-md px-2", "aria-label": "Text marks", children: [jsxRuntime.jsx(underline.default, { className: utils.cn("size-4", isUnderline && "text-accent-foreground") }), jsxRuntime.jsx(chevronDown.default, { className: "size-3.5 text-muted-foreground" })] }) }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-56 rounded-2xl p-1", children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => editor.chain().focus().toggleUnderline().run(), className: utils.cn(isUnderline && "bg-accent text-accent-foreground"), children: [jsxRuntime.jsx(underline.default, { className: "size-4" }), "Underline", jsxRuntime.jsx(dropdownMenu.DropdownMenuShortcut, { children: "\u2318U" })] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => editor.chain().focus().toggleStrike().run(), className: utils.cn(isStrike && "bg-accent text-accent-foreground"), children: [jsxRuntime.jsx(strikethrough.default, { className: "size-4" }), "Strikethrough", jsxRuntime.jsx(dropdownMenu.DropdownMenuShortcut, { children: "\u2318\u21E7X" })] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => editor.chain().focus().toggleCode().run(), className: utils.cn(isCode && "bg-accent text-accent-foreground"), children: [jsxRuntime.jsx(code.default, { className: "size-4" }), "Inline code", jsxRuntime.jsx(dropdownMenu.DropdownMenuShortcut, { children: "\u2318E" })] })] })] }), jsxRuntime.jsxs(popover.Popover, { open: colorMenuOpen, onOpenChange: setColorMenuOpen, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1 rounded-md px-2", "aria-label": "Text and highlight colors", children: [jsxRuntime.jsxs("span", { className: "relative inline-flex h-4 w-3 items-end justify-center text-sm font-semibold", children: [jsxRuntime.jsx("span", { style: { color: activeTextColor || "currentColor" }, children: "A" }), jsxRuntime.jsx("span", { className: "absolute bottom-0 left-0 right-0 h-[1.5px] rounded-full", style: { backgroundColor: activeTextColor || "currentColor" } })] }), jsxRuntime.jsx(chevronDown.default, { className: "size-3.5 text-muted-foreground" })] }) }), jsxRuntime.jsx(popover.PopoverContent, { align: "start", sideOffset: 8, className: "w-[176px] rounded-2xl p-3", children: jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-2", children: TEXT_COLORS.map((color) => (jsxRuntime.jsx("button", { type: "button", onClick: () => editor.chain().focus().setColor(color).run(), className: utils.cn("flex size-9 items-center justify-center rounded-lg border text-base font-semibold", activeTextColor === color && "ring-2 ring-primary/35"), style: { color }, "aria-label": `Set text color ${color}`, children: "A" }, color))) }), jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-2", children: BACKGROUND_COLORS.map((color) => (jsxRuntime.jsx("button", { type: "button", onClick: () => editor.chain().focus().setBackgroundColor(color).run(), className: utils.cn("flex size-9 items-center justify-center rounded-lg border text-base font-semibold text-gray-500", activeBackgroundColor === color && "ring-2 ring-primary/35"), style: { backgroundColor: color }, "aria-label": `Set highlight color ${color}`, children: "A" }, color))) }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 px-1 text-primary hover:bg-transparent hover:text-primary/80", onClick: () => {
-                                            editor.chain().focus().unsetColor().unsetBackgroundColor().run();
-                                            setColorMenuOpen(false);
-                                        }, children: "Clear" })] }) })] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { open: alignMenuOpen, onOpenChange: setAlignMenuOpen, children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1 rounded-md px-2", "aria-label": "Alignment", children: [getActiveAlignIcon(activeAlign), jsxRuntime.jsx(chevronDown.default, { className: "size-3.5 text-muted-foreground" })] }) }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-44 rounded-2xl p-1", children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuLabel, { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Text" }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => editor.chain().focus().setTextAlign("left").run(), className: utils.cn(activeAlign === "left" && "bg-accent text-accent-foreground"), children: [jsxRuntime.jsx(alignLeft.default, { className: "size-4" }), "Align left"] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => editor.chain().focus().setTextAlign("center").run(), className: utils.cn(activeAlign === "center" && "bg-accent text-accent-foreground"), children: [jsxRuntime.jsx(alignCenter.default, { className: "size-4" }), "Align center"] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => editor.chain().focus().setTextAlign("right").run(), className: utils.cn(activeAlign === "right" && "bg-accent text-accent-foreground"), children: [jsxRuntime.jsx(alignRight.default, { className: "size-4" }), "Align right"] }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => editor.chain().focus().setTextAlign("justify").run(), className: utils.cn(activeAlign === "justify" && "bg-accent text-accent-foreground"), children: [jsxRuntime.jsx(alignJustify.default, { className: "size-4" }), "Justify"] })] })] }), jsxRuntime.jsx(BubbleIconButton, { icon: jsxRuntime.jsx(strikethrough.default, { className: "size-4" }), ariaLabel: "Strikethrough", pressed: isStrike, onClick: () => editor.chain().focus().toggleStrike().run() }), jsxRuntime.jsxs(popover.Popover, { open: linkMenuOpen, onOpenChange: setLinkMenuOpen, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Link", className: utils.cn("size-8 rounded-md", isLink && "bg-accent text-accent-foreground"), children: jsxRuntime.jsx(link2.default, { className: "size-4" }) }) }), jsxRuntime.jsx(popover.PopoverContent, { align: "start", sideOffset: 8, className: "w-64 rounded-xl p-3", children: jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx(input.Input, { value: linkDraft, placeholder: "https://example.com", onChange: (event) => setLinkDraft(event.target.value), onKeyDown: (event) => {
-                                            if (event.key === "Enter") {
-                                                applyLink();
-                                            }
-                                        } }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", size: "sm", onClick: removeLink, disabled: !isLink, children: "Remove" }), jsxRuntime.jsx(button.Button, { type: "button", size: "sm", onClick: applyLink, disabled: !linkDraft.trim(), children: "Apply" })] })] }) })] })] }) }));
-}
+const TextSelectionBubbleMenu = React.memo(function TextSelectionBubbleMenu({ editor }) {
+    return (jsxRuntime.jsx(index.BubbleMenu, { editor: editor, pluginKey: shared.textBubbleMenuPluginKey, shouldShow: ({ state, editor: bubbleEditor }) => state.selection instanceof index$1.TextSelection &&
+            !state.selection.empty &&
+            !tableSelectionOverlay.isCellSelection(state.selection) &&
+            !bubbleEditor.isActive("codeBlock"), updateDelay: 0, className: "relative z-30 rounded-2xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "z-10 flex items-stretch gap-0.5", children: [jsxRuntime.jsx(dropdowns.HeadingDropdown, { editor: editor }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1" }), jsxRuntime.jsx(markButton.MarkButton, { editor: editor, mark: "bold" }), jsxRuntime.jsx(markButton.MarkButton, { editor: editor, mark: "italic" }), jsxRuntime.jsx(markButton.MarkButton, { editor: editor, mark: "underline" }), jsxRuntime.jsx(markButton.MarkDropdown, { editor: editor, marks: ["code", "strike", "subscript", "superscript"] }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1" }), jsxRuntime.jsx(textColorPicker.TextColorPicker, { editor: editor }), jsxRuntime.jsx(backgroundColorPicker.BackgroundColorPicker, { editor: editor }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1" }), jsxRuntime.jsx(alignmentButton.AlignmentDropdown, { editor: editor }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-1" }), jsxRuntime.jsx(toolbarButton.ToolbarButton, { icon: jsxRuntime.jsx(eraser.default, { className: "size-4" }), onClick: () => editor.chain().focus().unsetAllMarks().run(), tooltip: "Clear formatting", ariaLabel: "Clear all formatting" })] }) }));
+});
 
 exports.TextSelectionBubbleMenu = TextSelectionBubbleMenu;