art-bd-ui 1.0.39 → 1.0.41

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

@@ -8,7 +8,7 @@ var index = require('../../../../node_modules/@tiptap/extension-blockquote/dist/
  */
 const Blockquote = index.default.configure({
     HTMLAttributes: {
-        class: "mt-6 border-l-4 border-border pl-6 italic text-muted-foreground",
+        class: "mt-6 first:mt-0 border-l-4 border-border pl-6 italic text-muted-foreground",
     },
 });
 

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

@@ -8,7 +8,7 @@ var index = require('../../../../node_modules/@tiptap/extension-bullet-list/dist
  */
 const BulletList = index.default.configure({
     HTMLAttributes: {
-        class: "my-4 ml-6 list-disc [&>li]:mt-2",
+        class: "mt-4 pl-6 list-disc [&>li]:mt-2 first:mt-0",
     },
 });
 

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

@@ -11,7 +11,7 @@ const CAROUSEL_DEFAULT_ATTRS = {
     loop: true,
     showControls: true,
     showThumbnails: false,
-    thumbnailsAlign: "left",
+    thumbnailsAlign: "center",
     controlsPosition: "outside",
     controlsOffsetValue: 16,
     controlsOffsetUnit: "px",

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

@@ -109,7 +109,7 @@ const Carousel = index.Node.create({
         }));
         return [
             "figure",
-            index.mergeAttributes({ "data-type": "carousel" }, { "data-images": JSON.stringify(cleanedImages) }, { "data-layout": rest.layout }, { "data-items-per-view": String(rest.itemsPerView) }, { "data-partial-visible": String(rest.partialVisiblePercent) }, { "data-gap-value": String(rest.gapValue) }, { "data-gap-unit": rest.gapUnit }, { "data-gap": config.toCssUnit(rest.gapValue, rest.gapUnit) }, { "data-autoplay": String(rest.autoplay) }, { "data-interval": String(rest.interval) }, { "data-loop": String(rest.loop) }, { "data-controls": String(rest.showControls) }, { "data-thumbnails": String(rest.showThumbnails) }, { "data-controls-position": rest.controlsPosition }, { "data-controls-offset-value": String(rest.controlsOffsetValue) }, { "data-controls-offset-unit": rest.controlsOffsetUnit }, { "data-controls-offset": config.toCssUnit(rest.controlsOffsetValue, rest.controlsOffsetUnit) }, { "data-container-width-value": String(rest.containerWidthValue) }, { "data-container-width-unit": rest.containerWidthUnit }, { "data-container-width": config.toCssUnit(rest.containerWidthValue, rest.containerWidthUnit) }, { "data-container-height-value": String(rest.containerHeightValue) }, { "data-container-height-unit": rest.containerHeightUnit }, { "data-container-height": config.toCssUnit(rest.containerHeightValue, rest.containerHeightUnit) }, { "data-container-align": rest.containerAlign }, 
+            index.mergeAttributes({ "data-type": "carousel" }, { "data-images": JSON.stringify(cleanedImages) }, { "data-layout": rest.layout }, { "data-items-per-view": String(rest.itemsPerView) }, { "data-partial-visible": String(rest.partialVisiblePercent) }, { "data-gap-value": String(rest.gapValue) }, { "data-gap-unit": rest.gapUnit }, { "data-gap": config.toCssUnit(rest.gapValue, rest.gapUnit) }, { "data-autoplay": String(rest.autoplay) }, { "data-interval": String(rest.interval) }, { "data-loop": String(rest.loop) }, { "data-controls": String(rest.showControls) }, { "data-thumbnails": String(rest.showThumbnails) }, { "data-thumbnails-align": rest.thumbnailsAlign }, { "data-controls-position": rest.controlsPosition }, { "data-controls-offset-value": String(rest.controlsOffsetValue) }, { "data-controls-offset-unit": rest.controlsOffsetUnit }, { "data-controls-offset": config.toCssUnit(rest.controlsOffsetValue, rest.controlsOffsetUnit) }, { "data-container-width-value": String(rest.containerWidthValue) }, { "data-container-width-unit": rest.containerWidthUnit }, { "data-container-width": config.toCssUnit(rest.containerWidthValue, rest.containerWidthUnit) }, { "data-container-height-value": String(rest.containerHeightValue) }, { "data-container-height-unit": rest.containerHeightUnit }, { "data-container-height": config.toCssUnit(rest.containerHeightValue, rest.containerHeightUnit) }, { "data-container-align": rest.containerAlign }, 
             // Legacy compatibility fields
             { "data-peek-amount": `${rest.partialVisiblePercent}%` }, { "data-pagination": String(rest.showThumbnails) }),
         ];

package/dist/cjs/components/ui/rich-editor/extensions/carousel/node-view.js

@@ -90,7 +90,7 @@ function CarouselNodeView({ node, updateAttributes, selected, extension, editor,
             if (event.button !== 0)
                 return;
             selectNode();
-        }, children: hasImages ? (jsxRuntime.jsxs("div", { ref: frameRef, className: utils.cn("relative", selected && "rounded-xl ring-2 ring-primary/50 overflow-hidden"), children: [jsxRuntime.jsx(shared.SharedCarousel, { images: previewAttrs.images, opts: previewAttrs }), isUploading && (jsxRuntime.jsxs("div", { className: "absolute right-3 top-3 z-30 inline-flex items-center gap-2 rounded-full bg-background/95 px-3 py-1 text-xs shadow-sm", children: [jsxRuntime.jsx(loaderCircle.default, { className: "size-3.5 animate-spin" }), "Uploading"] })), selected && (jsxRuntime.jsx(resizeHandle.ResizeHandle, { active: isResizing, onMouseDown: (e) => {
+        }, children: hasImages ? (jsxRuntime.jsxs("div", { ref: frameRef, className: utils.cn("relative overflow-hidden", selected && "rounded-xl ring-2 ring-primary/50"), children: [jsxRuntime.jsx(shared.SharedCarousel, { images: previewAttrs.images, opts: previewAttrs }), isUploading && (jsxRuntime.jsxs("div", { className: "absolute right-3 top-3 z-30 inline-flex items-center gap-2 rounded-full bg-background/95 px-3 py-1 text-xs shadow-sm", children: [jsxRuntime.jsx(loaderCircle.default, { className: "size-3.5 animate-spin" }), "Uploading"] })), selected && (jsxRuntime.jsx(resizeHandle.ResizeHandle, { active: isResizing, onMouseDown: (e) => {
                         selectNode();
                         startResize(e);
                     }, "aria-label": "Resize carousel", title: "Resize carousel" }))] })) : (jsxRuntime.jsx(fileUpload.FileUpload, { className: utils.cn(selected && "ring-2 ring-primary/50 rounded-xl"), accept: { "image/*": [] }, multiple: true, disabled: isUploading, showFileList: false, icon: "image", label: "Add images to carousel", description: "Drop files or click browse. Use the carousel bubble menu to edit settings.", triggerText: "Browse Images", onDropAccepted: (files) => void appendFiles(files) })) }));

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

@@ -120,18 +120,18 @@ function SharedCarousel({ images, opts, className }) {
     if (!slides.length) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { className: utils.cn("w-full", className), children: [jsxRuntime.jsx("div", { style: frameStyle, children: jsxRuntime.jsx("div", { style: viewportStyle, children: jsxRuntime.jsxs(carousel.Carousel, { opts: {
+    return (jsxRuntime.jsx("div", { className: utils.cn("w-full", className), children: jsxRuntime.jsxs("div", { className: "max-w-screen overflow-hidden", style: frameStyle, children: [jsxRuntime.jsx("div", { style: viewportStyle, children: jsxRuntime.jsxs(carousel.Carousel, { opts: {
                             loop: opts.loop,
                             align: "center",
                             axis: "x",
                             containScroll: false,
                         }, plugins: plugins, setApi: (api) => {
                             setCarouselApi(api);
-                        }, className: "w-full h-full", children: [jsxRuntime.jsx(carousel.CarouselContent, { layout: resolvedLayout, itemsPerView: opts.itemsPerView, peekAmount: partialVisible, gap: gap, className: "h-full", children: slides.map((img, index) => (jsxRuntime.jsx(carousel.CarouselItem, { className: "h-full overflow-hidden", children: img.src ? (jsxRuntime.jsx("img", { src: img.src, alt: img.alt, className: "block h-full w-full object-cover" })) : (jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-sm text-muted-foreground", children: "Missing image URL" })) }, `${img.src}-${index}`))) }), opts.showControls && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(carousel.CarouselPrevious, { className: "top-1/2 -translate-y-1/2", style: prevStyle }), jsxRuntime.jsx(carousel.CarouselNext, { className: "top-1/2 -translate-y-1/2", style: nextStyle })] }))] }) }) }), opts.showThumbnails && slides.length > 1 && (jsxRuntime.jsx("div", { className: utils.cn("mt-3 flex gap-2 overflow-x-auto px-1 pb-1", {
-                    "justify-start": opts.thumbnailsAlign === "left",
-                    "justify-center": opts.thumbnailsAlign === "center",
-                    "justify-end": opts.thumbnailsAlign === "right",
-                }), children: slides.map((img, index) => (jsxRuntime.jsx("button", { type: "button", className: utils.cn("relative h-14 w-20 shrink-0 overflow-hidden rounded-md border-2 transition-colors", activeSlide === index ? "border-primary" : "border-transparent hover:border-border"), onClick: () => carouselApi === null || carouselApi === void 0 ? void 0 : carouselApi.scrollTo(index), children: img.src ? (jsxRuntime.jsx("img", { src: img.src, alt: img.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" })) }, `${img.src}-${index}-thumbnail`))) }))] }));
+                        }, className: "w-full h-full", children: [jsxRuntime.jsx(carousel.CarouselContent, { layout: resolvedLayout, itemsPerView: opts.itemsPerView, peekAmount: partialVisible, gap: gap, className: "h-full", children: slides.map((img, index) => (jsxRuntime.jsx(carousel.CarouselItem, { className: "h-full overflow-hidden", children: img.src ? (jsxRuntime.jsx("img", { src: img.src, alt: img.alt, className: "block h-full w-full object-cover" })) : (jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-sm text-muted-foreground", children: "Missing image URL" })) }, `${img.src}-${index}`))) }), opts.showControls && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(carousel.CarouselPrevious, { className: "top-1/2 -translate-y-1/2", style: prevStyle }), jsxRuntime.jsx(carousel.CarouselNext, { className: "top-1/2 -translate-y-1/2", style: nextStyle })] }))] }) }), opts.showThumbnails && slides.length > 1 && (jsxRuntime.jsx("div", { className: "mt-3 overflow-x-auto px-1 pb-1", children: jsxRuntime.jsx("div", { className: utils.cn("flex min-w-full gap-2", {
+                            "justify-start": opts.thumbnailsAlign === "left",
+                            "justify-center": opts.thumbnailsAlign === "center",
+                            "justify-end": opts.thumbnailsAlign === "right",
+                        }), children: slides.map((img, index) => (jsxRuntime.jsx("button", { type: "button", className: utils.cn("relative h-14 w-20 shrink-0 overflow-hidden rounded-md border-2 transition-colors", activeSlide === index ? "border-primary" : "border-transparent hover:border-border"), onClick: () => carouselApi === null || carouselApi === void 0 ? void 0 : carouselApi.scrollTo(index), children: img.src ? (jsxRuntime.jsx("img", { src: img.src, alt: img.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" })) }, `${img.src}-${index}-thumbnail`))) }) }))] }) }));
 }
 
 exports.SharedCarousel = SharedCarousel;

package/dist/cjs/components/ui/rich-editor/extensions/code-block/lowlight-base.js

@@ -65,7 +65,17 @@ const CodeBlockLowlightBase = index.default.extend({
     },
     addKeyboardShortcuts() {
         var _a;
-        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { "Mod-s": () => {
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { "Mod-a": () => {
+                const currentCodeBlock = findCodeBlockAtSelection(this.editor.state);
+                if (!currentCodeBlock) {
+                    return false;
+                }
+                const from = currentCodeBlock.pos + 1;
+                const to = currentCodeBlock.pos + currentCodeBlock.node.nodeSize - 1;
+                const tr = this.editor.state.tr.setSelection(index$1.TextSelection.create(this.editor.state.doc, from, to));
+                this.editor.view.dispatch(tr);
+                return true;
+            }, "Mod-s": () => {
                 const currentCodeBlock = findCodeBlockAtSelection(this.editor.state);
                 const language = currentCodeBlock === null || currentCodeBlock === void 0 ? void 0 : currentCodeBlock.node.attrs.language;
                 if (!currentCodeBlock || !utils.canPrettifyCodeLanguage(language)) {

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

@@ -10,7 +10,7 @@ var index = require('../../../../node_modules/@tiptap/extension-details/dist/ind
  */
 const DetailsContent = index.DetailsContent.configure({
     HTMLAttributes: {
-        class: "px-4 py-3 text-sm",
+        class: "px-4 pb-4 pt-3 text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
     },
 });
 

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

@@ -10,7 +10,7 @@ var index = require('../../../../node_modules/@tiptap/extension-details/dist/ind
  */
 const DetailsSummary = index.DetailsSummary.configure({
     HTMLAttributes: {
-        class: "flex cursor-pointer items-center justify-between rounded-t-lg bg-muted/50 px-4 py-3 font-semibold text-foreground hover:bg-muted transition-colors [&::-webkit-details-marker]:hidden",
+        class: "relative m-0 list-none rounded-lg bg-muted/40 px-12 py-3 text-sm font-medium leading-6 text-foreground transition-colors outline-none hover:bg-muted/60 before:absolute before:left-6 before:top-1/2 before:inline-block before:-translate-y-1/2 before:text-xs before:leading-none before:text-muted-foreground before:transition-transform before:content-['❯'] [.is-open_&]:rounded-b-none [.is-open_&]:border-b [.is-open_&]:border-border [.is-open_&]:before:rotate-90 [.is-open_&]:before:transform group-open/details:rounded-b-none group-open/details:border-b group-open/details:border-border group-open/details:before:rotate-90 group-open/details:before:transform [[data-type='details']_&]:before:content-none [&::-webkit-details-marker]:hidden",
     },
 });
 

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

@@ -12,7 +12,7 @@ const Details = index.Details.configure({
     persist: true, // Save open/closed state in document
     openClassName: "is-open",
     HTMLAttributes: {
-        class: "my-4 rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+        class: "group/details relative mt-4 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm first:mt-0 [&>button]:absolute [&>button]:left-3 [&>button]:top-3 [&>button]:z-10 [&>button]:inline-flex [&>button]:size-6 [&>button]:cursor-pointer [&>button]:items-center [&>button]:justify-center [&>button]:rounded-md [&>button]:border-0 [&>button]:bg-transparent [&>button]:p-0 [&>button]:text-muted-foreground [&>button]:transition-colors [&>button:hover]:bg-muted [&>button:hover]:text-foreground [&>button:focus-visible]:outline-none [&>button:focus-visible]:ring-2 [&>button:focus-visible]:ring-ring [&>button:focus-visible]:ring-offset-2 [&>button:focus-visible]:ring-offset-background [&>button::before]:inline-block [&>button::before]:text-xs [&>button::before]:leading-none [&>button::before]:transition-transform [&>button::before]:content-['❯'] [&.is-open>button::before]:rotate-90 [&.is-open>button::before]:transform",
     },
 });
 

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

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../../node_modules/@tiptap/extension-emoji/dist/index.js');
+var emojiPickerReact_esm = require('../../../../node_modules/emoji-picker-react/dist/emoji-picker-react.esm.js');
+
+const getEmojiItems = (editor) => {
+    var _a;
+    const storageEmojis = (_a = editor.storage.emoji) === null || _a === void 0 ? void 0 : _a.emojis;
+    if (Array.isArray(storageEmojis) && storageEmojis.length > 0) {
+        return storageEmojis;
+    }
+    return index.emojis;
+};
+const compactPickerStyle = {
+    "--epr-horizontal-padding": "8px",
+    "--epr-header-padding": "10px var(--epr-horizontal-padding)",
+    "--epr-search-input-height": "34px",
+    "--epr-search-input-padding": "0 28px",
+    "--epr-search-input-border-radius": "7px",
+    "--epr-search-bar-inner-padding": "8px",
+    "--epr-category-navigation-button-size": "24px",
+    "--epr-category-padding": "0 var(--epr-horizontal-padding)",
+    "--epr-category-label-padding": "0 var(--epr-horizontal-padding)",
+    "--epr-category-label-height": "28px",
+    "--epr-emoji-size": "24px",
+    "--epr-emoji-padding": "3px",
+    "--epr-picker-border-radius": "10px",
+};
+function EmojiSuggestionMenu({ editor, command }) {
+    const emojiItems = getEmojiItems(editor);
+    const preventEditorBlur = (event) => {
+        event.preventDefault();
+    };
+    const handleEmojiClick = (emojiData) => {
+        const shortcode = index.emojiToShortcode(emojiData.emoji, emojiItems);
+        if (!shortcode) {
+            return;
+        }
+        command({ name: shortcode });
+    };
+    return (jsxRuntime.jsx("div", { className: "overflow-hidden rounded-md border bg-popover shadow-md", onMouseDownCapture: preventEditorBlur, children: jsxRuntime.jsx(emojiPickerReact_esm.default, { width: 280, height: 320, theme: emojiPickerReact_esm.Theme.AUTO, autoFocusSearch: false, skinTonesDisabled: true, style: compactPickerStyle, searchPlaceholder: "Search emoji", previewConfig: { showPreview: false }, onEmojiClick: handleEmojiClick }) }));
+}
+
+exports.EmojiSuggestionMenu = EmojiSuggestionMenu;

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

@@ -0,0 +1,70 @@
+'use strict';
+
+var index$2 = require('../../../../node_modules/@tiptap/extension-emoji/dist/index.js');
+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 emojiSuggestionMenu = require('./emoji-suggestion-menu.js');
+
+const renderEmojiSuggestion = () => {
+    let component = null;
+    let popup = [];
+    let activeEditor = null;
+    return {
+        onStart: (props) => {
+            activeEditor = props.editor;
+            activeEditor.commands.setMeta("lockDragHandle", true);
+            component = new index$1.ReactRenderer(emojiSuggestionMenu.EmojiSuggestionMenu, {
+                props: {
+                    editor: props.editor,
+                    range: props.range,
+                    command: props.command,
+                },
+                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,
+                hideOnClick: false,
+                trigger: "manual",
+                placement: "bottom-start",
+                offset: [0, 8],
+                maxWidth: "none",
+            });
+        },
+        onUpdate: (props) => {
+            var _a;
+            activeEditor = props.editor;
+            activeEditor.commands.setMeta("lockDragHandle", true);
+            component === null || component === void 0 ? void 0 : component.updateProps({
+                editor: props.editor,
+                range: props.range,
+                command: props.command,
+            });
+            (_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) => {
+            if (props.event.key === "Escape") {
+                index.exitSuggestion(props.view, index$2.EmojiSuggestionPluginKey);
+                return true;
+            }
+            return false;
+        },
+        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.renderEmojiSuggestion = renderEmojiSuggestion;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('../../../../node_modules/@tiptap/extension-emoji/dist/index.js');
+var emojiSuggestionRenderer = require('./emoji-suggestion-renderer.js');
+
+/**
+ * Emoji node extension with a stable class for editor/renderer styling.
+ */
+const Emoji = index.default.configure({
+    HTMLAttributes: {
+        class: "rich-editor-emoji",
+    },
+});
+/**
+ * Editor-specific emoji extension with cursor-anchored picker suggestions.
+ */
+const EmojiEditor = index.default.configure({
+    HTMLAttributes: {
+        class: "rich-editor-emoji",
+    },
+    suggestion: {
+        render: emojiSuggestionRenderer.renderEmojiSuggestion,
+    },
+});
+
+exports.Emoji = Emoji;
+exports.EmojiEditor = EmojiEditor;

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

@@ -5,11 +5,11 @@ var index = require('../../../../node_modules/@tiptap/extension-heading/dist/ind
 
 const styles = {
     1: "scroll-m-20 text-4xl font-extrabold tracking-tight text-balance mt-8 first:mt-0",
-    2: "scroll-m-20 text-3xl font-semibold tracking-tight mt-8 first:mt-0",
-    3: "scroll-m-20 text-2xl font-semibold tracking-tight mt-8 first:mt-0",
-    4: "scroll-m-20 text-xl font-semibold tracking-tight mt-6 first:mt-0",
-    5: "scroll-m-20 text-lg font-semibold mt-6 first:mt-0",
-    6: "scroll-m-20 text-base font-semibold mt-6 first:mt-0",
+    2: "scroll-m-20 text-3xl font-semibold tracking-tight mt-5 py-1 first:mt-0",
+    3: "scroll-m-20 text-2xl font-semibold tracking-tight mt-3 py-1.5 first:mt-0",
+    4: "scroll-m-20 text-xl font-semibold tracking-tight mt-2 first:mt-0",
+    5: "scroll-m-20 text-lg font-semibold mt-2 first:mt-0",
+    6: "scroll-m-20 text-base font-semibold mt-2 first:mt-0",
 };
 /**
  * Custom Heading extension with shadcn typography styling.

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

@@ -8,7 +8,7 @@ var index = require('../../../../node_modules/@tiptap/extension-horizontal-rule/
  */
 const HorizontalRule = index.default.configure({
     HTMLAttributes: {
-        class: "my-8 border-border",
+        class: "my-5 border-border",
     },
 });
 

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

@@ -0,0 +1,236 @@
+'use strict';
+
+var index$1 = require('../../../../node_modules/@tiptap/core/dist/index.js');
+var index = require('../../../../node_modules/@tiptap/extension-image/dist/index.js');
+
+const IMAGE_ALIGNMENTS = ["left", "center", "right"];
+const IMAGE_ELEMENT_CLASS = "rich-editor-image";
+const IMAGE_NODE_VIEW_CLASSES = {
+    container: "rich-editor-image-resize-container",
+    wrapper: "rich-editor-image-resize-wrapper",
+    handle: "rich-editor-image-resize-handle",
+    resizing: "rich-editor-image-resizing",
+};
+function toImageAlignment(value) {
+    if (typeof value !== "string") {
+        return null;
+    }
+    return IMAGE_ALIGNMENTS.includes(value) ? value : null;
+}
+function parseImageAlignment(value) {
+    const parsed = toImageAlignment(value);
+    if (parsed) {
+        return parsed;
+    }
+    return "left";
+}
+function parsePixelDimension(value) {
+    if (typeof value === "number" && Number.isFinite(value)) {
+        return Math.max(1, Math.round(value));
+    }
+    if (typeof value === "string") {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return null;
+        }
+        const parsed = Number.parseFloat(trimmed.replace(/px$/i, ""));
+        if (Number.isFinite(parsed)) {
+            return Math.max(1, Math.round(parsed));
+        }
+    }
+    return null;
+}
+function applyNodeAlignment(container, value) {
+    const alignment = parseImageAlignment(value);
+    container.dataset.imageAlign = alignment;
+    if (alignment === "center") {
+        container.style.justifyContent = "center";
+        return;
+    }
+    if (alignment === "right") {
+        container.style.justifyContent = "flex-end";
+        return;
+    }
+    container.style.justifyContent = "flex-start";
+}
+function applyImageDimensions(element, width, height) {
+    const parsedWidth = parsePixelDimension(width);
+    const parsedHeight = parsePixelDimension(height);
+    if (parsedWidth === null) {
+        element.style.removeProperty("width");
+        element.removeAttribute("width");
+    }
+    else {
+        element.style.width = `${parsedWidth}px`;
+        element.setAttribute("width", String(parsedWidth));
+    }
+    if (parsedHeight === null) {
+        element.style.removeProperty("height");
+        element.removeAttribute("height");
+    }
+    else {
+        element.style.height = `${parsedHeight}px`;
+        element.setAttribute("height", String(parsedHeight));
+    }
+}
+function applyImageElementAttributes(element, attrs) {
+    const src = typeof attrs.src === "string" ? attrs.src : "";
+    if (src) {
+        if (element.getAttribute("src") !== src) {
+            element.setAttribute("src", src);
+            element.src = src;
+        }
+    }
+    else {
+        element.removeAttribute("src");
+    }
+    const alt = typeof attrs.alt === "string" ? attrs.alt : null;
+    if (alt !== null) {
+        element.setAttribute("alt", alt);
+    }
+    else {
+        element.removeAttribute("alt");
+    }
+    const title = typeof attrs.title === "string" ? attrs.title : null;
+    if (title !== null && title.length > 0) {
+        element.setAttribute("title", title);
+    }
+    else {
+        element.removeAttribute("title");
+    }
+    const align = parseImageAlignment(attrs.align);
+    if (align === "left") {
+        element.removeAttribute("data-align");
+    }
+    else {
+        element.setAttribute("data-align", align);
+    }
+}
+/**
+ * Image extension with persisted alignment metadata.
+ * Alignment is stored as `data-align` to avoid conflicting with resize styles.
+ */
+const Image = index.default.extend({
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { align: {
+                default: "left",
+                parseHTML: (element) => {
+                    const fromAttr = toImageAlignment(element.getAttribute("data-align"));
+                    if (fromAttr) {
+                        return fromAttr;
+                    }
+                    const style = element.style;
+                    const fromFloat = toImageAlignment(style.float);
+                    if (fromFloat) {
+                        return fromFloat;
+                    }
+                    if (style.marginLeft === "auto" && style.marginRight === "auto") {
+                        return "center";
+                    }
+                    if (style.marginLeft === "auto") {
+                        return "right";
+                    }
+                    return "left";
+                },
+                renderHTML: (attributes) => {
+                    const align = parseImageAlignment(attributes.align);
+                    if (align === "left") {
+                        return {};
+                    }
+                    return {
+                        "data-align": align,
+                    };
+                },
+            } });
+    },
+    addNodeView() {
+        const resizeOptions = this.options.resize;
+        if (!resizeOptions || !resizeOptions.enabled || typeof document === "undefined" || !this.editor.isEditable) {
+            return null;
+        }
+        const { directions, minWidth, minHeight, alwaysPreserveAspectRatio } = resizeOptions;
+        return ({ node, getPos, HTMLAttributes }) => {
+            const element = document.createElement("img");
+            element.classList.add(IMAGE_ELEMENT_CLASS);
+            Object.entries(HTMLAttributes).forEach(([key, value]) => {
+                if (value == null || key === "width" || key === "height" || key === "align") {
+                    return;
+                }
+                element.setAttribute(key, String(value));
+            });
+            applyImageElementAttributes(element, node.attrs);
+            applyImageDimensions(element, node.attrs.width, node.attrs.height);
+            const nodeView = new index$1.ResizableNodeView({
+                editor: this.editor,
+                element,
+                node,
+                getPos,
+                onResize: (width, height) => {
+                    element.style.width = `${width}px`;
+                    element.style.height = `${height}px`;
+                },
+                onCommit: (width, height) => {
+                    const pos = getPos();
+                    if (pos === undefined) {
+                        return;
+                    }
+                    this.editor
+                        .chain()
+                        .setNodeSelection(pos)
+                        .updateAttributes(this.name, {
+                        width,
+                        height,
+                    })
+                        .run();
+                },
+                onUpdate: (updatedNode) => {
+                    if (updatedNode.type.name !== this.name) {
+                        return false;
+                    }
+                    applyImageElementAttributes(element, updatedNode.attrs);
+                    applyImageDimensions(element, updatedNode.attrs.width, updatedNode.attrs.height);
+                    applyNodeAlignment(nodeView.dom, updatedNode.attrs.align);
+                    return true;
+                },
+                options: {
+                    directions,
+                    min: {
+                        width: minWidth,
+                        height: minHeight,
+                    },
+                    preserveAspectRatio: alwaysPreserveAspectRatio === true,
+                    className: IMAGE_NODE_VIEW_CLASSES,
+                },
+            });
+            const dom = nodeView.dom;
+            dom.style.width = "100%";
+            applyNodeAlignment(dom, node.attrs.align);
+            const revealNode = () => {
+                dom.style.visibility = "";
+                dom.style.pointerEvents = "";
+            };
+            dom.style.visibility = "hidden";
+            dom.style.pointerEvents = "none";
+            if (element.complete) {
+                revealNode();
+            }
+            else {
+                element.onload = revealNode;
+                element.onerror = revealNode;
+            }
+            return nodeView;
+        };
+    },
+    renderHTML({ HTMLAttributes }) {
+        const className = [HTMLAttributes.class, IMAGE_ELEMENT_CLASS].filter(Boolean).join(" ");
+        return [
+            "img",
+            index$1.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+                class: className || undefined,
+            }),
+        ];
+    },
+});
+
+exports.Image = Image;

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

@@ -8,7 +8,7 @@ var index = require('../../../../node_modules/@tiptap/extension-ordered-list/dis
  */
 const OrderedList = index.default.configure({
     HTMLAttributes: {
-        class: "my-4 ml-6 list-decimal [&>li]:mt-2",
+        class: "mt-4 pl-6 list-decimal [&>li]:mt-2 first:mt-0",
     },
 });
 

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

@@ -8,7 +8,7 @@ var index = require('../../../../node_modules/@tiptap/extension-paragraph/dist/i
  */
 const Paragraph = index.default.configure({
     HTMLAttributes: {
-        class: "leading-7 [&:not(:first-child)]:mt-6",
+        class: "leading-7 [&:not(:first-child)]:mt-1.5",
     },
 });