art-bd-ui 1.0.39 → 1.0.41

package/dist/cjs/components/ui/rich-editor/extensions/slash/default-suggestions.js

@@ -0,0 +1,212 @@
+'use strict';
+
+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 textQuote = require('../../../../../node_modules/lucide-react/dist/esm/icons/text-quote.js');
+var code = require('../../../../../node_modules/lucide-react/dist/esm/icons/code.js');
+var chevronDown = require('../../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js');
+var minus = require('../../../../../node_modules/lucide-react/dist/esm/icons/minus.js');
+var table = require('../../../../../node_modules/lucide-react/dist/esm/icons/table.js');
+var image = require('../../../../../node_modules/lucide-react/dist/esm/icons/image.js');
+var video = require('../../../../../node_modules/lucide-react/dist/esm/icons/video.js');
+var columns2 = require('../../../../../node_modules/lucide-react/dist/esm/icons/columns-2.js');
+var galleryThumbnails = require('../../../../../node_modules/lucide-react/dist/esm/icons/gallery-thumbnails.js');
+
+const FORMAT_GROUP = "Format";
+const INSERT_GROUP = "Insert";
+const hasExtension = (editor, name) => editor.extensionManager.extensions.some((extension) => extension.name === name);
+const promptForUrl = (title) => {
+    if (typeof window === "undefined")
+        return null;
+    const value = window.prompt(title);
+    if (!value)
+        return null;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : null;
+};
+const suggestionItems = [
+    {
+        title: "Paragraph",
+        description: "Start writing plain text.",
+        group: FORMAT_GROUP,
+        searchTerms: ["text", "paragraph", "p"],
+        icon: pilcrow.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setParagraph().run();
+        },
+    },
+    {
+        title: "Heading 1",
+        description: "Large section heading.",
+        group: FORMAT_GROUP,
+        searchTerms: ["title", "h1", "heading"],
+        icon: heading1.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run();
+        },
+    },
+    {
+        title: "Heading 2",
+        description: "Medium section heading.",
+        group: FORMAT_GROUP,
+        searchTerms: ["subtitle", "h2", "heading"],
+        icon: heading2.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run();
+        },
+    },
+    {
+        title: "Heading 3",
+        description: "Compact section heading.",
+        group: FORMAT_GROUP,
+        searchTerms: ["subtitle", "h3", "heading"],
+        icon: heading3.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
+        },
+    },
+    {
+        title: "Bullet List",
+        description: "Create a bulleted list.",
+        group: FORMAT_GROUP,
+        searchTerms: ["unordered", "list", "bullets"],
+        icon: list.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleBulletList().run();
+        },
+    },
+    {
+        title: "Ordered List",
+        description: "Create a numbered list.",
+        group: FORMAT_GROUP,
+        searchTerms: ["ordered", "list", "numbers"],
+        icon: listOrdered.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+        },
+    },
+    {
+        title: "Blockquote",
+        description: "Highlight quoted content.",
+        group: FORMAT_GROUP,
+        searchTerms: ["quote", "blockquote", "citation"],
+        icon: textQuote.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+        },
+    },
+    {
+        title: "Code Block",
+        description: "Insert a formatted code block.",
+        group: FORMAT_GROUP,
+        searchTerms: ["code", "snippet", "pre"],
+        icon: code.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+        },
+    },
+    {
+        title: "Details",
+        description: "Insert a collapsible details block.",
+        group: INSERT_GROUP,
+        searchTerms: ["details", "collapsible", "disclosure", "faq", "accordion"],
+        icon: chevronDown.default,
+        isAvailable: (editor) => hasExtension(editor, "details"),
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setDetails().run();
+        },
+    },
+    {
+        title: "Horizontal Rule",
+        description: "Insert a divider line.",
+        group: INSERT_GROUP,
+        searchTerms: ["divider", "line", "---"],
+        icon: minus.default,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+        },
+    },
+    {
+        title: "Table",
+        description: "Insert a 3 × 3 table.",
+        group: INSERT_GROUP,
+        searchTerms: ["table", "grid", "rows", "columns"],
+        icon: table.default,
+        isAvailable: (editor) => hasExtension(editor, "table"),
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+        },
+    },
+    {
+        title: "Image",
+        description: "Insert an image from URL.",
+        group: INSERT_GROUP,
+        searchTerms: ["photo", "media", "picture", "url"],
+        icon: image.default,
+        isAvailable: (editor) => hasExtension(editor, "image"),
+        command: ({ editor, range }) => {
+            const src = promptForUrl("Image URL");
+            if (!src)
+                return;
+            editor.chain().focus().deleteRange(range).setImage({ src, alt: "" }).run();
+        },
+    },
+    {
+        title: "YouTube Video",
+        description: "Embed a YouTube video from URL.",
+        group: INSERT_GROUP,
+        searchTerms: ["youtube", "video", "embed", "media"],
+        icon: video.default,
+        isAvailable: (editor) => hasExtension(editor, "youtube"),
+        command: ({ editor, range }) => {
+            const src = promptForUrl("YouTube URL");
+            if (!src)
+                return;
+            editor.chain().focus().deleteRange(range).setYoutubeVideo({ src }).run();
+        },
+    },
+    {
+        title: "Columns",
+        description: "Insert a 2-column layout.",
+        group: INSERT_GROUP,
+        searchTerms: ["layout", "grid", "multi column"],
+        icon: columns2.default,
+        isAvailable: (editor) => hasExtension(editor, "columns"),
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setColumns({ columns: 2 }).run();
+        },
+    },
+    {
+        title: "Carousel",
+        description: "Insert an image carousel block.",
+        group: INSERT_GROUP,
+        searchTerms: ["slider", "gallery", "images"],
+        icon: galleryThumbnails.default,
+        isAvailable: (editor) => hasExtension(editor, "carousel"),
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setCarousel({ images: [] }).run();
+        },
+    },
+];
+const getDefaultSlashItems = (editor) => suggestionItems.filter((item) => (item.isAvailable ? item.isAvailable(editor) : true));
+const defaultSlashSuggestions = ({ editor, query }) => {
+    const availableItems = getDefaultSlashItems(editor);
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) {
+        return availableItems;
+    }
+    const queryTerms = normalizedQuery.split(/\s+/).filter(Boolean);
+    return availableItems
+        .filter((item) => {
+        const searchable = [item.title, item.description, ...item.searchTerms].join(" ").toLowerCase();
+        return queryTerms.every((term) => searchable.includes(term));
+    })
+        .slice(0, 10);
+};
+
+exports.defaultSlashSuggestions = defaultSlashSuggestions;
+exports.getDefaultSlashItems = getDefaultSlashItems;

package/dist/cjs/components/ui/rich-editor/extensions/slash/slash-menu.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('../../../../../lib/utils.js');
+
+const SlashMenu = React.forwardRef(function SlashMenu({ items, editor, range }, ref) {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const itemRefs = React.useRef([]);
+    const groupedItems = React.useMemo(() => {
+        const grouped = items.reduce((acc, item) => {
+            const key = item.group || "General";
+            if (!acc[key]) {
+                acc[key] = [];
+            }
+            acc[key].push(item);
+            return acc;
+        }, {});
+        let runningIndex = 0;
+        return Object.entries(grouped).map(([group, groupItems]) => {
+            const withIndex = groupItems.map((item) => {
+                const indexed = { item, index: runningIndex };
+                runningIndex += 1;
+                return indexed;
+            });
+            return { group, items: withIndex };
+        });
+    }, [items]);
+    React.useEffect(() => {
+        setSelectedIndex(0);
+    }, [items]);
+    React.useEffect(() => {
+        var _a;
+        (_a = itemRefs.current[selectedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            block: "nearest",
+        });
+    }, [selectedIndex]);
+    const executeByIndex = React.useCallback((index) => {
+        const command = items[index];
+        if (!command)
+            return;
+        command.command({ editor, range });
+    }, [editor, items, range]);
+    React.useImperativeHandle(ref, () => ({
+        onKeyDown: (event) => {
+            if (!items.length)
+                return false;
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setSelectedIndex((value) => (value + 1) % items.length);
+                return true;
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                setSelectedIndex((value) => (value - 1 + items.length) % items.length);
+                return true;
+            }
+            if (event.key === "Enter") {
+                event.preventDefault();
+                executeByIndex(selectedIndex);
+                return true;
+            }
+            if (event.key === "Tab") {
+                event.preventDefault();
+                executeByIndex(selectedIndex);
+                return true;
+            }
+            return false;
+        },
+    }), [executeByIndex, items.length, selectedIndex]);
+    if (!items.length) {
+        return (jsxRuntime.jsx("div", { className: "min-w-[18rem] rounded-md border bg-popover p-4 text-center text-muted-foreground text-sm shadow-md", children: "No results" }));
+    }
+    return (jsxRuntime.jsx("div", { className: "max-h-[360px] min-w-[18rem] overflow-y-auto rounded-md border bg-popover p-1 shadow-md", onMouseEnter: () => {
+            if (!editor.isFocused) {
+                editor.commands.focus();
+            }
+        }, onMouseDown: (event) => event.preventDefault(), children: groupedItems.map((group, groupIndex) => (jsxRuntime.jsxs("div", { className: groupIndex > 0 ? "mt-1 border-t pt-1" : undefined, children: [jsxRuntime.jsx("div", { className: "px-2 py-1 text-muted-foreground text-[11px] uppercase tracking-wide", children: group.group }), group.items.map(({ item, index }) => (jsxRuntime.jsxs("button", { type: "button", className: utils.cn("flex w-full items-center gap-3 rounded-sm px-2 py-1.5 text-left transition-colors", selectedIndex === index ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"), ref: (node) => {
+                        itemRefs.current[index] = node;
+                    }, onMouseEnter: () => setSelectedIndex(index), onMouseDown: (event) => event.preventDefault(), onClick: () => executeByIndex(index), children: [jsxRuntime.jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded border bg-secondary", children: jsxRuntime.jsx(item.icon, { className: "text-muted-foreground", size: 16 }) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: "font-medium text-sm", children: item.title }), jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: item.description })] })] }, `${group.group}-${item.title}`)))] }, group.group))) }));
+});
+const handleCommandNavigation = (event, onKeyDown) => {
+    if (!onKeyDown) {
+        return false;
+    }
+    if (["ArrowUp", "ArrowDown", "Enter", "Tab"].includes(event.key)) {
+        event.preventDefault();
+        event.stopPropagation();
+        return onKeyDown(event);
+    }
+    return false;
+};
+
+exports.SlashMenu = SlashMenu;
+exports.handleCommandNavigation = handleCommandNavigation;

package/dist/cjs/components/ui/rich-editor/extensions/slash/slash-suggestion-renderer.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var index$1 = require('../../../../../node_modules/@tiptap/react/dist/index.js');
+var index = require('../../../../../node_modules/@tiptap/suggestion/dist/index.js');
+var tippy_esm = require('../../../../../node_modules/tippy.js/dist/tippy.esm.js');
+var slash = require('./slash.js');
+var slashMenu = require('./slash-menu.js');
+
+const renderSlashSuggestion = () => {
+    let component = null;
+    let popup = [];
+    let activeEditor = null;
+    return {
+        onStart: (props) => {
+            activeEditor = props.editor;
+            activeEditor.commands.setMeta("lockDragHandle", true);
+            component = new index$1.ReactRenderer(slashMenu.SlashMenu, {
+                props: {
+                    items: props.items,
+                    editor: props.editor,
+                    range: props.range,
+                },
+                editor: props.editor,
+            });
+            popup = tippy_esm.default("body", {
+                getReferenceClientRect: () => { var _a, _b; return (_b = (_a = props.clientRect) === null || _a === void 0 ? void 0 : _a.call(props)) !== null && _b !== void 0 ? _b : props.editor.view.dom.getBoundingClientRect(); },
+                appendTo: () => document.body,
+                content: component.element,
+                showOnCreate: true,
+                interactive: true,
+                trigger: "manual",
+                placement: "bottom-start",
+                offset: [0, 8],
+                maxWidth: "none",
+            });
+        },
+        onUpdate(props) {
+            var _a;
+            activeEditor = props.editor;
+            component === null || component === void 0 ? void 0 : component.updateProps({
+                items: props.items,
+                editor: props.editor,
+                range: props.range,
+            });
+            (_a = popup[0]) === null || _a === void 0 ? void 0 : _a.setProps({
+                getReferenceClientRect: () => { var _a, _b; return (_b = (_a = props.clientRect) === null || _a === void 0 ? void 0 : _a.call(props)) !== null && _b !== void 0 ? _b : props.editor.view.dom.getBoundingClientRect(); },
+            });
+        },
+        onKeyDown(props) {
+            var _a;
+            if (props.event.key === "Escape") {
+                index.exitSuggestion(props.view, slash.SlashPluginKey);
+                return true;
+            }
+            return slashMenu.handleCommandNavigation(props.event, (_a = component === null || component === void 0 ? void 0 : component.ref) === null || _a === void 0 ? void 0 : _a.onKeyDown);
+        },
+        onExit() {
+            var _a;
+            activeEditor === null || activeEditor === void 0 ? void 0 : activeEditor.commands.setMeta("lockDragHandle", false);
+            (_a = popup[0]) === null || _a === void 0 ? void 0 : _a.destroy();
+            component === null || component === void 0 ? void 0 : component.destroy();
+            popup = [];
+            component = null;
+            activeEditor = null;
+        },
+    };
+};
+
+exports.renderSlashSuggestion = renderSlashSuggestion;

package/dist/cjs/components/ui/rich-editor/extensions/slash/slash.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var index$1 = require('../../../../../node_modules/@tiptap/core/dist/index.js');
+var index = require('../../../../../node_modules/prosemirror-state/dist/index.js');
+var index$2 = require('../../../../../node_modules/@tiptap/suggestion/dist/index.js');
+
+const SlashPluginKey = new index.PluginKey("slash");
+const isAllowedSlashContext = ({ state, range }) => {
+    const $from = state.doc.resolve(range.from);
+    const isRootDepth = $from.depth === 1;
+    const isParagraph = $from.parent.type.name === "paragraph";
+    const isStartOfNode = $from.parent.textContent.startsWith("/");
+    const isSlashQuery = state.doc.textBetween(range.from, range.to, "", "").startsWith("/");
+    return isRootDepth && isParagraph && isStartOfNode && isSlashQuery;
+};
+const findMatchLengthFromTextAfter = (textAfter, config) => {
+    const { allowSpaces: allowSpacesOption, allowToIncludeChar, char } = config;
+    const allowSpaces = allowSpacesOption && !allowToIncludeChar;
+    const contentAfterTrigger = textAfter.slice(char.length);
+    if (allowSpaces) {
+        const nextTriggerPattern = new RegExp(`\\s${index$1.escapeForRegEx(char)}`);
+        const nextTriggerIndex = contentAfterTrigger.search(nextTriggerPattern);
+        return nextTriggerIndex === -1 ? textAfter.length : char.length + nextTriggerIndex;
+    }
+    const stopPattern = allowToIncludeChar ? /\s/ : new RegExp(`\\s|${index$1.escapeForRegEx(char)}`);
+    const stopIndex = contentAfterTrigger.search(stopPattern);
+    return stopIndex === -1 ? textAfter.length : char.length + stopIndex;
+};
+const findSlashSuggestionMatch = (config) => {
+    const defaultMatch = index$2.findSuggestionMatch(config);
+    if (defaultMatch) {
+        return defaultMatch;
+    }
+    const { $position, char, allowedPrefixes, startOfLine } = config;
+    const fullText = $position.parent.textContent;
+    const offset = $position.parentOffset;
+    const textAfterCaret = fullText.slice(offset);
+    if (!textAfterCaret.startsWith(char)) {
+        return null;
+    }
+    if (startOfLine && offset !== 0) {
+        return null;
+    }
+    const prefix = offset > 0 ? fullText[offset - 1] : "";
+    if (allowedPrefixes !== null && offset > 0 && !allowedPrefixes.includes(prefix)) {
+        return null;
+    }
+    const matchLength = findMatchLengthFromTextAfter(textAfterCaret, config);
+    const text = textAfterCaret.slice(0, matchLength);
+    if (!text) {
+        return null;
+    }
+    return {
+        range: {
+            from: $position.pos,
+            to: $position.pos + text.length,
+        },
+        query: text.slice(char.length),
+        text,
+    };
+};
+const Slash = index$1.Extension.create({
+    name: "slash",
+    priority: 101,
+    addOptions() {
+        return {
+            suggestion: {
+                char: "/",
+                pluginKey: SlashPluginKey,
+                allowSpaces: true,
+                startOfLine: true,
+                findSuggestionMatch: findSlashSuggestionMatch,
+                command: ({ editor, range, props }) => {
+                    props.command({ editor, range });
+                },
+                allow: isAllowedSlashContext,
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            index$2.default(Object.assign({ editor: this.editor }, this.options.suggestion)),
+        ];
+    },
+});
+
+exports.Slash = Slash;
+exports.SlashPluginKey = SlashPluginKey;

package/dist/cjs/components/ui/rich-editor/extensions/table/table-floating-controls.js

@@ -7,6 +7,7 @@ var ReactDOM = require('react-dom');
 var index = require('../../../../../node_modules/@tiptap/react/dist/index.js');
 var index$1 = require('../../../../../node_modules/prosemirror-tables/dist/index.js');
 var tableHoverExtension = require('./table-hover-extension.js');
+var colorConstants = require('../../toolbar/color-constants.js');
 var dropdownMenu = require('../../../dropdown-menu/dropdown-menu.js');
 var button = require('../../../../buttons/button/button.js');
 var utils = require('../../../../../lib/utils.js');
@@ -16,10 +17,10 @@ var copy = require('../../../../../node_modules/lucide-react/dist/esm/icons/copy
 var palette = require('../../../../../node_modules/lucide-react/dist/esm/icons/palette.js');
 var x = require('../../../../../node_modules/lucide-react/dist/esm/icons/x.js');
 var trash2 = require('../../../../../node_modules/lucide-react/dist/esm/icons/trash-2.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 alignJustify = require('../../../../../node_modules/lucide-react/dist/esm/icons/align-justify.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');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -43,22 +44,11 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const FLOAT_OFFSET = 8;
 const CONTROL_OVERLAP = 2;
 const EDGE_PADDING = 12;
-const COLORS = [
-    { name: "Default", value: "" },
-    { name: "Red", value: "#ef4444" },
-    { name: "Orange", value: "#f97316" },
-    { name: "Yellow", value: "#eab308" },
-    { name: "Green", value: "#22c55e" },
-    { name: "Blue", value: "#3b82f6" },
-    { name: "Purple", value: "#a855f7" },
-    { name: "Pink", value: "#ec4899" },
-    { name: "Gray", value: "#6b7280" },
-];
 const ALIGNMENT_OPTIONS = [
-    { value: "left", icon: alignLeft.default, label: "Align left" },
-    { value: "center", icon: alignCenter.default, label: "Align center" },
-    { value: "right", icon: alignRight.default, label: "Align right" },
-    { value: "justify", icon: alignJustify.default, label: "Align justify" },
+    { value: "left", icon: textAlignStart.default, label: "Align left" },
+    { value: "center", icon: textAlignCenter.default, label: "Align center" },
+    { value: "right", icon: textAlignEnd.default, label: "Align right" },
+    { value: "justify", icon: textAlignJustify.default, label: "Align justify" },
 ];
 function clamp(value, min, max) {
     return Math.max(min, Math.min(max, value));
@@ -244,13 +234,9 @@ function RowMenu({ editor }) {
                             }, children: [jsxRuntime.jsx(plus.default, { className: "mr-2 size-4" }), "Insert row below"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                 if (activeCellPos !== null)
                                     editor.chain().focus().duplicateRowAt(activeCellPos).run();
-                            }, children: [jsxRuntime.jsx(copy.default, { className: "mr-2 size-4" }), "Duplicate row"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuSubTrigger, { children: [jsxRuntime.jsx(palette.default, { className: "mr-2 size-4" }), "Color"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSubContent, { children: COLORS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
+                            }, children: [jsxRuntime.jsx(copy.default, { className: "mr-2 size-4" }), "Duplicate row"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuSubTrigger, { children: [jsxRuntime.jsx(palette.default, { className: "mr-2 size-4" }), "Color"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSubContent, { children: colorConstants.TABLE_BACKGROUND_OPTIONS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                             if (activeCellPos !== null)
-                                                editor
-                                                    .chain()
-                                                    .focus()
-                                                    .setRowBackgroundAt(activeCellPos, color.value || null)
-                                                    .run();
+                                                editor.chain().focus().setRowBackgroundAt(activeCellPos, color.value).run();
                                         }, children: [jsxRuntime.jsx("div", { className: "mr-2 size-4 rounded border", style: { backgroundColor: color.value || "transparent" } }), color.name] }, color.value || "default"))) })] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                 if (activeCellPos !== null)
                                     editor.chain().focus().clearRowAt(activeCellPos).run();
@@ -274,13 +260,9 @@ function ColumnMenu({ editor }) {
                             }, children: [jsxRuntime.jsx(plus.default, { className: "mr-2 size-4" }), "Insert column right"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                 if (activeCellPos !== null)
                                     editor.chain().focus().duplicateColumnAt(activeCellPos).run();
-                            }, children: [jsxRuntime.jsx(copy.default, { className: "mr-2 size-4" }), "Duplicate column"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuSubTrigger, { children: [jsxRuntime.jsx(palette.default, { className: "mr-2 size-4" }), "Color"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSubContent, { children: COLORS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
+                            }, children: [jsxRuntime.jsx(copy.default, { className: "mr-2 size-4" }), "Duplicate column"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuSubTrigger, { children: [jsxRuntime.jsx(palette.default, { className: "mr-2 size-4" }), "Color"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSubContent, { children: colorConstants.TABLE_BACKGROUND_OPTIONS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                             if (activeCellPos !== null)
-                                                editor
-                                                    .chain()
-                                                    .focus()
-                                                    .setColumnBackgroundAt(activeCellPos, color.value || null)
-                                                    .run();
+                                                editor.chain().focus().setColumnBackgroundAt(activeCellPos, color.value).run();
                                         }, children: [jsxRuntime.jsx("div", { className: "mr-2 size-4 rounded border", style: { backgroundColor: color.value || "transparent" } }), color.name] }, color.value || "default"))) })] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                 if (activeCellPos !== null)
                                     editor.chain().focus().clearColumnAt(activeCellPos).run();
@@ -324,12 +306,8 @@ function CellBubbleMenu({ editor }) {
                         editor.chain().focus().splitCell().run();
                     }, disabled: !canSplit, "aria-label": "Split cell", title: "Split cell", children: jsxRuntime.jsx(copy.default, { className: "size-4 rotate-180" }) }), jsxRuntime.jsx("div", { className: "mx-1 h-5 w-px bg-border" }), ALIGNMENT_OPTIONS.map(({ value, icon: Icon, label }) => (jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: utils.cn("size-7", activeAttrs.horizontalAlign === value && "bg-accent text-accent-foreground"), onClick: () => {
                         editor.chain().focus().setCellAlignmentAt(activeCellPos, value).run();
-                    }, "aria-label": label, title: label, children: jsxRuntime.jsx(Icon, { className: "size-4" }) }, value))), jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: utils.cn("size-7", activeAttrs.backgroundColor && "bg-accent text-accent-foreground"), "aria-label": "Cell color", title: "Cell color", children: jsxRuntime.jsx(palette.default, { className: "size-4" }) }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { side: "top", align: "end", className: "w-44", children: COLORS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
-                                    editor
-                                        .chain()
-                                        .focus()
-                                        .setCellBackgroundAt(activeCellPos, color.value || null)
-                                        .run();
+                    }, "aria-label": label, title: label, children: jsxRuntime.jsx(Icon, { className: "size-4" }) }, value))), jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: utils.cn("size-7", activeAttrs.backgroundColor && "bg-accent text-accent-foreground"), "aria-label": "Cell color", title: "Cell color", children: jsxRuntime.jsx(palette.default, { className: "size-4" }) }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { side: "top", align: "end", className: "w-44", children: colorConstants.TABLE_BACKGROUND_OPTIONS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
+                                    editor.chain().focus().setCellBackgroundAt(activeCellPos, color.value).run();
                                 }, children: [jsxRuntime.jsx("div", { className: "mr-2 size-4 rounded border", style: { backgroundColor: color.value || "transparent" } }), color.name] }, color.value || "default"))) })] }), jsxRuntime.jsx("div", { className: "mx-1 h-5 w-px bg-border" }), jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: "size-7", onClick: () => {
                         editor.chain().focus().clearCellAt(activeCellPos).run();
                     }, "aria-label": "Clear cell contents", title: "Clear cell contents", children: jsxRuntime.jsx(x.default, { className: "size-4" }) })] }) }));

package/dist/cjs/components/ui/rich-editor/extensions/table/table-selection-overlay.js

@@ -57,14 +57,6 @@ const TableSelectionOverlay = index$1.Extension.create({
                     }
                     parent.appendChild(overlay);
                     let raf = 0;
-                    const schedule = () => {
-                        if (raf !== 0)
-                            return;
-                        raf = window.requestAnimationFrame(() => {
-                            raf = 0;
-                            updateOverlay();
-                        });
-                    };
                     const updateOverlay = () => {
                         var _a;
                         const pluginState = tableSelectionOverlayKey.getState(view.state);
@@ -101,6 +93,14 @@ const TableSelectionOverlay = index$1.Extension.create({
                         overlay.style.height = `${maxY - minY}px`;
                         overlay.style.display = "block";
                     };
+                    const schedule = () => {
+                        if (raf !== 0)
+                            return;
+                        raf = window.requestAnimationFrame(() => {
+                            raf = 0;
+                            updateOverlay();
+                        });
+                    };
                     window.addEventListener("resize", schedule);
                     window.addEventListener("scroll", schedule, true);
                     schedule();

package/dist/cjs/components/ui/rich-editor/extensions/table/table.js

@@ -15,7 +15,7 @@ var index = require('../../../../../node_modules/@tiptap/extension-table/dist/in
 const Table = index.Table.configure({
     resizable: true,
     HTMLAttributes: {
-        class: "m-0 w-full table-fixed border-collapse text-sm",
+        class: "mt-4 first:mt-0 w-full table-fixed border-collapse text-sm",
     },
 });