@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist-cjs/react/SpecialBlockTool.js

@@ -1,54 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.specialBlockActions = void 0;
-exports.SpecialBlockTool = SpecialBlockTool;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const RichTextIcons_1 = require("./RichTextIcons");
-const SpecialBlockOption_1 = require("./SpecialBlockOption");
-exports.specialBlockActions = [
-    {
-        html: '<figure data-placeholder="image"><p>Image placeholder</p></figure>',
-        icon: RichTextIcons_1.ImageIcon,
-        label: "Image",
-        selectDefault: true,
-    },
-    {
-        html: '<blockquote data-placeholder="quote"></blockquote>',
-        icon: RichTextIcons_1.QuoteIcon,
-        label: "Quote",
-        selectDefault: true,
-    },
-    {
-        html: "<h2>Title</h2>",
-        icon: RichTextIcons_1.TitleIcon,
-        label: "Title",
-        selectDefault: true,
-    },
-    {
-        html: "<pre><code>Code block</code></pre>",
-        icon: RichTextIcons_1.CodeIcon,
-        label: "Code block",
-        selectDefault: true,
-    },
-    {
-        html: "<pre><code>Embedded HTML</code></pre>",
-        icon: RichTextIcons_1.DataObjectIcon,
-        label: "Embedded HTML",
-        selectDefault: true,
-    },
-    {
-        html: "<hr>",
-        icon: RichTextIcons_1.DividerIcon,
-        label: "Divider",
-        selectDefault: false,
-    },
-];
-// Renders the floating insertion control for image, quote, title, code, and divider blocks.
-function SpecialBlockTool({ onHoverChange, onInsert, toolHover, top, visible, }) {
-    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(RichTextIcons_1.CloseIcon, { size: 20 }) : (0, jsx_runtime_1.jsx)(RichTextIcons_1.AddIcon, { size: 20 }) }), toolHover ? ((0, jsx_runtime_1.jsx)("div", { className: "bayon-rte-special-tool__actions", children: exports.specialBlockActions.map((action) => ((0, jsx_runtime_1.jsx)(SpecialBlockOption_1.SpecialBlockOption, { action: action, onInsert: onInsert }, action.label))) })) : null] }));
-}

package/dist-cjs/react/blockActionToolState.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getVisibleBlockActionToolPlacements = getVisibleBlockActionToolPlacements;
-exports.getPointerDropTarget = getPointerDropTarget;
-exports.getUniqueBlockActionToolPlacements = getUniqueBlockActionToolPlacements;
-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)
-        : [];
-}
-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,
-    };
-}
-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-cjs/react/blockActions.js

@@ -1,119 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isBlockActionTarget = isBlockActionTarget;
-exports.reorderBlock = reorderBlock;
-exports.deleteBlockById = deleteBlockById;
-exports.convertCheckboxBlockToParagraph = convertCheckboxBlockToParagraph;
-exports.blockToClipboardText = blockToClipboardText;
-exports.blockActionToClipboardText = blockActionToClipboardText;
-const richText_1 = require("../richText");
-function isBlockActionTarget(block) {
-    if (block.type === "paragraph") {
-        return blockToClipboardText(block).trim().length > 0;
-    }
-    return true;
-}
-function reorderBlock(blocks, draggedBlockId, targetBlockId, placement = "before") {
-    if (draggedBlockId === targetBlockId) {
-        return (0, richText_1.sanitizeRichTextBlocks)(blocks);
-    }
-    const sanitizedBlocks = (0, richText_1.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),
-    ];
-}
-function deleteBlockById(blocks, blockId) {
-    const sanitizedBlocks = (0, richText_1.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" }];
-}
-function convertCheckboxBlockToParagraph(blocks, blockId) {
-    return (0, richText_1.sanitizeRichTextBlocks)(blocks).map((block) => {
-        if (block.id !== blockId || block.type !== "checkbox") {
-            return block;
-        }
-        return {
-            id: block.id,
-            markdown: block.markdown,
-            type: "paragraph",
-        };
-    });
-}
-function blockToClipboardText(block) {
-    if (block.type === "checkbox") {
-        const text = (0, richText_1.richTextBlocksToPlainText)([block]);
-        return text ? `[${block.checked ? "x" : " "}] ${text}` : "";
-    }
-    return (0, richText_1.richTextBlocksToPlainText)([block]);
-}
-function blockActionToClipboardText(blocks, blockId) {
-    const sanitizedBlocks = (0, richText_1.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-cjs/richText.js

@@ -1,307 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createEmptyRichTextBlocks = createEmptyRichTextBlocks;
-exports.createRichTextBlockId = createRichTextBlockId;
-exports.sanitizeRichTextBlocks = sanitizeRichTextBlocks;
-exports.isRichTextBlocksEmpty = isRichTextBlocksEmpty;
-exports.richTextBlocksToPlainText = richTextBlocksToPlainText;
-exports.editorHtmlToMarkdown = editorHtmlToMarkdown;
-exports.markdownToEditorHtml = markdownToEditorHtml;
-exports.sanitizeRichTextHtml = sanitizeRichTextHtml;
-const allowedInlineTags = new Set(["a", "br", "code", "em", "strong"]);
-const textBlockTypes = new Set(["paragraph", "heading", "quote", "checkbox"]);
-function createEmptyRichTextBlocks() {
-    return [{ id: createRichTextBlockId(), type: "paragraph", markdown: "" }];
-}
-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
- */
-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();
-}
-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() === "";
-    });
-}
-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();
-}
-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;
-}
-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;
-}
-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;
-}