art-bd-ui 1.0.21 → 1.0.23

package/dist/esm/components/ui/rich-editor/rich-content-preview.js

@@ -0,0 +1,321 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { generateJSON } from '../../../node_modules/@tiptap/html/dist/index.js';
+import index_default from '../../../node_modules/@tiptap/extension-document/dist/index.js';
+import index_default$1 from '../../../node_modules/@tiptap/extension-text/dist/index.js';
+import index_default$3 from '../../../node_modules/@tiptap/extension-bold/dist/index.js';
+import index_default$4 from '../../../node_modules/@tiptap/extension-italic/dist/index.js';
+import index_default$5 from '../../../node_modules/@tiptap/extension-strike/dist/index.js';
+import index_default$2 from '../../../node_modules/@tiptap/extension-hard-break/dist/index.js';
+import { TextStyleKit } from '../../../node_modules/@tiptap/extension-text-style/dist/index.js';
+import { Heading } from './extensions/heading.js';
+import { Paragraph } from './extensions/paragraph.js';
+import { Blockquote } from './extensions/blockquote.js';
+import { BulletList } from './extensions/bullet-list.js';
+import { OrderedList } from './extensions/ordered-list.js';
+import { ListItem } from './extensions/list-item.js';
+import { Details } from './extensions/details.js';
+import { DetailsSummary } from './extensions/details-summary.js';
+import { DetailsContent } from './extensions/details-content.js';
+import { Table } from './extensions/table.js';
+import { TableRow } from './extensions/table-row.js';
+import { TableHeader } from './extensions/table-header.js';
+import { TableCell } from './extensions/table-cell.js';
+import { Carousel } from './extensions/carousel.js';
+import { Code } from './extensions/code.js';
+import { Subscript } from './extensions/subscript.js';
+import { Superscript } from './extensions/superscript.js';
+import { cn } from '../../../lib/utils.js';
+import { Carousel as Carousel$1, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '../carousel/carousel.js';
+import { createLowlight } from '../../../node_modules/lowlight/lib/index.js';
+import { grammars } from '../../../node_modules/lowlight/lib/common.js';
+
+const lowlightInstance = createLowlight(grammars);
+/**
+ * Renders rich editor content with styles that exactly match the editor's appearance.
+ * Unlike RichContentRenderer (which uses prose/article typography), this component
+ * reproduces the same CSS classes used by the TipTap extensions in the editor.
+ */
+function RichContentPreview({ doc, html, className }) {
+    const json = React.useMemo(() => {
+        if (doc)
+            return doc;
+        if (!html)
+            return null;
+        try {
+            return generateJSON(html, [
+                index_default,
+                index_default$1,
+                Paragraph,
+                Heading,
+                Blockquote,
+                BulletList,
+                OrderedList,
+                ListItem,
+                Details,
+                DetailsSummary,
+                DetailsContent,
+                index_default$2,
+                index_default$3,
+                index_default$4,
+                index_default$5,
+                Code,
+                Subscript,
+                Superscript,
+                TextStyleKit,
+                Carousel,
+                Table,
+                TableRow,
+                TableCell,
+                TableHeader,
+            ]);
+        }
+        catch (_a) {
+            return null;
+        }
+    }, [doc, html]);
+    if (!json) {
+        if (html)
+            return jsx("div", { className: cn(className), dangerouslySetInnerHTML: { __html: html } });
+        return null;
+    }
+    return (jsx("div", { className: cn("max-w-none", 
+        // Table styles matching editor's editorProps.attributes.class
+        "[&_table]:w-full [&_table]:caption-bottom [&_table]:text-sm [&_table]:border-collapse [&_table]:border [&_table]:box-border", "[&_table_tr:last-child_td]:border-b-0", "[&_table_th:last-child]:border-r-0 [&_table_td:last-child]:border-r-0", className), children: renderNode(json) }));
+}
+// --- Heading styles matching extensions/heading.ts ---
+const headingStyles = {
+    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",
+};
+// --- Recursive render ---
+function renderChildren(node) {
+    return (node.content || []).map((child, i) => jsx(React.Fragment, { children: renderNode(child) }, i));
+}
+function renderNode(node) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    const type = node.type;
+    switch (type) {
+        case "doc":
+            return jsx(Fragment, { children: renderChildren(node) });
+        // Paragraph — matches extensions/paragraph.ts
+        case "paragraph": {
+            const textAlign = ((_a = node.attrs) === null || _a === void 0 ? void 0 : _a.textAlign) || undefined;
+            const indent = ((_b = node.attrs) === null || _b === void 0 ? void 0 : _b.indent) || 0;
+            const style = {};
+            if (textAlign)
+                style.textAlign = textAlign;
+            if (indent > 0)
+                style.paddingInlineStart = `${indent * 2}rem`;
+            return (jsx("p", { className: "leading-7 [&:not(:first-child)]:mt-6", style: Object.keys(style).length > 0 ? style : undefined, children: textContent(node) }));
+        }
+        // Heading — matches extensions/heading.ts
+        case "heading": {
+            const level = ((_c = node.attrs) === null || _c === void 0 ? void 0 : _c.level) || 1;
+            const textAlign = ((_d = node.attrs) === null || _d === void 0 ? void 0 : _d.textAlign) || undefined;
+            const indent = ((_e = node.attrs) === null || _e === void 0 ? void 0 : _e.indent) || 0;
+            const Tag = `h${level}`;
+            const style = {};
+            if (textAlign)
+                style.textAlign = textAlign;
+            if (indent > 0)
+                style.paddingInlineStart = `${indent * 2}rem`;
+            return (jsx(Tag, { className: headingStyles[level] || headingStyles[1], style: Object.keys(style).length > 0 ? style : undefined, children: textContent(node) }));
+        }
+        // Blockquote — matches extensions/blockquote.ts
+        case "blockquote":
+            return (jsx("blockquote", { className: "mt-6 border-l-4 border-border pl-6 italic text-muted-foreground", children: textContent(node) }));
+        // Lists — matches extensions/bullet-list.ts, ordered-list.ts, list-item.ts
+        case "bulletList":
+            return jsx("ul", { className: "my-4 ml-6 list-disc [&>li]:mt-2", children: renderChildren(node) });
+        case "orderedList":
+            return jsx("ol", { className: "my-4 ml-6 list-decimal [&>li]:mt-2", children: renderChildren(node) });
+        case "listItem":
+            return jsx("li", { className: "leading-7", children: renderChildren(node) });
+        // HorizontalRule — matches extensions/horizontal-rule.ts
+        case "horizontalRule":
+            return jsx("hr", { className: "my-8 border-border" });
+        // CodeBlock — matches extensions/code-block-lowlight.ts styling
+        case "codeBlock": {
+            const language = ((_f = node.attrs) === null || _f === void 0 ? void 0 : _f.language) || undefined;
+            const code = plainText(node);
+            const result = lowlightInstance.highlight(language || "plaintext", code);
+            const tree = (result.children || []);
+            const toReact = (nodes) => nodes.map((n, i) => {
+                var _a, _b;
+                if (n.type === "text")
+                    return n.value;
+                const cls = ((_b = (_a = n.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" ")) || undefined;
+                return (jsx("span", { className: cls, children: toReact(n.children || []) }, i));
+            });
+            return (jsx("pre", { className: cn("rounded-md border p-4 text-sm", "bg-background text-foreground", "[&_.hljs-doctag]:text-[#d73a49] [&_.hljs-keyword]:text-[#d73a49] [&_.hljs-meta_.hljs-keyword]:text-[#d73a49] [&_.hljs-template-tag]:text-[#d73a49] [&_.hljs-template-variable]:text-[#d73a49] [&_.hljs-type]:text-[#d73a49] [&_.hljs-variable.language_]:text-[#d73a49]", "[&_.hljs-title.class_.inherited__]:text-[#6f42c1] [&_.hljs-title.class_]:text-[#6f42c1] [&_.hljs-title.function_]:text-[#6f42c1] [&_.hljs-title]:text-[#6f42c1]", "[&_.hljs-attr]:text-[#005cc5] [&_.hljs-attribute]:text-[#005cc5] [&_.hljs-literal]:text-[#005cc5] [&_.hljs-meta]:text-[#005cc5] [&_.hljs-number]:text-[#005cc5] [&_.hljs-operator]:text-[#005cc5] [&_.hljs-selector-attr]:text-[#005cc5] [&_.hljs-selector-class]:text-[#005cc5] [&_.hljs-selector-id]:text-[#005cc5] [&_.hljs-variable]:text-[#005cc5]", "[&_.hljs-meta_.hljs-string]:text-[#032f62] [&_.hljs-regexp]:text-[#032f62] [&_.hljs-string]:text-[#032f62]", "[&_.hljs-built_in]:text-[#e36209] [&_.hljs-symbol]:text-[#e36209]", "[&_.hljs-code]:text-[#6a737d] [&_.hljs-comment]:text-[#6a737d] [&_.hljs-formula]:text-[#6a737d]", "[&_.hljs-name]:text-[#22863a] [&_.hljs-quote]:text-[#22863a] [&_.hljs-selector-pseudo]:text-[#22863a] [&_.hljs-selector-tag]:text-[#22863a]", "[&_.hljs-subst]:text-[#24292e]", "[&_.hljs-section]:font-bold [&_.hljs-section]:text-[#005cc5]", "[&_.hljs-bullet]:text-[#735c0f]", "[&_.hljs-emphasis]:text-[#24292e] [&_.hljs-emphasis]:italic", "[&_.hljs-strong]:font-bold [&_.hljs-strong]:text-[#24292e]", "[&_.hljs-addition]:bg-[#f0fff4] [&_.hljs-addition]:text-[#22863a]", "[&_.hljs-deletion]:bg-[#ffeef0] [&_.hljs-deletion]:text-[#b31d28]"), children: jsx("code", { className: cn("font-mono", language ? `language-${language}` : undefined), children: toReact(tree) }) }));
+        }
+        // Image — supports width/height from editor's resize
+        case "image": {
+            const src = String(((_g = node.attrs) === null || _g === void 0 ? void 0 : _g.src) || "");
+            const alt = String(((_h = node.attrs) === null || _h === void 0 ? void 0 : _h.alt) || "");
+            const width = (_j = node.attrs) === null || _j === void 0 ? void 0 : _j.width;
+            const height = (_k = node.attrs) === null || _k === void 0 ? void 0 : _k.height;
+            const style = {};
+            if (width)
+                style.width = typeof width === "number" ? `${width}px` : width;
+            if (height)
+                style.height = typeof height === "number" ? `${height}px` : height;
+            return (jsx("img", { src: src, alt: alt, className: "my-6 rounded-lg", style: Object.keys(style).length > 0 ? style : undefined }));
+        }
+        // Table — matches extensions/table.ts (native table, no shadcn wrappers)
+        case "table": {
+            const rows = node.content || [];
+            const headerRows = [];
+            const bodyRows = [];
+            rows.forEach((row, rowIndex) => {
+                const rowContent = row.content || [];
+                const hasHeader = rowContent.some((cell) => cell.type === "tableHeader");
+                const rowNode = (jsx("tr", { className: "border-b border-border", children: renderChildren(row) }, rowIndex));
+                if (hasHeader) {
+                    headerRows.push(rowNode);
+                }
+                else {
+                    bodyRows.push(rowNode);
+                }
+            });
+            return (jsxs("table", { className: "w-full caption-bottom text-sm border-collapse my-4 border box-border", children: [headerRows.length > 0 && jsx("thead", { children: headerRows }), jsx("tbody", { children: bodyRows })] }));
+        }
+        case "tableRow":
+            return jsx(Fragment, { children: renderChildren(node) });
+        // TableCell — matches extensions/table-cell.ts
+        case "tableCell":
+            return (jsx("td", { className: "px-2 py-4 align-middle bg-inherit border-b border-r border-border break-words [overflow-wrap:break-word] max-w-0", children: renderChildren(node) }));
+        // TableHeader — matches extensions/table-header.ts
+        case "tableHeader":
+            return (jsx("th", { className: "h-10 px-2 py-4 text-left align-middle font-semibold text-foreground bg-muted/50 border-b border-r border-border break-words [overflow-wrap:break-word]", children: renderChildren(node) }));
+        // Carousel — same rendering as RichContentRenderer
+        case "carousel": {
+            const images = ((_l = node.attrs) === null || _l === void 0 ? void 0 : _l.images) || [];
+            const aspect = ((_m = node.attrs) === null || _m === void 0 ? void 0 : _m.aspectRatio) || "16/9";
+            const ratioClass = aspect === "4/3"
+                ? "aspect-[4/3]"
+                : aspect === "1/1"
+                    ? "aspect-square"
+                    : aspect === "21/9"
+                        ? "aspect-[21/9]"
+                        : "aspect-video";
+            const opts = node.attrs;
+            return (jsx("div", { className: cn(ratioClass, "my-8 w-full overflow-hidden rounded-lg"), children: jsxs(Carousel$1, { opts: { loop: !!(opts === null || opts === void 0 ? void 0 : opts.loop) }, children: [jsx(CarouselContent, { children: images.map((img, i) => (jsx(CarouselItem, { className: (opts === null || opts === void 0 ? void 0 : opts.view) === "cards" ? "md:basis-1/2 lg:basis-1/3" : "", children: jsx("div", { className: "relative h-full w-full overflow-hidden rounded-md", children: jsx("img", { src: img.src, alt: img.alt || "", className: "h-full w-full object-cover" }) }) }, i))) }), jsx(CarouselPrevious, { className: "left-2" }), jsx(CarouselNext, { className: "right-2" })] }) }));
+        }
+        // Columns — matches extensions/columns.ts renderHTML
+        case "columns": {
+            const columns = (_p = (_o = node.attrs) === null || _o === void 0 ? void 0 : _o.columns) !== null && _p !== void 0 ? _p : 3;
+            return (jsx("div", { "data-type": "columns", className: "columns-layout grid gap-4 my-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: renderChildren(node) }));
+        }
+        // Column — matches extensions/columns.ts Column renderHTML (simple div)
+        case "column":
+            return jsx("div", { "data-type": "column", children: renderChildren(node) });
+        // Details — matches extensions/details.ts
+        case "details": {
+            const open = (_r = (_q = node.attrs) === null || _q === void 0 ? void 0 : _q.open) !== null && _r !== void 0 ? _r : false;
+            return (jsx("details", { open: open, className: "my-4 rounded-lg border border-border bg-card text-card-foreground shadow-sm", children: renderChildren(node) }));
+        }
+        // DetailsSummary — matches extensions/details-summary.ts
+        case "detailsSummary":
+            return (jsx("summary", { className: "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", children: textContent(node) }));
+        // DetailsContent — matches extensions/details-content.ts
+        case "detailsContent":
+            return jsx("div", { className: "px-4 py-3 text-sm", children: renderChildren(node) });
+        // YouTube embed
+        case "youtube": {
+            const src = (_s = node.attrs) === null || _s === void 0 ? void 0 : _s.src;
+            const width = ((_t = node.attrs) === null || _t === void 0 ? void 0 : _t.width) || 640;
+            const height = ((_u = node.attrs) === null || _u === void 0 ? void 0 : _u.height) || 480;
+            return (jsx("div", { className: "my-6", style: { maxWidth: width }, children: jsx("div", { style: { position: "relative", paddingBottom: `${(height / width) * 100}%` }, children: jsx("iframe", { src: src, className: "absolute inset-0 h-full w-full rounded-lg", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }) }));
+        }
+        default:
+            if (!type)
+                return renderInline(node);
+            return null;
+    }
+}
+function renderInline(node) {
+    if (node.text) {
+        let el = node.text;
+        const marks = node.marks || [];
+        let color;
+        let backgroundColor;
+        let fontSize;
+        let fontFamily;
+        marks.forEach((m) => {
+            var _a, _b, _c, _d, _e;
+            switch (m.type) {
+                case "bold":
+                    el = jsx("strong", { children: el });
+                    break;
+                case "italic":
+                    el = jsx("em", { children: el });
+                    break;
+                case "strike":
+                    el = jsx("s", { children: el });
+                    break;
+                case "underline":
+                    el = jsx("u", { children: el });
+                    break;
+                // Code — matches extensions/code.ts (renders as <kbd>)
+                case "code":
+                    el = (jsx("kbd", { className: "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium", children: el }));
+                    break;
+                case "highlight":
+                    el = jsx("mark", { className: "bg-yellow-200 dark:bg-yellow-900", children: el });
+                    break;
+                // Subscript — matches extensions/subscript.ts
+                case "subscript":
+                    el = jsx("sub", { className: "text-[0.65em] align-sub", children: el });
+                    break;
+                // Superscript — matches extensions/superscript.ts
+                case "superscript":
+                    el = jsx("sup", { className: "text-[0.65em] align-super", children: el });
+                    break;
+                case "textStyle":
+                    if ((_a = m.attrs) === null || _a === void 0 ? void 0 : _a.color)
+                        color = m.attrs.color;
+                    if ((_b = m.attrs) === null || _b === void 0 ? void 0 : _b.backgroundColor)
+                        backgroundColor = m.attrs.backgroundColor;
+                    if ((_c = m.attrs) === null || _c === void 0 ? void 0 : _c.fontSize)
+                        fontSize = m.attrs.fontSize;
+                    if ((_d = m.attrs) === null || _d === void 0 ? void 0 : _d.fontFamily)
+                        fontFamily = m.attrs.fontFamily;
+                    break;
+                case "link":
+                    el = (jsx("a", { href: (_e = m.attrs) === null || _e === void 0 ? void 0 : _e.href, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline underline-offset-4 hover:text-primary/80", children: el }));
+                    break;
+            }
+        });
+        if (color || backgroundColor || fontSize || fontFamily) {
+            const style = {};
+            if (color)
+                style.color = color;
+            if (backgroundColor)
+                style.backgroundColor = backgroundColor;
+            if (fontSize)
+                style.fontSize = fontSize;
+            if (fontFamily)
+                style.fontFamily = fontFamily;
+            el = jsx("span", { style: style, children: el });
+        }
+        return el;
+    }
+    return (node.content || []).map((child, i) => jsx(React.Fragment, { children: renderNode(child) }, i));
+}
+function textContent(node) {
+    return (node.content || []).map((n, i) => jsx(React.Fragment, { children: renderInline(n) }, i));
+}
+function plainText(node) {
+    if (node.text)
+        return node.text;
+    return (node.content || []).map((n) => plainText(n)).join("");
+}
+
+export { RichContentPreview };

package/dist/esm/components/ui/rich-editor/rich-content-renderer.js

@@ -9,7 +9,11 @@ import index_default$3 from '../../../node_modules/@tiptap/extension-bold/dist/i
 import index_default$4 from '../../../node_modules/@tiptap/extension-italic/dist/index.js';
 import index_default$5 from '../../../node_modules/@tiptap/extension-strike/dist/index.js';
 import index_default$2 from '../../../node_modules/@tiptap/extension-hard-break/dist/index.js';
+import index_default$7 from '../../../node_modules/@tiptap/extension-image/dist/index.js';
+import index_default$6 from '../../../node_modules/@tiptap/extension-link/dist/index.js';
+import index_default$8 from '../../../node_modules/@tiptap/extension-youtube/dist/index.js';
 import { TextStyleKit } from '../../../node_modules/@tiptap/extension-text-style/dist/index.js';
+import index_default$9 from '../../../node_modules/@tiptap/extension-text-align/dist/index.js';
 import { Heading } from './extensions/heading.js';
 import { Paragraph } from './extensions/paragraph.js';
 import { Blockquote } from './extensions/blockquote.js';
@@ -19,6 +23,7 @@ import { ListItem } from './extensions/list-item.js';
 import { Details } from './extensions/details.js';
 import { DetailsSummary } from './extensions/details-summary.js';
 import { DetailsContent } from './extensions/details-content.js';
+import { HorizontalRule } from './extensions/horizontal-rule.js';
 import { Table } from './extensions/table.js';
 import { TableRow } from './extensions/table-row.js';
 import { TableHeader } from './extensions/table-header.js';
@@ -27,6 +32,7 @@ import { Carousel } from './extensions/carousel.js';
 import { Code } from './extensions/code.js';
 import { Subscript } from './extensions/subscript.js';
 import { Superscript } from './extensions/superscript.js';
+import { Indent } from './extensions/indent.js';
 import { cn } from '../../../lib/utils.js';
 import { Separator } from '../../utility/separator/separator.js';
 import { Carousel as Carousel$1, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '../carousel/carousel.js';
@@ -112,8 +118,21 @@ function RichContentRenderer({ doc, html, className, components }) {
                 Code,
                 Subscript,
                 Superscript,
+                index_default$6,
+                HorizontalRule,
+                index_default$7,
+                index_default$8,
                 // Additional
-                TextStyleKit, // Includes TextStyle, Color, BackgroundColor, FontSize, FontFamily, LineHeight, TextAlign
+                TextStyleKit, // Includes TextStyle, Color, BackgroundColor, FontSize, FontFamily, LineHeight
+                index_default$9.configure({
+                    types: ["heading", "paragraph"],
+                }),
+                Indent.configure({
+                    types: ["paragraph", "heading"],
+                    minLevel: 0,
+                    maxLevel: 8,
+                    indentSize: 2,
+                }),
                 Carousel,
                 Table,
                 TableRow,
@@ -139,22 +158,34 @@ function renderChildren(node, C) {
     return (node.content || []).map((child, i) => jsx(React.Fragment, { children: renderNode(child, C) }, i));
 }
 function renderNode(node, C) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27;
     const type = node.type;
     switch (type) {
         case "doc":
             return jsx(Fragment, { children: renderChildren(node, C) });
         case "paragraph": {
             const textAlign = ((_a = node.attrs) === null || _a === void 0 ? void 0 : _a.textAlign) || undefined;
-            return (jsx(C.Paragraph, { style: textAlign ? { textAlign } : undefined, children: textContent(node) }));
+            const indent = ((_b = node.attrs) === null || _b === void 0 ? void 0 : _b.indent) || 0;
+            const style = {};
+            if (textAlign)
+                style.textAlign = textAlign;
+            if (indent > 0)
+                style.paddingInlineStart = `${indent * 2}rem`;
+            return (jsx(C.Paragraph, { style: Object.keys(style).length > 0 ? style : undefined, children: textContent(node, C) }));
         }
         case "heading": {
-            const level = ((_b = node.attrs) === null || _b === void 0 ? void 0 : _b.level) || 1;
-            const textAlign = ((_c = node.attrs) === null || _c === void 0 ? void 0 : _c.textAlign) || undefined;
-            return (jsx(C.Heading, { level: level, style: textAlign ? { textAlign } : undefined, children: textContent(node) }));
+            const level = ((_c = node.attrs) === null || _c === void 0 ? void 0 : _c.level) || 1;
+            const textAlign = ((_d = node.attrs) === null || _d === void 0 ? void 0 : _d.textAlign) || undefined;
+            const indent = ((_e = node.attrs) === null || _e === void 0 ? void 0 : _e.indent) || 0;
+            const style = {};
+            if (textAlign)
+                style.textAlign = textAlign;
+            if (indent > 0)
+                style.paddingInlineStart = `${indent * 2}rem`;
+            return (jsx(C.Heading, { level: level, style: Object.keys(style).length > 0 ? style : undefined, children: textContent(node, C) }));
         }
         case "blockquote":
-            return jsx(C.Blockquote, { children: textContent(node) });
+            return jsx(C.Blockquote, { children: renderChildren(node, C) });
         case "bulletList":
             return jsx(C.BulletList, { children: renderChildren(node, C) });
         case "orderedList":
@@ -164,14 +195,26 @@ function renderNode(node, C) {
         case "horizontalRule":
             return jsx(C.HorizontalRule, {});
         case "codeBlock": {
-            const language = ((_d = node.attrs) === null || _d === void 0 ? void 0 : _d.language) || undefined;
+            const language = ((_f = node.attrs) === null || _f === void 0 ? void 0 : _f.language) || undefined;
             const code = plainText(node);
             return jsx(C.CodeBlock, { language: language, code: code });
         }
         case "image": {
-            const src = String(((_e = node.attrs) === null || _e === void 0 ? void 0 : _e.src) || "");
-            const alt = String(((_f = node.attrs) === null || _f === void 0 ? void 0 : _f.alt) || "");
-            return jsx("img", { src: src, alt: alt, className: "my-6 rounded-lg" });
+            const src = String(((_g = node.attrs) === null || _g === void 0 ? void 0 : _g.src) || "");
+            const alt = String(((_h = node.attrs) === null || _h === void 0 ? void 0 : _h.alt) || "");
+            const title = ((_j = node.attrs) === null || _j === void 0 ? void 0 : _j.title) ? String(node.attrs.title) : undefined;
+            const imgStyle = {};
+            if ((_k = node.attrs) === null || _k === void 0 ? void 0 : _k.width)
+                imgStyle.width = node.attrs.width;
+            if ((_l = node.attrs) === null || _l === void 0 ? void 0 : _l.height)
+                imgStyle.height = node.attrs.height;
+            return (jsx("img", { src: src, alt: alt, title: title, style: Object.keys(imgStyle).length > 0 ? imgStyle : undefined, className: "my-6 rounded-lg" }));
+        }
+        case "youtube": {
+            const src = String(((_m = node.attrs) === null || _m === void 0 ? void 0 : _m.src) || "");
+            const width = (_p = (_o = node.attrs) === null || _o === void 0 ? void 0 : _o.width) !== null && _p !== void 0 ? _p : 640;
+            const height = (_r = (_q = node.attrs) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : 480;
+            return (jsx("div", { className: "my-6", style: { position: "relative", paddingBottom: `${(Number(height) / Number(width)) * 100}%` }, children: jsx("iframe", { src: src, width: width, height: height, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }, className: "rounded-lg" }) }));
         }
         case "table": {
             const rows = node.content || [];
@@ -196,15 +239,19 @@ function renderNode(node, C) {
             return jsx(Fragment, { children: renderChildren(node, C) });
         }
         case "tableCell": {
-            return jsx(C.TableCell, { children: renderChildren(node, C) });
+            const cellStyle = buildCellStyle(node.attrs);
+            const cellAttrs = buildCellAttrs(node.attrs);
+            return (jsx(C.TableCell, Object.assign({ style: cellStyle }, cellAttrs, { children: renderChildren(node, C) })));
         }
         case "tableHeader": {
-            return jsx(C.TableHeader, { children: renderChildren(node, C) });
+            const cellStyle = buildCellStyle(node.attrs);
+            const cellAttrs = buildCellAttrs(node.attrs);
+            return (jsx(C.TableHeader, Object.assign({ style: cellStyle }, cellAttrs, { children: renderChildren(node, C) })));
         }
         case "carousel": {
             // our custom node — attrs mirror the editor extension
-            const images = ((_g = node.attrs) === null || _g === void 0 ? void 0 : _g.images) || [];
-            const aspect = ((_h = node.attrs) === null || _h === void 0 ? void 0 : _h.aspectRatio) || "16/9";
+            const images = ((_s = node.attrs) === null || _s === void 0 ? void 0 : _s.images) || [];
+            const aspect = ((_t = node.attrs) === null || _t === void 0 ? void 0 : _t.aspectRatio) || "16/9";
             const ratioClass = aspect === "4/3"
                 ? "aspect-[4/3]"
                 : aspect === "1/1"
@@ -217,14 +264,14 @@ function renderNode(node, C) {
         }
         case "columns": {
             // Columns layout node
-            const columns = (_k = (_j = node.attrs) === null || _j === void 0 ? void 0 : _j.columns) !== null && _k !== void 0 ? _k : 2;
-            const gap = (_m = (_l = node.attrs) === null || _l === void 0 ? void 0 : _l.gap) !== null && _m !== void 0 ? _m : "4";
-            const alignItems = (_p = (_o = node.attrs) === null || _o === void 0 ? void 0 : _o.alignItems) !== null && _p !== void 0 ? _p : "stretch";
-            const justifyItems = (_r = (_q = node.attrs) === null || _q === void 0 ? void 0 : _q.justifyItems) !== null && _r !== void 0 ? _r : "stretch";
-            const justifyContent = (_t = (_s = node.attrs) === null || _s === void 0 ? void 0 : _s.justifyContent) !== null && _t !== void 0 ? _t : "start";
-            const alignContent = (_v = (_u = node.attrs) === null || _u === void 0 ? void 0 : _u.alignContent) !== null && _v !== void 0 ? _v : "start";
-            const width = (_x = (_w = node.attrs) === null || _w === void 0 ? void 0 : _w.width) !== null && _x !== void 0 ? _x : "auto";
-            const height = (_z = (_y = node.attrs) === null || _y === void 0 ? void 0 : _y.height) !== null && _z !== void 0 ? _z : "auto";
+            const columns = (_v = (_u = node.attrs) === null || _u === void 0 ? void 0 : _u.columns) !== null && _v !== void 0 ? _v : 2;
+            const gap = (_x = (_w = node.attrs) === null || _w === void 0 ? void 0 : _w.gap) !== null && _x !== void 0 ? _x : "4";
+            const alignItems = (_z = (_y = node.attrs) === null || _y === void 0 ? void 0 : _y.alignItems) !== null && _z !== void 0 ? _z : "stretch";
+            const justifyItems = (_1 = (_0 = node.attrs) === null || _0 === void 0 ? void 0 : _0.justifyItems) !== null && _1 !== void 0 ? _1 : "stretch";
+            const justifyContent = (_3 = (_2 = node.attrs) === null || _2 === void 0 ? void 0 : _2.justifyContent) !== null && _3 !== void 0 ? _3 : "start";
+            const alignContent = (_5 = (_4 = node.attrs) === null || _4 === void 0 ? void 0 : _4.alignContent) !== null && _5 !== void 0 ? _5 : "start";
+            const width = (_7 = (_6 = node.attrs) === null || _6 === void 0 ? void 0 : _6.width) !== null && _7 !== void 0 ? _7 : "auto";
+            const height = (_9 = (_8 = node.attrs) === null || _8 === void 0 ? void 0 : _8.height) !== null && _9 !== void 0 ? _9 : "auto";
             // Build Tailwind classes
             const gapClass = `gap-${gap}`;
             const alignItemsClass = alignItems !== "stretch" ? `items-${alignItems}` : "";
@@ -255,14 +302,14 @@ function renderNode(node, C) {
         }
         case "column": {
             // Individual column node
-            const width = (_1 = (_0 = node.attrs) === null || _0 === void 0 ? void 0 : _0.width) !== null && _1 !== void 0 ? _1 : "auto";
-            const height = (_3 = (_2 = node.attrs) === null || _2 === void 0 ? void 0 : _2.height) !== null && _3 !== void 0 ? _3 : "auto";
-            const padding = (_5 = (_4 = node.attrs) === null || _4 === void 0 ? void 0 : _4.padding) !== null && _5 !== void 0 ? _5 : "0";
-            const borderWidth = (_7 = (_6 = node.attrs) === null || _6 === void 0 ? void 0 : _6.borderWidth) !== null && _7 !== void 0 ? _7 : "0";
-            const borderColor = (_9 = (_8 = node.attrs) === null || _8 === void 0 ? void 0 : _8.borderColor) !== null && _9 !== void 0 ? _9 : "#e5e7eb";
-            const borderStyle = (_11 = (_10 = node.attrs) === null || _10 === void 0 ? void 0 : _10.borderStyle) !== null && _11 !== void 0 ? _11 : "solid";
-            const backgroundColor = (_13 = (_12 = node.attrs) === null || _12 === void 0 ? void 0 : _12.backgroundColor) !== null && _13 !== void 0 ? _13 : "transparent";
-            const boxShadow = (_15 = (_14 = node.attrs) === null || _14 === void 0 ? void 0 : _14.boxShadow) !== null && _15 !== void 0 ? _15 : "none";
+            const width = (_11 = (_10 = node.attrs) === null || _10 === void 0 ? void 0 : _10.width) !== null && _11 !== void 0 ? _11 : "auto";
+            const height = (_13 = (_12 = node.attrs) === null || _12 === void 0 ? void 0 : _12.height) !== null && _13 !== void 0 ? _13 : "auto";
+            const padding = (_15 = (_14 = node.attrs) === null || _14 === void 0 ? void 0 : _14.padding) !== null && _15 !== void 0 ? _15 : "0";
+            const borderWidth = (_17 = (_16 = node.attrs) === null || _16 === void 0 ? void 0 : _16.borderWidth) !== null && _17 !== void 0 ? _17 : "0";
+            const borderColor = (_19 = (_18 = node.attrs) === null || _18 === void 0 ? void 0 : _18.borderColor) !== null && _19 !== void 0 ? _19 : "#e5e7eb";
+            const borderStyle = (_21 = (_20 = node.attrs) === null || _20 === void 0 ? void 0 : _20.borderStyle) !== null && _21 !== void 0 ? _21 : "solid";
+            const backgroundColor = (_23 = (_22 = node.attrs) === null || _22 === void 0 ? void 0 : _22.backgroundColor) !== null && _23 !== void 0 ? _23 : "transparent";
+            const boxShadow = (_25 = (_24 = node.attrs) === null || _24 === void 0 ? void 0 : _24.boxShadow) !== null && _25 !== void 0 ? _25 : "none";
             // Build Tailwind classes
             const paddingClass = padding !== "0" ? `p-${padding}` : "";
             const borderWidthClass = borderWidth !== "0" ? `border-${borderWidth}` : "";
@@ -292,12 +339,12 @@ function renderNode(node, C) {
         }
         case "details": {
             // Details (collapsible/accordion) node
-            const open = (_17 = (_16 = node.attrs) === null || _16 === void 0 ? void 0 : _16.open) !== null && _17 !== void 0 ? _17 : false;
+            const open = (_27 = (_26 = node.attrs) === null || _26 === void 0 ? void 0 : _26.open) !== null && _27 !== void 0 ? _27 : false;
             return (jsx("details", { open: open, className: "my-4 rounded-lg border p-4", children: renderChildren(node, C) }));
         }
         case "detailsSummary": {
             // Summary heading for details
-            return (jsx("summary", { className: "cursor-pointer font-semibold text-lg marker:text-primary hover:text-primary transition-colors", children: textContent(node) }));
+            return (jsx("summary", { className: "cursor-pointer font-semibold text-lg marker:text-primary hover:text-primary transition-colors", children: textContent(node, C) }));
         }
         case "detailsContent": {
             // Content inside details
@@ -310,7 +357,7 @@ function renderNode(node, C) {
             return null;
     }
 }
-function renderInline(node) {
+function renderInline(node, C) {
     if (node.text) {
         let el = node.text;
         const marks = node.marks || [];
@@ -319,8 +366,9 @@ function renderInline(node) {
         let backgroundColor;
         let fontSize;
         let fontFamily;
+        let lineHeight;
         marks.forEach((m) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             switch (m.type) {
                 case "bold":
                     el = jsx("strong", { children: el });
@@ -356,14 +404,16 @@ function renderInline(node) {
                         fontSize = m.attrs.fontSize;
                     if ((_d = m.attrs) === null || _d === void 0 ? void 0 : _d.fontFamily)
                         fontFamily = m.attrs.fontFamily;
+                    if ((_e = m.attrs) === null || _e === void 0 ? void 0 : _e.lineHeight)
+                        lineHeight = m.attrs.lineHeight;
                     break;
                 case "link":
-                    el = (jsx("a", { href: (_e = m.attrs) === null || _e === void 0 ? void 0 : _e.href, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline underline-offset-4 hover:text-primary/80", children: el }));
+                    el = (jsx("a", { href: (_f = m.attrs) === null || _f === void 0 ? void 0 : _f.href, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline underline-offset-4 hover:text-primary/80", children: el }));
                     break;
             }
         });
         // Apply text styling if any are present
-        if (color || backgroundColor || fontSize || fontFamily) {
+        if (color || backgroundColor || fontSize || fontFamily || lineHeight) {
             const style = {};
             if (color)
                 style.color = color;
@@ -373,19 +423,43 @@ function renderInline(node) {
                 style.fontSize = fontSize;
             if (fontFamily)
                 style.fontFamily = fontFamily;
+            if (lineHeight)
+                style.lineHeight = lineHeight;
             el = jsx("span", { style: style, children: el });
         }
         return el;
     }
-    return (node.content || []).map((child, i) => jsx(React.Fragment, { children: renderNode(child, Defaults) }, i));
+    return (node.content || []).map((child, i) => (jsx(React.Fragment, { children: renderNode(child, C || Defaults) }, i)));
 }
-function textContent(node) {
-    return (node.content || []).map((n, i) => jsx(React.Fragment, { children: renderInline(n) }, i));
+function textContent(node, C) {
+    return (node.content || []).map((n, i) => jsx(React.Fragment, { children: renderInline(n, C) }, i));
 }
 function plainText(node) {
     if (node.text)
         return node.text;
     return (node.content || []).map((n) => plainText(n)).join("");
 }
+function buildCellStyle(attrs) {
+    if (!attrs)
+        return undefined;
+    const style = {};
+    if (attrs.horizontalAlign)
+        style.textAlign = attrs.horizontalAlign;
+    if (attrs.verticalAlign)
+        style.verticalAlign = attrs.verticalAlign;
+    if (attrs.backgroundColor)
+        style.backgroundColor = attrs.backgroundColor;
+    return Object.keys(style).length > 0 ? style : undefined;
+}
+function buildCellAttrs(attrs) {
+    if (!attrs)
+        return undefined;
+    const result = {};
+    if (attrs.colspan && attrs.colspan > 1)
+        result.colSpan = attrs.colspan;
+    if (attrs.rowspan && attrs.rowspan > 1)
+        result.rowSpan = attrs.rowspan;
+    return Object.keys(result).length > 0 ? result : undefined;
+}
 
 export { RichContentRenderer };