@bayonai/rich-text-editor 0.1.2

package/dist-cjs/react/RichTextTitleInput.js

@@ -0,0 +1,44 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextTitleInput = RichTextTitleInput;
+exports.getTitleKeyCommand = getTitleKeyCommand;
+exports.RichTextReadTitle = RichTextReadTitle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RichTextStyles_1 = require("./RichTextStyles");
+// Renders the title field and handles keyboard movement into the editor body.
+function RichTextTitleInput({ disabled, inputRef, label, onArrowDown, onChange, required, title, validationMessage = "", }) {
+    const validationMessageId = (0, react_1.useId)();
+    (0, react_1.useEffect)(() => {
+        resizeTitleTextArea(inputRef.current);
+    }, [inputRef, title]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "bayon-rte-title-error", id: validationMessageId, role: "alert", children: validationMessage })) : null] }));
+}
+function getTitleKeyCommand(event) {
+    return event.key === "ArrowDown" || event.key === "Enter"
+        ? "focus-body-start"
+        : null;
+}
+function RichTextReadTitle({ title }) {
+    const titleRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        resizeTitleTextArea(titleRef.current);
+    }, [title]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RichTextStyles_1.RichTextStyleScope, {}), (0, jsx_runtime_1.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-cjs/react/SelectionFormatToolbar.js

@@ -0,0 +1,22 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectionActions = void 0;
+exports.SelectionFormatToolbar = SelectionFormatToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RichTextIcons_1 = require("./RichTextIcons");
+exports.selectionActions = [
+    { command: "bold", icon: RichTextIcons_1.BoldIcon, label: "Bold" },
+    { command: "italic", icon: RichTextIcons_1.ItalicIcon, label: "Italic" },
+    { command: "link", icon: RichTextIcons_1.LinkIcon, label: "Link" },
+    { command: "heading", icon: RichTextIcons_1.TitleIcon, label: "Title" },
+    { command: "quote", icon: RichTextIcons_1.QuoteIcon, label: "Quote" },
+    { command: "code", icon: RichTextIcons_1.CodeIcon, label: "Code" },
+];
+// Renders the floating toolbar used to format the current text selection.
+function SelectionFormatToolbar({ left, onAction, top, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "bayon-rte-toolbar", style: {
+            "--bayon-rte-toolbar-left": `${left}px`,
+            "--bayon-rte-toolbar-top": `${top}px`,
+        }, children: exports.selectionActions.map(({ command, icon: Icon, label }, index) => ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon, { size: 18 }) }, command))) }));
+}

package/dist-cjs/react/SpecialBlockOption.js

@@ -0,0 +1,10 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialBlockOption = SpecialBlockOption;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Renders one selectable special-block action inside the insertion tool.
+function SpecialBlockOption({ action, onInsert, }) {
+    const Icon = action.icon;
+    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon, { size: 18 }) }));
+}

package/dist-cjs/react/SpecialBlockTool.js

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

package/dist-cjs/react/TranscriptionControl.js

@@ -0,0 +1,133 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranscriptionControl = TranscriptionControl;
+exports.getTranscriptionControlState = getTranscriptionControlState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RichTextIcons_1 = require("./RichTextIcons");
+function TranscriptionControl({ disabled = false, language, onTranscript, }) {
+    const recognitionRef = (0, react_1.useRef)(null);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [lastInserted, setLastInserted] = (0, react_1.useState)(false);
+    const [recording, setRecording] = (0, react_1.useState)(false);
+    const recognitionSupported = typeof window === "undefined" || Boolean(getSpeechRecognitionConstructor());
+    const controlState = getTranscriptionControlState({
+        disabled,
+        errorMessage,
+        lastInserted,
+        recording,
+        supported: recognitionSupported,
+    });
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { "aria-label": "Browser transcription", className: `bayon-rte-transcription bayon-rte-transcription--${controlState.tone}`, children: [(0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(RichTextIcons_1.StopIcon, { size: 18 }) : (0, jsx_runtime_1.jsx)(RichTextIcons_1.MicIcon, { size: 18 }) }), controlState.statusLabel ? ((0, jsx_runtime_1.jsxs)("small", { className: "bayon-rte-transcription__status", role: "status", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "bayon-rte-transcription__dot" }), controlState.statusLabel] })) : null] }));
+}
+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-cjs/react/UnsavedChangesDialog.js

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

package/dist-cjs/react/blockActionToolState.js

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

package/dist-cjs/react/blockActions.js

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

package/dist-cjs/react/editorNavigation.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCursorOnFirstLine = isCursorOnFirstLine;
+exports.isSelectAllShortcut = isSelectAllShortcut;
+exports.getEditorKeyboardShortcut = getEditorKeyboardShortcut;
+exports.getCodeBlockSelectionTarget = getCodeBlockSelectionTarget;
+function isCursorOnFirstLine(value, selectionStart) {
+    return !value.slice(0, selectionStart).includes("\n");
+}
+function isSelectAllShortcut(event) {
+    return (event.key.toLowerCase() === "a" &&
+        (event.ctrlKey || event.metaKey) &&
+        !event.altKey &&
+        !event.shiftKey);
+}
+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;
+}
+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-cjs/react/editorShortcuts.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextBlockShortcut = getTextBlockShortcut;
+const dividerMarkers = new Set(["---", "—-", "***", "___"]);
+function getTextBlockShortcut(markdown) {
+    const trimmed = markdown.trim();
+    if (dividerMarkers.has(trimmed)) {
+        return { type: "divider" };
+    }
+    const checkbox = trimmed.match(/^\[( |x|X)?\]\s*(.*)$/);
+    if (checkbox) {
+        return {
+            type: "checkbox",
+            checked: checkbox[1]?.toLowerCase() === "x",
+            markdown: checkbox[2]?.trim() ?? "",
+        };
+    }
+    if (trimmed.startsWith("# ")) {
+        return { type: "heading", markdown: trimmed.slice(2).trim() };
+    }
+    if (trimmed.startsWith("> ")) {
+        return { type: "quote", markdown: trimmed.slice(2).trim() };
+    }
+    if (trimmed.startsWith("```")) {
+        return { type: "code", text: trimmed.slice(3).trimStart() };
+    }
+    return null;
+}

package/dist-cjs/react/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnsavedChangesDialog = exports.RichTextRenderer = exports.RichTextReadTitle = exports.RichTextEditor = exports.RichTextDocumentSurface = exports.useEditorSession = exports.useEditorExitGuard = exports.EditorSessionProvider = void 0;
+var EditorSessionProvider_1 = require("./EditorSessionProvider");
+Object.defineProperty(exports, "EditorSessionProvider", { enumerable: true, get: function () { return EditorSessionProvider_1.EditorSessionProvider; } });
+Object.defineProperty(exports, "useEditorExitGuard", { enumerable: true, get: function () { return EditorSessionProvider_1.useEditorExitGuard; } });
+Object.defineProperty(exports, "useEditorSession", { enumerable: true, get: function () { return EditorSessionProvider_1.useEditorSession; } });
+var RichTextDocumentSurface_1 = require("./RichTextDocumentSurface");
+Object.defineProperty(exports, "RichTextDocumentSurface", { enumerable: true, get: function () { return RichTextDocumentSurface_1.RichTextDocumentSurface; } });
+var RichTextEditor_1 = require("./RichTextEditor");
+Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return RichTextEditor_1.RichTextEditor; } });
+var RichTextTitleInput_1 = require("./RichTextTitleInput");
+Object.defineProperty(exports, "RichTextReadTitle", { enumerable: true, get: function () { return RichTextTitleInput_1.RichTextReadTitle; } });
+var RichTextRenderer_1 = require("./RichTextRenderer");
+Object.defineProperty(exports, "RichTextRenderer", { enumerable: true, get: function () { return RichTextRenderer_1.RichTextRenderer; } });
+var UnsavedChangesDialog_1 = require("./UnsavedChangesDialog");
+Object.defineProperty(exports, "UnsavedChangesDialog", { enumerable: true, get: function () { return UnsavedChangesDialog_1.UnsavedChangesDialog; } });

package/dist-cjs/react/richTextBlockStyles.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dividerBlockSx = void 0;
+exports.dividerBlockSx = {
+    border: "0",
+    borderTop: "1px solid currentColor",
+    height: 0,
+    my: "6px",
+    py: 0,
+};

package/dist-cjs/react/specialBlockStyles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toolButtonSx = void 0;
+exports.toolButtonSx = {
+    backgroundColor: "#ffffff",
+    color: "#7f38d8",
+    height: { xs: 28, sm: 39 },
+    width: { xs: 28, sm: 39 },
+    "&:hover": {
+        backgroundColor: "#fbf6ff",
+    },
+};