@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist-cjs/react/editor/RichTextRenderedBlock.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextRenderedBlocks = RichTextRenderedBlocks;
+exports.RichTextRenderedBlock = RichTextRenderedBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const richText_1 = require("../../core/richText");
+function RichTextRenderedBlocks({ activeAnnotationTarget, blocks, onToggleCollapsedChange, renderToolBlock, }) {
+    const renderedBlocks = [];
+    for (let index = 0; index < blocks.length; index += 1) {
+        const block = blocks[index];
+        if (!block) {
+            continue;
+        }
+        if (isTreeRenderedBlock(block)) {
+            const treeKind = getRenderedTreeKind(block);
+            const treeBlocks = [];
+            while (true) {
+                const treeBlock = blocks[index];
+                if (!isTreeRenderedBlock(treeBlock) ||
+                    getRenderedTreeKind(treeBlock) !== treeKind) {
+                    break;
+                }
+                treeBlocks.push(treeBlock);
+                index += 1;
+            }
+            index -= 1;
+            const TreeTag = treeKind === "ordered" ? "ol" : "ul";
+            renderedBlocks.push((0, jsx_runtime_1.jsx)(TreeTag, { "data-rich-text-children": "", children: treeBlocks.map((child) => ((0, jsx_runtime_1.jsx)(RichTextRenderedBlock, { activeAnnotationTarget: activeAnnotationTarget, block: child, onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock }, child.id))) }, `tree-${treeBlocks[0]?.id}`));
+            continue;
+        }
+        renderedBlocks.push((0, jsx_runtime_1.jsx)(RichTextRenderedBlock, { activeAnnotationTarget: activeAnnotationTarget, block: block, onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock }, block.id));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedBlocks });
+}
+// Renders one stored rich-text block as display-only journal content.
+function RichTextRenderedBlock({ activeAnnotationTarget, block, onToggleCollapsedChange, renderToolBlock, }) {
+    const activeBlockAttributes = getActiveCommentTargetAttributes(block, activeAnnotationTarget);
+    const blockAnnotationTarget = activeBlockAttributes["data-rich-text-comment-target"] === "active"
+        ? activeAnnotationTarget
+        : null;
+    if (block.type === "divider") {
+        return (0, jsx_runtime_1.jsx)("hr", { className: "bayon-rte-divider", ...activeBlockAttributes });
+    }
+    if (block.type === "image") {
+        const imageDisplaySize = getRenderedImageDisplaySize(block.displaySize);
+        const imageStyle = getRenderedImageCustomWidthStyle(imageDisplaySize, block.customWidth);
+        return ((0, jsx_runtime_1.jsx)("figure", { ...activeBlockAttributes, "data-image-align": getRenderedImageAlignment(block.alignment), "data-image-size": imageDisplaySize ?? undefined, "data-placeholder": block.url ? undefined : "image", "data-rich-text-image": "", style: imageStyle, children: block.url ? (0, jsx_runtime_1.jsx)("img", { alt: block.alt ?? "", src: block.url }) : null }));
+    }
+    if (block.type === "code") {
+        return ((0, jsx_runtime_1.jsx)("pre", { ...activeBlockAttributes, children: (0, jsx_runtime_1.jsx)("code", { children: block.text }) }));
+    }
+    if (block.type === "message") {
+        return ((0, jsx_runtime_1.jsx)("p", { ...activeBlockAttributes, "data-rich-text-message": "", children: (0, jsx_runtime_1.jsx)(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) }));
+    }
+    if (block.type === "tool") {
+        if (renderToolBlock) {
+            try {
+                return renderToolBlock(block);
+            }
+            catch (error) {
+                console.error("[RichTextRenderer] Tool block renderer failed.", {
+                    block,
+                    error,
+                });
+            }
+        }
+        return (0, jsx_runtime_1.jsx)(DefaultToolBlock, { block: block });
+    }
+    if (block.type === "checkbox") {
+        return ((0, jsx_runtime_1.jsxs)("li", { "data-rich-text-checkbox": "", ...activeBlockAttributes, children: [(0, jsx_runtime_1.jsxs)("div", { "data-rich-text-row": "", children: [(0, jsx_runtime_1.jsx)("input", { checked: block.checked, readOnly: true, type: "checkbox" }), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) })] }), (0, jsx_runtime_1.jsx)(NestedRichTextBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: block.children ?? [], onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock })] }));
+    }
+    if (block.type === "bullet") {
+        return ((0, jsx_runtime_1.jsxs)("li", { "data-rich-text-bullet": "", ...activeBlockAttributes, children: [(0, jsx_runtime_1.jsxs)("div", { "data-rich-text-row": "", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", "data-bullet-marker": "" }), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) })] }), (0, jsx_runtime_1.jsx)(NestedRichTextBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: block.children ?? [], onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock })] }));
+    }
+    if (block.type === "ordered") {
+        return ((0, jsx_runtime_1.jsxs)("li", { "data-rich-text-ordered": "", ...activeBlockAttributes, children: [(0, jsx_runtime_1.jsxs)("div", { "data-rich-text-row": "", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", "data-ordered-marker": "" }), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) })] }), (0, jsx_runtime_1.jsx)(NestedRichTextBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: block.children ?? [], onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock })] }));
+    }
+    if (block.type === "toggle") {
+        const actionLabel = block.collapsed ? "Expand toggle" : "Collapse toggle";
+        return ((0, jsx_runtime_1.jsxs)("li", { ...activeBlockAttributes, "data-rich-text-toggle": "", "data-toggle-collapsed": block.collapsed ? "true" : "false", children: [(0, jsx_runtime_1.jsxs)("div", { "data-rich-text-row": "", children: [onToggleCollapsedChange ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": actionLabel, className: "bayon-rte-toggle-button", "data-toggle-collapse": "", onClick: () => onToggleCollapsedChange(block.id, !block.collapsed), title: actionLabel, type: "button", children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "bayon-rte-toggle-caret" }) })) : ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "bayon-rte-toggle-caret" })), (0, jsx_runtime_1.jsx)("span", { "data-toggle-label": "", children: (0, jsx_runtime_1.jsx)(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) })] }), block.children.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { "data-toggle-content": "", children: (0, jsx_runtime_1.jsx)(NestedRichTextBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: block.children, onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock }) })) : null] }));
+    }
+    const component = block.type === "heading"
+        ? "h2"
+        : block.type === "quote"
+            ? "blockquote"
+            : "p";
+    const props = activeBlockAttributes;
+    const children = ((0, jsx_runtime_1.jsx)(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }));
+    if (component === "h2") {
+        return (0, jsx_runtime_1.jsx)("h2", { ...props, children: children });
+    }
+    if (component === "blockquote") {
+        return (0, jsx_runtime_1.jsx)("blockquote", { ...props, children: children });
+    }
+    return (0, jsx_runtime_1.jsx)("p", { ...props, children: children });
+}
+function getRenderedImageAlignment(value) {
+    return value === "left" || value === "right" ? value : "center";
+}
+function getRenderedImageDisplaySize(value) {
+    return value === "small" ||
+        value === "medium" ||
+        value === "full" ||
+        value === "custom"
+        ? value
+        : null;
+}
+function getRenderedImageCustomWidthStyle(displaySize, customWidth) {
+    if (displaySize !== "custom" ||
+        typeof customWidth !== "number" ||
+        !Number.isFinite(customWidth)) {
+        return undefined;
+    }
+    const width = Math.min(Math.max(Math.round(customWidth), 120), 1600);
+    return {
+        "--bayon-rte-image-custom-width": `${width}px`,
+    };
+}
+function NestedRichTextBlocks({ activeAnnotationTarget, blocks, onToggleCollapsedChange, renderToolBlock, }) {
+    if (blocks.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(RichTextRenderedBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: blocks, onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock }));
+}
+function getActiveCommentTargetAttributes(block, target) {
+    const isActive = Boolean(target?.blockId && target.blockId === block.id);
+    return {
+        "data-rich-text-block-id": block.id,
+        ...(isActive ? { "data-rich-text-comment-target": "active" } : {}),
+    };
+}
+function RenderedMarkdown({ markdown, target, }) {
+    const quote = target?.quote?.trim();
+    if (!quote) {
+        return ((0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: {
+                __html: (0, richText_1.markdownToEditorHtml)(markdown) || "&nbsp;",
+            } }));
+    }
+    const quoteIndex = markdown.indexOf(quote);
+    if (quoteIndex < 0) {
+        return ((0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: {
+                __html: (0, richText_1.markdownToEditorHtml)(markdown) || "&nbsp;",
+            } }));
+    }
+    const before = markdown.slice(0, quoteIndex);
+    const highlighted = markdown.slice(quoteIndex, quoteIndex + quote.length);
+    const after = markdown.slice(quoteIndex + quote.length);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [before ? ((0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: (0, richText_1.markdownToEditorHtml)(before) } })) : null, (0, jsx_runtime_1.jsx)("mark", { className: "bayon-rte-comment-highlight", dangerouslySetInnerHTML: {
+                    __html: (0, richText_1.markdownToEditorHtml)(highlighted) || "&nbsp;",
+                } }), after ? ((0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: (0, richText_1.markdownToEditorHtml)(after) } })) : null] }));
+}
+function DefaultToolBlock({ block, }) {
+    const label = block.title || block.toolType;
+    return ((0, jsx_runtime_1.jsxs)("section", { "data-rich-text-tool": "", "data-tool-status": block.status, "data-tool-type": block.toolType, children: [(0, jsx_runtime_1.jsxs)("div", { "data-tool-header": "", children: [(0, jsx_runtime_1.jsx)("span", { "data-tool-title": "", children: label }), (0, jsx_runtime_1.jsx)("span", { "data-tool-status-label": "", children: block.status })] }), block.markdown ? ((0, jsx_runtime_1.jsx)("p", { "data-tool-markdown": "", dangerouslySetInnerHTML: {
+                    __html: (0, richText_1.markdownToEditorHtml)(block.markdown),
+                } })) : null] }));
+}
+function isTreeRenderedBlock(block) {
+    return (block?.type === "bullet" ||
+        block?.type === "ordered" ||
+        block?.type === "checkbox" ||
+        block?.type === "toggle");
+}
+function getRenderedTreeKind(block) {
+    return block?.type === "ordered" ? "ordered" : "unordered";
+}

package/dist-cjs/react/editor/RichTextRenderer.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextRenderer = RichTextRenderer;
+exports.getRichTextBlocksWithRenderedToggleCollapsed = getRichTextBlocksWithRenderedToggleCollapsed;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RichTextRenderedBlock_1 = require("./RichTextRenderedBlock");
+const blockActions_1 = require("../editor/blockActions");
+const richText_1 = require("../../core/richText");
+const RichTextStyles_1 = require("../styles/RichTextStyles");
+// Renders a sanitized collection of rich-text blocks for read-only views.
+function RichTextRenderer({ activeAnnotationTarget, contentBlocks, onContentBlocksChange, renderToolBlock, }) {
+    const sanitizedContentBlocks = (0, richText_1.sanitizeRichTextBlocks)(contentBlocks);
+    function handleToggleCollapsedChange(blockId, collapsed) {
+        onContentBlocksChange?.(getRichTextBlocksWithRenderedToggleCollapsed(sanitizedContentBlocks, blockId, collapsed));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RichTextStyles_1.RichTextStyleScope, {}), (0, jsx_runtime_1.jsx)("div", { className: "bayon-rte-renderer", children: (0, jsx_runtime_1.jsx)(RichTextRenderedBlock_1.RichTextRenderedBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: sanitizedContentBlocks, onToggleCollapsedChange: onContentBlocksChange ? handleToggleCollapsedChange : undefined, renderToolBlock: renderToolBlock }) })] }));
+}
+function getRichTextBlocksWithRenderedToggleCollapsed(blocks, blockId, collapsed) {
+    return (0, blockActions_1.setToggleCollapsed)((0, richText_1.sanitizeRichTextBlocks)(blocks), blockId, collapsed);
+}

package/dist-cjs/react/{RichTextTitleInput.js → editor/RichTextTitleInput.js}

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextTitleInput = RichTextTitleInput;
 exports.getTitleKeyCommand = getTitleKeyCommand;
+exports.getTitleHistoryCommand = getTitleHistoryCommand;
 exports.RichTextReadTitle = RichTextReadTitle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const RichTextStyles_1 = require("./RichTextStyles");
+const RichTextStyles_1 = require("../styles/RichTextStyles");
+const editorNavigation_1 = require("./editorNavigation");
 // Renders the title field and handles keyboard movement into the editor body.
-function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange, required, title, validationMessage = "", }) {
+function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange, onRedo, required, title, onUndo, validationMessage = "", }) {
     const validationMessageId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
         resizeTitleTextArea(inputRef.current);
@@ -17,6 +19,17 @@ function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange,
                     resizeTitleTextArea(event.currentTarget);
                     onChange(event.target.value);
                 }, onInput: (event) => resizeTitleTextArea(event.currentTarget), onKeyDown: (event) => {
+                    const historyCommand = getTitleHistoryCommand(event);
+                    if (historyCommand === "undo") {
+                        event.preventDefault();
+                        onUndo?.();
+                        return;
+                    }
+                    if (historyCommand === "redo") {
+                        event.preventDefault();
+                        onRedo?.();
+                        return;
+                    }
                     if (getTitleKeyCommand(event) === "focus-body-start") {
                         event.preventDefault();
                         onArrowDown();
@@ -28,6 +41,9 @@ function getTitleKeyCommand(event) {
         ? "focus-body-start"
         : null;
 }
+function getTitleHistoryCommand(event) {
+    return (0, editorNavigation_1.getEditorHistoryShortcut)(event);
+}
 function RichTextReadTitle({ title }) {
     const titleRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {