art-bd-ui 1.0.21 → 1.0.23

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

@@ -0,0 +1,342 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$1 = require('../../../node_modules/@tiptap/html/dist/index.js');
+var index$2 = require('../../../node_modules/@tiptap/extension-document/dist/index.js');
+var index$3 = require('../../../node_modules/@tiptap/extension-text/dist/index.js');
+var index$5 = require('../../../node_modules/@tiptap/extension-bold/dist/index.js');
+var index$6 = require('../../../node_modules/@tiptap/extension-italic/dist/index.js');
+var index$7 = require('../../../node_modules/@tiptap/extension-strike/dist/index.js');
+var index$4 = require('../../../node_modules/@tiptap/extension-hard-break/dist/index.js');
+var index$8 = require('../../../node_modules/@tiptap/extension-text-style/dist/index.js');
+var heading = require('./extensions/heading.js');
+var paragraph = require('./extensions/paragraph.js');
+var blockquote = require('./extensions/blockquote.js');
+var bulletList = require('./extensions/bullet-list.js');
+var orderedList = require('./extensions/ordered-list.js');
+var listItem = require('./extensions/list-item.js');
+var details = require('./extensions/details.js');
+var detailsSummary = require('./extensions/details-summary.js');
+var detailsContent = require('./extensions/details-content.js');
+var table = require('./extensions/table.js');
+var tableRow = require('./extensions/table-row.js');
+var tableHeader = require('./extensions/table-header.js');
+var tableCell = require('./extensions/table-cell.js');
+var carousel = require('./extensions/carousel.js');
+var code = require('./extensions/code.js');
+var subscript = require('./extensions/subscript.js');
+var superscript = require('./extensions/superscript.js');
+var utils = require('../../../lib/utils.js');
+var carousel$1 = require('../carousel/carousel.js');
+var index = require('../../../node_modules/lowlight/lib/index.js');
+var common = require('../../../node_modules/lowlight/lib/common.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const lowlightInstance = index.createLowlight(common.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__namespace.useMemo(() => {
+        if (doc)
+            return doc;
+        if (!html)
+            return null;
+        try {
+            return index$1.generateJSON(html, [
+                index$2.default,
+                index$3.default,
+                paragraph.Paragraph,
+                heading.Heading,
+                blockquote.Blockquote,
+                bulletList.BulletList,
+                orderedList.OrderedList,
+                listItem.ListItem,
+                details.Details,
+                detailsSummary.DetailsSummary,
+                detailsContent.DetailsContent,
+                index$4.default,
+                index$5.default,
+                index$6.default,
+                index$7.default,
+                code.Code,
+                subscript.Subscript,
+                superscript.Superscript,
+                index$8.TextStyleKit,
+                carousel.Carousel,
+                table.Table,
+                tableRow.TableRow,
+                tableCell.TableCell,
+                tableHeader.TableHeader,
+            ]);
+        }
+        catch (_a) {
+            return null;
+        }
+    }, [doc, html]);
+    if (!json) {
+        if (html)
+            return jsxRuntime.jsx("div", { className: utils.cn(className), dangerouslySetInnerHTML: { __html: html } });
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: utils.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) => jsxRuntime.jsx(React__namespace.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 jsxRuntime.jsx(jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 jsxRuntime.jsx("ul", { className: "my-4 ml-6 list-disc [&>li]:mt-2", children: renderChildren(node) });
+        case "orderedList":
+            return jsxRuntime.jsx("ol", { className: "my-4 ml-6 list-decimal [&>li]:mt-2", children: renderChildren(node) });
+        case "listItem":
+            return jsxRuntime.jsx("li", { className: "leading-7", children: renderChildren(node) });
+        // HorizontalRule — matches extensions/horizontal-rule.ts
+        case "horizontalRule":
+            return jsxRuntime.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 (jsxRuntime.jsx("span", { className: cls, children: toReact(n.children || []) }, i));
+            });
+            return (jsxRuntime.jsx("pre", { className: utils.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: jsxRuntime.jsx("code", { className: utils.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 (jsxRuntime.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 = (jsxRuntime.jsx("tr", { className: "border-b border-border", children: renderChildren(row) }, rowIndex));
+                if (hasHeader) {
+                    headerRows.push(rowNode);
+                }
+                else {
+                    bodyRows.push(rowNode);
+                }
+            });
+            return (jsxRuntime.jsxs("table", { className: "w-full caption-bottom text-sm border-collapse my-4 border box-border", children: [headerRows.length > 0 && jsxRuntime.jsx("thead", { children: headerRows }), jsxRuntime.jsx("tbody", { children: bodyRows })] }));
+        }
+        case "tableRow":
+            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderChildren(node) });
+        // TableCell — matches extensions/table-cell.ts
+        case "tableCell":
+            return (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.jsx("div", { className: utils.cn(ratioClass, "my-8 w-full overflow-hidden rounded-lg"), children: jsxRuntime.jsxs(carousel$1.Carousel, { opts: { loop: !!(opts === null || opts === void 0 ? void 0 : opts.loop) }, children: [jsxRuntime.jsx(carousel$1.CarouselContent, { children: images.map((img, i) => (jsxRuntime.jsx(carousel$1.CarouselItem, { className: (opts === null || opts === void 0 ? void 0 : opts.view) === "cards" ? "md:basis-1/2 lg:basis-1/3" : "", children: jsxRuntime.jsx("div", { className: "relative h-full w-full overflow-hidden rounded-md", children: jsxRuntime.jsx("img", { src: img.src, alt: img.alt || "", className: "h-full w-full object-cover" }) }) }, i))) }), jsxRuntime.jsx(carousel$1.CarouselPrevious, { className: "left-2" }), jsxRuntime.jsx(carousel$1.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 (jsxRuntime.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 jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 jsxRuntime.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 (jsxRuntime.jsx("div", { className: "my-6", style: { maxWidth: width }, children: jsxRuntime.jsx("div", { style: { position: "relative", paddingBottom: `${(height / width) * 100}%` }, children: jsxRuntime.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 = jsxRuntime.jsx("strong", { children: el });
+                    break;
+                case "italic":
+                    el = jsxRuntime.jsx("em", { children: el });
+                    break;
+                case "strike":
+                    el = jsxRuntime.jsx("s", { children: el });
+                    break;
+                case "underline":
+                    el = jsxRuntime.jsx("u", { children: el });
+                    break;
+                // Code — matches extensions/code.ts (renders as <kbd>)
+                case "code":
+                    el = (jsxRuntime.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 = jsxRuntime.jsx("mark", { className: "bg-yellow-200 dark:bg-yellow-900", children: el });
+                    break;
+                // Subscript — matches extensions/subscript.ts
+                case "subscript":
+                    el = jsxRuntime.jsx("sub", { className: "text-[0.65em] align-sub", children: el });
+                    break;
+                // Superscript — matches extensions/superscript.ts
+                case "superscript":
+                    el = jsxRuntime.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 = (jsxRuntime.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 = jsxRuntime.jsx("span", { style: style, children: el });
+        }
+        return el;
+    }
+    return (node.content || []).map((child, i) => jsxRuntime.jsx(React__namespace.Fragment, { children: renderNode(child) }, i));
+}
+function textContent(node) {
+    return (node.content || []).map((n, i) => jsxRuntime.jsx(React__namespace.Fragment, { children: renderInline(n) }, i));
+}
+function plainText(node) {
+    if (node.text)
+        return node.text;
+    return (node.content || []).map((n) => plainText(n)).join("");
+}
+
+exports.RichContentPreview = RichContentPreview;