@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist/react/editor/RichTextRenderedBlock.d.ts

@@ -0,0 +1,20 @@
+import type { RichTextBlock } from "../../core/types";
+import type { ReactNode } from "react";
+import type { RichTextAnnotationTarget } from "./RichTextRenderer";
+type RenderedToggleCollapsedChangeHandler = (blockId: string, collapsed: boolean) => void;
+export type RichTextToolBlockRenderer = (block: Extract<RichTextBlock, {
+    type: "tool";
+}>) => ReactNode;
+export declare function RichTextRenderedBlocks({ activeAnnotationTarget, blocks, onToggleCollapsedChange, renderToolBlock, }: {
+    activeAnnotationTarget?: RichTextAnnotationTarget | null;
+    blocks: RichTextBlock[];
+    onToggleCollapsedChange?: RenderedToggleCollapsedChangeHandler;
+    renderToolBlock?: RichTextToolBlockRenderer;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextRenderedBlock({ activeAnnotationTarget, block, onToggleCollapsedChange, renderToolBlock, }: {
+    activeAnnotationTarget?: RichTextAnnotationTarget | null;
+    block: RichTextBlock;
+    onToggleCollapsedChange?: RenderedToggleCollapsedChangeHandler;
+    renderToolBlock?: RichTextToolBlockRenderer;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/react/editor/RichTextRenderedBlock.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { markdownToEditorHtml } from "../../core/richText.js";
+export 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(_jsx(TreeTag, { "data-rich-text-children": "", children: treeBlocks.map((child) => (_jsx(RichTextRenderedBlock, { activeAnnotationTarget: activeAnnotationTarget, block: child, onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock }, child.id))) }, `tree-${treeBlocks[0]?.id}`));
+            continue;
+        }
+        renderedBlocks.push(_jsx(RichTextRenderedBlock, { activeAnnotationTarget: activeAnnotationTarget, block: block, onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock }, block.id));
+    }
+    return _jsx(_Fragment, { children: renderedBlocks });
+}
+// Renders one stored rich-text block as display-only journal content.
+export 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 _jsx("hr", { className: "bayon-rte-divider", ...activeBlockAttributes });
+    }
+    if (block.type === "image") {
+        const imageDisplaySize = getRenderedImageDisplaySize(block.displaySize);
+        const imageStyle = getRenderedImageCustomWidthStyle(imageDisplaySize, block.customWidth);
+        return (_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 ? _jsx("img", { alt: block.alt ?? "", src: block.url }) : null }));
+    }
+    if (block.type === "code") {
+        return (_jsx("pre", { ...activeBlockAttributes, children: _jsx("code", { children: block.text }) }));
+    }
+    if (block.type === "message") {
+        return (_jsx("p", { ...activeBlockAttributes, "data-rich-text-message": "", children: _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 _jsx(DefaultToolBlock, { block: block });
+    }
+    if (block.type === "checkbox") {
+        return (_jsxs("li", { "data-rich-text-checkbox": "", ...activeBlockAttributes, children: [_jsxs("div", { "data-rich-text-row": "", children: [_jsx("input", { checked: block.checked, readOnly: true, type: "checkbox" }), _jsx("span", { children: _jsx(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) })] }), _jsx(NestedRichTextBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: block.children ?? [], onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock })] }));
+    }
+    if (block.type === "bullet") {
+        return (_jsxs("li", { "data-rich-text-bullet": "", ...activeBlockAttributes, children: [_jsxs("div", { "data-rich-text-row": "", children: [_jsx("span", { "aria-hidden": "true", "data-bullet-marker": "" }), _jsx("span", { children: _jsx(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) })] }), _jsx(NestedRichTextBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: block.children ?? [], onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock })] }));
+    }
+    if (block.type === "ordered") {
+        return (_jsxs("li", { "data-rich-text-ordered": "", ...activeBlockAttributes, children: [_jsxs("div", { "data-rich-text-row": "", children: [_jsx("span", { "aria-hidden": "true", "data-ordered-marker": "" }), _jsx("span", { children: _jsx(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) })] }), _jsx(NestedRichTextBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: block.children ?? [], onToggleCollapsedChange: onToggleCollapsedChange, renderToolBlock: renderToolBlock })] }));
+    }
+    if (block.type === "toggle") {
+        const actionLabel = block.collapsed ? "Expand toggle" : "Collapse toggle";
+        return (_jsxs("li", { ...activeBlockAttributes, "data-rich-text-toggle": "", "data-toggle-collapsed": block.collapsed ? "true" : "false", children: [_jsxs("div", { "data-rich-text-row": "", children: [onToggleCollapsedChange ? (_jsx("button", { "aria-label": actionLabel, className: "bayon-rte-toggle-button", "data-toggle-collapse": "", onClick: () => onToggleCollapsedChange(block.id, !block.collapsed), title: actionLabel, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "bayon-rte-toggle-caret" }) })) : (_jsx("span", { "aria-hidden": "true", className: "bayon-rte-toggle-caret" })), _jsx("span", { "data-toggle-label": "", children: _jsx(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }) })] }), block.children.length > 0 ? (_jsx("div", { "data-toggle-content": "", children: _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 = (_jsx(RenderedMarkdown, { markdown: block.markdown, target: blockAnnotationTarget }));
+    if (component === "h2") {
+        return _jsx("h2", { ...props, children: children });
+    }
+    if (component === "blockquote") {
+        return _jsx("blockquote", { ...props, children: children });
+    }
+    return _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 (_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 (_jsx("span", { dangerouslySetInnerHTML: {
+                __html: markdownToEditorHtml(markdown) || "&nbsp;",
+            } }));
+    }
+    const quoteIndex = markdown.indexOf(quote);
+    if (quoteIndex < 0) {
+        return (_jsx("span", { dangerouslySetInnerHTML: {
+                __html: 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 (_jsxs(_Fragment, { children: [before ? (_jsx("span", { dangerouslySetInnerHTML: { __html: markdownToEditorHtml(before) } })) : null, _jsx("mark", { className: "bayon-rte-comment-highlight", dangerouslySetInnerHTML: {
+                    __html: markdownToEditorHtml(highlighted) || "&nbsp;",
+                } }), after ? (_jsx("span", { dangerouslySetInnerHTML: { __html: markdownToEditorHtml(after) } })) : null] }));
+}
+function DefaultToolBlock({ block, }) {
+    const label = block.title || block.toolType;
+    return (_jsxs("section", { "data-rich-text-tool": "", "data-tool-status": block.status, "data-tool-type": block.toolType, children: [_jsxs("div", { "data-tool-header": "", children: [_jsx("span", { "data-tool-title": "", children: label }), _jsx("span", { "data-tool-status-label": "", children: block.status })] }), block.markdown ? (_jsx("p", { "data-tool-markdown": "", dangerouslySetInnerHTML: {
+                    __html: 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/react/editor/RichTextRenderer.d.ts

@@ -0,0 +1,13 @@
+import { type RichTextToolBlockRenderer } from "./RichTextRenderedBlock";
+import type { RichTextBlock } from "../../core/types";
+export type RichTextAnnotationTarget = {
+    blockId: string;
+    quote?: string;
+};
+export declare function RichTextRenderer({ activeAnnotationTarget, contentBlocks, onContentBlocksChange, renderToolBlock, }: {
+    activeAnnotationTarget?: RichTextAnnotationTarget | null;
+    contentBlocks: RichTextBlock[];
+    onContentBlocksChange?: (contentBlocks: RichTextBlock[]) => void;
+    renderToolBlock?: RichTextToolBlockRenderer;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function getRichTextBlocksWithRenderedToggleCollapsed(blocks: RichTextBlock[], blockId: string, collapsed: boolean): RichTextBlock[];

package/dist/react/editor/RichTextRenderer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RichTextRenderedBlocks, } from "./RichTextRenderedBlock.js";
+import { setToggleCollapsed } from "../editor/blockActions.js";
+import { sanitizeRichTextBlocks } from "../../core/richText.js";
+import { RichTextStyleScope } from "../styles/RichTextStyles.js";
+// Renders a sanitized collection of rich-text blocks for read-only views.
+export function RichTextRenderer({ activeAnnotationTarget, contentBlocks, onContentBlocksChange, renderToolBlock, }) {
+    const sanitizedContentBlocks = sanitizeRichTextBlocks(contentBlocks);
+    function handleToggleCollapsedChange(blockId, collapsed) {
+        onContentBlocksChange?.(getRichTextBlocksWithRenderedToggleCollapsed(sanitizedContentBlocks, blockId, collapsed));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(RichTextStyleScope, {}), _jsx("div", { className: "bayon-rte-renderer", children: _jsx(RichTextRenderedBlocks, { activeAnnotationTarget: activeAnnotationTarget, blocks: sanitizedContentBlocks, onToggleCollapsedChange: onContentBlocksChange ? handleToggleCollapsedChange : undefined, renderToolBlock: renderToolBlock }) })] }));
+}
+export function getRichTextBlocksWithRenderedToggleCollapsed(blocks, blockId, collapsed) {
+    return setToggleCollapsed(sanitizeRichTextBlocks(blocks), blockId, collapsed);
+}

package/dist/react/{RichTextTitleInput.d.ts → editor/RichTextTitleInput.d.ts}

@@ -1,19 +1,29 @@
 import { type RefObject } from "react";
+import { type EditorHistoryShortcutCommand } from "./editorNavigation";
 type RichTextTitleInputProps = {
     disabled: boolean;
     inputRef: RefObject<HTMLTextAreaElement | null>;
     label: string;
     onArrowDown: () => void;
     onChange: (value: string) => void;
+    onRedo?: () => boolean;
     required: boolean;
     title: string;
+    onUndo?: () => boolean;
     validationMessage?: string;
 };
 type TitleKeyCommand = "focus-body-start";
-export declare function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange, required, title, validationMessage, }: RichTextTitleInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange, onRedo, required, title, onUndo, validationMessage, }: RichTextTitleInputProps): import("react/jsx-runtime").JSX.Element;
 export declare function getTitleKeyCommand(event: {
     key: string;
 }): TitleKeyCommand | null;
+export declare function getTitleHistoryCommand(event: {
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    key: string;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+}): EditorHistoryShortcutCommand | null;
 export declare function RichTextReadTitle({ title }: {
     title: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef } from "react";
-import { RichTextStyleScope } from "./RichTextStyles.js";
+import { RichTextStyleScope } from "../styles/RichTextStyles.js";
+import { getEditorHistoryShortcut, } from "./editorNavigation.js";
 // Renders the title field and handles keyboard movement into the editor body.
-export function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange, required, title, validationMessage = "", }) {
+export function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange, onRedo, required, title, onUndo, validationMessage = "", }) {
     const validationMessageId = useId();
     useEffect(() => {
         resizeTitleTextArea(inputRef.current);
@@ -12,6 +13,17 @@ export function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onC
                     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();
@@ -23,6 +35,9 @@ export function getTitleKeyCommand(event) {
         ? "focus-body-start"
         : null;
 }
+export function getTitleHistoryCommand(event) {
+    return getEditorHistoryShortcut(event);
+}
 export function RichTextReadTitle({ title }) {
     const titleRef = useRef(null);
     useEffect(() => {

package/dist/react/editor/blockActions.d.ts

@@ -0,0 +1,48 @@
+import { type NestableRichTextBlock } from "../../core/blockTypes";
+import type { RichTextBlock } from "../../core/types";
+export type BlockDropPlacement = "before" | "after" | "inside";
+export declare function isBlockActionTarget(_block: RichTextBlock): boolean;
+export declare function reorderBlock(blocks: RichTextBlock[], draggedBlockId: string, targetBlockId: string, placement?: BlockDropPlacement): RichTextBlock[];
+export declare function deleteBlockById(blocks: RichTextBlock[], blockId: string): RichTextBlock[];
+export declare function indentBlock(blocks: RichTextBlock[], blockId: string): RichTextBlock[];
+export declare function outdentBlock(blocks: RichTextBlock[], blockId: string): RichTextBlock[];
+export declare function setToggleCollapsed(blocks: RichTextBlock[], blockId: string, collapsed: boolean): RichTextBlock[];
+export declare function splitTreeRowBlock(blocks: RichTextBlock[], blockId: string, split: {
+    afterMarkdown: string;
+    beforeMarkdown: string;
+    nextBlockId: string;
+}): RichTextBlock[];
+export declare function splitTextBlock(blocks: RichTextBlock[], blockId: string, split: {
+    afterMarkdown: string;
+    beforeMarkdown: string;
+    nextBlockId: string;
+}): RichTextBlock[];
+export declare function insertBlocksAfterBlock(blocks: RichTextBlock[], blockId: string, insertedBlocks: RichTextBlock[]): RichTextBlock[];
+export declare function replaceBlockWithBlocks(blocks: RichTextBlock[], blockId: string, replacementBlocks: RichTextBlock[]): RichTextBlock[];
+export declare function insertBlocksInsideBlock(blocks: RichTextBlock[], blockId: string, insertedBlocks: RichTextBlock[]): RichTextBlock[];
+export declare function getBlockActionBlocks(blocks: RichTextBlock[], blockId: string): RichTextBlock[];
+export declare function convertCheckboxBlockToParagraph(blocks: RichTextBlock[], blockId: string): RichTextBlock[];
+type TreeRowParagraphMarkdown = string | ((block: NestableRichTextBlock) => string);
+export declare function convertTreeRowBlockToParagraph(blocks: RichTextBlock[], blockId: string, markdown: TreeRowParagraphMarkdown, options?: {
+    convertNonEmpty?: boolean;
+}): RichTextBlock[];
+export declare function blockToClipboardText(block: RichTextBlock): string;
+export declare function blockActionToClipboardText(blocks: RichTextBlock[], blockId: string): string;
+export declare function getBlockDeletionFocusTarget(blocks: RichTextBlock[], blockId: string): {
+    blockId: string;
+    position: "end";
+} | {
+    blockId: string;
+    position: "start";
+} | undefined;
+export declare function getForwardDeleteFocusTarget(blocks: RichTextBlock[], blockId: string): {
+    blockId: string;
+    position: "start";
+} | undefined;
+export declare function getToggleContentBackspaceDeletionFocusTarget(blocks: RichTextBlock[], blockId: string): {
+    blockId: string;
+    position: "end";
+} | undefined;
+export declare function isFirstToggleContentBlock(blocks: RichTextBlock[], blockId: string): boolean;
+export declare function isRootBlockAfterToggle(blocks: RichTextBlock[], blockId: string): boolean;
+export {};