@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist-cjs/react/RichTextEditor.js

@@ -1,1108 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextEditor = RichTextEditor;
-exports.getDeletionFocusTarget = getDeletionFocusTarget;
-exports.normalizeSoftBreakHtml = normalizeSoftBreakHtml;
-exports.hasEditableTrailingWhitespace = hasEditableTrailingWhitespace;
-exports.shouldDelayTypographyNormalization = shouldDelayTypographyNormalization;
-exports.splitCheckboxMarkdownAtTextOffset = splitCheckboxMarkdownAtTextOffset;
-exports.getCheckboxEnterAction = getCheckboxEnterAction;
-exports.shouldPadTrailingLineBreak = shouldPadTrailingLineBreak;
-exports.resolveTranscriptionConfig = resolveTranscriptionConfig;
-exports.appendTranscriptText = appendTranscriptText;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const editorShortcuts_1 = require("./editorShortcuts");
-const BlockActionTool_1 = require("./BlockActionTool");
-const RichTextBody_1 = require("./RichTextBody");
-const RichTextDocumentSurface_1 = require("./RichTextDocumentSurface");
-const RichTextTitleInput_1 = require("./RichTextTitleInput");
-const SelectionFormatToolbar_1 = require("./SelectionFormatToolbar");
-const blockActions_1 = require("./blockActions");
-const blockActionToolState_1 = require("./blockActionToolState");
-const richText_1 = require("../richText");
-const writingStats_1 = require("../writingStats");
-const SpecialBlockTool_1 = require("./SpecialBlockTool");
-const RichTextStyles_1 = require("./RichTextStyles");
-const TranscriptionControl_1 = require("./TranscriptionControl");
-// Coordinates the title field, editable body, format toolbar, and block insertion controls.
-function RichTextEditor({ bodyLabel, contentBlocks, disabled = false, documentBackground = "transparent", helperText, onContentBlocksChange, onTitleChange, required = false, title, titleLabel, titleValidationMessage = "", transcriptionEnabled, transcriptionLanguage, }) {
-    const bodyRef = (0, react_1.useRef)(null);
-    const blockPointerDragRef = (0, react_1.useRef)(null);
-    const specialBlockTargetRef = (0, react_1.useRef)(null);
-    const titleRef = (0, react_1.useRef)(null);
-    const [activeBlockActionMenuId, setActiveBlockActionMenuId] = (0, react_1.useState)(null);
-    const [blockActionToolHover, setBlockActionToolHover] = (0, react_1.useState)(false);
-    const [blockActionToolPlacements, setBlockActionToolPlacements] = (0, react_1.useState)([]);
-    const [blockDragDropTarget, setBlockDragDropTarget] = (0, react_1.useState)(null);
-    const [draggedBlockId, setDraggedBlockId] = (0, react_1.useState)(null);
-    const [focusedBlockId, setFocusedBlockId] = (0, react_1.useState)(null);
-    const [hoveredBlockId, setHoveredBlockId] = (0, react_1.useState)(null);
-    const [bodyActive, setBodyActive] = (0, react_1.useState)(false);
-    const [specialBlockToolHover, setSpecialBlockToolHover] = (0, react_1.useState)(false);
-    const [specialBlockToolTop, setSpecialBlockToolTop] = (0, react_1.useState)(0);
-    const [selectionActive, setSelectionActive] = (0, react_1.useState)(false);
-    const [selectionToolbarPosition, setSelectionToolbarPosition] = (0, react_1.useState)({
-        left: 0,
-        top: 0,
-    });
-    const [specialBlockToolVisible, setSpecialBlockToolVisible] = (0, react_1.useState)(false);
-    const sanitizedContentBlocks = (0, react_1.useMemo)(() => (0, richText_1.sanitizeRichTextBlocks)(contentBlocks), [contentBlocks]);
-    const editableHtml = (0, react_1.useMemo)(() => richTextBlocksToEditorHtml(sanitizedContentBlocks), [sanitizedContentBlocks]);
-    const stats = (0, react_1.useMemo)(() => (0, writingStats_1.getWritingStats)(sanitizedContentBlocks), [sanitizedContentBlocks]);
-    const transcriptionConfig = resolveTranscriptionConfig({
-        enabled: transcriptionEnabled,
-        language: transcriptionLanguage,
-    });
-    (0, react_1.useEffect)(() => {
-        const body = bodyRef.current;
-        if (body &&
-            body.innerHTML !== editableHtml &&
-            (!bodyActive || isEditorHtmlEmpty(editableHtml))) {
-            body.innerHTML = editableHtml;
-            updateBlockActionTools(body);
-        }
-    }, [bodyActive, editableHtml]);
-    (0, react_1.useEffect)(() => {
-        const handleResize = () => updateBlockActionTools();
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    function emitBodyChange() {
-        const body = bodyRef.current;
-        if (!body) {
-            return;
-        }
-        onContentBlocksChange(readBlocksFromEditor(body));
-        updateBlockActionTools(body);
-    }
-    function handleBodyInput() {
-        if (!applyActiveTextBlockShortcut(bodyRef.current)) {
-            normalizeActiveTextBlockTypography(bodyRef.current);
-        }
-        emitBodyChange();
-        syncSelectionState();
-    }
-    function handleBodyEnter(event) {
-        const body = bodyRef.current;
-        const selection = window.getSelection();
-        if (!body || !selection || selection.rangeCount === 0) {
-            return false;
-        }
-        const range = selection.getRangeAt(0);
-        if (!body.contains(range.commonAncestorContainer)) {
-            return false;
-        }
-        const activeBlock = getActiveEditorBlock(range, body);
-        if (!activeBlock) {
-            return false;
-        }
-        if (activeBlock.hasAttribute("data-rich-text-checkbox")) {
-            const label = activeBlock.querySelector("[data-checkbox-label]");
-            if (!label || !label.contains(range.startContainer)) {
-                return false;
-            }
-            if (!selection.isCollapsed) {
-                range.deleteContents();
-            }
-            if (getCheckboxEnterAction(event) === "line-break") {
-                insertLineBreakAtRange(range, {
-                    padTrailingBreak: shouldPadTrailingLineBreak(getTextAfterRange(label, range)),
-                });
-                emitBodyChange();
-                syncSelectionState();
-                return true;
-            }
-            const splitOffset = getTextOffsetWithin(label, range);
-            const splitMarkdown = splitCheckboxMarkdownAtTextOffset((0, richText_1.editorHtmlToMarkdown)(normalizeSoftBreakHtml(label.innerHTML)), splitOffset);
-            label.innerHTML = textBlockMarkdownToEditorHtml(splitMarkdown.before);
-            activeBlock.insertAdjacentHTML("afterend", checkboxBlockToEditorHtml({
-                checked: false,
-                id: (0, richText_1.createRichTextBlockId)(),
-                markdown: splitMarkdown.after,
-                type: "checkbox",
-            }));
-            focusBlockStart(activeBlock.nextElementSibling?.querySelector("[data-checkbox-label]") ?? null);
-            emitBodyChange();
-            syncSelectionState();
-            return true;
-        }
-        if (event.shiftKey && isSoftBreakTextBlock(activeBlock)) {
-            if (!selection.isCollapsed) {
-                range.deleteContents();
-            }
-            insertLineBreakAtRange(range, {
-                padTrailingBreak: shouldPadTrailingLineBreak(getTextAfterRange(activeBlock, range)),
-            });
-            emitBodyChange();
-            syncSelectionState();
-            return true;
-        }
-        return false;
-    }
-    function handleBodyBackspace() {
-        const body = bodyRef.current;
-        const selection = window.getSelection();
-        if (!body || !selection || selection.rangeCount === 0) {
-            return false;
-        }
-        const range = selection.getRangeAt(0);
-        if (!selection.isCollapsed ||
-            !body.contains(range.commonAncestorContainer)) {
-            return false;
-        }
-        const activeBlock = getActiveEditorBlock(range, body);
-        if (!activeBlock?.hasAttribute("data-rich-text-checkbox")) {
-            return false;
-        }
-        const label = activeBlock.querySelector("[data-checkbox-label]");
-        if (!label || !label.contains(range.startContainer)) {
-            return false;
-        }
-        if (getTextOffsetWithin(label, range) !== 0) {
-            return false;
-        }
-        const blockId = activeBlock.getAttribute("data-block-id");
-        if (!blockId) {
-            return false;
-        }
-        applyContentBlocksChange((0, blockActions_1.convertCheckboxBlockToParagraph)(readBlocksFromEditor(body), blockId), { focusBlockId: blockId });
-        return true;
-    }
-    function syncSelectionState() {
-        const body = bodyRef.current;
-        const selection = window.getSelection();
-        if (!body) {
-            setSelectionActive(false);
-            setBlockActionToolPlacements([]);
-            return;
-        }
-        updateBlockActionTools(body);
-        if (!selection || selection.rangeCount === 0) {
-            setSelectionActive(false);
-            setSpecialBlockTarget(null);
-            setFocusedBlockId(null);
-            return;
-        }
-        const range = selection.getRangeAt(0);
-        if (!body.contains(range.commonAncestorContainer)) {
-            setSelectionActive(false);
-            setSpecialBlockTarget(null);
-            setFocusedBlockId(null);
-            return;
-        }
-        const bodyFocused = document.activeElement === body || body.contains(document.activeElement);
-        const rect = getVisibleRangeRect(range);
-        const bodyRect = body.getBoundingClientRect();
-        const nextTop = rect.height ? rect.top - bodyRect.top + body.scrollTop : 0;
-        const activeBlock = getActiveEditorBlock(range, body);
-        setFocusedBlockId(bodyFocused && activeBlock ? ensureEditorBlockId(activeBlock) : null);
-        if (!selection.isCollapsed && rect.width && rect.height) {
-            setSelectionActive(true);
-            setSpecialBlockTarget(null);
-            setSelectionToolbarPosition({
-                left: clamp(rect.left - bodyRect.left + rect.width / 2, 92, Math.max(92, body.clientWidth - 92)),
-                top: Math.max(0, nextTop - 58),
-            });
-            return;
-        }
-        setSelectionActive(false);
-        setSpecialBlockTarget(isSpecialBlockInsertTarget(activeBlock) &&
-            !activeBlock?.hasAttribute("data-suppress-special-block-tool")
-            ? activeBlock
-            : null, body);
-    }
-    function runSelectionCommand(command) {
-        bodyRef.current?.focus();
-        if (command === "link") {
-            const href = window.prompt("Link URL", "https://");
-            if (href) {
-                document.execCommand("createLink", false, href);
-            }
-        }
-        else if (command === "heading") {
-            document.execCommand("formatBlock", false, "h2");
-        }
-        else if (command === "quote") {
-            document.execCommand("formatBlock", false, "blockquote");
-        }
-        else if (command === "code") {
-            wrapSelectionWith("code");
-        }
-        else {
-            document.execCommand(command, false);
-        }
-        emitBodyChange();
-        syncSelectionState();
-    }
-    function insertBlock(action) {
-        const body = bodyRef.current;
-        if (!body) {
-            return;
-        }
-        body.focus();
-        const targetBlock = specialBlockTargetRef.current;
-        const html = action.html;
-        const nextEditableBlockHtml = `<p data-block-id="${escapeHtmlAttribute((0, richText_1.createRichTextBlockId)())}">&nbsp;</p>`;
-        let insertedBlock = null;
-        let nextEditableBlock = null;
-        if (targetBlock && body.contains(targetBlock)) {
-            targetBlock.insertAdjacentHTML("afterend", `${html}${nextEditableBlockHtml}`);
-            insertedBlock = targetBlock.nextElementSibling;
-            nextEditableBlock = insertedBlock?.nextElementSibling ?? null;
-            targetBlock.remove();
-        }
-        else {
-            body.insertAdjacentHTML("beforeend", `${html}${nextEditableBlockHtml}`);
-            nextEditableBlock = body.lastElementChild;
-            insertedBlock = nextEditableBlock?.previousElementSibling ?? null;
-        }
-        setSpecialBlockToolHover(false);
-        if (action.selectDefault) {
-            selectBlockContents(insertedBlock);
-        }
-        else {
-            focusBlockStart(nextEditableBlock);
-        }
-        emitBodyChange();
-        syncSelectionState();
-    }
-    function insertTranscriptText(text) {
-        const body = bodyRef.current;
-        const transcript = text.trim();
-        if (!body || !transcript) {
-            return;
-        }
-        body.focus();
-        const selection = window.getSelection();
-        if (selection &&
-            selection.rangeCount > 0 &&
-            body.contains(selection.getRangeAt(0).commonAncestorContainer)) {
-            document.execCommand("insertText", false, appendTranscriptText("", transcript));
-        }
-        else {
-            const currentText = body.textContent ?? "";
-            body.insertAdjacentText("beforeend", appendTranscriptText(currentText, transcript).slice(currentText.length));
-            focusBlockEnd(body);
-        }
-        emitBodyChange();
-        syncSelectionState();
-    }
-    function focusBodyStart() {
-        window.requestAnimationFrame(() => {
-            const body = bodyRef.current;
-            if (!body) {
-                return;
-            }
-            body.focus();
-            focusBlockStart(body.firstElementChild ?? body);
-            setBodyActive(true);
-            syncSelectionState();
-        });
-    }
-    function focusTitleEnd() {
-        window.requestAnimationFrame(() => {
-            titleRef.current?.focus();
-            titleRef.current?.setSelectionRange(title.length, title.length);
-        });
-    }
-    function setSpecialBlockTarget(block, body = bodyRef.current) {
-        specialBlockTargetRef.current = block;
-        setSpecialBlockToolVisible(!!block);
-        if (block && body) {
-            setSpecialBlockToolTop(getBlockInsertTop(block, body) ?? 0);
-        }
-    }
-    async function handleBlockAction(action, blockId) {
-        const body = bodyRef.current;
-        if (!body) {
-            return;
-        }
-        const blocks = readBlocksFromEditor(body);
-        const block = blocks.find((currentBlock) => currentBlock.id === blockId);
-        if (!block) {
-            return;
-        }
-        if (action === "copy" || action === "cut") {
-            const clipboardText = (0, blockActions_1.blockActionToClipboardText)(blocks, blockId) ||
-                (0, blockActions_1.blockToClipboardText)(block);
-            const copied = await writeTextToClipboard(clipboardText);
-            if (!copied || action === "copy") {
-                setActiveBlockActionMenuId(null);
-                return;
-            }
-        }
-        if (action === "cut" || action === "delete") {
-            const deletionFocusTarget = getDeletionFocusTarget(blocks, blockId);
-            applyContentBlocksChange((0, blockActions_1.deleteBlockById)(blocks, blockId), {
-                focusBlockId: deletionFocusTarget?.blockId,
-                focusBlockPosition: deletionFocusTarget?.position,
-            });
-        }
-        setActiveBlockActionMenuId(null);
-    }
-    function handleBlockPointerDragStart(blockId, event) {
-        setDraggedBlockId(blockId);
-        setBlockDragDropTarget(null);
-        setActiveBlockActionMenuId(null);
-        blockPointerDragRef.current = {
-            blockId,
-            dropTarget: null,
-            started: false,
-            x: event.clientX,
-            y: event.clientY,
-        };
-    }
-    function handleBlockPointerDragMove(event) {
-        const pointerDrag = blockPointerDragRef.current;
-        const body = bodyRef.current;
-        if (!pointerDrag || !body) {
-            return;
-        }
-        const movedDistance = Math.hypot(event.clientX - pointerDrag.x, event.clientY - pointerDrag.y);
-        if (movedDistance <= 3) {
-            return;
-        }
-        if (!pointerDrag.started) {
-            pointerDrag.started = true;
-        }
-        const bodyRect = body.getBoundingClientRect();
-        const nextPlacements = getBlockActionToolPlacements(body);
-        syncBlockActionToolPlacements(nextPlacements);
-        pointerDrag.dropTarget = (0, blockActionToolState_1.getPointerDropTarget)(nextPlacements, pointerDrag.blockId, event.clientY - bodyRect.top + body.scrollTop);
-        setBlockDragDropTarget(pointerDrag.dropTarget);
-    }
-    function handleBlockPointerDragEnd(event) {
-        const pointerDrag = blockPointerDragRef.current;
-        const body = bodyRef.current;
-        blockPointerDragRef.current = null;
-        setDraggedBlockId(null);
-        setBlockDragDropTarget(null);
-        if (!pointerDrag?.started || !body || !pointerDrag.dropTarget) {
-            return;
-        }
-        event.preventDefault();
-        applyContentBlocksChange((0, blockActions_1.reorderBlock)(readBlocksFromEditor(body), pointerDrag.blockId, pointerDrag.dropTarget.targetBlockId, pointerDrag.dropTarget.placement), { focusBody: false });
-    }
-    function applyContentBlocksChange(nextBlocks, options = {}) {
-        const body = bodyRef.current;
-        if (!body) {
-            onContentBlocksChange(nextBlocks);
-            return;
-        }
-        body.innerHTML = richTextBlocksToEditorHtml(nextBlocks);
-        onContentBlocksChange(nextBlocks);
-        updateBlockActionTools(body);
-        if (options.focusBody ?? true) {
-            body.focus();
-        }
-        if (options.focusBlockId) {
-            const focusBlock = body.querySelector(`[data-block-id="${cssEscape(options.focusBlockId)}"]`);
-            if (focusBlock) {
-                options.focusBlockPosition === "end"
-                    ? focusBlockEnd(focusBlock)
-                    : focusBlockStart(focusBlock);
-            }
-            else {
-                focusBlockStart(body.firstElementChild ?? body);
-            }
-        }
-        syncSelectionState();
-    }
-    function updateBlockActionTools(body = bodyRef.current) {
-        if (!body) {
-            setBlockActionToolPlacements([]);
-            return;
-        }
-        const nextPlacements = getBlockActionToolPlacements(body);
-        syncBlockActionToolPlacements(nextPlacements);
-    }
-    function syncBlockActionToolPlacements(nextPlacements) {
-        setBlockActionToolPlacements((currentPlacements) => {
-            return areBlockActionToolPlacementsEqual(currentPlacements, nextPlacements)
-                ? currentPlacements
-                : nextPlacements;
-        });
-    }
-    const showSpecialBlockTool = (bodyActive || specialBlockToolHover) &&
-        !disabled &&
-        specialBlockToolVisible;
-    const visibleBlockActionToolPlacements = (0, blockActionToolState_1.getVisibleBlockActionToolPlacements)(blockActionToolPlacements, {
-        activeBlockId: activeBlockActionMenuId,
-        draggedBlockId,
-        focusedBlockId,
-        hoveredBlockId,
-    });
-    const showBlockActionTools = !disabled && visibleBlockActionToolPlacements.length > 0;
-    const uniqueBlockActionToolPlacements = (0, blockActionToolState_1.getUniqueBlockActionToolPlacements)(blockActionToolPlacements);
-    const blockDragIndicatorTop = draggedBlockId && blockDragDropTarget
-        ? getBlockDragIndicatorTop(blockActionToolPlacements, blockDragDropTarget)
-        : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "bayon-rte-stack", children: [(0, jsx_runtime_1.jsx)(RichTextStyles_1.RichTextStyleScope, {}), (0, jsx_runtime_1.jsxs)(RichTextDocumentSurface_1.RichTextDocumentSurface, { background: documentBackground, children: [(0, jsx_runtime_1.jsx)(RichTextTitleInput_1.RichTextTitleInput, { disabled: disabled, inputRef: titleRef, label: titleLabel, onArrowDown: focusBodyStart, onChange: onTitleChange, required: required, title: title, validationMessage: titleValidationMessage }), (0, jsx_runtime_1.jsxs)("div", { className: "bayon-rte-body-shell", onMouseDownCapture: (event) => {
-                            if (activeBlockActionMenuId &&
-                                event.target instanceof Element &&
-                                !event.target.closest("[data-block-action-tool]")) {
-                                setActiveBlockActionMenuId(null);
-                            }
-                        }, onMouseEnter: () => setBodyActive(true), onMouseLeave: () => {
-                            const body = bodyRef.current;
-                            const bodyStillFocused = !!body &&
-                                (document.activeElement === body ||
-                                    body.contains(document.activeElement));
-                            if (!specialBlockToolHover &&
-                                !blockActionToolHover &&
-                                !activeBlockActionMenuId &&
-                                !draggedBlockId &&
-                                !bodyStillFocused) {
-                                setBodyActive(false);
-                            }
-                            if (!activeBlockActionMenuId && !draggedBlockId) {
-                                setHoveredBlockId(null);
-                            }
-                        }, onMouseMove: (event) => {
-                            const body = bodyRef.current;
-                            updateBlockActionTools(body);
-                            setHoveredBlockId(body
-                                ? (getHoveredEditorBlockId(event.clientX, event.clientY, body) ??
-                                    getHoveredBlockActionLaneId(event.clientX, event.clientY, body, blockActionToolPlacements))
-                                : null);
-                        }, children: [transcriptionConfig.enabled && !disabled ? ((0, jsx_runtime_1.jsx)(TranscriptionControl_1.TranscriptionControl, { language: transcriptionConfig.language, onTranscript: insertTranscriptText })) : null, selectionActive && !disabled ? ((0, jsx_runtime_1.jsx)(SelectionFormatToolbar_1.SelectionFormatToolbar, { left: selectionToolbarPosition.left, onAction: runSelectionCommand, top: selectionToolbarPosition.top })) : null, !disabled ? ((0, jsx_runtime_1.jsx)(SpecialBlockTool_1.SpecialBlockTool, { onHoverChange: setSpecialBlockToolHover, onInsert: insertBlock, top: specialBlockToolTop, toolHover: specialBlockToolHover, visible: showSpecialBlockTool })) : null, !disabled
-                                ? uniqueBlockActionToolPlacements.map((placement) => ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "bayon-rte-block-hover-zone", onMouseEnter: () => setHoveredBlockId(placement.blockId), onMouseLeave: () => {
-                                        if (!activeBlockActionMenuId && !draggedBlockId) {
-                                            setHoveredBlockId(null);
-                                        }
-                                    }, style: {
-                                        "--bayon-rte-block-hover-zone-height": `${Math.max(34, placement.bottom - placement.top)}px`,
-                                        "--bayon-rte-block-hover-zone-top": `${placement.top}px`,
-                                    } }, `hover-${placement.blockId}`)))
-                                : null, showBlockActionTools
-                                ? visibleBlockActionToolPlacements.map((placement) => ((0, jsx_runtime_1.jsx)(BlockActionTool_1.BlockActionTool, { activeBlockId: activeBlockActionMenuId, draggedBlockId: draggedBlockId, onAction: (action, blockId) => {
-                                        void handleBlockAction(action, blockId);
-                                    }, onHoverChange: setBlockActionToolHover, onPointerDragEnd: handleBlockPointerDragEnd, onPointerDragMove: handleBlockPointerDragMove, onPointerDragStart: handleBlockPointerDragStart, onToggleMenu: (blockId) => {
-                                        setActiveBlockActionMenuId((currentBlockId) => {
-                                            return currentBlockId === blockId ? null : blockId;
-                                        });
-                                    }, placement: placement }, placement.blockId)))
-                                : null, blockDragIndicatorTop !== null ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "bayon-rte-block-drag-indicator", style: {
-                                    "--bayon-rte-block-drag-indicator-top": `${blockDragIndicatorTop}px`,
-                                } })) : null, (0, jsx_runtime_1.jsx)(RichTextBody_1.RichTextBody, { bodyRef: bodyRef, disabled: disabled, label: bodyLabel, onArrowUpFromFirstLine: focusTitleEnd, onBackspace: handleBodyBackspace, onEnter: handleBodyEnter, onInput: handleBodyInput, onSelectionChange: syncSelectionState, onShortcutCommand: runSelectionCommand, onFocus: () => {
-                                    setBodyActive(true);
-                                    syncSelectionState();
-                                } })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bayon-rte-meta", children: [helperText ? (0, jsx_runtime_1.jsx)("small", { children: helperText }) : null, (0, jsx_runtime_1.jsxs)("small", { children: [stats.wordCount, " words / ", stats.readingMinutes, " min read"] })] })] }));
-}
-async function writeTextToClipboard(value) {
-    if (!value.trim()) {
-        return false;
-    }
-    if (navigator.clipboard?.writeText) {
-        try {
-            await navigator.clipboard.writeText(value);
-            return true;
-        }
-        catch {
-            // Fall through to the textarea fallback below.
-        }
-    }
-    const textarea = document.createElement("textarea");
-    textarea.value = value;
-    textarea.setAttribute("readonly", "");
-    textarea.style.left = "-9999px";
-    textarea.style.position = "fixed";
-    textarea.style.top = "0";
-    document.body.appendChild(textarea);
-    textarea.select();
-    try {
-        return document.execCommand("copy");
-    }
-    finally {
-        textarea.remove();
-    }
-}
-function wrapSelectionWith(tagName) {
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
-        return;
-    }
-    const range = selection.getRangeAt(0);
-    const wrapper = document.createElement(tagName);
-    wrapper.appendChild(range.extractContents());
-    range.insertNode(wrapper);
-    selection.removeAllRanges();
-    const nextRange = document.createRange();
-    nextRange.selectNodeContents(wrapper);
-    selection.addRange(nextRange);
-}
-function getVisibleRangeRect(range) {
-    const rect = range.getBoundingClientRect();
-    if (rect.width || rect.height) {
-        return rect;
-    }
-    return (Array.from(range.getClientRects()).find((clientRect) => {
-        return clientRect.width || clientRect.height;
-    }) ?? rect);
-}
-function getActiveEditorBlock(range, body) {
-    const node = range.startContainer.nodeType === Node.TEXT_NODE
-        ? range.startContainer.parentElement
-        : range.startContainer instanceof Element
-            ? range.startContainer
-            : null;
-    const block = node?.closest("p, div, h2, blockquote, pre, figure, hr, ul, ol");
-    return block && body.contains(block) ? block : null;
-}
-function getBlockInsertTop(block, body) {
-    if (!block) {
-        return null;
-    }
-    const bodyRect = body.getBoundingClientRect();
-    const blockRect = block.getBoundingClientRect();
-    if (!blockRect.height && !blockRect.width) {
-        return null;
-    }
-    return Math.max(0, blockRect.top - bodyRect.top + body.scrollTop);
-}
-function getBlockActionToolPlacements(body) {
-    const placements = [];
-    const children = Array.from(body.children);
-    for (let index = 0; index < children.length; index += 1) {
-        const element = children[index];
-        if (!isReadableEditorBlock(element)) {
-            continue;
-        }
-        const block = readBlockFromElement(element);
-        if (!element.getAttribute("data-block-id")) {
-            ensureEditorBlockId(element, block.id);
-        }
-        const position = getBlockPosition(element, body);
-        if (position && (0, blockActions_1.isBlockActionTarget)(block)) {
-            placements.push({
-                blockId: block.id,
-                bottom: position.bottom,
-                top: position.top,
-            });
-        }
-    }
-    return placements;
-}
-function getBlockPosition(block, body) {
-    if (!block) {
-        return null;
-    }
-    const bodyRect = body.getBoundingClientRect();
-    const blockRect = block.getBoundingClientRect();
-    if (!blockRect.height && !blockRect.width) {
-        return null;
-    }
-    const top = Math.max(0, blockRect.top - bodyRect.top + body.scrollTop);
-    return {
-        bottom: top + blockRect.height,
-        top,
-    };
-}
-function getBlockDragIndicatorTop(placements, dropTarget) {
-    const targetPlacement = placements.find((placement) => {
-        return placement.blockId === dropTarget.targetBlockId;
-    });
-    if (!targetPlacement) {
-        return null;
-    }
-    return dropTarget.placement === "after"
-        ? targetPlacement.bottom
-        : targetPlacement.top;
-}
-function getHoveredEditorBlockId(clientX, clientY, body) {
-    const element = document.elementFromPoint(clientX, clientY);
-    const block = element?.closest("p, div, h2, blockquote, pre, figure, hr, ul, ol");
-    if (!block || !body.contains(block) || !isReadableEditorBlock(block)) {
-        return null;
-    }
-    const richTextBlock = readBlockFromElement(block);
-    return (0, blockActions_1.isBlockActionTarget)(richTextBlock) ? richTextBlock.id : null;
-}
-function getHoveredBlockActionLaneId(clientX, clientY, body, placements) {
-    const bodyRect = body.getBoundingClientRect();
-    const laneX = clientX - bodyRect.left;
-    if (laneX < -54 || laneX > 28) {
-        return null;
-    }
-    const pointerTop = clientY - bodyRect.top + body.scrollTop;
-    const placement = placements.find((currentPlacement) => {
-        return (pointerTop >= currentPlacement.top - 10 &&
-            pointerTop <= currentPlacement.bottom + 10);
-    });
-    return placement?.blockId ?? null;
-}
-function isCheckboxEditorBlock(element) {
-    return !!element?.hasAttribute("data-rich-text-checkbox");
-}
-function isSoftBreakTextBlock(element) {
-    return ["P", "H2", "BLOCKQUOTE"].includes(element.tagName);
-}
-function areBlockActionToolPlacementsEqual(previousPlacements, nextPlacements) {
-    return (previousPlacements.length === nextPlacements.length &&
-        previousPlacements.every((placement, index) => {
-            const nextPlacement = nextPlacements[index];
-            return (placement.blockId === nextPlacement?.blockId &&
-                placement.top === nextPlacement.top &&
-                placement.bottom === nextPlacement.bottom);
-        }));
-}
-function getDeletionFocusTarget(blocks, blockId) {
-    const deletedBlockIndex = blocks.findIndex((block) => block.id === blockId);
-    if (deletedBlockIndex === -1) {
-        return undefined;
-    }
-    const previousBlockId = blocks[deletedBlockIndex - 1]?.id;
-    if (previousBlockId) {
-        return { blockId: previousBlockId, position: "end" };
-    }
-    return {
-        blockId: blocks[deletedBlockIndex + 1]?.id ?? "block-empty",
-        position: "start",
-    };
-}
-function focusBlockStart(block) {
-    if (!block) {
-        return;
-    }
-    const range = document.createRange();
-    range.setStart(block, 0);
-    range.collapse(true);
-    const selection = window.getSelection();
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-}
-function selectBlockContents(block) {
-    if (!block) {
-        return;
-    }
-    const selectionTarget = block.querySelector("p, code") ?? block;
-    const range = document.createRange();
-    range.selectNodeContents(selectionTarget);
-    const selection = window.getSelection();
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-}
-function isSpecialBlockInsertTarget(block) {
-    if (!block || !["DIV", "P"].includes(block.tagName)) {
-        return false;
-    }
-    if (block.hasAttribute("data-rich-text-checkbox")) {
-        return false;
-    }
-    return Array.from(block.childNodes).every((child) => {
-        if (child.nodeType === Node.TEXT_NODE) {
-            return (child.textContent ?? "").trim() === "";
-        }
-        if (child.nodeType !== Node.ELEMENT_NODE) {
-            return true;
-        }
-        const element = child;
-        return (element.tagName === "BR" || (element.textContent ?? "").trim() === "");
-    });
-}
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-function richTextBlocksToEditorHtml(blocks) {
-    return (0, richText_1.sanitizeRichTextBlocks)(blocks).map(richTextBlockToEditorHtml).join("");
-}
-function richTextBlockToEditorHtml(block) {
-    const blockId = escapeHtmlAttribute(block.id);
-    if (block.type === "heading") {
-        return `<h2 data-block-id="${blockId}">${textBlockMarkdownToEditorHtml(block.markdown)}</h2>`;
-    }
-    if (block.type === "quote") {
-        return `<blockquote data-block-id="${blockId}">${textBlockMarkdownToEditorHtml(block.markdown)}</blockquote>`;
-    }
-    if (block.type === "code") {
-        return `<pre data-block-id="${blockId}"><code>${escapeHtmlText(block.text)}</code></pre>`;
-    }
-    if (block.type === "divider") {
-        return `<hr data-block-id="${blockId}">`;
-    }
-    if (block.type === "checkbox") {
-        return checkboxBlockToEditorHtml(block);
-    }
-    if (block.type === "image") {
-        return `<figure data-block-id="${blockId}" data-placeholder="image"><p>${block.alt ?? "Image placeholder"}</p></figure>`;
-    }
-    return `<p data-block-id="${blockId}">${textBlockMarkdownToEditorHtml(block.markdown)}</p>`;
-}
-function textBlockMarkdownToEditorHtml(markdown) {
-    return (0, richText_1.markdownToEditorHtml)(markdown) || "&nbsp;";
-}
-function readBlocksFromEditor(body) {
-    const blocks = Array.from(body.childNodes).flatMap((node) => {
-        if (node.nodeType === Node.TEXT_NODE) {
-            const markdown = (0, richText_1.editorHtmlToMarkdown)(node.textContent ?? "");
-            return markdown
-                ? [
-                    {
-                        id: (0, richText_1.createRichTextBlockId)(),
-                        type: "paragraph",
-                        markdown,
-                    },
-                ]
-                : [];
-        }
-        if (!(node instanceof Element)) {
-            return [];
-        }
-        if (isReadableEditorBlock(node)) {
-            return [readBlockFromElement(node)];
-        }
-        const markdown = (0, richText_1.editorHtmlToMarkdown)(normalizeSoftBreakHtml(node.innerHTML || node.textContent || ""));
-        return markdown
-            ? [
-                {
-                    id: (0, richText_1.createRichTextBlockId)(),
-                    type: "paragraph",
-                    markdown,
-                },
-            ]
-            : [];
-    });
-    if (blocks.length === 0 && (body.textContent ?? "").trim()) {
-        return (0, richText_1.sanitizeRichTextBlocks)([
-            {
-                id: (0, richText_1.createRichTextBlockId)(),
-                type: "paragraph",
-                markdown: (0, richText_1.editorHtmlToMarkdown)(normalizeSoftBreakHtml(body.innerHTML)),
-            },
-        ]);
-    }
-    return (0, richText_1.sanitizeRichTextBlocks)(blocks);
-}
-function isReadableEditorBlock(element) {
-    return [
-        "P",
-        "DIV",
-        "H2",
-        "BLOCKQUOTE",
-        "PRE",
-        "FIGURE",
-        "HR",
-        "LABEL",
-    ].includes(element.tagName);
-}
-function readBlockFromElement(element) {
-    const id = element.getAttribute("data-block-id") || (0, richText_1.createRichTextBlockId)();
-    const tagName = element.tagName.toLowerCase();
-    if (tagName === "h2") {
-        return {
-            id,
-            type: "heading",
-            markdown: (0, richText_1.editorHtmlToMarkdown)(normalizeSoftBreakHtml(element.innerHTML)),
-        };
-    }
-    if (tagName === "blockquote") {
-        return {
-            id,
-            type: "quote",
-            markdown: (0, richText_1.editorHtmlToMarkdown)(normalizeSoftBreakHtml(element.innerHTML)),
-        };
-    }
-    if (tagName === "pre") {
-        return { id, type: "code", text: element.textContent ?? "" };
-    }
-    if (tagName === "hr") {
-        return { id, type: "divider" };
-    }
-    if (tagName === "div" && element.hasAttribute("data-rich-text-checkbox")) {
-        const input = element.querySelector("input[type='checkbox']");
-        const label = element.querySelector("[data-checkbox-label]");
-        return {
-            id,
-            type: "checkbox",
-            checked: input instanceof HTMLInputElement ? input.checked : false,
-            markdown: (0, richText_1.editorHtmlToMarkdown)(normalizeSoftBreakHtml(label?.innerHTML ?? element.innerHTML)),
-        };
-    }
-    if (tagName === "figure") {
-        return {
-            id,
-            type: "image",
-            alt: element.textContent?.trim() || "Image placeholder",
-        };
-    }
-    return {
-        id,
-        type: "paragraph",
-        markdown: (0, richText_1.editorHtmlToMarkdown)(normalizeSoftBreakHtml(element.innerHTML)),
-    };
-}
-function normalizeSoftBreakHtml(html) {
-    return html
-        .replace(/<span(?:\s+data-checkbox-label(?:=(?:""|'')?)?)?[^>]*>((?:\s*<br\s*\/?>\s*)+)<\/span>/gi, (_match, breaks) => {
-        return breaks.replace(/<br\s*\/?>/gi, "<br>").replace(/\s+/g, "");
-    })
-        .replace(/<br\s*\/?>/gi, "<br>");
-}
-function ensureEditorBlockId(element, fallbackId = (0, richText_1.createRichTextBlockId)()) {
-    const currentId = element.getAttribute("data-block-id");
-    if (currentId) {
-        return currentId;
-    }
-    element.setAttribute("data-block-id", fallbackId);
-    return fallbackId;
-}
-function isEditorHtmlEmpty(html) {
-    return (html === "" || /^<p data-block-id="[^"]*">(?:&nbsp;)?<\/p>$/.test(html));
-}
-function applyActiveTextBlockShortcut(body) {
-    if (!body) {
-        return false;
-    }
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) {
-        return false;
-    }
-    const activeBlock = getActiveEditorBlock(selection.getRangeAt(0), body);
-    if (!activeBlock ||
-        activeBlock.hasAttribute("data-rich-text-checkbox") ||
-        !["DIV", "P"].includes(activeBlock.tagName)) {
-        return false;
-    }
-    const shortcut = (0, editorShortcuts_1.getTextBlockShortcut)((0, richText_1.editorHtmlToMarkdown)(activeBlock.innerHTML));
-    if (!shortcut) {
-        return false;
-    }
-    const id = activeBlock.getAttribute("data-block-id") || (0, richText_1.createRichTextBlockId)();
-    activeBlock.insertAdjacentHTML("afterend", richTextBlockToEditorHtml(textBlockShortcutToRichTextBlock(id, shortcut)));
-    const replacementBlock = activeBlock.nextElementSibling;
-    activeBlock.remove();
-    if (shortcut.type === "divider") {
-        replacementBlock?.insertAdjacentHTML("afterend", `<p data-block-id="${escapeHtmlAttribute((0, richText_1.createRichTextBlockId)())}" data-suppress-special-block-tool="true">&nbsp;</p>`);
-        focusBlockStart(replacementBlock?.nextElementSibling ?? null);
-        return true;
-    }
-    if (shortcut.type === "checkbox") {
-        focusBlockEnd(replacementBlock?.querySelector("[data-checkbox-label]") ?? null);
-        return true;
-    }
-    focusBlockEnd(replacementBlock);
-    return true;
-}
-function normalizeActiveTextBlockTypography(body) {
-    if (!body) {
-        return;
-    }
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) {
-        return;
-    }
-    const range = selection.getRangeAt(0);
-    const activeBlock = getActiveEditorBlock(range, body);
-    if (!activeBlock ||
-        activeBlock.tagName === "PRE" ||
-        activeBlock.hasAttribute("data-rich-text-checkbox")) {
-        return;
-    }
-    const currentMarkdown = (0, richText_1.editorHtmlToMarkdown)(activeBlock.innerHTML);
-    if (shouldDelayTypographyNormalization(activeBlock.textContent ?? "")) {
-        return;
-    }
-    const nextHtml = textBlockMarkdownToEditorHtml(currentMarkdown);
-    if (activeBlock.innerHTML === nextHtml) {
-        return;
-    }
-    const cursorOffset = getTextOffsetWithin(activeBlock, range);
-    const normalizedCursorOffset = (0, richText_1.editorHtmlToMarkdown)(activeBlock.textContent?.slice(0, cursorOffset) ?? "").length;
-    activeBlock.innerHTML = nextHtml;
-    focusBlockAtTextOffset(activeBlock, normalizedCursorOffset);
-}
-function focusBlockEnd(block) {
-    if (!block) {
-        return;
-    }
-    const range = document.createRange();
-    range.selectNodeContents(block);
-    range.collapse(false);
-    const selection = window.getSelection();
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-}
-function focusBlockAtTextOffset(block, offset) {
-    const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
-    let remaining = offset;
-    let textNode = walker.nextNode();
-    while (textNode) {
-        const textLength = textNode.textContent?.length ?? 0;
-        if (remaining <= textLength) {
-            const range = document.createRange();
-            range.setStart(textNode, remaining);
-            range.collapse(true);
-            const selection = window.getSelection();
-            selection?.removeAllRanges();
-            selection?.addRange(range);
-            return;
-        }
-        remaining -= textLength;
-        textNode = walker.nextNode();
-    }
-    focusBlockEnd(block);
-}
-function getTextOffsetWithin(root, range) {
-    const textRange = document.createRange();
-    textRange.selectNodeContents(root);
-    textRange.setEnd(range.startContainer, range.startOffset);
-    return textRange.toString().length;
-}
-function getTextAfterRange(root, range) {
-    const textRange = document.createRange();
-    textRange.selectNodeContents(root);
-    textRange.setStart(range.startContainer, range.startOffset);
-    return textRange.toString();
-}
-function hasEditableTrailingWhitespace(value) {
-    return /[\s\u00a0]$/.test(value);
-}
-function shouldDelayTypographyNormalization(value) {
-    return hasEditableTrailingWhitespace(value) && !hasDashSequence(value);
-}
-function splitCheckboxMarkdownAtTextOffset(markdown, offset) {
-    const visibleOffset = Math.trunc(offset);
-    const visibleTextLength = getMarkdownVisibleText(markdown).length;
-    if (visibleOffset <= 0) {
-        return {
-            after: markdown.trim(),
-            before: "",
-        };
-    }
-    if (visibleOffset >= visibleTextLength) {
-        return {
-            after: "",
-            before: markdown.trim(),
-        };
-    }
-    const splitOffset = clamp(getMarkdownIndexAtVisibleTextOffset(markdown, visibleOffset), 0, markdown.length);
-    return {
-        after: markdown.slice(splitOffset).trim(),
-        before: markdown.slice(0, splitOffset).trim(),
-    };
-}
-function getMarkdownIndexAtVisibleTextOffset(markdown, offset) {
-    let visibleOffset = 0;
-    for (let index = 0; index < markdown.length; index += 1) {
-        if (isMarkdownSyntaxAt(markdown, index)) {
-            continue;
-        }
-        visibleOffset += 1;
-        if (visibleOffset >= offset) {
-            return index + 1;
-        }
-    }
-    return markdown.length;
-}
-function getMarkdownVisibleText(markdown) {
-    return markdown
-        .replace(/`([^`]*)`/g, "$1")
-        .replace(/\*\*([^*]*)\*\*/g, "$1")
-        .replace(/_([^_]*)_/g, "$1")
-        .replace(/\[([^\]]*)\]\([^)]+\)/g, "$1");
-}
-function isMarkdownSyntaxAt(markdown, index) {
-    return (isStrongDelimiterAt(markdown, index) || isInlineSyntaxAt(markdown, index));
-}
-function isStrongDelimiterAt(markdown, index) {
-    return (markdown[index] === "*" &&
-        (markdown[index - 1] === "*" || markdown[index + 1] === "*"));
-}
-function isInlineSyntaxAt(markdown, index) {
-    const char = markdown[index];
-    if (isInsideMarkdownLinkTarget(markdown, index)) {
-        return true;
-    }
-    if (char === "`" || char === "_") {
-        return true;
-    }
-    if (char === "[" || char === "]") {
-        return true;
-    }
-    return false;
-}
-function isInsideMarkdownLinkTarget(markdown, index) {
-    const linkOpenIndex = markdown.lastIndexOf("](", index);
-    if (linkOpenIndex === -1) {
-        return false;
-    }
-    const linkCloseIndex = markdown.indexOf(")", linkOpenIndex + 2);
-    return linkCloseIndex !== -1 && index <= linkCloseIndex;
-}
-function getCheckboxEnterAction(event) {
-    return event.shiftKey ? "line-break" : "next-checkbox";
-}
-function shouldPadTrailingLineBreak(textAfterCursor) {
-    return textAfterCursor.length === 0;
-}
-function resolveTranscriptionConfig(config = {}) {
-    return {
-        enabled: config.enabled ?? true,
-        language: config.language?.trim() || undefined,
-    };
-}
-function appendTranscriptText(currentText, transcript) {
-    const nextText = transcript.trim();
-    if (!nextText) {
-        return currentText;
-    }
-    if (!currentText) {
-        return nextText;
-    }
-    return `${currentText}${hasEditableTrailingWhitespace(currentText) ? "" : " "}${nextText}`;
-}
-function hasDashSequence(value) {
-    return /--|––|–-|---|—-/.test(value);
-}
-function insertLineBreakAtRange(range, options = {}) {
-    const breakElement = document.createElement("br");
-    range.insertNode(breakElement);
-    if (options.padTrailingBreak) {
-        const paddingBreakElement = document.createElement("br");
-        breakElement.parentNode?.insertBefore(paddingBreakElement, breakElement.nextSibling);
-    }
-    range.setStartAfter(breakElement);
-    range.collapse(true);
-    const selection = window.getSelection();
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-}
-function checkboxBlockToEditorHtml(block) {
-    const blockId = escapeHtmlAttribute(block.id);
-    const checked = block.checked ? " checked" : "";
-    return `<div data-block-id="${blockId}" data-rich-text-checkbox=""><input contenteditable="false" type="checkbox"${checked}><span data-checkbox-label="">${textBlockMarkdownToEditorHtml(block.markdown)}</span></div>`;
-}
-function textBlockShortcutToRichTextBlock(id, shortcut) {
-    if (shortcut.type === "divider") {
-        return { id, type: "divider" };
-    }
-    if (shortcut.type === "code") {
-        return { id, type: "code", text: shortcut.text };
-    }
-    if (shortcut.type === "checkbox") {
-        return {
-            id,
-            type: "checkbox",
-            checked: shortcut.checked,
-            markdown: shortcut.markdown,
-        };
-    }
-    return { id, type: shortcut.type, markdown: shortcut.markdown };
-}
-function escapeHtmlText(value) {
-    return value
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-}
-function escapeHtmlAttribute(value) {
-    return escapeHtmlText(value).replace(/"/g, "&quot;");
-}
-function cssEscape(value) {
-    if (typeof CSS !== "undefined" && CSS.escape) {
-        return CSS.escape(value);
-    }
-    return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
-}