@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist/react/SpecialBlockTool.d.ts

@@ -1,42 +0,0 @@
-import { CodeIcon, DataObjectIcon, DividerIcon, ImageIcon, QuoteIcon, TitleIcon } from "./RichTextIcons";
-export declare const specialBlockActions: readonly [{
-    readonly html: "<figure data-placeholder=\"image\"><p>Image placeholder</p></figure>";
-    readonly icon: typeof ImageIcon;
-    readonly label: "Image";
-    readonly selectDefault: true;
-}, {
-    readonly html: "<blockquote data-placeholder=\"quote\"></blockquote>";
-    readonly icon: typeof QuoteIcon;
-    readonly label: "Quote";
-    readonly selectDefault: true;
-}, {
-    readonly html: "<h2>Title</h2>";
-    readonly icon: typeof TitleIcon;
-    readonly label: "Title";
-    readonly selectDefault: true;
-}, {
-    readonly html: "<pre><code>Code block</code></pre>";
-    readonly icon: typeof CodeIcon;
-    readonly label: "Code block";
-    readonly selectDefault: true;
-}, {
-    readonly html: "<pre><code>Embedded HTML</code></pre>";
-    readonly icon: typeof DataObjectIcon;
-    readonly label: "Embedded HTML";
-    readonly selectDefault: true;
-}, {
-    readonly html: "<hr>";
-    readonly icon: typeof DividerIcon;
-    readonly label: "Divider";
-    readonly selectDefault: false;
-}];
-export type SpecialBlockAction = (typeof specialBlockActions)[number];
-type SpecialBlockToolProps = {
-    onHoverChange: (hovering: boolean) => void;
-    onInsert: (action: SpecialBlockAction) => void;
-    toolHover: boolean;
-    top: number;
-    visible: boolean;
-};
-export declare function SpecialBlockTool({ onHoverChange, onInsert, toolHover, top, visible, }: SpecialBlockToolProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/react/SpecialBlockTool.js

@@ -1,50 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AddIcon, CloseIcon, CodeIcon, DataObjectIcon, DividerIcon, ImageIcon, QuoteIcon, TitleIcon, } from "./RichTextIcons.js";
-import { SpecialBlockOption } from "./SpecialBlockOption.js";
-export const specialBlockActions = [
-    {
-        html: '<figure data-placeholder="image"><p>Image placeholder</p></figure>',
-        icon: ImageIcon,
-        label: "Image",
-        selectDefault: true,
-    },
-    {
-        html: '<blockquote data-placeholder="quote"></blockquote>',
-        icon: QuoteIcon,
-        label: "Quote",
-        selectDefault: true,
-    },
-    {
-        html: "<h2>Title</h2>",
-        icon: TitleIcon,
-        label: "Title",
-        selectDefault: true,
-    },
-    {
-        html: "<pre><code>Code block</code></pre>",
-        icon: CodeIcon,
-        label: "Code block",
-        selectDefault: true,
-    },
-    {
-        html: "<pre><code>Embedded HTML</code></pre>",
-        icon: DataObjectIcon,
-        label: "Embedded HTML",
-        selectDefault: true,
-    },
-    {
-        html: "<hr>",
-        icon: DividerIcon,
-        label: "Divider",
-        selectDefault: false,
-    },
-];
-// Renders the floating insertion control for image, quote, title, code, and divider blocks.
-export function SpecialBlockTool({ onHoverChange, onInsert, toolHover, top, visible, }) {
-    return (_jsxs("div", { "aria-hidden": !visible, className: `bayon-rte-special-tool${visible ? " bayon-rte-special-tool--visible" : ""}`, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => onHoverChange(false), style: { "--bayon-rte-special-tool-top": `${top}px` }, children: [_jsx("button", { "aria-label": toolHover ? "Close special blocks" : "Add special block", className: "bayon-rte-icon-button bayon-rte-special-button bayon-rte-special-toggle", onClick: () => onHoverChange(!toolHover), style: {
-                    transform: visible
-                        ? "scale(1) rotate(0deg)"
-                        : "scale(0.84) rotate(-12deg)",
-                }, title: toolHover ? "Close special blocks" : "Add special block", type: "button", children: toolHover ? _jsx(CloseIcon, { size: 20 }) : _jsx(AddIcon, { size: 20 }) }), toolHover ? (_jsx("div", { className: "bayon-rte-special-tool__actions", children: specialBlockActions.map((action) => (_jsx(SpecialBlockOption, { action: action, onInsert: onInsert }, action.label))) })) : null] }));
-}

package/dist/react/blockActionToolState.d.ts

@@ -1,18 +0,0 @@
-import type { BlockDropPlacement } from "./blockActions";
-export type BlockActionToolPlacement = {
-    blockId: string;
-    bottom: number;
-    top: number;
-};
-export type BlockActionToolVisibilityState = {
-    activeBlockId: string | null;
-    draggedBlockId: string | null;
-    focusedBlockId: string | null;
-    hoveredBlockId: string | null;
-};
-export declare function getVisibleBlockActionToolPlacements(placements: BlockActionToolPlacement[], state: BlockActionToolVisibilityState): BlockActionToolPlacement[];
-export declare function getPointerDropTarget(placements: BlockActionToolPlacement[], draggedBlockId: string, pointerClientY: number): {
-    placement: BlockDropPlacement;
-    targetBlockId: string;
-} | null;
-export declare function getUniqueBlockActionToolPlacements(placements: BlockActionToolPlacement[]): BlockActionToolPlacement[];

package/dist/react/blockActionToolState.js

@@ -1,53 +0,0 @@
-export function getVisibleBlockActionToolPlacements(placements, state) {
-    const uniquePlacements = getUniqueBlockActionToolPlacements(placements);
-    const visibleBlockId = state.activeBlockId ??
-        state.draggedBlockId ??
-        state.focusedBlockId ??
-        state.hoveredBlockId;
-    return visibleBlockId
-        ? uniquePlacements.filter((placement) => placement.blockId === visibleBlockId)
-        : [];
-}
-export function getPointerDropTarget(placements, draggedBlockId, pointerClientY) {
-    const targetPlacements = getUniqueBlockActionToolPlacements(placements).filter((placement) => {
-        return placement.blockId !== draggedBlockId;
-    });
-    const targetPlacement = targetPlacements.find((placement) => {
-        return (pointerClientY >= placement.top && pointerClientY <= placement.bottom);
-    }) ??
-        targetPlacements.reduce((closestPlacement, placement) => {
-            if (!closestPlacement) {
-                return placement;
-            }
-            return getDistanceToPlacement(placement, pointerClientY) <
-                getDistanceToPlacement(closestPlacement, pointerClientY)
-                ? placement
-                : closestPlacement;
-        }, null);
-    if (!targetPlacement) {
-        return null;
-    }
-    return {
-        placement: pointerClientY >
-            targetPlacement.top + (targetPlacement.bottom - targetPlacement.top) / 2
-            ? "after"
-            : "before",
-        targetBlockId: targetPlacement.blockId,
-    };
-}
-export function getUniqueBlockActionToolPlacements(placements) {
-    const seenBlockIds = new Set();
-    return placements.filter((placement) => {
-        if (seenBlockIds.has(placement.blockId)) {
-            return false;
-        }
-        seenBlockIds.add(placement.blockId);
-        return true;
-    });
-}
-function getDistanceToPlacement(placement, pointerClientY) {
-    if (pointerClientY >= placement.top && pointerClientY <= placement.bottom) {
-        return 0;
-    }
-    return Math.min(Math.abs(pointerClientY - placement.top), Math.abs(pointerClientY - placement.bottom));
-}

package/dist/react/blockActions.d.ts

@@ -1,8 +0,0 @@
-import type { RichTextBlock } from "../types";
-export type BlockDropPlacement = "before" | "after";
-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 convertCheckboxBlockToParagraph(blocks: RichTextBlock[], blockId: string): RichTextBlock[];
-export declare function blockToClipboardText(block: RichTextBlock): string;
-export declare function blockActionToClipboardText(blocks: RichTextBlock[], blockId: string): string;

package/dist/react/blockActions.js

@@ -1,111 +0,0 @@
-import { richTextBlocksToPlainText, sanitizeRichTextBlocks } from "../richText.js";
-export function isBlockActionTarget(block) {
-    if (block.type === "paragraph") {
-        return blockToClipboardText(block).trim().length > 0;
-    }
-    return true;
-}
-export function reorderBlock(blocks, draggedBlockId, targetBlockId, placement = "before") {
-    if (draggedBlockId === targetBlockId) {
-        return sanitizeRichTextBlocks(blocks);
-    }
-    const sanitizedBlocks = sanitizeRichTextBlocks(blocks);
-    const draggedRange = getSingleBlockRange(sanitizedBlocks, draggedBlockId);
-    const targetRange = getSingleBlockRange(sanitizedBlocks, targetBlockId);
-    if (!draggedRange ||
-        !targetRange ||
-        rangesOverlap(draggedRange, targetRange)) {
-        return sanitizedBlocks;
-    }
-    const draggedBlocks = sanitizedBlocks.slice(draggedRange.start, draggedRange.end);
-    const withoutDraggedBlocks = [
-        ...sanitizedBlocks.slice(0, draggedRange.start),
-        ...sanitizedBlocks.slice(draggedRange.end),
-    ];
-    const remainingTargetRange = getSingleBlockRange(withoutDraggedBlocks, targetBlockId);
-    if (!remainingTargetRange) {
-        return sanitizedBlocks;
-    }
-    const insertionIndex = placement === "after"
-        ? remainingTargetRange.end
-        : remainingTargetRange.start;
-    return [
-        ...withoutDraggedBlocks.slice(0, insertionIndex),
-        ...draggedBlocks,
-        ...withoutDraggedBlocks.slice(insertionIndex),
-    ];
-}
-export function deleteBlockById(blocks, blockId) {
-    const sanitizedBlocks = sanitizeRichTextBlocks(blocks);
-    const range = getSingleBlockRange(sanitizedBlocks, blockId);
-    if (!range) {
-        return sanitizedBlocks;
-    }
-    const remainingBlocks = [
-        ...sanitizedBlocks.slice(0, range.start),
-        ...sanitizedBlocks.slice(range.end),
-    ];
-    return remainingBlocks.length > 0
-        ? remainingBlocks
-        : [{ id: "block-empty", markdown: "", type: "paragraph" }];
-}
-export function convertCheckboxBlockToParagraph(blocks, blockId) {
-    return sanitizeRichTextBlocks(blocks).map((block) => {
-        if (block.id !== blockId || block.type !== "checkbox") {
-            return block;
-        }
-        return {
-            id: block.id,
-            markdown: block.markdown,
-            type: "paragraph",
-        };
-    });
-}
-export function blockToClipboardText(block) {
-    if (block.type === "checkbox") {
-        const text = richTextBlocksToPlainText([block]);
-        return text ? `[${block.checked ? "x" : " "}] ${text}` : "";
-    }
-    return richTextBlocksToPlainText([block]);
-}
-export function blockActionToClipboardText(blocks, blockId) {
-    const sanitizedBlocks = sanitizeRichTextBlocks(blocks);
-    const range = getActionBlockRange(sanitizedBlocks, blockId);
-    if (!range) {
-        return "";
-    }
-    return sanitizedBlocks
-        .slice(range.start, range.end)
-        .map(blockToClipboardText)
-        .filter((text) => text.trim())
-        .join("\n");
-}
-function getSingleBlockRange(blocks, blockId) {
-    const index = blocks.findIndex((block) => {
-        return block.id === blockId;
-    });
-    return index === -1 ? null : { end: index + 1, start: index };
-}
-function getActionBlockRange(blocks, blockId) {
-    const index = blocks.findIndex((block) => {
-        return block.id === blockId;
-    });
-    if (index === -1) {
-        return null;
-    }
-    if (blocks[index]?.type !== "checkbox") {
-        return { end: index + 1, start: index };
-    }
-    let start = index;
-    let end = index + 1;
-    while (start > 0 && blocks[start - 1]?.type === "checkbox") {
-        start -= 1;
-    }
-    while (end < blocks.length && blocks[end]?.type === "checkbox") {
-        end += 1;
-    }
-    return { end, start };
-}
-function rangesOverlap(first, second) {
-    return first.start < second.end && second.start < first.end;
-}

package/dist/richText.js

@@ -1,297 +0,0 @@
-const allowedInlineTags = new Set(["a", "br", "code", "em", "strong"]);
-const textBlockTypes = new Set(["paragraph", "heading", "quote", "checkbox"]);
-export function createEmptyRichTextBlocks() {
-    return [{ id: createRichTextBlockId(), type: "paragraph", markdown: "" }];
-}
-export function createRichTextBlockId() {
-    if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
-        return crypto.randomUUID();
-    }
-    return `block-${Date.now()}-${Math.random().toString(16).slice(2)}`;
-}
-/**
- * Sanitizes an array of RichTextBlock objects by:
- * - Filtering out invalid blocks
- * - Ensuring each block has a unique ID
- * - Returning an empty array if no valid blocks remain
- */
-export function sanitizeRichTextBlocks(value) {
-    const blocks = Array.isArray(value) ? value : [];
-    const seenBlockIds = new Set();
-    const sanitized = blocks
-        .flatMap((block) => sanitizeRichTextBlock(block))
-        .map((block) => {
-        if (!seenBlockIds.has(block.id)) {
-            seenBlockIds.add(block.id);
-            return block;
-        }
-        const blockWithUniqueId = {
-            ...block,
-            id: createUniqueRichTextBlockId(seenBlockIds),
-        };
-        seenBlockIds.add(blockWithUniqueId.id);
-        return blockWithUniqueId;
-    });
-    return sanitized.length > 0 ? sanitized : createEmptyRichTextBlocks();
-}
-export function isRichTextBlocksEmpty(blocks) {
-    return sanitizeRichTextBlocks(blocks).every((block) => {
-        if (block.type === "divider") {
-            return false;
-        }
-        if (block.type === "checkbox") {
-            return markdownToPlainText(block.markdown).trim() === "";
-        }
-        if (block.type === "image") {
-            return !block.assetId && !block.alt?.trim();
-        }
-        const text = block.type === "code" ? block.text : block.markdown;
-        return markdownToPlainText(text).trim() === "";
-    });
-}
-export function richTextBlocksToPlainText(blocks) {
-    return sanitizeRichTextBlocks(blocks)
-        .map((block) => {
-        if (block.type === "divider") {
-            return "";
-        }
-        if (block.type === "checkbox") {
-            return markdownToPlainText(block.markdown);
-        }
-        if (block.type === "image") {
-            return block.alt ?? "";
-        }
-        return block.type === "code"
-            ? block.text
-            : markdownToPlainText(block.markdown);
-    })
-        .join(" ")
-        .replace(/\s+/g, " ")
-        .trim();
-}
-export function editorHtmlToMarkdown(html) {
-    const sanitized = normalizeTypography(decodeHtmlText(sanitizeRichTextHtml(html)
-        .replace(/<br>/g, "  \n")
-        .replace(/<strong>([\s\S]*?)<\/strong>/g, (_, value) => {
-        return `**${decodeHtmlText(stripTags(value))}**`;
-    })
-        .replace(/<em>([\s\S]*?)<\/em>/g, (_, value) => {
-        return `_${decodeHtmlText(stripTags(value))}_`;
-    })
-        .replace(/<code>([\s\S]*?)<\/code>/g, (_, value) => {
-        return `\`${decodeHtmlText(stripTags(value)).replace(/`/g, "\\`")}\``;
-    })
-        .replace(/<a href="([^"]*)">([\s\S]*?)<\/a>/g, (_, href, value) => {
-        return `[${decodeHtmlText(stripTags(value))}](${decodeHtmlText(href)})`;
-    })
-        .replace(/<a>([\s\S]*?)<\/a>/g, (_, value) => {
-        return decodeHtmlText(stripTags(value));
-    })
-        .replace(/<[^>]+>/g, "")))
-        .replace(/\u00a0/g, " ")
-        .trim();
-    return sanitized;
-}
-export function markdownToEditorHtml(markdown) {
-    const tokens = [];
-    let html = escapeHtmlText(normalizeTypography(markdown));
-    html = html.replace(/`([^`\n]+)`/g, (_, value) => {
-        const token = pushToken(tokens, `<code>${value}</code>`);
-        return token;
-    });
-    html = html.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (_, label, href) => {
-        const safeHref = getSafeUrl(decodeHtmlText(href));
-        return safeHref ? `<a href="${safeHref}">${label}</a>` : label;
-    });
-    html = html
-        .replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>")
-        .replace(/_([^_\n]+)_/g, "<em>$1</em>")
-        .replace(/ {2}\n/g, "<br>")
-        .replace(/\n/g, "<br>");
-    tokens.forEach((value, index) => {
-        html = html.replace(tokenPlaceholder(index), value);
-    });
-    return html;
-}
-export function sanitizeRichTextHtml(html) {
-    return html
-        .replace(/<!--[\s\S]*?-->/g, "")
-        .replace(/<script[\s\S]*?<\/script>/gi, "")
-        .replace(/<style[\s\S]*?<\/style>/gi, "")
-        .replace(/<b(\s[^>]*)?>/gi, "<strong>")
-        .replace(/<\/b>/gi, "</strong>")
-        .replace(/<i(\s[^>]*)?>/gi, "<em>")
-        .replace(/<\/i>/gi, "</em>")
-        .replace(/<\/?([a-z0-9]+)([^>]*)>/gi, (match, rawTag, rawAttrs) => {
-        const tag = String(rawTag).toLowerCase();
-        const closing = match.startsWith("</");
-        if (!allowedInlineTags.has(tag)) {
-            return "";
-        }
-        if (closing) {
-            return tag === "br" ? "" : `</${tag}>`;
-        }
-        if (tag === "a") {
-            const href = getSafeAttribute(rawAttrs, "href");
-            return href ? `<a href="${href}">` : "<a>";
-        }
-        return tag === "br" ? "<br>" : `<${tag}>`;
-    });
-}
-function sanitizeRichTextBlock(block) {
-    if (!isRecord(block)) {
-        return [];
-    }
-    const id = readBlockId(block);
-    const type = block.type;
-    if (type === "code") {
-        return [{ id, type, text: String(block.text ?? "") }];
-    }
-    if (type === "divider") {
-        return [{ id, type }];
-    }
-    if (type === "image") {
-        return [
-            {
-                id,
-                type,
-                ...(typeof block.assetId === "string" && block.assetId.trim()
-                    ? { assetId: block.assetId.trim() }
-                    : {}),
-                ...(typeof block.alt === "string" && block.alt.trim()
-                    ? { alt: markdownToPlainText(editorHtmlToMarkdown(block.alt)) }
-                    : {}),
-            },
-        ];
-    }
-    if (typeof type === "string" && textBlockTypes.has(type)) {
-        const markdown = typeof block.markdown === "string"
-            ? block.markdown
-            : typeof block.text === "string"
-                ? block.text
-                : typeof block.html === "string"
-                    ? editorHtmlToMarkdown(block.html)
-                    : "";
-        if (type === "checkbox") {
-            return [
-                {
-                    id,
-                    type,
-                    checked: Boolean(block.checked),
-                    markdown: sanitizeMarkdown(markdown),
-                },
-            ];
-        }
-        return [
-            {
-                id,
-                type: type,
-                markdown: sanitizeMarkdown(markdown),
-            },
-        ];
-    }
-    return [];
-}
-function readBlockId(block) {
-    return typeof block.id === "string" && block.id.trim()
-        ? block.id.trim()
-        : createRichTextBlockId();
-}
-function createUniqueRichTextBlockId(existingIds) {
-    let id = createRichTextBlockId();
-    while (existingIds.has(id)) {
-        id = createRichTextBlockId();
-    }
-    return id;
-}
-function markdownToPlainText(value) {
-    return value
-        .replace(/`([^`]*)`/g, "$1")
-        .replace(/\*\*([^*]*)\*\*/g, "$1")
-        .replace(/_([^_]*)_/g, "$1")
-        .replace(/\[([^\]]*)\]\([^)]+\)/g, "$1")
-        .replace(/[#>*`_[\]()]/g, " ")
-        .replace(/\s+/g, " ")
-        .trim();
-}
-function sanitizeMarkdown(value) {
-    return normalizeTypography(value)
-        .replace(/<!--[\s\S]*?-->/g, "")
-        .trim();
-}
-function normalizeTypography(value) {
-    const tokens = [];
-    let normalized = value.replace(/`([^`\n]+)`/g, (match) => {
-        return pushToken(tokens, match);
-    });
-    normalized = normalized.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (_match, label, href) => {
-        return `[${label}](${pushToken(tokens, href)})`;
-    });
-    normalized = normalized
-        .replace(/––/g, "—")
-        .replace(/–-/g, "—")
-        .replace(/---/g, "—")
-        .replace(/--/g, "–");
-    tokens.forEach((token, index) => {
-        normalized = normalized.replace(tokenPlaceholder(index), token);
-    });
-    return normalized;
-}
-function stripTags(value) {
-    return value.replace(/<[^>]+>/g, "");
-}
-function getSafeAttribute(attrs, name) {
-    const value = getPlainAttribute(attrs, name);
-    const safeValue = getSafeUrl(value);
-    if (!safeValue) {
-        return "";
-    }
-    return escapeAttribute(safeValue);
-}
-function getSafeUrl(value) {
-    const trimmed = value.trim();
-    if (!trimmed || /^javascript:/i.test(trimmed)) {
-        return "";
-    }
-    return trimmed;
-}
-function getPlainAttribute(attrs, name) {
-    const pattern = new RegExp(`${name}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, "i");
-    const match = attrs.match(pattern);
-    return match?.[2] ?? match?.[3] ?? match?.[4] ?? "";
-}
-function escapeAttribute(value) {
-    return value
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;");
-}
-function escapeHtmlText(value) {
-    return value
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-}
-function decodeHtmlText(value) {
-    return value
-        .replace(/&nbsp;/g, " ")
-        .replace(/&#160;/g, " ")
-        .replace(/&#xA0;/gi, " ")
-        .replace(/&amp;/g, "&")
-        .replace(/&lt;/g, "<")
-        .replace(/&gt;/g, ">")
-        .replace(/&quot;/g, '"')
-        .replace(/&apos;/g, "'")
-        .replace(/&#39;/g, "'");
-}
-function pushToken(tokens, value) {
-    const index = tokens.push(value) - 1;
-    return tokenPlaceholder(index);
-}
-function tokenPlaceholder(index) {
-    return `@@RICHTEXTTOKEN${index}@@`;
-}
-function isRecord(value) {
-    return typeof value === "object" && value !== null;
-}

package/dist/types.d.ts

@@ -1,34 +0,0 @@
-export type RichTextBlock = {
-    id: string;
-    type: "paragraph";
-    markdown: string;
-} | {
-    id: string;
-    type: "heading";
-    markdown: string;
-} | {
-    id: string;
-    type: "quote";
-    markdown: string;
-} | {
-    id: string;
-    type: "checkbox";
-    checked: boolean;
-    markdown: string;
-} | {
-    id: string;
-    type: "code";
-    text: string;
-} | {
-    id: string;
-    type: "divider";
-} | {
-    id: string;
-    type: "image";
-    assetId?: string;
-    alt?: string;
-};
-export type RichTextDocument = {
-    contentBlocks: RichTextBlock[];
-    title: string;
-};

package/dist-cjs/react/RichTextBody.js

@@ -1,69 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextBody = RichTextBody;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const editorNavigation_1 = require("./editorNavigation");
-// Renders the editable rich-text body and reports input and selection changes.
-function RichTextBody({ bodyRef, disabled, label, onArrowUpFromFirstLine, onBackspace, onEnter, onFocus, onInput, onSelectionChange, onShortcutCommand, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, className: "bayon-rte-body", contentEditable: !disabled, "data-placeholder": "Tell your story...", dir: "auto", onBlur: onSelectionChange, onClick: (event) => {
-            if (event.target instanceof HTMLInputElement &&
-                event.target.type === "checkbox") {
-                onInput();
-            }
-        }, onFocus: onFocus, onInput: onInput, onKeyDown: (event) => {
-            if ((0, editorNavigation_1.isSelectAllShortcut)(event)) {
-                const code = (0, editorNavigation_1.getCodeBlockSelectionTarget)(event.currentTarget, window.getSelection());
-                if (code) {
-                    event.preventDefault();
-                    selectElementContents(code);
-                    onSelectionChange();
-                    return;
-                }
-            }
-            if (event.key === "Enter" && onEnter(event)) {
-                event.preventDefault();
-                return;
-            }
-            if (event.key === "Backspace" && onBackspace()) {
-                event.preventDefault();
-                return;
-            }
-            const shortcutCommand = (0, editorNavigation_1.getEditorKeyboardShortcut)(event);
-            if (shortcutCommand) {
-                event.preventDefault();
-                onShortcutCommand(shortcutCommand);
-                return;
-            }
-            if (event.key === "ArrowUp" &&
-                (0, editorNavigation_1.isCursorOnFirstLine)(event.currentTarget.textContent ?? "", getTextOffsetWithin(event.currentTarget))) {
-                event.preventDefault();
-                onArrowUpFromFirstLine();
-            }
-        }, onKeyUp: onSelectionChange, onMouseUp: onSelectionChange, onPaste: (event) => {
-            event.preventDefault();
-            document.execCommand("insertText", false, event.clipboardData.getData("text/plain"));
-            onInput();
-        }, ref: bodyRef, role: "textbox", suppressContentEditableWarning: true, tabIndex: disabled ? -1 : 0 }));
-}
-function selectElementContents(element) {
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    const selection = window.getSelection();
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-}
-function getTextOffsetWithin(root) {
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) {
-        return 0;
-    }
-    const selectionRange = selection.getRangeAt(0);
-    if (!root.contains(selectionRange.startContainer)) {
-        return 0;
-    }
-    const textRange = document.createRange();
-    textRange.selectNodeContents(root);
-    textRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
-    return textRange.toString().length;
-}