@bayonai/rich-text-editor 0.1.2

package/dist/react/RichTextTitleInput.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { RichTextStyleScope } from "./RichTextStyles.js";
+// Renders the title field and handles keyboard movement into the editor body.
+export function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange, required, title, validationMessage = "", }) {
+    const validationMessageId = useId();
+    useEffect(() => {
+        resizeTitleTextArea(inputRef.current);
+    }, [inputRef, title]);
+    return (_jsxs(_Fragment, { children: [_jsx("textarea", { "aria-describedby": validationMessage ? validationMessageId : undefined, "aria-invalid": validationMessage ? true : undefined, "aria-label": label, "aria-required": required ? true : undefined, className: "bayon-rte-title", dir: "auto", disabled: disabled, onChange: (event) => {
+                    resizeTitleTextArea(event.currentTarget);
+                    onChange(event.target.value);
+                }, onInput: (event) => resizeTitleTextArea(event.currentTarget), onKeyDown: (event) => {
+                    if (getTitleKeyCommand(event) === "focus-body-start") {
+                        event.preventDefault();
+                        onArrowDown();
+                    }
+                }, placeholder: "Title", ref: inputRef, rows: 1, value: title }), validationMessage ? (_jsx("div", { className: "bayon-rte-title-error", id: validationMessageId, role: "alert", children: validationMessage })) : null] }));
+}
+export function getTitleKeyCommand(event) {
+    return event.key === "ArrowDown" || event.key === "Enter"
+        ? "focus-body-start"
+        : null;
+}
+export function RichTextReadTitle({ title }) {
+    const titleRef = useRef(null);
+    useEffect(() => {
+        resizeTitleTextArea(titleRef.current);
+    }, [title]);
+    return (_jsxs(_Fragment, { children: [_jsx(RichTextStyleScope, {}), _jsx("textarea", { "aria-label": "Entry title", className: "bayon-rte-title", dir: "auto", placeholder: "Title", readOnly: true, ref: titleRef, rows: 1, value: title })] }));
+}
+function resizeTitleTextArea(textarea) {
+    if (!textarea) {
+        return;
+    }
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+}

package/dist/react/SelectionFormatToolbar.d.ts

@@ -0,0 +1,34 @@
+import { BoldIcon, CodeIcon, ItalicIcon, LinkIcon, QuoteIcon, TitleIcon } from "./RichTextIcons";
+export declare const selectionActions: readonly [{
+    readonly command: "bold";
+    readonly icon: typeof BoldIcon;
+    readonly label: "Bold";
+}, {
+    readonly command: "italic";
+    readonly icon: typeof ItalicIcon;
+    readonly label: "Italic";
+}, {
+    readonly command: "link";
+    readonly icon: typeof LinkIcon;
+    readonly label: "Link";
+}, {
+    readonly command: "heading";
+    readonly icon: typeof TitleIcon;
+    readonly label: "Title";
+}, {
+    readonly command: "quote";
+    readonly icon: typeof QuoteIcon;
+    readonly label: "Quote";
+}, {
+    readonly command: "code";
+    readonly icon: typeof CodeIcon;
+    readonly label: "Code";
+}];
+export type SelectionCommand = (typeof selectionActions)[number]["command"];
+type SelectionFormatToolbarProps = {
+    left: number;
+    onAction: (command: SelectionCommand) => void;
+    top: number;
+};
+export declare function SelectionFormatToolbar({ left, onAction, top, }: SelectionFormatToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/SelectionFormatToolbar.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BoldIcon, CodeIcon, ItalicIcon, LinkIcon, QuoteIcon, TitleIcon, } from "./RichTextIcons.js";
+export const selectionActions = [
+    { command: "bold", icon: BoldIcon, label: "Bold" },
+    { command: "italic", icon: ItalicIcon, label: "Italic" },
+    { command: "link", icon: LinkIcon, label: "Link" },
+    { command: "heading", icon: TitleIcon, label: "Title" },
+    { command: "quote", icon: QuoteIcon, label: "Quote" },
+    { command: "code", icon: CodeIcon, label: "Code" },
+];
+// Renders the floating toolbar used to format the current text selection.
+export function SelectionFormatToolbar({ left, onAction, top, }) {
+    return (_jsx("div", { className: "bayon-rte-toolbar", style: {
+            "--bayon-rte-toolbar-left": `${left}px`,
+            "--bayon-rte-toolbar-top": `${top}px`,
+        }, children: selectionActions.map(({ command, icon: Icon, label }, index) => (_jsx("button", { "aria-label": label, className: `bayon-rte-icon-button bayon-rte-toolbar__button${index === 3 ? " bayon-rte-toolbar__button--divider" : ""}`, onClick: () => onAction(command), onMouseDown: (event) => event.preventDefault(), title: label, type: "button", children: _jsx(Icon, { size: 18 }) }, command))) }));
+}

package/dist/react/SpecialBlockOption.d.ts

@@ -0,0 +1,7 @@
+import type { SpecialBlockAction } from "./SpecialBlockTool";
+type SpecialBlockOptionProps = {
+    action: SpecialBlockAction;
+    onInsert: (action: SpecialBlockAction) => void;
+};
+export declare function SpecialBlockOption({ action, onInsert, }: SpecialBlockOptionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/SpecialBlockOption.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Renders one selectable special-block action inside the insertion tool.
+export function SpecialBlockOption({ action, onInsert, }) {
+    const Icon = action.icon;
+    return (_jsx("button", { "aria-label": action.label, className: "bayon-rte-icon-button bayon-rte-special-button", onClick: () => onInsert(action), onMouseDown: (event) => event.preventDefault(), title: action.label, type: "button", children: _jsx(Icon, { size: 18 }) }));
+}

package/dist/react/SpecialBlockTool.d.ts

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

package/dist/react/SpecialBlockTool.js

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

package/dist/react/TranscriptionControl.d.ts

@@ -0,0 +1,19 @@
+type TranscriptionControlProps = {
+    disabled?: boolean;
+    language?: string;
+    onTranscript: (text: string) => void;
+};
+export declare function TranscriptionControl({ disabled, language, onTranscript, }: TranscriptionControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function getTranscriptionControlState({ disabled, errorMessage, lastInserted, recording, supported, }: {
+    disabled: boolean;
+    errorMessage: string | null;
+    lastInserted: boolean;
+    recording: boolean;
+    supported: boolean;
+}): {
+    buttonLabel: string;
+    disabled: boolean;
+    statusLabel: string | null;
+    tone: "error" | "ready" | "recording" | "success" | "unavailable";
+};
+export {};

package/dist/react/TranscriptionControl.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { MicIcon, StopIcon } from "./RichTextIcons.js";
+export function TranscriptionControl({ disabled = false, language, onTranscript, }) {
+    const recognitionRef = useRef(null);
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [lastInserted, setLastInserted] = useState(false);
+    const [recording, setRecording] = useState(false);
+    const recognitionSupported = typeof window === "undefined" || Boolean(getSpeechRecognitionConstructor());
+    const controlState = getTranscriptionControlState({
+        disabled,
+        errorMessage,
+        lastInserted,
+        recording,
+        supported: recognitionSupported,
+    });
+    useEffect(() => {
+        return () => {
+            recognitionRef.current?.stop();
+            recognitionRef.current = null;
+        };
+    }, []);
+    function stopRecording() {
+        recognitionRef.current?.stop();
+        recognitionRef.current = null;
+        setRecording(false);
+        setLastInserted(false);
+    }
+    function startRecording() {
+        const Recognition = getSpeechRecognitionConstructor();
+        if (!Recognition || disabled) {
+            setErrorMessage("Browser transcription is unavailable.");
+            setLastInserted(false);
+            return;
+        }
+        const recognition = new Recognition();
+        recognition.continuous = true;
+        recognition.interimResults = false;
+        if (language?.trim()) {
+            recognition.lang = language.trim();
+        }
+        recognition.onresult = (event) => {
+            const transcript = readFinalTranscript(event);
+            if (transcript) {
+                onTranscript(transcript);
+                setLastInserted(true);
+            }
+        };
+        recognition.onerror = (event) => {
+            setErrorMessage(readRecognitionErrorMessage(event));
+            setLastInserted(false);
+            setRecording(false);
+        };
+        recognition.onend = () => {
+            setRecording(false);
+            recognitionRef.current = null;
+        };
+        recognitionRef.current = recognition;
+        setErrorMessage(null);
+        setLastInserted(false);
+        setRecording(true);
+        recognition.start();
+    }
+    return (_jsxs("div", { "aria-label": "Browser transcription", className: `bayon-rte-transcription bayon-rte-transcription--${controlState.tone}`, children: [_jsx("button", { "aria-label": controlState.buttonLabel, "aria-pressed": recording, className: `bayon-rte-icon-button bayon-rte-transcription__button${recording ? " bayon-rte-transcription__button--recording" : ""}`, disabled: controlState.disabled, onClick: () => (recording ? stopRecording() : startRecording()), title: controlState.buttonLabel, type: "button", children: recording ? _jsx(StopIcon, { size: 18 }) : _jsx(MicIcon, { size: 18 }) }), controlState.statusLabel ? (_jsxs("small", { className: "bayon-rte-transcription__status", role: "status", children: [_jsx("span", { "aria-hidden": "true", className: "bayon-rte-transcription__dot" }), controlState.statusLabel] })) : null] }));
+}
+export function getTranscriptionControlState({ disabled, errorMessage, lastInserted, recording, supported, }) {
+    if (!supported || disabled) {
+        return {
+            buttonLabel: "Transcription unavailable",
+            disabled: true,
+            statusLabel: "Unavailable",
+            tone: "unavailable",
+        };
+    }
+    if (errorMessage) {
+        return {
+            buttonLabel: "Transcribe",
+            disabled: false,
+            statusLabel: errorMessage,
+            tone: "error",
+        };
+    }
+    if (recording) {
+        return {
+            buttonLabel: "Stop transcription",
+            disabled: false,
+            statusLabel: "Listening",
+            tone: "recording",
+        };
+    }
+    if (lastInserted) {
+        return {
+            buttonLabel: "Transcribe",
+            disabled: false,
+            statusLabel: "Added",
+            tone: "success",
+        };
+    }
+    return {
+        buttonLabel: "Transcribe",
+        disabled: false,
+        statusLabel: null,
+        tone: "ready",
+    };
+}
+function getSpeechRecognitionConstructor() {
+    if (typeof window === "undefined") {
+        return null;
+    }
+    const speechWindow = window;
+    return speechWindow.SpeechRecognition ?? speechWindow.webkitSpeechRecognition ?? null;
+}
+function readFinalTranscript(event) {
+    let text = "";
+    for (let index = event.resultIndex; index < event.results.length; index += 1) {
+        const result = event.results[index];
+        if (result?.isFinal) {
+            text += result[0]?.transcript ?? "";
+        }
+    }
+    return text.trim();
+}
+function readRecognitionErrorMessage(event) {
+    if (event.error === "not-allowed" || event.error === "service-not-allowed") {
+        return "Microphone access was blocked.";
+    }
+    return "Transcription stopped.";
+}

package/dist/react/UnsavedChangesDialog.d.ts

@@ -0,0 +1,9 @@
+export type UnsavedChangesDialogProps = {
+    error: string | null;
+    onDiscardAndLeave: () => void;
+    onSaveAndLeave: () => void;
+    onStay: () => void;
+    open: boolean;
+    saving: boolean;
+};
+export declare function UnsavedChangesDialog({ error, onDiscardAndLeave, onSaveAndLeave, onStay, open, saving, }: UnsavedChangesDialogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react/UnsavedChangesDialog.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RichTextStyleScope } from "./RichTextStyles.js";
+export function UnsavedChangesDialog({ error, onDiscardAndLeave, onSaveAndLeave, onStay, open, saving, }) {
+    if (!open) {
+        return null;
+    }
+    return (_jsxs("div", { className: "bayon-rte-unsaved-backdrop", onMouseDown: () => {
+            if (!saving) {
+                onStay();
+            }
+        }, children: [_jsx(RichTextStyleScope, {}), _jsxs("section", { "aria-describedby": "unsaved-changes-description", "aria-labelledby": "unsaved-changes-title", className: "bayon-rte-unsaved-dialog", onMouseDown: (event) => event.stopPropagation(), role: "dialog", children: [_jsx("h2", { id: "unsaved-changes-title", children: "Unsaved changes" }), _jsx("p", { id: "unsaved-changes-description", children: "Save your changes before leaving, discard them, or stay on this page." }), error ? (_jsx("div", { className: "bayon-rte-unsaved-error", role: "alert", children: error })) : null, _jsxs("div", { className: "bayon-rte-unsaved-actions", children: [_jsx("button", { className: "bayon-rte-button", disabled: saving, onClick: onStay, type: "button", children: "Stay" }), _jsx("button", { className: "bayon-rte-button bayon-rte-button--danger", disabled: saving, onClick: onDiscardAndLeave, type: "button", children: "Discard and leave" }), _jsx("button", { className: "bayon-rte-button bayon-rte-button--primary", disabled: saving, onClick: onSaveAndLeave, type: "button", children: saving ? "Saving..." : "Save and leave" })] })] })] }));
+}

package/dist/react/blockActionToolState.d.ts

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

package/dist/react/blockActionToolState.js

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

package/dist/react/blockActions.d.ts

@@ -0,0 +1,8 @@
+import type { RichTextBlock } from "../types";
+export type BlockDropPlacement = "before" | "after";
+export declare function isBlockActionTarget(block: RichTextBlock): boolean;
+export declare function reorderBlock(blocks: RichTextBlock[], draggedBlockId: string, targetBlockId: string, placement?: BlockDropPlacement): RichTextBlock[];
+export declare function deleteBlockById(blocks: RichTextBlock[], blockId: string): RichTextBlock[];
+export declare function convertCheckboxBlockToParagraph(blocks: RichTextBlock[], blockId: string): RichTextBlock[];
+export declare function blockToClipboardText(block: RichTextBlock): string;
+export declare function blockActionToClipboardText(blocks: RichTextBlock[], blockId: string): string;

package/dist/react/blockActions.js

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

package/dist/react/editorNavigation.d.ts

@@ -0,0 +1,19 @@
+export declare function isCursorOnFirstLine(value: string, selectionStart: number): boolean;
+type SelectAllShortcutLike = {
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    key: string;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+};
+type SelectionLike = {
+    rangeCount: number;
+    getRangeAt: (index: number) => {
+        startContainer: Node;
+    };
+};
+export type EditorKeyboardShortcutCommand = "bold" | "italic" | "link";
+export declare function isSelectAllShortcut(event: SelectAllShortcutLike): boolean | undefined;
+export declare function getEditorKeyboardShortcut(event: SelectAllShortcutLike): EditorKeyboardShortcutCommand | null;
+export declare function getCodeBlockSelectionTarget(root: Element, selection: SelectionLike | null): Element | null;
+export {};

package/dist/react/editorNavigation.js

@@ -0,0 +1,39 @@
+export function isCursorOnFirstLine(value, selectionStart) {
+    return !value.slice(0, selectionStart).includes("\n");
+}
+export function isSelectAllShortcut(event) {
+    return (event.key.toLowerCase() === "a" &&
+        (event.ctrlKey || event.metaKey) &&
+        !event.altKey &&
+        !event.shiftKey);
+}
+export function getEditorKeyboardShortcut(event) {
+    if (!(event.ctrlKey || event.metaKey) || event.altKey || event.shiftKey) {
+        return null;
+    }
+    const key = event.key.toLowerCase();
+    if (key === "b") {
+        return "bold";
+    }
+    if (key === "i") {
+        return "italic";
+    }
+    if (key === "k") {
+        return "link";
+    }
+    return null;
+}
+export function getCodeBlockSelectionTarget(root, selection) {
+    if (!selection || selection.rangeCount === 0) {
+        return null;
+    }
+    const { startContainer } = selection.getRangeAt(0);
+    const activeElement = startContainer.nodeType === 3
+        ? startContainer.parentElement
+        : startContainer.nodeType === 1
+            ? startContainer
+            : null;
+    const code = activeElement?.closest("pre code");
+    const pre = code?.closest("pre");
+    return code && pre && root.contains(pre) ? code : null;
+}

package/dist/react/editorShortcuts.d.ts

@@ -0,0 +1,20 @@
+export type TextBlockShortcut = {
+    type: "paragraph";
+    markdown: string;
+} | {
+    type: "heading";
+    markdown: string;
+} | {
+    type: "quote";
+    markdown: string;
+} | {
+    type: "checkbox";
+    checked: boolean;
+    markdown: string;
+} | {
+    type: "code";
+    text: string;
+} | {
+    type: "divider";
+};
+export declare function getTextBlockShortcut(markdown: string): TextBlockShortcut | null;