@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist/react/editor/RichTextEditor.js

@@ -0,0 +1,2925 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { getTextBlockShortcut, } from "./editorShortcuts.js";
+import { BlockActionTool } from "../tools/BlockActionTool.js";
+import { RichTextBody } from "./RichTextBody.js";
+import { LinkCreationInput } from "../tools/LinkCreationInput.js";
+import { RichTextDocumentSurface, } from "./RichTextDocumentSurface.js";
+import { RichTextTitleInput } from "./RichTextTitleInput.js";
+import { SelectionFormatToolbar, } from "../tools/SelectionFormatToolbar.js";
+import { blockActionToClipboardText, blockToClipboardText, convertTreeRowBlockToParagraph, deleteBlockById, getBlockActionBlocks, getBlockDeletionFocusTarget, getForwardDeleteFocusTarget, getToggleContentBackspaceDeletionFocusTarget, indentBlock, insertBlocksAfterBlock, insertBlocksInsideBlock, isFirstToggleContentBlock, isRootBlockAfterToggle, isBlockActionTarget, outdentBlock, reorderBlock, replaceBlockWithBlocks, setToggleCollapsed, splitTextBlock, splitTreeRowBlock, } from "../editor/blockActions.js";
+import { getBlockActionToolAnchorTop, getPointerDragDropResult, getPointerHoverLaneBlockId, getUniqueBlockActionToolPlacements, getVisibleBlockActionToolPlacements, } from "../tools/blockActionToolState.js";
+import { createRichTextBlockId, decodeRichTextBlocksFromClipboardText, editorHtmlToMarkdown, encodeRichTextBlocksForClipboard, isRichTextBlocksEmpty, markdownToEditorHtml, sanitizeRichTextBlocks, } from "../../core/richText.js";
+import { canonicalSerialize } from "../../session/session.js";
+import { isNestableRichTextBlock } from "../../core/blockTypes.js";
+import { findBlockPath, getBlockAtPath, updateBlockAtPath, } from "../../core/blockTree.js";
+import { getRichTextFeatureAccess, isRichTextFeatureEnabled, } from "../../core/features.js";
+import { getWritingStats } from "../../core/writingStats.js";
+import { SpecialBlockTool, } from "../tools/SpecialBlockTool.js";
+import { RichTextStyleScope } from "../styles/RichTextStyles.js";
+import { TranscriptionControl } from "../tools/TranscriptionControl.js";
+import { canRedoRichTextHistory, canUndoRichTextHistory, commitRichTextHistory, createRichTextHistorySnapshot, createRichTextHistory, redoRichTextHistory, undoRichTextHistory, } from "./editorHistory.js";
+import { captureRichTextSelection, restoreRichTextSelection, } from "./editorSelection.js";
+const SELECTION_TOOLBAR_HALF_WIDTH = 92;
+const SELECTION_TOOLBAR_HEIGHT = 48;
+const SELECTION_TOOLBAR_SELECTION_GAP = 48;
+export const defaultRichTextEditorBehavior = {
+    blockActions: true,
+    specialBlocks: true,
+    textBlockShortcuts: true,
+};
+export function resolveRichTextEditorBehavior(behavior) {
+    return {
+        ...defaultRichTextEditorBehavior,
+        ...behavior,
+    };
+}
+const IMAGE_CUSTOM_WIDTH_FALLBACK = 600;
+// Coordinates the title field, editable body, format toolbar, and block insertion controls.
+export function RichTextEditor({ behavior, bodyLabel, contentBlocks, disabled = false, documentBackground = "transparent", features, helperText, imageUpload, lockedFeatureMode, onFeatureGate, onContentBlocksChange, onHistoryControlsChange, onHistorySnapshotChange, onTitleChange, required = false, title, titleLabel, titleValidationMessage = "", transcriptionEnabled, transcriptionLanguage, transcriptionPortalContainer, }) {
+    const bodyRef = useRef(null);
+    const blockPointerDragRef = useRef(null);
+    const blockPointerDragCleanupRef = useRef(null);
+    const imageInputRef = useRef(null);
+    const specialBlockTargetRef = useRef(null);
+    const titleRef = useRef(null);
+    const [activeBlockActionMenuId, setActiveBlockActionMenuId] = useState(null);
+    const [blockActionToolHover, setBlockActionToolHover] = useState(false);
+    const [blockActionToolPlacements, setBlockActionToolPlacements] = useState([]);
+    const [blockDragDropResult, setBlockDragDropResult] = useState(null);
+    const [draggedBlockId, setDraggedBlockId] = useState(null);
+    const [focusedBlockId, setFocusedBlockId] = useState(null);
+    const [hoveredBlockId, setHoveredBlockId] = useState(null);
+    const [bodyActive, setBodyActive] = useState(false);
+    const [linkInputOpen, setLinkInputOpen] = useState(false);
+    const pendingLinkRangeRef = useRef(null);
+    const [specialBlockToolHover, setSpecialBlockToolHover] = useState(false);
+    const [specialBlockToolOpen, setSpecialBlockToolOpen] = useState(false);
+    const [specialBlockToolTop, setSpecialBlockToolTop] = useState(0);
+    const [selectionActive, setSelectionActive] = useState(false);
+    const [selectionToolbarPosition, setSelectionToolbarPosition] = useState({
+        left: 0,
+        placement: "above",
+        top: 0,
+    });
+    const editorBehavior = useMemo(() => resolveRichTextEditorBehavior(behavior), [behavior]);
+    const blockActionsEnabled = editorBehavior.blockActions;
+    const specialBlocksEnabled = editorBehavior.specialBlocks;
+    const textBlockShortcutsEnabled = editorBehavior.textBlockShortcuts;
+    const [specialBlockToolVisible, setSpecialBlockToolVisible] = useState(false);
+    const sanitizedContentBlocks = useMemo(() => sanitizeRichTextBlocks(contentBlocks), [contentBlocks]);
+    const currentDocument = useMemo(() => ({
+        contentBlocks: sanitizedContentBlocks,
+        title,
+    }), [sanitizedContentBlocks, title]);
+    const [history, setHistory] = useState(() => createRichTextHistory({
+        document: currentDocument,
+        selection: null,
+    }));
+    const historyRef = useRef(history);
+    const applyHistoryEntryRef = useRef(() => undefined);
+    const editableHtml = useMemo(() => richTextBlocksToEditorHtml(sanitizedContentBlocks), [sanitizedContentBlocks]);
+    const stats = useMemo(() => getWritingStats(sanitizedContentBlocks), [sanitizedContentBlocks]);
+    const transcriptionConfig = resolveTranscriptionConfig({
+        enabled: (transcriptionEnabled ?? true) &&
+            isRichTextFeatureEnabled(features, "transcription"),
+        language: transcriptionLanguage,
+    });
+    const transcriptionControl = transcriptionConfig.enabled && !disabled ? (_jsx(TranscriptionControl, { language: transcriptionConfig.language, onTranscript: insertTranscriptText })) : null;
+    const transcriptionNode = transcriptionPortalContainer === null
+        ? null
+        : transcriptionPortalContainer && transcriptionControl
+            ? createPortal(transcriptionControl, transcriptionPortalContainer)
+            : transcriptionControl;
+    useEffect(() => {
+        historyRef.current = history;
+    }, [history]);
+    useEffect(() => {
+        onHistorySnapshotChange?.(createRichTextHistorySnapshot(history));
+    }, [history, onHistorySnapshotChange]);
+    useEffect(() => {
+        const body = bodyRef.current;
+        const editorFocused = (body &&
+            (document.activeElement === body ||
+                body.contains(document.activeElement))) ||
+            document.activeElement === titleRef.current;
+        if (editorFocused ||
+            canonicalSerialize(historyRef.current.present.document) ===
+                canonicalSerialize(currentDocument)) {
+            return;
+        }
+        const nextHistory = createRichTextHistory({
+            document: currentDocument,
+            selection: null,
+        });
+        historyRef.current = nextHistory;
+        setHistory(nextHistory);
+    }, [currentDocument]);
+    const syncBlockActionToolPlacements = useCallback((nextPlacements) => {
+        setBlockActionToolPlacements((currentPlacements) => {
+            return areBlockActionToolPlacementsEqual(currentPlacements, nextPlacements)
+                ? currentPlacements
+                : nextPlacements;
+        });
+    }, []);
+    const updateBlockActionTools = useCallback((body = bodyRef.current) => {
+        if (!blockActionsEnabled || !body) {
+            setBlockActionToolPlacements([]);
+            return;
+        }
+        const nextPlacements = getBlockActionToolPlacements(body);
+        syncBlockActionToolPlacements(nextPlacements);
+    }, [blockActionsEnabled, syncBlockActionToolPlacements]);
+    const refreshBlockActionTools = useCallback((body = bodyRef.current) => {
+        updateBlockActionTools(body);
+        window.requestAnimationFrame(() => {
+            updateBlockActionTools(body);
+        });
+    }, [updateBlockActionTools]);
+    useEffect(() => {
+        const body = bodyRef.current;
+        if (body &&
+            shouldRefreshEditorBodyHtml(body, editableHtml, sanitizedContentBlocks) &&
+            (!bodyActive || isEditorHtmlEmpty(editableHtml))) {
+            body.innerHTML = editableHtml;
+            updateBlockActionTools(body);
+        }
+    }, [
+        bodyActive,
+        editableHtml,
+        sanitizedContentBlocks,
+        updateBlockActionTools,
+    ]);
+    useEffect(() => {
+        const handleResize = () => updateBlockActionTools();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [updateBlockActionTools]);
+    useEffect(() => {
+        return () => {
+            blockPointerDragCleanupRef.current?.();
+        };
+    }, []);
+    function setSpecialBlockTarget(block, body = bodyRef.current) {
+        specialBlockTargetRef.current = block;
+        setSpecialBlockToolVisible(!!block);
+        if (block && body) {
+            setSpecialBlockToolTop(getBlockInsertTop(block, body) ?? 0);
+        }
+    }
+    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 activeBlock = getActiveEditorBlock(range, body);
+        setFocusedBlockId(bodyFocused && activeBlock ? ensureEditorBlockId(activeBlock) : null);
+        if (!selection.isCollapsed && rect.width && rect.height) {
+            setSelectionActive(true);
+            setSpecialBlockTarget(null);
+            setSelectionToolbarPosition(getSelectionToolbarPosition({
+                bodyClientWidth: body.clientWidth,
+                bodyRect,
+                rangeRect: rect,
+                scrollTop: body.scrollTop,
+            }));
+            return;
+        }
+        setSelectionActive(false);
+    }
+    function getCurrentEditorDocument() {
+        const body = bodyRef.current;
+        return {
+            contentBlocks: body
+                ? readBlocksFromEditor(body)
+                : sanitizeRichTextBlocks(contentBlocks),
+            title,
+        };
+    }
+    function commitEditorDocumentChange({ change, focusBlockId, focusBlockPosition, focusBody, historyLabel = "typing", historyMetadata, nextContentBlocks, nextTitle = title, selection, skipBodyHtmlUpdate = false, }) {
+        const body = bodyRef.current;
+        const sanitizedBlocks = sanitizeRichTextBlocks(nextContentBlocks ?? getCurrentEditorDocument().contentBlocks);
+        const nextDocument = {
+            contentBlocks: sanitizedBlocks,
+            title: nextTitle,
+        };
+        const nextSelection = selection === undefined ? captureRichTextSelection(body) : selection;
+        setHistory((currentHistory) => {
+            const nextHistory = commitRichTextHistory(currentHistory, {
+                document: nextDocument,
+                label: historyLabel,
+                metadata: historyMetadata,
+                selection: nextSelection,
+            });
+            historyRef.current = nextHistory;
+            return nextHistory;
+        });
+        if (!body) {
+            if (nextTitle !== title) {
+                onTitleChange(nextTitle);
+            }
+            onContentBlocksChange(sanitizedBlocks, change);
+            setSpecialBlockToolOpen(false);
+            return;
+        }
+        if (!skipBodyHtmlUpdate) {
+            body.innerHTML = richTextBlocksToEditorHtml(sanitizedBlocks);
+        }
+        if (nextTitle !== title) {
+            onTitleChange(nextTitle);
+        }
+        onContentBlocksChange(sanitizedBlocks, change);
+        updateBlockActionTools(body);
+        if (focusBody ?? true) {
+            body.focus();
+        }
+        if (focusBlockId) {
+            focusEditorBlock(body, focusBlockId, focusBlockPosition);
+        }
+        else if (nextSelection) {
+            restoreRichTextSelection(body, nextSelection);
+        }
+        setSpecialBlockToolOpen(false);
+        syncSelectionState();
+    }
+    function applyHistoryEntry(entry) {
+        const body = bodyRef.current;
+        if (entry.document.title !== title) {
+            onTitleChange(entry.document.title);
+        }
+        onContentBlocksChange(entry.document.contentBlocks);
+        if (!body) {
+            return;
+        }
+        restoreScrollPositionAfter(window, () => {
+            body.innerHTML = richTextBlocksToEditorHtml(entry.document.contentBlocks);
+        });
+        restoreRichTextSelection(body, entry.selection);
+        refreshBlockActionTools(body);
+        syncSelectionState();
+    }
+    useLayoutEffect(() => {
+        applyHistoryEntryRef.current = applyHistoryEntry;
+    });
+    const handleUndo = useCallback(() => {
+        const result = undoRichTextHistory(historyRef.current);
+        if (result.history === historyRef.current) {
+            return false;
+        }
+        historyRef.current = result.history;
+        setHistory(result.history);
+        applyHistoryEntryRef.current(result.entry);
+        return true;
+    }, []);
+    const handleRedo = useCallback(() => {
+        const result = redoRichTextHistory(historyRef.current);
+        if (result.history === historyRef.current) {
+            return false;
+        }
+        historyRef.current = result.history;
+        setHistory(result.history);
+        applyHistoryEntryRef.current(result.entry);
+        return true;
+    }, []);
+    useEffect(() => {
+        onHistoryControlsChange?.({
+            canRedo: canRedoRichTextHistory(history),
+            canUndo: canUndoRichTextHistory(history),
+            redo: handleRedo,
+            undo: handleUndo,
+        });
+    }, [handleRedo, handleUndo, history, onHistoryControlsChange]);
+    function emitBodyChange(historyLabel = "typing", historyMetadata) {
+        const body = bodyRef.current;
+        if (!body) {
+            return;
+        }
+        commitEditorDocumentChange({
+            historyLabel,
+            historyMetadata,
+            nextContentBlocks: readBlocksFromEditor(body),
+            skipBodyHtmlUpdate: true,
+        });
+        refreshBlockActionTools(body);
+    }
+    function handleTitleChange(nextTitle) {
+        const nextDocument = {
+            contentBlocks: getCurrentEditorDocument().contentBlocks,
+            title: nextTitle,
+        };
+        setHistory((currentHistory) => {
+            const nextHistory = commitRichTextHistory(currentHistory, {
+                document: nextDocument,
+                label: "title",
+                selection: captureRichTextSelection(bodyRef.current),
+            });
+            historyRef.current = nextHistory;
+            return nextHistory;
+        });
+        onTitleChange(nextTitle);
+    }
+    function handleBodyInput() {
+        const appliedShortcut = textBlockShortcutsEnabled
+            ? applyActiveTextBlockShortcut(bodyRef.current)
+            : false;
+        if (!appliedShortcut) {
+            normalizeActiveTextBlockTypography(bodyRef.current);
+        }
+        emitBodyChange(appliedShortcut ? "block-insert" : "typing", appliedShortcut ? { blockType: appliedShortcut } : undefined);
+        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;
+        }
+        const treeRow = getTreeRowEditorParts(activeBlock);
+        if (treeRow) {
+            if (!treeRow.label.contains(range.startContainer)) {
+                return false;
+            }
+            if (!selection.isCollapsed) {
+                range.deleteContents();
+            }
+            if (getCheckboxEnterAction(event) === "line-break") {
+                insertLineBreakAtRange(range, {
+                    padTrailingBreak: shouldPadTrailingLineBreak(getTextAfterRange(treeRow.label, range)),
+                });
+                emitBodyChange();
+                syncSelectionState();
+                return true;
+            }
+            const splitOffset = getTextOffsetWithin(treeRow.label, range);
+            const splitMarkdown = splitTreeRowMarkdownAtTextOffset(editorHtmlToMarkdown(normalizeSoftBreakHtml(treeRow.label.innerHTML)), splitOffset);
+            const blockId = activeBlock.getAttribute("data-block-id");
+            const nextBlockId = createRichTextBlockId();
+            if (!blockId) {
+                return false;
+            }
+            if ((treeRow.label.textContent ?? "").trim().length === 0) {
+                applyContentBlocksChange(convertTreeRowBlockToParagraph(readBlocksFromEditor(body), blockId, ""), {
+                    focusBlockId: blockId,
+                    focusBlockPosition: "start",
+                    historyLabel: "block-outdent",
+                });
+                return true;
+            }
+            applyContentBlocksChange(splitTreeRowBlock(readBlocksFromEditor(body), blockId, {
+                afterMarkdown: splitMarkdown.after,
+                beforeMarkdown: splitMarkdown.before,
+                nextBlockId,
+            }), {
+                focusBlockId: nextBlockId,
+                historyLabel: "block-insert",
+                historyMetadata: {
+                    blockType: getHistoryBlockTypeForElement(activeBlock),
+                },
+            });
+            return true;
+        }
+        if (!event.shiftKey && isSoftBreakTextBlock(activeBlock)) {
+            if (!selection.isCollapsed) {
+                range.deleteContents();
+            }
+            const blockId = ensureEditorBlockId(activeBlock);
+            const splitOffset = getTextOffsetWithin(activeBlock, range);
+            const splitMarkdown = splitTreeRowMarkdownAtTextOffset(editorHtmlToMarkdown(normalizeSoftBreakHtml(activeBlock.innerHTML)), splitOffset);
+            const nextBlockId = createRichTextBlockId();
+            applyContentBlocksChange(splitTextBlock(readBlocksFromEditor(body), blockId, {
+                afterMarkdown: splitMarkdown.after,
+                beforeMarkdown: splitMarkdown.before,
+                nextBlockId,
+            }), {
+                focusBlockId: nextBlockId,
+                focusBlockPosition: "start",
+                historyLabel: "block-insert",
+                historyMetadata: {
+                    blockType: getHistoryBlockTypeForElement(activeBlock),
+                },
+            });
+            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);
+        const activeBlockId = activeBlock?.getAttribute("data-block-id") ?? "";
+        const activeBlockAtStart = activeBlock !== null && isEditorBlockAtBackspaceStart(activeBlock, range);
+        if (activeBlockId && activeBlockAtStart) {
+            const currentBlocks = readBlocksFromEditor(body);
+            if (isFirstToggleContentBlock(currentBlocks, activeBlockId) ||
+                isRootBlockAfterToggle(currentBlocks, activeBlockId)) {
+                return true;
+            }
+        }
+        if (activeBlock &&
+            isDirectToggleContentChild(activeBlock) &&
+            isEmptyTextBlockAtStart(activeBlock, range)) {
+            const blockId = activeBlock.getAttribute("data-block-id");
+            if (!blockId) {
+                return true;
+            }
+            const currentBlocks = readBlocksFromEditor(body);
+            const deletionFocusTarget = getToggleContentBackspaceDeletionFocusTarget(currentBlocks, blockId);
+            if (!deletionFocusTarget) {
+                return true;
+            }
+            applyContentBlocksChange(deleteBlockById(currentBlocks, blockId), {
+                focusBlockId: deletionFocusTarget.blockId,
+                focusBlockPosition: deletionFocusTarget.position,
+                historyLabel: "block-delete",
+            });
+            return true;
+        }
+        if (activeBlock &&
+            !isDirectToggleContentChild(activeBlock) &&
+            handleEmptyTextBlockBackspace(activeBlock, range, body)) {
+            return true;
+        }
+        const treeRow = getTreeRowEditorParts(activeBlock);
+        if (!activeBlock || !treeRow) {
+            return false;
+        }
+        if (!treeRow.label.contains(range.startContainer)) {
+            return false;
+        }
+        if (getTextOffsetWithin(treeRow.label, range) !== 0) {
+            return false;
+        }
+        const blockId = activeBlock.getAttribute("data-block-id");
+        if (!blockId) {
+            return false;
+        }
+        const currentBlocks = readBlocksFromEditor(body);
+        const currentBlock = getBlockById(currentBlocks, blockId);
+        const currentTreeRowMarkdown = isNestableRichTextBlock(currentBlock)
+            ? currentBlock.markdown
+            : editorHtmlToMarkdown(normalizeSoftBreakHtml(treeRow.label.innerHTML));
+        const currentTreeRowIsEmpty = currentTreeRowMarkdown.trim().length === 0;
+        if (treeRow.type === "toggle") {
+            if (!currentTreeRowIsEmpty) {
+                return false;
+            }
+            if (!canBackspaceEmptyToggleTitle(currentBlock)) {
+                return true;
+            }
+        }
+        const paragraphMarkdown = getTreeRowBackspaceParagraphMarkdown(treeRow.type, currentTreeRowMarkdown);
+        applyContentBlocksChange(convertTreeRowBlockToParagraph(currentBlocks, blockId, paragraphMarkdown, {
+            convertNonEmpty: treeRow.type !== "toggle",
+        }), {
+            focusBlockId: blockId,
+            focusBlockPosition: getTreeRowBackspaceFocusPositionForParagraph(treeRow.type, currentTreeRowMarkdown),
+            historyLabel: "block-delete",
+        });
+        return true;
+    }
+    function handleEmptyTextBlockBackspace(activeBlock, range, body) {
+        if (!isEmptyTextBlockAtStart(activeBlock, range)) {
+            return false;
+        }
+        const blockId = activeBlock.getAttribute("data-block-id");
+        if (!blockId) {
+            return false;
+        }
+        const currentBlocks = readBlocksFromEditor(body);
+        const deletionFocusTarget = getBlockDeletionFocusTarget(currentBlocks, blockId);
+        applyContentBlocksChange(deleteBlockById(currentBlocks, blockId), {
+            focusBlockId: deletionFocusTarget?.blockId,
+            focusBlockPosition: deletionFocusTarget?.position,
+            historyLabel: "block-delete",
+        });
+        return true;
+    }
+    function handleBodyDelete() {
+        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);
+        const blockId = activeBlock?.getAttribute("data-block-id");
+        if (!activeBlock || !blockId) {
+            return false;
+        }
+        if (!isCaretInDeletableBlockContent(activeBlock, range)) {
+            return false;
+        }
+        const currentBlocks = readBlocksFromEditor(body);
+        const currentBlock = getBlockById(currentBlocks, blockId);
+        if (!isEmptyEditableBlockWithoutChildren(currentBlock)) {
+            return false;
+        }
+        const deletionFocusTarget = getForwardDeleteFocusTarget(currentBlocks, blockId);
+        if (!deletionFocusTarget) {
+            return true;
+        }
+        applyContentBlocksChange(deleteBlockById(currentBlocks, blockId), {
+            focusBlockId: deletionFocusTarget.blockId,
+            focusBlockPosition: deletionFocusTarget.position,
+            historyLabel: "block-delete",
+        });
+        return true;
+    }
+    function handleBodyTab(event) {
+        const body = bodyRef.current;
+        const selection = window.getSelection();
+        if (!body || !selection || selection.rangeCount === 0) {
+            return false;
+        }
+        const activeBlock = getActiveEditorBlock(selection.getRangeAt(0), body);
+        const activeBlockId = activeBlock?.getAttribute("data-block-id") ?? focusedBlockId;
+        const activeTreeRow = getTreeRowEditorParts(activeBlock);
+        const activeTreeRowOffset = activeTreeRow?.label.contains(selection.getRangeAt(0).startContainer)
+            ? getTextOffsetWithin(activeTreeRow.label, selection.getRangeAt(0))
+            : null;
+        if (!activeBlockId) {
+            return false;
+        }
+        const currentBlocks = readBlocksFromEditor(body);
+        const activeRichTextBlock = getBlockById(currentBlocks, activeBlockId);
+        if (!isNestableEditorBlock(activeBlock) &&
+            !isNestableRichTextBlock(activeRichTextBlock)) {
+            return true;
+        }
+        const nextBlocks = event.shiftKey
+            ? outdentBlock(currentBlocks, activeBlockId)
+            : indentBlock(currentBlocks, activeBlockId);
+        if (JSON.stringify(nextBlocks) === JSON.stringify(currentBlocks)) {
+            return true;
+        }
+        applyContentBlocksChange(nextBlocks, {
+            focusBody: false,
+            historyLabel: event.shiftKey ? "block-outdent" : "block-indent",
+        });
+        focusTreeRowLabelAtTextOffset(body.querySelector(`[data-block-id="${cssEscape(activeBlockId)}"]`), activeTreeRowOffset);
+        syncSelectionState();
+        return true;
+    }
+    function handleBodyPasteText(text, pasteTargetBlock) {
+        if (!specialBlocksEnabled) {
+            return false;
+        }
+        const pastedBlocks = decodeRichTextBlocksFromClipboardText(text);
+        if (!pastedBlocks) {
+            return false;
+        }
+        const body = bodyRef.current;
+        const selection = window.getSelection();
+        if (!body) {
+            onContentBlocksChange(pastedBlocks);
+            return true;
+        }
+        const selectedActiveBlock = selection && selection.rangeCount > 0
+            ? getActiveEditorBlock(selection.getRangeAt(0), body)
+            : null;
+        const activeBlock = pasteTargetBlock && body.contains(pasteTargetBlock)
+            ? pasteTargetBlock
+            : selectedActiveBlock;
+        const activeBlockId = activeBlock?.getAttribute("data-block-id");
+        const currentBlocks = readBlocksFromEditor(body);
+        const toggleContentPlaceholderParentId = getToggleContentPlaceholderParentId(activeBlock);
+        const currentBlock = activeBlockId
+            ? getBlockById(currentBlocks, activeBlockId)
+            : null;
+        const nextBlocks = toggleContentPlaceholderParentId
+            ? insertBlocksInsideBlock(currentBlocks, toggleContentPlaceholderParentId, pastedBlocks)
+            : activeBlockId && isEmptyEditableBlockWithoutChildren(currentBlock)
+                ? replaceBlockWithBlocks(currentBlocks, activeBlockId, pastedBlocks)
+                : activeBlockId
+                    ? insertBlocksAfterBlock(currentBlocks, activeBlockId, pastedBlocks)
+                    : [...currentBlocks, ...pastedBlocks];
+        const focusBlock = pastedBlocks[0];
+        applyContentBlocksChange(nextBlocks, {
+            focusBlockId: focusBlock?.id,
+            focusBlockPosition: "start",
+            historyLabel: "paste",
+        });
+        return true;
+    }
+    function handleToggleCollapse(blockId) {
+        const body = bodyRef.current;
+        if (!body) {
+            return;
+        }
+        const currentBlocks = readBlocksFromEditor(body);
+        const currentBlock = getBlockById(currentBlocks, blockId);
+        if (currentBlock?.type !== "toggle") {
+            return;
+        }
+        restoreScrollPositionAfter(window, () => applyContentBlocksChange(setToggleCollapsed(currentBlocks, blockId, !currentBlock.collapsed), {
+            focusBlockId: blockId,
+            focusBlockPosition: "start",
+            historyLabel: "toggle-collapse",
+        }, { reason: "toggle-collapse" }));
+    }
+    function runSelectionCommand(command) {
+        bodyRef.current?.focus();
+        if (command === "link") {
+            openLinkInput();
+            return;
+        }
+        else if (command === "heading") {
+            closeLinkInput();
+            document.execCommand("formatBlock", false, "h2");
+        }
+        else if (command === "quote") {
+            closeLinkInput();
+            document.execCommand("formatBlock", false, "blockquote");
+        }
+        else if (command === "code") {
+            closeLinkInput();
+            wrapSelectionWith("code");
+        }
+        else {
+            closeLinkInput();
+            document.execCommand(command, false);
+        }
+        emitBodyChange("format");
+        syncSelectionState();
+    }
+    function openLinkInput() {
+        const body = bodyRef.current;
+        const selection = window.getSelection();
+        if (!body || !selection || selection.rangeCount === 0) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        if (range.collapsed || !body.contains(range.commonAncestorContainer)) {
+            return;
+        }
+        pendingLinkRangeRef.current = range.cloneRange();
+        setSelectionActive(false);
+        setLinkInputOpen(true);
+    }
+    function closeLinkInput() {
+        pendingLinkRangeRef.current = null;
+        setLinkInputOpen(false);
+    }
+    function submitLinkInput(href) {
+        const body = bodyRef.current;
+        const range = pendingLinkRangeRef.current;
+        const selection = window.getSelection();
+        closeLinkInput();
+        if (!body || !range || !selection) {
+            return;
+        }
+        body.focus();
+        selection.removeAllRanges();
+        selection.addRange(range);
+        document.execCommand("createLink", false, href);
+        emitBodyChange("link");
+        syncSelectionState();
+    }
+    async function insertBlock(action) {
+        if (!specialBlocksEnabled) {
+            return;
+        }
+        const body = bodyRef.current;
+        if (!body) {
+            return;
+        }
+        body.focus();
+        if (isPasteSpecialBlockAction(action)) {
+            const clipboardText = await readTextFromClipboard();
+            if (clipboardText) {
+                const handledRichTextPaste = handleBodyPasteText(clipboardText, specialBlockTargetRef.current);
+                if (!handledRichTextPaste) {
+                    insertPlainTextFromClipboard(clipboardText, specialBlockTargetRef.current);
+                }
+            }
+            setSpecialBlockToolHover(false);
+            syncSelectionState();
+            return;
+        }
+        if (isImageUploadSpecialBlockAction(action) &&
+            !isRichTextFeatureEnabled(features, "image-upload")) {
+            const access = getRichTextFeatureAccess(features, "image-upload");
+            if (!access.enabled) {
+                onFeatureGate?.({
+                    featureId: access.featureId,
+                    label: access.label,
+                    reason: access.reason,
+                });
+            }
+            return;
+        }
+        if (isImageUploadSpecialBlockAction(action) && imageUpload) {
+            restoreScrollPositionAfter(window, () => imageInputRef.current?.click());
+            return;
+        }
+        const targetBlock = specialBlockTargetRef.current;
+        const html = "fallbackHtml" in action && action.kind === "image-upload"
+            ? action.fallbackHtml
+            : action.html;
+        const nextEditableBlockHtml = `<p data-block-id="${escapeHtmlAttribute(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 if (action.focusSelector) {
+            const focusTarget = insertedBlock?.querySelector(action.focusSelector) ?? insertedBlock;
+            action.focusPosition === "start"
+                ? focusBlockStart(focusTarget)
+                : focusBlockEnd(focusTarget);
+        }
+        else {
+            focusBlockStart(nextEditableBlock);
+        }
+        emitBodyChange(isImageUploadSpecialBlockAction(action) ? "image" : "block-insert", isImageUploadSpecialBlockAction(action)
+            ? undefined
+            : { blockType: getSpecialBlockActionBlockType(action) });
+        syncSelectionState();
+    }
+    async function handleImageFileChange(file) {
+        if (!specialBlocksEnabled || !file || !imageUpload) {
+            return;
+        }
+        const uploadBlock = insertUploadingImageBlockWithoutScrollJump(file);
+        try {
+            const upload = await imageUpload({
+                file,
+                onProgress: (progress) => updateUploadingImageBlockProgress(uploadBlock.id, progress),
+            });
+            replaceImageBlock(uploadBlock.id, buildUploadedImageBlock(upload, {
+                alignment: getCurrentImageAlignment(uploadBlock.id),
+                id: uploadBlock.id,
+            }));
+        }
+        catch (error) {
+            updateUploadingImageBlockMessage(uploadBlock.id, getImageUploadFailureMessage(error));
+        }
+        finally {
+            if (imageInputRef.current) {
+                imageInputRef.current.value = "";
+            }
+        }
+    }
+    function insertUploadingImageBlock(file) {
+        const body = bodyRef.current;
+        const imageBlock = buildUploadingImageBlock({ fileName: file.name });
+        const nextTextBlock = {
+            id: createRichTextBlockId(),
+            markdown: "",
+            type: "paragraph",
+        };
+        const insertedBlocks = [imageBlock, nextTextBlock];
+        if (!body) {
+            onContentBlocksChange(insertedBlocks);
+            setSpecialBlockToolOpen(false);
+            return imageBlock;
+        }
+        const targetBlock = specialBlockTargetRef.current;
+        const currentBlocks = readBlocksFromEditor(body);
+        const targetBlockId = targetBlock && body.contains(targetBlock)
+            ? targetBlock.getAttribute("data-block-id")
+            : null;
+        applyContentBlocksChange(targetBlockId
+            ? replaceBlockWithBlocks(currentBlocks, targetBlockId, insertedBlocks)
+            : [...currentBlocks, ...insertedBlocks], {
+            focusBlockId: nextTextBlock.id,
+            focusBody: false,
+            historyLabel: "image",
+        });
+        setSpecialBlockToolHover(false);
+        setSpecialBlockToolOpen(false);
+        return imageBlock;
+    }
+    function insertUploadingImageBlockWithoutScrollJump(file) {
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        const uploadBlock = insertUploadingImageBlock(file);
+        window.scrollTo(scrollX, scrollY);
+        window.requestAnimationFrame(() => window.scrollTo(scrollX, scrollY));
+        return uploadBlock;
+    }
+    function replaceImageBlock(blockId, imageBlock) {
+        const body = bodyRef.current;
+        if (!body) {
+            onContentBlocksChange(replaceBlockById(sanitizedContentBlocks, blockId, imageBlock));
+            return;
+        }
+        applyContentBlocksChange(replaceBlockWithBlocks(readBlocksFromEditor(body), blockId, [imageBlock]), { focusBody: false, historyLabel: "image" }, { reason: "image-upload-complete" });
+    }
+    function getCurrentImageAlignment(blockId) {
+        const body = bodyRef.current;
+        const currentBlocks = body
+            ? readBlocksFromEditor(body)
+            : sanitizedContentBlocks;
+        const path = findBlockPath(currentBlocks, blockId);
+        const block = path ? getBlockAtPath(currentBlocks, path) : null;
+        return block?.type === "image"
+            ? getImageAlignment(block.alignment)
+            : "center";
+    }
+    function getCurrentImageSizing(blockId) {
+        const body = bodyRef.current;
+        const currentBlocks = body
+            ? readBlocksFromEditor(body)
+            : sanitizedContentBlocks;
+        const path = findBlockPath(currentBlocks, blockId);
+        const block = path ? getBlockAtPath(currentBlocks, path) : null;
+        if (block?.type !== "image") {
+            return { displaySize: "medium" };
+        }
+        return {
+            displaySize: getImageDisplaySize(block.displaySize) ?? "medium",
+            ...(typeof block.customWidth === "number"
+                ? { customWidth: normalizeImageCustomWidth(block.customWidth) }
+                : {}),
+        };
+    }
+    function updateUploadingImageBlockProgress(blockId, progress) {
+        const nextBlock = buildUploadingImageBlock({
+            alignment: getCurrentImageAlignment(blockId),
+            id: blockId,
+            progress,
+        });
+        updateUploadingImageBlock(blockId, nextBlock);
+    }
+    function updateUploadingImageBlockMessage(blockId, message) {
+        updateUploadingImageBlock(blockId, {
+            alignment: getCurrentImageAlignment(blockId),
+            id: blockId,
+            type: "image",
+            alt: message,
+        });
+    }
+    function updateUploadingImageBlock(blockId, nextBlock) {
+        const body = bodyRef.current;
+        if (!body) {
+            onContentBlocksChange(replaceBlockById(sanitizedContentBlocks, blockId, nextBlock));
+            return;
+        }
+        const figure = body.querySelector(`[data-block-id="${cssEscape(blockId)}"][data-rich-text-image]`);
+        if (figure instanceof HTMLElement) {
+            const message = nextBlock.type === "image" ? (nextBlock.alt ?? "") : "";
+            const messageElement = figure.querySelector("p");
+            if (nextBlock.type === "image" &&
+                typeof nextBlock.uploadProgress === "number") {
+                figure.setAttribute("data-image-upload-progress", String(nextBlock.uploadProgress));
+            }
+            else {
+                figure.removeAttribute("data-image-upload-progress");
+            }
+            if (messageElement) {
+                messageElement.textContent = message;
+            }
+            else if (message) {
+                figure.textContent = "";
+                const paragraph = document.createElement("p");
+                paragraph.textContent = message;
+                figure.append(paragraph);
+            }
+        }
+        const currentBlocks = readBlocksFromEditor(body);
+        onContentBlocksChange(replaceBlockById(currentBlocks, blockId, nextBlock));
+    }
+    function updateImageAlignment(blockId, alignment) {
+        const body = bodyRef.current;
+        const currentBlocks = body
+            ? readBlocksFromEditor(body)
+            : sanitizedContentBlocks;
+        const path = findBlockPath(currentBlocks, blockId);
+        const currentBlock = path ? getBlockAtPath(currentBlocks, path) : null;
+        if (!currentBlock || currentBlock.type !== "image") {
+            return;
+        }
+        const nextBlocks = replaceBlockById(currentBlocks, blockId, {
+            ...currentBlock,
+            alignment,
+        });
+        const figure = body?.querySelector(`[data-block-id="${cssEscape(blockId)}"][data-rich-text-image]`);
+        if (!(figure instanceof HTMLElement)) {
+            applyContentBlocksChange(nextBlocks, {
+                focusBody: false,
+                historyLabel: "image",
+            });
+            return;
+        }
+        animateImageAlignmentChange(figure, () => {
+            figure.setAttribute("data-image-align", alignment);
+            updateImageAlignmentButtons(figure, alignment);
+        });
+        commitEditorDocumentChange({
+            historyLabel: "image",
+            nextContentBlocks: nextBlocks,
+            skipBodyHtmlUpdate: true,
+            focusBody: false,
+        });
+        updateBlockActionTools(body);
+        window.requestAnimationFrame(() => updateBlockActionTools(body));
+    }
+    function updateImageDisplaySize(blockId, sizing) {
+        const body = bodyRef.current;
+        const currentBlocks = body
+            ? readBlocksFromEditor(body)
+            : sanitizedContentBlocks;
+        const path = findBlockPath(currentBlocks, blockId);
+        const currentBlock = path ? getBlockAtPath(currentBlocks, path) : null;
+        if (!currentBlock || currentBlock.type !== "image") {
+            return;
+        }
+        const displaySize = getImageDisplaySize(sizing.displaySize);
+        const customWidth = displaySize === "custom"
+            ? normalizeImageCustomWidth(sizing.customWidth ?? currentBlock.customWidth)
+            : null;
+        const nextBlock = {
+            ...currentBlock,
+            ...(displaySize ? { displaySize } : {}),
+            ...(customWidth ? { customWidth } : {}),
+        };
+        if (displaySize !== "custom") {
+            delete nextBlock.customWidth;
+        }
+        const nextBlocks = replaceBlockById(currentBlocks, blockId, nextBlock);
+        const figure = body?.querySelector(`[data-block-id="${cssEscape(blockId)}"][data-rich-text-image]`);
+        if (!(figure instanceof HTMLElement)) {
+            applyContentBlocksChange(nextBlocks, {
+                focusBody: false,
+                historyLabel: "image",
+            });
+            return;
+        }
+        updateImageDisplaySizeAttributes(figure, nextBlock);
+        commitEditorDocumentChange({
+            historyLabel: "image",
+            nextContentBlocks: nextBlocks,
+            skipBodyHtmlUpdate: true,
+            focusBody: false,
+        });
+        updateBlockActionTools(body);
+    }
+    function insertPlainTextFromClipboard(text, pasteTargetBlock) {
+        const body = bodyRef.current;
+        if (!body || !text) {
+            return false;
+        }
+        const targetBlock = pasteTargetBlock && body.contains(pasteTargetBlock)
+            ? pasteTargetBlock
+            : null;
+        body.focus();
+        if (targetBlock) {
+            selectBlockContents(targetBlock);
+        }
+        document.execCommand("insertText", false, text);
+        emitBodyChange("paste");
+        syncSelectionState();
+        return true;
+    }
+    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("transcription");
+        syncSelectionState();
+    }
+    function focusBodyStart() {
+        window.requestAnimationFrame(() => {
+            const body = bodyRef.current;
+            if (!body) {
+                return;
+            }
+            body.focus();
+            focusBlockStart(body.firstElementChild ?? body);
+            setBodyActive(true);
+            syncSelectionState();
+        });
+    }
+    function updateHoveredBlockTools(clientX, clientY, body) {
+        const element = document.elementFromPoint(clientX, clientY);
+        if (element?.closest(".bayon-rte-special-tool")) {
+            return;
+        }
+        const hoveredBlock = getHoveredEditorBlock(element);
+        const hoveredBlockId = getHoveredEditorBlockActionTargetId(hoveredBlock, body) ??
+            getHoveredBlockActionLaneId(clientX, clientY, body, blockActionToolPlacements);
+        const specialBlockTarget = getSpecialBlockHoverTarget(hoveredBlock, body) ??
+            (hoveredBlockId ? getSpecialBlockTargetById(hoveredBlockId, body) : null);
+        setHoveredBlockId(hoveredBlockId);
+        setSpecialBlockTarget(specialBlockTarget, body);
+    }
+    async function handleBlockAction(action, blockId) {
+        const body = bodyRef.current;
+        if (!body) {
+            return;
+        }
+        const blocks = readBlocksFromEditor(body);
+        const block = getBlockById(blocks, blockId);
+        if (!block) {
+            return;
+        }
+        if (action === "copy" || action === "cut") {
+            const actionBlocks = getBlockActionBlocks(blocks, blockId);
+            const clipboardText = actionBlocks.length
+                ? encodeRichTextBlocksForClipboard(actionBlocks)
+                : blockActionToClipboardText(blocks, blockId) ||
+                    blockToClipboardText(block);
+            const copied = await writeTextToClipboard(clipboardText);
+            if (!copied || action === "copy") {
+                setActiveBlockActionMenuId(null);
+                return;
+            }
+        }
+        if (action === "cut" || action === "delete") {
+            const deletionFocusTarget = getBlockDeletionFocusTarget(blocks, blockId);
+            restoreScrollPositionAfter(window, () => applyContentBlocksChange(deleteBlockById(blocks, blockId), {
+                focusBlockId: deletionFocusTarget?.blockId,
+                focusBlockPosition: deletionFocusTarget?.position,
+                historyLabel: "block-delete",
+            }));
+        }
+        setActiveBlockActionMenuId(null);
+    }
+    function handleBlockPointerDragStart(blockId, event) {
+        blockPointerDragCleanupRef.current?.();
+        setDraggedBlockId(blockId);
+        setBlockDragDropResult(null);
+        setActiveBlockActionMenuId(null);
+        blockPointerDragRef.current = {
+            blockId,
+            dropResult: null,
+            started: false,
+            x: event.clientX,
+            y: event.clientY,
+        };
+        const handleWindowPointerMove = (windowEvent) => {
+            handleBlockPointerDragMove(windowEvent);
+        };
+        const handleWindowPointerEnd = (windowEvent) => {
+            handleBlockPointerDragEnd(windowEvent);
+        };
+        window.addEventListener("pointermove", handleWindowPointerMove);
+        window.addEventListener("pointerup", handleWindowPointerEnd);
+        window.addEventListener("pointercancel", handleWindowPointerEnd);
+        blockPointerDragCleanupRef.current = () => {
+            window.removeEventListener("pointermove", handleWindowPointerMove);
+            window.removeEventListener("pointerup", handleWindowPointerEnd);
+            window.removeEventListener("pointercancel", handleWindowPointerEnd);
+        };
+    }
+    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.dropResult = getPointerDragDropResult(nextPlacements, pointerDrag.blockId, event.clientY - bodyRect.top + body.scrollTop, event.clientX - bodyRect.left + body.scrollLeft);
+        setBlockDragDropResult(pointerDrag.dropResult);
+    }
+    function handleBlockPointerDragEnd(event) {
+        const pointerDrag = blockPointerDragRef.current;
+        const body = bodyRef.current;
+        blockPointerDragCleanupRef.current?.();
+        blockPointerDragCleanupRef.current = null;
+        blockPointerDragRef.current = null;
+        setDraggedBlockId(null);
+        setBlockDragDropResult(null);
+        if (!pointerDrag?.started ||
+            !body ||
+            pointerDrag.dropResult?.status !== "valid") {
+            return;
+        }
+        event.preventDefault();
+        applyContentBlocksChange(reorderBlock(readBlocksFromEditor(body), pointerDrag.blockId, pointerDrag.dropResult.dropTarget.targetBlockId, pointerDrag.dropResult.dropTarget.placement), { focusBody: false, historyLabel: "block-reorder" });
+    }
+    function applyContentBlocksChange(nextBlocks, options = {}, change) {
+        commitEditorDocumentChange({
+            ...options,
+            change,
+            nextContentBlocks: nextBlocks,
+        });
+    }
+    function focusEditorBlock(body, blockId, position = "end") {
+        const focusBlock = body.querySelector(`[data-block-id="${cssEscape(blockId)}"]`);
+        if (focusBlock) {
+            const treeRowOffset = position === "end" ? null : 0;
+            const treeRow = getTreeRowEditorParts(focusBlock);
+            if (treeRow) {
+                focusTreeRowLabelAtTextOffset(focusBlock, treeRowOffset);
+            }
+            else {
+                position === "end"
+                    ? focusBlockEnd(focusBlock)
+                    : focusBlockStart(focusBlock);
+            }
+        }
+        else {
+            focusBlockStart(body.firstElementChild ?? body);
+        }
+    }
+    const showSpecialBlockTool = specialBlocksEnabled &&
+        (!!hoveredBlockId || specialBlockToolHover || specialBlockToolOpen) &&
+        !disabled &&
+        specialBlockToolVisible;
+    const visibleBlockActionToolPlacements = getVisibleBlockActionToolPlacements(blockActionToolPlacements, {
+        activeBlockId: activeBlockActionMenuId,
+        draggedBlockId,
+        focusedBlockId,
+        hoveredBlockId,
+    });
+    const showBlockActionTools = blockActionsEnabled &&
+        !disabled &&
+        !selectionActive &&
+        visibleBlockActionToolPlacements.length > 0;
+    const showBlockHoverZones = blockActionsEnabled && !disabled && !selectionActive;
+    const uniqueBlockActionToolPlacements = getUniqueBlockActionToolPlacements(blockActionToolPlacements);
+    const blockDragDropTarget = blockDragDropResult && "dropTarget" in blockDragDropResult
+        ? blockDragDropResult.dropTarget
+        : null;
+    const blockDragIndicatorPosition = draggedBlockId && blockDragDropTarget
+        ? getDragIndicatorPosition(blockActionToolPlacements, blockDragDropTarget)
+        : null;
+    return (_jsxs("div", { className: "bayon-rte-stack", children: [_jsx(RichTextStyleScope, {}), _jsxs(RichTextDocumentSurface, { background: documentBackground, children: [_jsx(RichTextTitleInput, { disabled: disabled, inputRef: titleRef, label: titleLabel, onArrowDown: focusBodyStart, onChange: handleTitleChange, onRedo: handleRedo, required: required, title: title, onUndo: handleUndo, validationMessage: titleValidationMessage }), _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 &&
+                                !specialBlockToolOpen &&
+                                !blockActionToolHover &&
+                                !activeBlockActionMenuId &&
+                                !draggedBlockId &&
+                                !bodyStillFocused) {
+                                setBodyActive(false);
+                            }
+                            if (!activeBlockActionMenuId && !draggedBlockId) {
+                                setHoveredBlockId(null);
+                                setSpecialBlockTarget(null);
+                                setSpecialBlockToolOpen(false);
+                            }
+                        }, onMouseMove: (event) => {
+                            const body = bodyRef.current;
+                            updateBlockActionTools(body);
+                            if (body && blockActionsEnabled) {
+                                updateHoveredBlockTools(event.clientX, event.clientY, body);
+                            }
+                        }, children: [_jsx("input", { accept: "image/png,image/jpeg,image/webp", "aria-label": "Upload image", className: "bayon-rte-visually-hidden", disabled: disabled || !specialBlocksEnabled || !imageUpload, onChange: (event) => void handleImageFileChange(event.currentTarget.files?.[0] ?? null), ref: imageInputRef, type: "file" }), transcriptionNode, linkInputOpen && !disabled ? (_jsx(LinkCreationInput, { left: selectionToolbarPosition.left, onCancel: closeLinkInput, onSubmit: submitLinkInput, placement: selectionToolbarPosition.placement, top: selectionToolbarPosition.top })) : null, selectionActive && !linkInputOpen && !disabled ? (_jsx(SelectionFormatToolbar, { left: selectionToolbarPosition.left, onAction: runSelectionCommand, placement: selectionToolbarPosition.placement, top: selectionToolbarPosition.top })) : null, specialBlocksEnabled && !disabled ? (_jsx(SpecialBlockTool, { features: features, lockedFeatureMode: lockedFeatureMode, onFeatureGate: onFeatureGate, onHoverChange: setSpecialBlockToolHover, onInsert: insertBlock, onOpenChange: setSpecialBlockToolOpen, open: specialBlockToolOpen, top: specialBlockToolTop, toolHover: specialBlockToolHover, visible: showSpecialBlockTool })) : null, showBlockHoverZones
+                                ? uniqueBlockActionToolPlacements.map((placement) => (_jsx("div", { "aria-hidden": "true", className: `bayon-rte-block-hover-zone${placement.blockType === "image"
+                                        ? " bayon-rte-block-hover-zone--image"
+                                        : ""}`, onMouseEnter: () => {
+                                        const body = bodyRef.current;
+                                        setHoveredBlockId(placement.blockId);
+                                        setSpecialBlockTarget(getSpecialBlockTargetById(placement.blockId, body), body);
+                                    }, onMouseLeave: (event) => {
+                                        if (event.relatedTarget instanceof Element &&
+                                            event.relatedTarget.closest(".bayon-rte-special-tool")) {
+                                            return;
+                                        }
+                                        if (!activeBlockActionMenuId && !draggedBlockId) {
+                                            setHoveredBlockId(null);
+                                            setSpecialBlockTarget(null);
+                                            setSpecialBlockToolOpen(false);
+                                        }
+                                    }, style: {
+                                        "--bayon-rte-block-hover-zone-height": `${Math.max(34, placement.bottom - placement.top)}px`,
+                                        "--bayon-rte-block-hover-zone-left": `${placement.left}px`,
+                                        "--bayon-rte-block-hover-zone-top": `${placement.top}px`,
+                                    } }, `hover-${placement.blockId}`)))
+                                : null, showBlockActionTools
+                                ? visibleBlockActionToolPlacements.map((placement) => (_jsx(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, blockDragIndicatorPosition !== null ? (_jsx("div", { "aria-hidden": "true", className: `bayon-rte-block-drag-indicator${blockDragDropResult?.status === "invalid"
+                                    ? " bayon-rte-block-drag-indicator--invalid"
+                                    : ""}`, style: {
+                                    "--bayon-rte-block-drag-indicator-left": `${blockDragIndicatorPosition.left}px`,
+                                    "--bayon-rte-block-drag-indicator-top": `${blockDragIndicatorPosition.top}px`,
+                                } })) : null, _jsx(RichTextBody, { bodyRef: bodyRef, disabled: disabled, label: bodyLabel, onBackspace: handleBodyBackspace, onDelete: handleBodyDelete, onEnter: handleBodyEnter, onInput: handleBodyInput, onImageAlignChange: updateImageAlignment, onImageCustomWidthChange: (blockId, customWidth) => {
+                                    updateImageDisplaySize(blockId, {
+                                        customWidth,
+                                        displaySize: "custom",
+                                    });
+                                }, onImageSizeChange: (blockId, displaySize) => {
+                                    const currentSizing = getCurrentImageSizing(blockId);
+                                    const nextSizing = { displaySize };
+                                    if (displaySize === "custom") {
+                                        nextSizing.customWidth = normalizeImageCustomWidth(currentSizing.customWidth ?? IMAGE_CUSTOM_WIDTH_FALLBACK);
+                                    }
+                                    updateImageDisplaySize(blockId, nextSizing);
+                                }, onPasteText: handleBodyPasteText, onRedo: handleRedo, onSelectionChange: syncSelectionState, onShortcutCommand: runSelectionCommand, onTab: handleBodyTab, onToggleCollapse: handleToggleCollapse, onUndo: handleUndo, onFocus: () => {
+                                    setBodyActive(true);
+                                    syncSelectionState();
+                                } })] })] }), _jsxs("div", { className: "bayon-rte-meta", children: [helperText ? _jsx("small", { children: helperText }) : null, _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();
+    }
+}
+async function readTextFromClipboard() {
+    if (!navigator.clipboard?.readText) {
+        return "";
+    }
+    try {
+        return await navigator.clipboard.readText();
+    }
+    catch {
+        return "";
+    }
+}
+function isPasteSpecialBlockAction(action) {
+    return "kind" in action && action.kind === "paste";
+}
+function isImageUploadSpecialBlockAction(action) {
+    return "kind" in action && action.kind === "image-upload";
+}
+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("[data-block-id], h2, blockquote, pre, figure, hr");
+    return block && body.contains(block) ? block : null;
+}
+function isDirectToggleContentChild(block) {
+    return block.parentElement?.hasAttribute("data-toggle-content") === true;
+}
+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 editorBlocks = Array.from(body.querySelectorAll("[data-block-id]")).filter(isReadableEditorBlock);
+    for (const element of editorBlocks) {
+        const block = readBlockFromElement(element);
+        if (!element.getAttribute("data-block-id")) {
+            ensureEditorBlockId(element, block.id);
+        }
+        const position = getBlockPosition(getBlockActionAnchorElement(element), body);
+        const ancestorBlockIds = getBlockAncestorIds(element, body);
+        if (position && isBlockActionTarget(block)) {
+            placements.push({
+                ancestorBlockIds,
+                blockId: block.id,
+                blockType: block.type,
+                bottom: position.bottom,
+                depth: ancestorBlockIds.length,
+                left: position.left,
+                top: position.top,
+                toolTop: getBlockActionToolAnchorTop(block.type, position.top),
+            });
+        }
+        if (block.type === "toggle") {
+            const contentPosition = getBlockPosition(getDirectToggleContentElement(element), body);
+            if (contentPosition) {
+                placements.push({
+                    blockId: block.id,
+                    bottom: contentPosition.bottom,
+                    dropRole: "content",
+                    left: contentPosition.left,
+                    top: contentPosition.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);
+    const left = Math.max(0, blockRect.left - bodyRect.left + body.scrollLeft);
+    return {
+        bottom: top + blockRect.height,
+        left,
+        top,
+    };
+}
+function getBlockAncestorIds(block, body) {
+    const ancestorBlockIds = [];
+    let ancestor = block.parentElement?.closest("[data-block-id]") ?? null;
+    while (ancestor && body.contains(ancestor)) {
+        const blockId = ancestor.getAttribute("data-block-id");
+        if (blockId) {
+            ancestorBlockIds.unshift(blockId);
+        }
+        ancestor = ancestor.parentElement?.closest("[data-block-id]") ?? null;
+    }
+    return ancestorBlockIds;
+}
+function getBlockActionAnchorElement(block) {
+    const richTextBlock = readBlockFromElement(block);
+    const anchorSelector = getBlockActionAnchorSelector(richTextBlock.type);
+    const anchor = anchorSelector ? block.closest(anchorSelector) : null;
+    return (anchor ??
+        getTreeRowEditorParts(block)?.label.closest("[data-rich-text-row]") ??
+        block);
+}
+export function getBlockActionAnchorSelector(blockType) {
+    return blockType === "image" ? "[data-rich-text-image]" : "";
+}
+const nestedDropIndicatorIndent = 32;
+export function getDragIndicatorPosition(placements, dropTarget) {
+    const targetPlacement = dropTarget.placement === "inside"
+        ? (placements.find((placement) => {
+            return (placement.blockId === dropTarget.targetBlockId &&
+                placement.dropRole === "content");
+        }) ??
+            placements.find((placement) => {
+                return placement.blockId === dropTarget.targetBlockId;
+            }))
+        : placements.find((placement) => {
+            return (placement.blockId === dropTarget.targetBlockId &&
+                placement.dropRole !== "content");
+        });
+    if (!targetPlacement) {
+        return null;
+    }
+    if (dropTarget.placement === "inside") {
+        return {
+            left: targetPlacement.dropRole === "content"
+                ? targetPlacement.left
+                : targetPlacement.left + nestedDropIndicatorIndent,
+            top: targetPlacement.bottom,
+        };
+    }
+    return {
+        left: targetPlacement.left,
+        top: dropTarget.placement === "after"
+            ? targetPlacement.bottom
+            : targetPlacement.top,
+    };
+}
+function getHoveredEditorBlockActionTargetId(block, body) {
+    if (!block || !body.contains(block) || !isReadableEditorBlock(block)) {
+        return null;
+    }
+    const richTextBlock = readBlockFromElement(block);
+    return isBlockActionTarget(richTextBlock) ? richTextBlock.id : null;
+}
+function getSpecialBlockHoverTarget(block, body) {
+    if (!block || !body.contains(block) || !isReadableEditorBlock(block)) {
+        return null;
+    }
+    return isSpecialBlockInsertTarget(block) &&
+        !block.hasAttribute("data-suppress-special-block-tool")
+        ? block
+        : null;
+}
+function getSpecialBlockTargetById(blockId, body) {
+    if (!body) {
+        return null;
+    }
+    return getSpecialBlockHoverTarget(body.querySelector(`[data-block-id="${cssEscape(blockId)}"]`), body);
+}
+function getHoveredEditorBlock(element) {
+    const treeRowBlock = element?.closest("[data-rich-text-row]")?.parentElement;
+    if (treeRowBlock?.hasAttribute("data-block-id") === true) {
+        return treeRowBlock;
+    }
+    const toggleContentBlock = element?.closest("[data-toggle-content] > [data-block-id]");
+    if (toggleContentBlock) {
+        return toggleContentBlock;
+    }
+    return element?.closest("p, div[data-block-id], h2, blockquote, pre, figure, hr, ul, ol");
+}
+function getHoveredBlockActionLaneId(clientX, clientY, body, placements) {
+    const bodyRect = body.getBoundingClientRect();
+    const pointerTop = clientY - bodyRect.top + body.scrollTop;
+    const pointerLeft = clientX - bodyRect.left + body.scrollLeft;
+    return getPointerHoverLaneBlockId(placements, pointerTop, pointerLeft);
+}
+function isCheckboxEditorBlock(element) {
+    return !!element?.hasAttribute("data-rich-text-checkbox");
+}
+function isNestableEditorBlock(element) {
+    return (!!element?.hasAttribute("data-rich-text-bullet") ||
+        !!element?.hasAttribute("data-rich-text-ordered") ||
+        !!element?.hasAttribute("data-rich-text-checkbox") ||
+        !!element?.hasAttribute("data-rich-text-toggle"));
+}
+function getTreeRowEditorParts(element) {
+    if (!element) {
+        return null;
+    }
+    let type = null;
+    if (element.hasAttribute("data-rich-text-bullet")) {
+        type = "bullet";
+    }
+    else if (element.hasAttribute("data-rich-text-ordered")) {
+        type = "ordered";
+    }
+    else if (element.hasAttribute("data-rich-text-checkbox")) {
+        type = "checkbox";
+    }
+    else if (element.hasAttribute("data-rich-text-toggle")) {
+        type = "toggle";
+    }
+    if (!type) {
+        return null;
+    }
+    const label = getDirectTreeRowLabel(element, type);
+    return label ? { label, type } : null;
+}
+function focusTreeRowLabelAtTextOffset(block, offset) {
+    const treeRow = getTreeRowEditorParts(block);
+    if (!treeRow) {
+        focusBlockEnd(block);
+        return;
+    }
+    if (offset === null) {
+        focusBlockEnd(treeRow.label);
+        return;
+    }
+    focusBlockAtTextOffset(treeRow.label, offset);
+}
+export function getTreeRowBackspaceMarkdown(type) {
+    if (type === "ordered") {
+        return "1.";
+    }
+    if (type === "toggle") {
+        return "";
+    }
+    if (type === "checkbox") {
+        return "[ ]";
+    }
+    return "*";
+}
+export function getTreeRowBackspaceFocusPosition(type) {
+    return getTreeRowBackspaceMarkdown(type) ? "end" : "start";
+}
+export function getTreeRowBackspaceParagraphMarkdown(type, currentMarkdown) {
+    if (currentMarkdown.trim().length > 0) {
+        return currentMarkdown;
+    }
+    if (type === "checkbox") {
+        return "";
+    }
+    return getTreeRowBackspaceMarkdown(type);
+}
+export function getTreeRowBackspaceFocusPositionForMarkdown(markdown) {
+    return markdown ? "end" : "start";
+}
+export function getTreeRowBackspaceFocusPositionForParagraph(type, currentMarkdown) {
+    if (currentMarkdown.trim().length > 0) {
+        return "start";
+    }
+    return type === "bullet" || type === "ordered" ? "end" : "start";
+}
+export function canBackspaceEmptyToggleTitle(block) {
+    return (block?.type === "toggle" && isRichTextBlocksEmpty(block.children ?? []));
+}
+function isCaretInDeletableBlockContent(block, range) {
+    const treeRow = getTreeRowEditorParts(block);
+    if (treeRow) {
+        return treeRow.label.contains(range.startContainer);
+    }
+    return isSoftBreakTextBlock(block) || block.tagName === "PRE";
+}
+function isEmptyEditableBlockWithoutChildren(block) {
+    if (!block) {
+        return false;
+    }
+    if (isNestableRichTextBlock(block) && (block.children?.length ?? 0) > 0) {
+        return false;
+    }
+    if (block.type === "code") {
+        return block.text.trim().length === 0;
+    }
+    if (block.type === "paragraph" ||
+        block.type === "heading" ||
+        block.type === "quote" ||
+        block.type === "bullet" ||
+        block.type === "ordered" ||
+        block.type === "checkbox" ||
+        block.type === "toggle") {
+        return block.markdown.trim().length === 0;
+    }
+    return false;
+}
+function getToggleContentPlaceholderParentId(block) {
+    if (!block?.hasAttribute("data-toggle-content-placeholder-block")) {
+        return null;
+    }
+    return (block
+        .closest("[data-rich-text-toggle][data-block-id]")
+        ?.getAttribute("data-block-id") ?? null);
+}
+function isSoftBreakTextBlock(element) {
+    return ["P", "H2", "BLOCKQUOTE"].includes(element.tagName);
+}
+function isEditorBlockAtBackspaceStart(block, range) {
+    const treeRow = getTreeRowEditorParts(block);
+    if (treeRow) {
+        return (treeRow.label.contains(range.startContainer) &&
+            getTextOffsetWithin(treeRow.label, range) === 0);
+    }
+    return isSoftBreakTextBlock(block) && getTextOffsetWithin(block, range) === 0;
+}
+function isEmptyTextBlockAtStart(block, range) {
+    return (isSoftBreakTextBlock(block) &&
+        getTextOffsetWithin(block, range) === 0 &&
+        editorHtmlToMarkdown(normalizeSoftBreakHtml(block.innerHTML)).trim()
+            .length === 0);
+}
+function getBlockById(blocks, blockId) {
+    const path = findBlockPath(blocks, blockId);
+    return path ? getBlockAtPath(blocks, path) : null;
+}
+export function areBlockActionToolPlacementsEqual(previousPlacements, nextPlacements) {
+    return (previousPlacements.length === nextPlacements.length &&
+        previousPlacements.every((placement, index) => {
+            const nextPlacement = nextPlacements[index];
+            return (placement.blockId === nextPlacement?.blockId &&
+                placement.blockType === nextPlacement.blockType &&
+                placement.top === nextPlacement.top &&
+                placement.bottom === nextPlacement.bottom &&
+                placement.left === nextPlacement.left &&
+                placement.toolTop === nextPlacement.toolTop);
+        }));
+}
+export function getDeletionFocusTarget(blocks, blockId) {
+    return getBlockDeletionFocusTarget(blocks, blockId);
+}
+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);
+}
+export function getEditorHtmlForRichTextBlocks(blocks) {
+    return richTextBlocksToEditorHtml(blocks);
+}
+export function buildUploadedImageBlock(upload, options = {}) {
+    const url = getSafeImageUrl(upload.url);
+    if (!url) {
+        throw new Error("Uploaded image URL is invalid.");
+    }
+    return {
+        alignment: options.alignment ?? "center",
+        id: options.id ?? createRichTextBlockId(),
+        type: "image",
+        url,
+        ...(upload.alt?.trim() ? { alt: upload.alt.trim() } : {}),
+    };
+}
+export function buildUploadingImageBlock(input) {
+    const progress = normalizeUploadProgress(input.progress ?? 0);
+    return {
+        alignment: input.alignment ?? "center",
+        id: input.id ?? createRichTextBlockId(),
+        type: "image",
+        alt: getImageUploadProgressMessage(progress),
+        uploadProgress: progress,
+    };
+}
+export function getImageUploadProgressMessage(progress) {
+    return `Uploading image... ${normalizeUploadProgress(progress)}%`;
+}
+export function getImageUploadFailureMessage(error) {
+    const message = error instanceof Error ? error.message : "";
+    if (message.includes("storage/unauthorized")) {
+        return "Image upload failed. Check that you are signed in and try again.";
+    }
+    return message
+        ? `Image upload failed. ${message}`
+        : "Image upload failed. Try again.";
+}
+function normalizeUploadProgress(progress) {
+    return clamp(Math.round(progress), 0, 100);
+}
+function replaceBlockById(blocks, blockId, replacementBlock) {
+    const path = findBlockPath(blocks, blockId);
+    if (!path) {
+        return blocks;
+    }
+    return updateBlockAtPath(blocks, path, () => replacementBlock);
+}
+function getImageAlignment(alignment) {
+    return alignment === "left" || alignment === "right" ? alignment : "center";
+}
+function getImageDisplaySize(displaySize) {
+    return displaySize === "small" ||
+        displaySize === "medium" ||
+        displaySize === "full" ||
+        displaySize === "custom"
+        ? displaySize
+        : null;
+}
+function normalizeImageCustomWidth(width) {
+    if (typeof width !== "number" || !Number.isFinite(width)) {
+        return IMAGE_CUSTOM_WIDTH_FALLBACK;
+    }
+    return clamp(Math.round(width), 120, 1600);
+}
+function getImageDisplayAttributes(block) {
+    const displaySize = getImageDisplaySize(block.displaySize);
+    const customWidth = displaySize === "custom"
+        ? normalizeImageCustomWidth(block.customWidth)
+        : null;
+    return {
+        customWidth,
+        displaySize,
+        html: (displaySize ? ` data-image-size="${displaySize}"` : "") +
+            (customWidth ? ` data-image-custom-width="${customWidth}"` : "") +
+            (customWidth
+                ? ` style="--bayon-rte-image-custom-width:${customWidth}px"`
+                : ""),
+    };
+}
+function imageToolbarToEditorHtml(activeAlignment, activeDisplaySize, customWidth) {
+    return `<div class="bayon-rte-image-align-tool" contenteditable="false" data-image-align-tool="" role="toolbar" aria-label="Image layout">${imageAlignmentButtonToEditorHtml("left", activeAlignment)}${imageAlignmentButtonToEditorHtml("center", activeAlignment)}${imageAlignmentButtonToEditorHtml("right", activeAlignment)}<span aria-hidden="true" class="bayon-rte-image-toolbar-divider"></span>${imageSizeButtonToEditorHtml("small", activeDisplaySize)}${imageSizeButtonToEditorHtml("medium", activeDisplaySize)}${imageSizeButtonToEditorHtml("full", activeDisplaySize)}${imageSizeButtonToEditorHtml("custom", activeDisplaySize)}${imageCustomWidthInputToEditorHtml(customWidth)}</div>`;
+}
+function imageAlignmentButtonToEditorHtml(alignment, activeAlignment) {
+    const isActive = alignment === activeAlignment;
+    return `<button aria-label="Align image ${alignment}" class="bayon-rte-image-align-button" contenteditable="false" data-image-align-action="${alignment}"${isActive ? ' data-image-align-active="true"' : ""} title="Align image ${alignment}" type="button"><span aria-hidden="true" class="bayon-rte-image-align-icon bayon-rte-image-align-icon--${alignment}"><span></span><span></span><span></span></span></button>`;
+}
+function imageSizeButtonToEditorHtml(displaySize, activeDisplaySize) {
+    const isActive = displaySize === activeDisplaySize;
+    const label = displaySize === "custom"
+        ? "Set custom image size"
+        : `Set image size ${displaySize}`;
+    const iconLabel = displaySize === "small"
+        ? "S"
+        : displaySize === "medium"
+            ? "M"
+            : displaySize === "full"
+                ? "F"
+                : "W";
+    return `<button aria-label="${label}" class="bayon-rte-image-align-button bayon-rte-image-size-button" contenteditable="false" data-image-size-action="${displaySize}"${isActive ? ' data-image-size-active="true"' : ""} title="${label}" type="button"><span aria-hidden="true">${iconLabel}</span></button>`;
+}
+function imageCustomWidthInputToEditorHtml(customWidth) {
+    const value = customWidth ?? IMAGE_CUSTOM_WIDTH_FALLBACK;
+    return `<input aria-label="Custom image width" class="bayon-rte-image-custom-width-input" contenteditable="false" data-image-custom-width-action="" inputmode="numeric" max="1600" min="120" title="Custom image width" type="number" value="${value}">`;
+}
+function richTextBlocksToEditorHtml(blocks) {
+    const sanitizedBlocks = sanitizeRichTextBlocks(blocks);
+    const parts = [];
+    for (let index = 0; index < sanitizedBlocks.length; index += 1) {
+        const block = sanitizedBlocks[index];
+        if (!block) {
+            continue;
+        }
+        if (isTreeEditorBlock(block)) {
+            const treeBlocks = [];
+            const treeKind = getTreeListKind(block);
+            while (true) {
+                const treeBlock = sanitizedBlocks[index];
+                if (!isTreeEditorBlock(treeBlock) ||
+                    getTreeListKind(treeBlock) !== treeKind) {
+                    break;
+                }
+                treeBlocks.push(treeBlock);
+                index += 1;
+            }
+            index -= 1;
+            parts.push(treeEditorBlocksToHtml(treeBlocks, treeKind));
+            continue;
+        }
+        parts.push(richTextBlockToEditorHtml(block));
+    }
+    return parts.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 === "message") {
+        return `<p data-block-id="${blockId}" data-rich-text-message="">${textBlockMarkdownToEditorHtml(block.markdown)}</p>`;
+    }
+    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 === "bullet") {
+        return listBlockToEditorHtml(block);
+    }
+    if (block.type === "ordered") {
+        return orderedBlockToEditorHtml(block);
+    }
+    if (block.type === "toggle") {
+        return toggleBlockToEditorHtml(block);
+    }
+    if (block.type === "image") {
+        const alignment = getImageAlignment(block.alignment);
+        const alt = escapeHtmlAttribute(block.alt ?? "");
+        const displayAttributes = getImageDisplayAttributes(block);
+        const url = block.url ? escapeHtmlAttribute(block.url) : "";
+        const uploadProgress = typeof block.uploadProgress === "number"
+            ? normalizeUploadProgress(block.uploadProgress)
+            : null;
+        const placeholderText = escapeHtmlText(block.alt ?? "Image placeholder");
+        const toolbarHtml = imageToolbarToEditorHtml(alignment, displayAttributes.displaySize, displayAttributes.customWidth);
+        if (url) {
+            return `<figure contenteditable="false" data-block-id="${blockId}" data-rich-text-image="" data-image-align="${alignment}"${displayAttributes.html}>${toolbarHtml}<img src="${url}" alt="${alt}"></figure>`;
+        }
+        if (uploadProgress !== null) {
+            return `<figure contenteditable="false" data-block-id="${blockId}" data-rich-text-image="" data-image-align="${alignment}"${displayAttributes.html} data-image-upload-progress="${uploadProgress}" data-placeholder="image">${toolbarHtml}<p>${placeholderText}</p></figure>`;
+        }
+        return `<figure data-block-id="${blockId}" data-rich-text-image="" data-image-align="${alignment}"${displayAttributes.html} data-placeholder="image">${toolbarHtml}</figure>`;
+    }
+    if (block.type === "tool") {
+        return toolBlockToEditorHtml(block);
+    }
+    return `<p data-block-id="${blockId}">${textBlockMarkdownToEditorHtml(block.markdown)}</p>`;
+}
+function toolBlockToEditorHtml(block) {
+    const blockId = escapeHtmlAttribute(block.id);
+    const toolType = escapeHtmlAttribute(block.toolType);
+    const status = escapeHtmlAttribute(block.status);
+    const title = block.title ?? "";
+    const markdown = block.markdown ?? "";
+    const data = block.data === undefined ? "" : JSON.stringify(block.data);
+    const titleAttribute = title
+        ? ` data-tool-title="${escapeHtmlAttribute(title)}"`
+        : "";
+    const markdownAttribute = markdown
+        ? ` data-tool-markdown="${escapeHtmlAttribute(encodeURIComponent(markdown))}"`
+        : "";
+    const dataAttribute = data
+        ? ` data-tool-data="${escapeHtmlAttribute(encodeURIComponent(data))}"`
+        : "";
+    const label = title || block.toolType;
+    const markdownHtml = markdown
+        ? `<p data-tool-markdown="">${markdownToEditorHtml(markdown)}</p>`
+        : "";
+    return `<section contenteditable="false" data-block-id="${blockId}" data-rich-text-tool="" data-tool-type="${toolType}" data-tool-status="${status}"${titleAttribute}${markdownAttribute}${dataAttribute}><div data-tool-header=""><span data-tool-title="">${escapeHtmlText(label)}</span><span data-tool-status-label="">${escapeHtmlText(block.status)}</span></div>${markdownHtml}</section>`;
+}
+function textBlockMarkdownToEditorHtml(markdown) {
+    return markdownToEditorHtml(markdown) || "&nbsp;";
+}
+function textBlockMarkdownToEditorHtmlWithPlaceholder(markdown) {
+    return markdown.trim() ? markdownToEditorHtml(markdown) : "";
+}
+function readBlocksFromEditor(body) {
+    const blocks = Array.from(body.childNodes).flatMap((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const markdown = editorHtmlToMarkdown(node.textContent ?? "");
+            return markdown
+                ? [
+                    {
+                        id: createRichTextBlockId(),
+                        type: "paragraph",
+                        markdown,
+                    },
+                ]
+                : [];
+        }
+        if (!(node instanceof Element)) {
+            return [];
+        }
+        if (isEditorListContainer(node)) {
+            return readEditorListBlocks(node);
+        }
+        if (isReadableEditorBlock(node)) {
+            return [readBlockFromElement(node)];
+        }
+        const markdown = editorHtmlToMarkdown(normalizeSoftBreakHtml(node.innerHTML || node.textContent || ""));
+        return markdown
+            ? [
+                {
+                    id: createRichTextBlockId(),
+                    type: "paragraph",
+                    markdown,
+                },
+            ]
+            : [];
+    });
+    if (blocks.length === 0 && (body.textContent ?? "").trim()) {
+        return sanitizeRichTextBlocks([
+            {
+                id: createRichTextBlockId(),
+                type: "paragraph",
+                markdown: editorHtmlToMarkdown(normalizeSoftBreakHtml(body.innerHTML)),
+            },
+        ]);
+    }
+    return sanitizeRichTextBlocks(blocks);
+}
+function isReadableEditorBlock(element) {
+    return [
+        "P",
+        "DIV",
+        "LI",
+        "H2",
+        "BLOCKQUOTE",
+        "PRE",
+        "FIGURE",
+        "SECTION",
+        "HR",
+        "LABEL",
+    ].includes(element.tagName);
+}
+function readBlockFromElement(element) {
+    const id = element.getAttribute("data-block-id") || createRichTextBlockId();
+    const tagName = element.tagName.toLowerCase();
+    if (tagName === "h2") {
+        return {
+            id,
+            type: "heading",
+            markdown: editorHtmlToMarkdown(normalizeSoftBreakHtml(element.innerHTML)),
+        };
+    }
+    if (tagName === "blockquote") {
+        return {
+            id,
+            type: "quote",
+            markdown: editorHtmlToMarkdown(normalizeSoftBreakHtml(element.innerHTML)),
+        };
+    }
+    if (element.hasAttribute("data-rich-text-message")) {
+        return {
+            id,
+            type: "message",
+            markdown: editorHtmlToMarkdown(normalizeSoftBreakHtml(element.innerHTML)),
+        };
+    }
+    if (element.hasAttribute("data-rich-text-tool")) {
+        return readToolBlockFromElement(element, id);
+    }
+    if (tagName === "pre") {
+        return { id, type: "code", text: element.textContent ?? "" };
+    }
+    if (tagName === "hr") {
+        return { id, type: "divider" };
+    }
+    if ((tagName === "div" || tagName === "li") &&
+        element.hasAttribute("data-rich-text-checkbox")) {
+        const input = element.querySelector("input[type='checkbox']");
+        const label = getDirectTreeRowLabel(element, "checkbox");
+        return {
+            id,
+            type: "checkbox",
+            checked: input instanceof HTMLInputElement ? input.checked : false,
+            markdown: editorHtmlToMarkdown(normalizeSoftBreakHtml(label?.innerHTML ?? element.innerHTML)),
+            ...readEditorChildren(element),
+        };
+    }
+    if ((tagName === "div" || tagName === "li") &&
+        element.hasAttribute("data-rich-text-bullet")) {
+        return {
+            id,
+            type: "bullet",
+            markdown: getBulletMarkdownFromElement(element),
+            ...readEditorChildren(element),
+        };
+    }
+    if ((tagName === "div" || tagName === "li") &&
+        element.hasAttribute("data-rich-text-ordered")) {
+        return {
+            id,
+            type: "ordered",
+            markdown: getOrderedMarkdownFromElement(element),
+            ...readEditorChildren(element),
+        };
+    }
+    if ((tagName === "div" || tagName === "li") &&
+        element.hasAttribute("data-rich-text-toggle")) {
+        const label = getDirectTreeRowLabel(element, "toggle");
+        return {
+            id,
+            type: "toggle",
+            collapsed: element.getAttribute("data-toggle-collapsed") === "true",
+            markdown: editorHtmlToMarkdown(normalizeSoftBreakHtml(label?.innerHTML ?? element.innerHTML)),
+            children: readToggleChildBlocks(element),
+        };
+    }
+    if (tagName === "figure") {
+        const image = element.querySelector("img");
+        const url = image instanceof HTMLImageElement ? getSafeImageUrl(image.src) : "";
+        const uploadProgress = readImageUploadProgress(element);
+        const displaySize = getImageDisplaySize(element.getAttribute("data-image-size"));
+        const customWidth = readImageCustomWidth(element);
+        return {
+            id,
+            type: "image",
+            alignment: getImageAlignment(element.getAttribute("data-image-align")),
+            ...(displaySize ? { displaySize } : {}),
+            ...(displaySize === "custom" && customWidth ? { customWidth } : {}),
+            ...(url ? { url } : {}),
+            ...(uploadProgress !== null ? { uploadProgress } : {}),
+            alt: (image instanceof HTMLImageElement ? image.alt : "") ||
+                element.textContent?.trim() ||
+                "Image placeholder",
+        };
+    }
+    return {
+        id,
+        type: "paragraph",
+        markdown: editorHtmlToMarkdown(normalizeSoftBreakHtml(element.innerHTML)),
+    };
+}
+function readImageUploadProgress(element) {
+    const rawProgress = element.getAttribute("data-image-upload-progress");
+    if (rawProgress === null) {
+        return null;
+    }
+    const progress = Number(rawProgress);
+    return Number.isFinite(progress) ? normalizeUploadProgress(progress) : null;
+}
+function readImageCustomWidth(element) {
+    const width = Number(element.getAttribute("data-image-custom-width"));
+    return Number.isFinite(width) ? normalizeImageCustomWidth(width) : null;
+}
+function readToolBlockFromElement(element, id) {
+    const title = readOptionalToolAttribute(element, "data-tool-title");
+    const markdown = readDecodedToolAttribute(element, "data-tool-markdown", id);
+    return {
+        id,
+        type: "tool",
+        toolType: element.getAttribute("data-tool-type") ?? "unknown",
+        status: readToolStatusAttribute(element),
+        ...(title ? { title } : {}),
+        ...(markdown ? { markdown } : {}),
+        ...readToolDataAttribute(element, id),
+    };
+}
+function readToolStatusAttribute(element) {
+    const status = element.getAttribute("data-tool-status");
+    return status === "pending" || status === "error" ? status : "success";
+}
+function readOptionalToolAttribute(element, name) {
+    return element.getAttribute(name)?.trim() || "";
+}
+function readDecodedToolAttribute(element, name, blockId) {
+    const value = readOptionalToolAttribute(element, name);
+    if (!value) {
+        return "";
+    }
+    try {
+        return decodeURIComponent(value);
+    }
+    catch (error) {
+        console.warn("[RichTextEditor] Could not decode tool block attribute.", {
+            blockId,
+            error,
+            name,
+        });
+        return "";
+    }
+}
+function readToolDataAttribute(element, blockId) {
+    const encodedData = readDecodedToolAttribute(element, "data-tool-data", blockId);
+    if (!encodedData) {
+        return {};
+    }
+    try {
+        return { data: JSON.parse(encodedData) };
+    }
+    catch (error) {
+        console.warn("[RichTextEditor] Could not parse tool block data.", {
+            blockId,
+            error,
+        });
+        return {};
+    }
+}
+function updateImageAlignmentButtons(figure, activeAlignment) {
+    figure
+        .querySelectorAll("[data-image-align-action]")
+        .forEach((button) => {
+        if (button.getAttribute("data-image-align-action") === activeAlignment) {
+            button.setAttribute("data-image-align-active", "true");
+        }
+        else {
+            button.removeAttribute("data-image-align-active");
+        }
+    });
+}
+function updateImageSizeButtons(figure, activeDisplaySize) {
+    figure
+        .querySelectorAll("[data-image-size-action]")
+        .forEach((button) => {
+        if (button.getAttribute("data-image-size-action") === activeDisplaySize) {
+            button.setAttribute("data-image-size-active", "true");
+        }
+        else {
+            button.removeAttribute("data-image-size-active");
+        }
+    });
+}
+function updateImageDisplaySizeAttributes(figure, block) {
+    const { customWidth, displaySize } = getImageDisplayAttributes(block);
+    if (displaySize) {
+        figure.setAttribute("data-image-size", displaySize);
+    }
+    else {
+        figure.removeAttribute("data-image-size");
+    }
+    if (customWidth) {
+        figure.setAttribute("data-image-custom-width", String(customWidth));
+        figure.style.setProperty("--bayon-rte-image-custom-width", `${customWidth}px`);
+    }
+    else {
+        figure.removeAttribute("data-image-custom-width");
+        figure.style.removeProperty("--bayon-rte-image-custom-width");
+    }
+    const input = figure.querySelector("[data-image-custom-width-action]");
+    if (input) {
+        input.value = String(customWidth ?? IMAGE_CUSTOM_WIDTH_FALLBACK);
+    }
+    updateImageSizeButtons(figure, displaySize);
+}
+function animateImageAlignmentChange(figure, updateAlignment) {
+    const previousRect = figure.getBoundingClientRect();
+    updateAlignment();
+    const nextRect = figure.getBoundingClientRect();
+    const deltaX = previousRect.left - nextRect.left;
+    const deltaY = previousRect.top - nextRect.top;
+    if (!deltaX && !deltaY) {
+        return;
+    }
+    figure.style.transition = "none";
+    figure.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+    void figure.offsetWidth;
+    window.requestAnimationFrame(() => {
+        figure.style.transition = "transform 220ms cubic-bezier(0.22, 1, 0.36, 1)";
+        figure.style.transform = "translate(0, 0)";
+        window.setTimeout(() => {
+            figure.style.transition = "";
+            figure.style.transform = "";
+        }, 240);
+    });
+}
+function readEditorChildren(element) {
+    const children = readEditorChildBlocks(element);
+    return children.length > 0 ? { children } : {};
+}
+function readEditorChildBlocks(element) {
+    const nestedContent = Array.from(element.children).find((child) => {
+        return child.hasAttribute("data-rich-text-nested-content");
+    });
+    if (nestedContent instanceof HTMLElement) {
+        return readEditorNestedBlocks(nestedContent);
+    }
+    const childContainer = Array.from(element.children).find((child) => {
+        return child.hasAttribute("data-rich-text-children");
+    });
+    if (childContainer instanceof HTMLElement) {
+        return readEditorListBlocks(childContainer);
+    }
+    return Array.from(element.children).flatMap((child) => {
+        if (child.hasAttribute("data-rich-text-row") ||
+            child.hasAttribute("data-toggle-content")) {
+            return [];
+        }
+        if (isEditorListContainer(child)) {
+            return readEditorListBlocks(child);
+        }
+        return isReadableEditorBlock(child) ? [readBlockFromElement(child)] : [];
+    });
+}
+function readToggleChildBlocks(element) {
+    const content = getDirectToggleContentElement(element);
+    return content
+        ? readEditorNestedBlocks(content)
+        : readEditorChildBlocks(element);
+}
+function readEditorNestedBlocks(element) {
+    return Array.from(element.childNodes).flatMap((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const markdown = editorHtmlToMarkdown(node.textContent ?? "");
+            return markdown
+                ? [
+                    {
+                        id: createRichTextBlockId(),
+                        type: "paragraph",
+                        markdown,
+                    },
+                ]
+                : [];
+        }
+        if (!(node instanceof Element)) {
+            return [];
+        }
+        if (isEmptyToggleContentPlaceholderBlock(node)) {
+            return [];
+        }
+        if (isEditorListContainer(node)) {
+            return readEditorListBlocks(node);
+        }
+        return isReadableEditorBlock(node) ? [readBlockFromElement(node)] : [];
+    });
+}
+function readEditorListBlocks(element) {
+    return Array.from(element.childNodes).flatMap((node) => {
+        return node instanceof Element && isReadableEditorBlock(node)
+            ? [readBlockFromElement(node)]
+            : [];
+    });
+}
+function getDirectTreeRowLabel(element, type) {
+    const selector = type === "bullet"
+        ? "[data-bullet-label]"
+        : type === "ordered"
+            ? "[data-ordered-label]"
+            : type === "checkbox"
+                ? "[data-checkbox-label]"
+                : "[data-toggle-label]";
+    return element.querySelector(`:scope > [data-rich-text-row] > ${selector}`);
+}
+function isEmptyToggleContentPlaceholderBlock(element) {
+    return (element.hasAttribute("data-toggle-content-placeholder-block") &&
+        editorHtmlToMarkdown(normalizeSoftBreakHtml(element.innerHTML)).trim()
+            .length === 0);
+}
+function isEditorListContainer(element) {
+    return ((element.tagName === "UL" || element.tagName === "OL") &&
+        element.hasAttribute("data-rich-text-children"));
+}
+export 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 = 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 = getTextBlockShortcut(activeBlock.textContent ?? "") ??
+        getTextBlockShortcut(editorHtmlToMarkdown(activeBlock.innerHTML));
+    if (!shortcut) {
+        return false;
+    }
+    const id = activeBlock.getAttribute("data-block-id") || createRichTextBlockId();
+    activeBlock.insertAdjacentHTML("afterend", richTextBlocksToEditorHtml([
+        textBlockShortcutToRichTextBlock(id, shortcut),
+    ]));
+    const replacementBlock = activeBlock.nextElementSibling;
+    activeBlock.remove();
+    if (shortcut.type === "divider") {
+        replacementBlock?.insertAdjacentHTML("afterend", `<p data-block-id="${escapeHtmlAttribute(createRichTextBlockId())}" data-suppress-special-block-tool="true">&nbsp;</p>`);
+        focusBlockStart(replacementBlock?.nextElementSibling ?? null);
+        return shortcut.type;
+    }
+    if (shortcut.type === "checkbox") {
+        focusBlockEnd(replacementBlock?.querySelector("[data-checkbox-label]") ?? null);
+        return shortcut.type;
+    }
+    if (shortcut.type === "bullet" || shortcut.type === "ordered") {
+        focusBlockEnd(replacementBlock?.querySelector(shortcut.type === "ordered"
+            ? "[data-ordered-label]"
+            : "[data-bullet-label]") ?? null);
+        return shortcut.type;
+    }
+    if (shortcut.type === "toggle") {
+        focusBlockStart(replacementBlock?.querySelector("[data-toggle-label]") ?? null);
+        return shortcut.type;
+    }
+    focusBlockEnd(replacementBlock);
+    return shortcut.type;
+}
+function getHistoryBlockTypeForElement(element) {
+    if (!element) {
+        return "paragraph";
+    }
+    if (element.hasAttribute("data-rich-text-checkbox")) {
+        return "checkbox";
+    }
+    if (element.hasAttribute("data-rich-text-bullet")) {
+        return "bullet";
+    }
+    if (element.hasAttribute("data-rich-text-ordered")) {
+        return "ordered";
+    }
+    if (element.hasAttribute("data-rich-text-toggle")) {
+        return "toggle";
+    }
+    if (element.hasAttribute("data-rich-text-code")) {
+        return "code";
+    }
+    if (element.hasAttribute("data-rich-text-heading")) {
+        return "heading";
+    }
+    return "paragraph";
+}
+function getSpecialBlockActionBlockType(action) {
+    if (action.label === "Divider") {
+        return "divider";
+    }
+    if (action.label === "Code block" || action.label === "Embedded HTML") {
+        return "code";
+    }
+    if (action.label === "Title") {
+        return "heading";
+    }
+    if (action.label === "Bullet list") {
+        return "bullet";
+    }
+    if (action.label === "Toggle") {
+        return "toggle";
+    }
+    if (action.label === "Quote") {
+        return "quote";
+    }
+    return "paragraph";
+}
+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" ||
+        isNestableEditorBlock(activeBlock)) {
+        return;
+    }
+    const currentMarkdown = editorHtmlToMarkdown(activeBlock.innerHTML);
+    if (shouldDelayTypographyNormalization(activeBlock.textContent ?? "")) {
+        return;
+    }
+    const nextHtml = textBlockMarkdownToEditorHtml(currentMarkdown);
+    if (activeBlock.innerHTML === nextHtml) {
+        return;
+    }
+    const cursorOffset = getTextOffsetWithin(activeBlock, range);
+    const normalizedCursorOffset = 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 target = findFocusTargetAtVisibleTextOffset(block, offset);
+    if (target) {
+        const range = document.createRange();
+        range.setStart(target.node, target.offset);
+        range.collapse(true);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        return;
+    }
+    focusBlockEnd(block);
+}
+function getTextOffsetWithin(root, range) {
+    const textRange = document.createRange();
+    textRange.selectNodeContents(root);
+    textRange.setEnd(range.startContainer, range.startOffset);
+    return getEditorVisibleTextLength(textRange.cloneContents());
+}
+function getTextAfterRange(root, range) {
+    const textRange = document.createRange();
+    textRange.selectNodeContents(root);
+    textRange.setStart(range.startContainer, range.startOffset);
+    return textRange.toString();
+}
+function getBulletTextOffsetWithin(block, label, range) {
+    if (label) {
+        return getTextOffsetWithin(label, range);
+    }
+    return Math.max(0, getTextOffsetWithin(block, range) - getBulletMarkerLength(block));
+}
+function getBulletMarkdownFromElement(element) {
+    const label = getDirectTreeRowLabel(element, "bullet");
+    if (label) {
+        return editorHtmlToMarkdown(normalizeSoftBreakHtml(label.innerHTML));
+    }
+    return editorHtmlToMarkdown(getBulletFallbackText(element));
+}
+function getOrderedMarkdownFromElement(element) {
+    const label = getDirectTreeRowLabel(element, "ordered");
+    if (label) {
+        return editorHtmlToMarkdown(normalizeSoftBreakHtml(label.innerHTML));
+    }
+    return editorHtmlToMarkdown(getBulletFallbackText(element));
+}
+function setBulletBlockMarkdown(element, markdown) {
+    element.innerHTML = `<div data-rich-text-row=""><span data-bullet-marker="" contenteditable="false" aria-hidden="true"></span><span data-bullet-label="" data-placeholder="List item">${textBlockMarkdownToEditorHtmlWithPlaceholder(markdown)}</span></div>${treeRowChildrenToEditorHtml(readEditorChildBlocks(element))}`;
+}
+function getBulletFallbackText(element) {
+    const clone = element.cloneNode(true);
+    clone.querySelector("[data-rich-text-children]")?.remove();
+    return (clone.textContent ?? "").replace(/^\s*(?:•|\u2022)\s*/, "");
+}
+function getBulletMarkerLength(element) {
+    const text = element.textContent ?? "";
+    const match = text.match(/^\s*(?:•|\u2022)\s*/);
+    return match?.[0].length ?? 0;
+}
+export function hasEditableTrailingWhitespace(value) {
+    return /[\s\u00a0]$/.test(value);
+}
+export function shouldDelayTypographyNormalization(value) {
+    return hasEditableTrailingWhitespace(value) && !hasDashSequence(value);
+}
+export function splitTreeRowMarkdownAtTextOffset(markdown, offset) {
+    const visibleOffset = Math.trunc(offset);
+    const visibleTextLength = getVisibleTextLength(getMarkdownVisibleText(markdown));
+    if (visibleOffset <= 0) {
+        return {
+            after: normalizeSplitMarkdownFragment(markdown),
+            before: "",
+        };
+    }
+    if (visibleOffset >= visibleTextLength) {
+        return {
+            after: "",
+            before: normalizeSplitMarkdownFragment(markdown),
+        };
+    }
+    const splitOffset = clamp(getMarkdownIndexAtVisibleTextOffset(markdown, visibleOffset), 0, markdown.length);
+    return {
+        after: normalizeSplitMarkdownFragment(markdown.slice(splitOffset)),
+        before: normalizeSplitMarkdownFragment(markdown.slice(0, splitOffset)),
+    };
+}
+function normalizeSplitMarkdownFragment(markdown) {
+    return markdown.trim().length > 0 ? markdown.trimStart() : "";
+}
+export const splitCheckboxMarkdownAtTextOffset = splitTreeRowMarkdownAtTextOffset;
+function getMarkdownIndexAtVisibleTextOffset(markdown, offset) {
+    let visibleOffset = 0;
+    for (let index = 0; index < markdown.length;) {
+        if (isSoftBreakMarkdownAt(markdown, index)) {
+            visibleOffset += 1;
+            if (visibleOffset >= offset) {
+                return index + 3;
+            }
+            index += 3;
+            continue;
+        }
+        const nextIndex = getNextUtf16Index(markdown, index);
+        if (isMarkdownSyntaxAt(markdown, index)) {
+            index = nextIndex;
+            continue;
+        }
+        visibleOffset += 1;
+        if (visibleOffset >= offset) {
+            return nextIndex;
+        }
+        index = nextIndex;
+    }
+    return markdown.length;
+}
+function findFocusTargetAtVisibleTextOffset(root, offset) {
+    const remaining = { value: Math.max(0, Math.trunc(offset)) };
+    return findFocusTargetInChildren(root, remaining);
+}
+function findFocusTargetInChildren(root, remaining) {
+    for (const child of Array.from(root.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+            const text = child.textContent ?? "";
+            const textLength = getVisibleTextLength(text);
+            if (remaining.value <= textLength) {
+                return {
+                    node: child,
+                    offset: getUtf16IndexAtVisibleTextOffset(text, remaining.value),
+                };
+            }
+            remaining.value -= textLength;
+            continue;
+        }
+        if (isLineBreakNode(child)) {
+            const parent = child.parentNode;
+            if (!parent) {
+                continue;
+            }
+            if (remaining.value === 0) {
+                return { node: parent, offset: getChildNodeIndex(child) };
+            }
+            if (remaining.value === 1) {
+                return { node: parent, offset: getChildNodeIndex(child) + 1 };
+            }
+            remaining.value -= 1;
+            continue;
+        }
+        const target = findFocusTargetInChildren(child, remaining);
+        if (target) {
+            return target;
+        }
+    }
+    return null;
+}
+function getChildNodeIndex(node) {
+    return Array.prototype.indexOf.call(node.parentNode?.childNodes ?? [], node);
+}
+function getEditorVisibleTextLength(root) {
+    let length = 0;
+    for (const child of Array.from(root.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+            length += getVisibleTextLength(child.textContent ?? "");
+            continue;
+        }
+        if (isLineBreakNode(child)) {
+            length += 1;
+            continue;
+        }
+        length += getEditorVisibleTextLength(child);
+    }
+    return length;
+}
+function isLineBreakNode(node) {
+    return (node.nodeType === Node.ELEMENT_NODE && node.tagName === "BR");
+}
+function getVisibleTextLength(value) {
+    return Array.from(value).length;
+}
+function getUtf16IndexAtVisibleTextOffset(value, offset) {
+    if (offset <= 0) {
+        return 0;
+    }
+    let visibleOffset = 0;
+    for (let index = 0; index < value.length;) {
+        const nextIndex = getNextUtf16Index(value, index);
+        visibleOffset += 1;
+        if (visibleOffset >= offset) {
+            return nextIndex;
+        }
+        index = nextIndex;
+    }
+    return value.length;
+}
+function getNextUtf16Index(value, index) {
+    const codePoint = value.codePointAt(index);
+    return index + (codePoint && codePoint > 0xffff ? 2 : 1);
+}
+function getMarkdownVisibleText(markdown) {
+    return markdown
+        .replace(/ {2}\n/g, "\n")
+        .replace(/`([^`]*)`/g, "$1")
+        .replace(/\*\*([^*]*)\*\*/g, "$1")
+        .replace(/_([^_]*)_/g, "$1")
+        .replace(/\[([^\]]*)\]\([^)]+\)/g, "$1");
+}
+function isSoftBreakMarkdownAt(markdown, index) {
+    return markdown.slice(index, index + 3) === "  \n";
+}
+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;
+}
+export function getCheckboxEnterAction(event) {
+    return event.shiftKey ? "line-break" : "next-checkbox";
+}
+export function shouldPadTrailingLineBreak(textAfterCursor) {
+    return textAfterCursor.length === 0;
+}
+export function resolveTranscriptionConfig(config = {}) {
+    return {
+        enabled: config.enabled ?? true,
+        language: config.language?.trim() || undefined,
+    };
+}
+export function appendTranscriptText(currentText, transcript) {
+    const nextText = transcript.trim();
+    if (!nextText) {
+        return currentText;
+    }
+    if (!currentText) {
+        return nextText;
+    }
+    return `${currentText}${hasEditableTrailingWhitespace(currentText) ? "" : " "}${nextText}`;
+}
+export function shouldRefreshEditorBodyHtml(body, editableHtml, nextBlocks) {
+    if (body.innerHTML === editableHtml) {
+        return false;
+    }
+    return (canonicalSerialize(readBlocksFromEditor(body)) !==
+        canonicalSerialize(sanitizeRichTextBlocks(nextBlocks)));
+}
+export function restoreScrollPositionAfter(scrollTarget, callback) {
+    const scrollX = scrollTarget.scrollX;
+    const scrollY = scrollTarget.scrollY;
+    callback();
+    scrollTarget.scrollTo(scrollX, scrollY);
+    scrollTarget.requestAnimationFrame?.(() => {
+        scrollTarget.scrollTo(scrollX, scrollY);
+    });
+}
+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" : "";
+    const children = treeRowChildrenToEditorHtml(block.children ?? []);
+    return `<li data-block-id="${blockId}" data-rich-text-checkbox=""><div data-rich-text-row=""><input contenteditable="false" type="checkbox"${checked}><span data-checkbox-label="">${textBlockMarkdownToEditorHtmlWithPlaceholder(block.markdown)}</span></div>${children}</li>`;
+}
+function listBlockToEditorHtml(block) {
+    const blockId = escapeHtmlAttribute(block.id);
+    const children = treeRowChildrenToEditorHtml(block.children ?? []);
+    return `<li data-block-id="${blockId}" data-rich-text-bullet=""><div data-rich-text-row=""><span data-bullet-marker="" contenteditable="false" aria-hidden="true"></span><span data-bullet-label="" data-placeholder="List item">${textBlockMarkdownToEditorHtmlWithPlaceholder(block.markdown)}</span></div>${children}</li>`;
+}
+function orderedBlockToEditorHtml(block) {
+    const blockId = escapeHtmlAttribute(block.id);
+    const children = treeRowChildrenToEditorHtml(block.children ?? []);
+    return `<li data-block-id="${blockId}" data-rich-text-ordered=""><div data-rich-text-row=""><span data-ordered-marker="" contenteditable="false" aria-hidden="true"></span><span data-ordered-label="" data-placeholder="Numbered item">${textBlockMarkdownToEditorHtmlWithPlaceholder(block.markdown)}</span></div>${children}</li>`;
+}
+function toggleBlockToEditorHtml(block) {
+    const blockId = escapeHtmlAttribute(block.id);
+    const collapsed = block.collapsed ? "true" : "false";
+    const content = toggleContentToEditorHtml(block.children);
+    return `<li data-block-id="${blockId}" data-rich-text-toggle="" data-toggle-collapsed="${collapsed}">${toggleTitleRowToEditorHtml(block)}${content}</li>`;
+}
+function treeRowBlockToEditorHtml(block) {
+    if (block.type === "checkbox") {
+        return checkboxBlockToEditorHtml({
+            checked: block.checked,
+            id: block.id,
+            markdown: block.markdown,
+            type: "checkbox",
+        });
+    }
+    if (block.type === "ordered") {
+        return orderedBlockToEditorHtml({
+            id: block.id,
+            markdown: block.markdown,
+            type: "ordered",
+        });
+    }
+    if (block.type === "toggle") {
+        return toggleBlockToEditorHtml({
+            children: [],
+            collapsed: block.collapsed,
+            id: block.id,
+            markdown: block.markdown,
+            type: "toggle",
+        });
+    }
+    return listBlockToEditorHtml({
+        id: block.id,
+        markdown: block.markdown,
+        type: "bullet",
+    });
+}
+function treeRowChildrenToEditorHtml(blocks) {
+    return blocks.length > 0
+        ? `<div data-rich-text-nested-content="">${richTextBlocksToEditorHtml(blocks)}</div>`
+        : "";
+}
+function toggleTitleRowToEditorHtml(block) {
+    const actionLabel = block.collapsed ? "Expand toggle" : "Collapse toggle";
+    return `<div data-rich-text-row=""><button aria-label="${actionLabel}" class="bayon-rte-toggle-button" contenteditable="false" data-toggle-collapse="" title="${actionLabel}" type="button"><span class="bayon-rte-toggle-caret" aria-hidden="true"></span></button><span data-toggle-label="" data-placeholder="Toggle title">${textBlockMarkdownToEditorHtmlWithPlaceholder(block.markdown)}</span></div>`;
+}
+function toggleContentToEditorHtml(blocks) {
+    const content = blocks.length > 0
+        ? richTextBlocksToEditorHtml(blocks)
+        : toggleContentPlaceholderBlockToEditorHtml();
+    return `<div data-toggle-content="" data-placeholder="Toggle content">${content}</div>`;
+}
+function toggleContentPlaceholderBlockToEditorHtml() {
+    return `<p data-block-id="${escapeHtmlAttribute(createRichTextBlockId())}" data-toggle-content-placeholder-block="" data-placeholder="Toggle content"></p>`;
+}
+export function getSelectionToolbarPosition({ bodyClientWidth, bodyRect, rangeRect, scrollTop, }) {
+    const selectionTop = rangeRect.top - bodyRect.top + scrollTop;
+    const selectionBottom = rangeRect.bottom - bodyRect.top + scrollTop;
+    const spaceAbove = rangeRect.top - bodyRect.top;
+    const spaceBelow = bodyRect.bottom - rangeRect.bottom;
+    const toolbarOffset = SELECTION_TOOLBAR_HEIGHT + SELECTION_TOOLBAR_SELECTION_GAP;
+    const placement = spaceAbove >= toolbarOffset || spaceAbove >= spaceBelow ? "above" : "below";
+    return {
+        left: clamp(rangeRect.left - bodyRect.left + rangeRect.width / 2, SELECTION_TOOLBAR_HALF_WIDTH, Math.max(SELECTION_TOOLBAR_HALF_WIDTH, bodyClientWidth - SELECTION_TOOLBAR_HALF_WIDTH)),
+        placement,
+        top: placement === "above"
+            ? Math.max(0, selectionTop - toolbarOffset)
+            : selectionBottom + SELECTION_TOOLBAR_SELECTION_GAP,
+    };
+}
+function getDirectToggleContentElement(element) {
+    return (Array.from(element.children).find((child) => {
+        return child.hasAttribute("data-toggle-content");
+    }) ?? null);
+}
+function treeEditorBlocksToHtml(blocks, treeKind) {
+    const tagName = treeKind === "ordered" ? "ol" : "ul";
+    return `<${tagName} data-rich-text-children="">${blocks
+        .map(richTextBlockToEditorHtml)
+        .join("")}</${tagName}>`;
+}
+function isTreeEditorBlock(block) {
+    return (block?.type === "bullet" ||
+        block?.type === "ordered" ||
+        block?.type === "checkbox" ||
+        block?.type === "toggle");
+}
+function getTreeListKind(block) {
+    return block?.type === "ordered" ? "ordered" : "unordered";
+}
+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,
+        };
+    }
+    if (shortcut.type === "toggle") {
+        return {
+            id,
+            type: "toggle",
+            collapsed: shortcut.collapsed,
+            markdown: shortcut.markdown,
+            children: [],
+        };
+    }
+    if (shortcut.type === "ordered") {
+        return { id, type: "ordered", 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, '\\"');
+}
+function getSafeImageUrl(value) {
+    const trimmed = value.trim();
+    if (!trimmed || /^javascript:/i.test(trimmed)) {
+        return "";
+    }
+    return trimmed;
+}