@bayonai/rich-text-editor 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+## Unreleased
+
+## 0.1.2 - 2026-06-24
+
+- Added block-level action handles for non-empty editor blocks.
+- Added handle drag-and-drop reordering with a visible drop indicator.
+- Added compact block action menu controls for copy, cut, delete, and close.
+- Added plain-text clipboard behavior for copy and cut, with delete fallback
+  preserving an empty paragraph when the document would otherwise be empty.
+- Added checkbox sequence editing so Enter creates the next checkbox,
+  checkbox rows can be reordered individually, and adjacent checkbox rows
+  remain grouped for copy, cut, and delete actions. Backspace at the start of a
+  checkbox row converts that row back to a paragraph.
+- Fixed Shift+Enter at the end of checkbox rows so the first press creates a
+  visible line break.
+- Fixed manual soft line breaks so Shift+Enter works at the pressed position,
+  browser spacer spans do not stack at the end of checkbox rows, and block
+  deletion keeps focus inside the editor.
+- Moved Enter from the title field into the first body text block instead of
+  adding another title row.
+- Added an optional browser-native transcription control for editable document
+  bodies, defaulting to enabled for hosts that do not explicitly disable it.
+- Kept the special block insertion tool scoped to empty, undesignated blocks,
+  with slower smoother show and hide transitions.
+- Fixed block action handles so the focused body block takes precedence over
+  stale hover state while editing multiple sections.
+
+## 0.1.1 - 2026-06-12
+
+- Removed MUI and Emotion from the rich text editor package peer and dev dependencies.
+- Replaced rich text editor React internals with native HTML controls, local SVG icons, and package-local styles.
+- Added a dependency-boundary test to prevent MUI and Emotion imports from returning to the package source.
+
+## 0.1.0 - 2026-06-12
+
+- Initial reusable rich text editor package release.

package/README.md

@@ -0,0 +1,37 @@
+# @bayonai/rich-text-editor
+
+Reusable rich-text document utilities, native React editing components, and
+unsaved-change session controls.
+
+## Exports
+
+- `@bayonai/rich-text-editor` provides document types, sanitization,
+  serialization, comparison, statistics, and session controllers.
+- `@bayonai/rich-text-editor/react` provides the editor, renderer,
+  `EditorSessionProvider`, session hooks, and the Save/Discard/Stay dialog.
+
+The package has no Next.js, Firebase, or application-domain dependencies.
+Hosts provide controlled document values, optional metadata, persistence
+callbacks, and navigation adapters.
+
+## Editor Capabilities
+
+- Native rich-text body editing with headings, quotes, code, dividers,
+  checkboxes, image placeholders, and Markdown-compatible text storage.
+- Empty, undesignated blocks expose the special block insertion tool.
+- Non-empty top-level blocks expose a compact gutter handle for block actions.
+- Dragging a block handle reorders blocks with a visible drop indicator.
+- Clicking a block handle opens icon actions for copy, cut, delete, and close.
+- Copy and cut write readable plain text to the clipboard; cut removes the
+  block only after the clipboard write succeeds.
+- Deleting the last block preserves one empty paragraph so the editor remains
+  writable.
+- Checkbox rows can be reordered individually; copy, cut, and delete actions
+  still apply to consecutive checkbox rows as one action group. Pressing Enter
+  from a checkbox creates the next checkbox, and Backspace at the start of a
+  checkbox row converts that row back to a paragraph.
+- Browser-native transcription can be enabled by hosts with the editor's
+  `transcriptionEnabled` option. It defaults to enabled, uses the browser
+  `SpeechRecognition` or `webkitSpeechRecognition` API when available, inserts
+  final transcript text into the current editor body, and never uploads or
+  stores audio.

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { canonicalSerialize, createEditorSession, defaultEditorSessionEquals, } from "./session";
+export { getEditorSaveControlState } from "./saveControl";
+export { createEditorSessionRegistry } from "./sessionRegistry";
+export { createEmptyRichTextBlocks, createRichTextBlockId, editorHtmlToMarkdown, isRichTextBlocksEmpty, markdownToEditorHtml, richTextBlocksToPlainText, sanitizeRichTextBlocks, sanitizeRichTextHtml, } from "./richText";
+export { getWritingStats } from "./writingStats";
+export type { EditorDirtyScope, EditorSession, EditorSessionOptions, EditorSessionValue, } from "./session";
+export type { EditorExitAction, EditorSessionRegistry, EditorSessionRegistrySnapshot, } from "./sessionRegistry";
+export type { RichTextBlock, RichTextDocument } from "./types";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { canonicalSerialize, createEditorSession, defaultEditorSessionEquals, } from "./session.js";
+export { getEditorSaveControlState } from "./saveControl.js";
+export { createEditorSessionRegistry } from "./sessionRegistry.js";
+export { createEmptyRichTextBlocks, createRichTextBlockId, editorHtmlToMarkdown, isRichTextBlocksEmpty, markdownToEditorHtml, richTextBlocksToPlainText, sanitizeRichTextBlocks, sanitizeRichTextHtml, } from "./richText.js";
+export { getWritingStats } from "./writingStats.js";

package/dist/react/BlockActionTool.d.ts

@@ -0,0 +1,15 @@
+import type { PointerEvent } from "react";
+import type { BlockActionToolPlacement } from "./blockActionToolState";
+type BlockActionToolProps = {
+    activeBlockId: string | null;
+    draggedBlockId: string | null;
+    onAction: (action: "copy" | "cut" | "delete", blockId: string) => void;
+    onHoverChange: (hovering: boolean) => void;
+    onPointerDragEnd: (event: PointerEvent<HTMLButtonElement>) => void;
+    onPointerDragMove: (event: PointerEvent<HTMLButtonElement>) => void;
+    onPointerDragStart: (blockId: string, event: PointerEvent<HTMLButtonElement>) => void;
+    onToggleMenu: (blockId: string) => void;
+    placement: BlockActionToolPlacement;
+};
+export declare function BlockActionTool({ activeBlockId, draggedBlockId, onAction, onHoverChange, onPointerDragEnd, onPointerDragMove, onPointerDragStart, onToggleMenu, placement, }: BlockActionToolProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/BlockActionTool.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { CloseIcon, CopyIcon, CutIcon, DeleteIcon, DragHandleIcon, } from "./RichTextIcons.js";
+export function BlockActionTool({ activeBlockId, draggedBlockId, onAction, onHoverChange, onPointerDragEnd, onPointerDragMove, onPointerDragStart, onToggleMenu, placement, }) {
+    const menuOpen = activeBlockId === placement.blockId;
+    const dragging = draggedBlockId === placement.blockId;
+    const pointerStartRef = useRef(null);
+    const suppressClickRef = useRef(false);
+    return (_jsxs("div", { className: `bayon-rte-block-tool${menuOpen ? " bayon-rte-block-tool--menu-open" : ""}`, "data-block-action-tool": placement.blockId, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => onHoverChange(false), style: { "--bayon-rte-block-tool-top": `${placement.top}px` }, children: [menuOpen ? (_jsx("button", { "aria-label": "Close block actions", className: "bayon-rte-icon-button bayon-rte-block-handle bayon-rte-block-handle--menu-open", onClick: () => onToggleMenu(placement.blockId), onMouseDown: (event) => event.preventDefault(), title: "Close block actions", type: "button", children: _jsx(CloseIcon, { size: 19 }) })) : (_jsx("button", { "aria-label": "Block actions", "aria-pressed": dragging, className: `bayon-rte-icon-button bayon-rte-block-handle${dragging ? " bayon-rte-block-handle--dragging" : ""}`, onClick: () => {
+                    if (suppressClickRef.current) {
+                        suppressClickRef.current = false;
+                        return;
+                    }
+                    onToggleMenu(placement.blockId);
+                }, onPointerCancel: (event) => {
+                    pointerStartRef.current = null;
+                    onPointerDragEnd(event);
+                }, onPointerDown: (event) => {
+                    pointerStartRef.current = { x: event.clientX, y: event.clientY };
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    onPointerDragStart(placement.blockId, event);
+                }, onPointerMove: (event) => {
+                    const pointerStart = pointerStartRef.current;
+                    if (pointerStart &&
+                        Math.hypot(event.clientX - pointerStart.x, event.clientY - pointerStart.y) > 3) {
+                        suppressClickRef.current = true;
+                    }
+                    onPointerDragMove(event);
+                }, onPointerUp: (event) => {
+                    pointerStartRef.current = null;
+                    onPointerDragEnd(event);
+                }, title: "Drag or open block actions", type: "button", children: _jsx(DragHandleIcon, { size: 19 }) })), menuOpen ? (_jsxs("div", { className: "bayon-rte-block-tool__actions", children: [_jsx(BlockActionButton, { label: "Copy block", onClick: () => onAction("copy", placement.blockId), children: _jsx(CopyIcon, { size: 17 }) }), _jsx(BlockActionButton, { label: "Cut block", onClick: () => onAction("cut", placement.blockId), children: _jsx(CutIcon, { size: 17 }) }), _jsx(BlockActionButton, { label: "Delete block", onClick: () => onAction("delete", placement.blockId), children: _jsx(DeleteIcon, { size: 17 }) })] })) : null] }));
+}
+function BlockActionButton({ children, label, onClick, }) {
+    return (_jsx("button", { "aria-label": label, className: "bayon-rte-icon-button bayon-rte-special-button", onClick: onClick, onMouseDown: (event) => event.preventDefault(), title: label, type: "button", children: children }));
+}

package/dist/react/EditorSessionProvider.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { type EditorDirtyScope, type EditorSessionValue } from "../session";
+import { type EditorExitAction } from "../sessionRegistry";
+export type EditorSessionProviderProps = {
+    children: ReactNode;
+};
+export declare function EditorSessionProvider({ children, }: EditorSessionProviderProps): import("react/jsx-runtime").JSX.Element;
+export type UseEditorSessionOptions<Metadata> = {
+    dirtyScope?: EditorDirtyScope;
+    equals?: (left: EditorSessionValue<Metadata>, right: EditorSessionValue<Metadata>) => boolean;
+    initialBaselineValue?: EditorSessionValue<Metadata>;
+    onReset?: (value: EditorSessionValue<Metadata>) => void;
+    onSave: (value: EditorSessionValue<Metadata>) => Promise<unknown>;
+    value: EditorSessionValue<Metadata>;
+};
+export type EditorSessionControls<Metadata> = {
+    isDirty: boolean;
+    isSaving: boolean;
+    markClean: (value?: EditorSessionValue<Metadata>) => void;
+    requestExit: (action: EditorExitAction) => Promise<boolean>;
+    reset: () => EditorSessionValue<Metadata>;
+    save: () => Promise<unknown>;
+};
+export declare function useEditorSession<Metadata = unknown>({ dirtyScope, equals, initialBaselineValue, onReset, onSave, value, }: UseEditorSessionOptions<Metadata>): EditorSessionControls<Metadata>;
+export declare function useEditorExitGuard(): {
+    hasDirtyChanges: boolean;
+    requestExit: (action: EditorExitAction) => Promise<boolean>;
+};

package/dist/react/EditorSessionProvider.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, useSyncExternalStore, } from "react";
+import { createEditorSession, } from "../session.js";
+import { createEditorSessionRegistry, } from "../sessionRegistry.js";
+import { canonicalSerialize } from "../session.js";
+import { UnsavedChangesDialog } from "./UnsavedChangesDialog.js";
+const EditorSessionRegistryContext = createContext(null);
+export function EditorSessionProvider({ children, }) {
+    const [registry] = useState(createEditorSessionRegistry);
+    const snapshot = useSyncExternalStore(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
+    useEffect(() => {
+        if (!snapshot.dirty) {
+            return;
+        }
+        function handleBeforeUnload(event) {
+            event.preventDefault();
+            event.returnValue = "";
+        }
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }, [snapshot.dirty]);
+    return (_jsxs(EditorSessionRegistryContext.Provider, { value: registry, children: [children, _jsx(UnsavedChangesDialog, { error: snapshot.error, onDiscardAndLeave: registry.discardAndExit, onSaveAndLeave: () => {
+                    void registry.saveAndExit().catch(() => undefined);
+                }, onStay: registry.stay, open: snapshot.pendingExit, saving: snapshot.saving })] }));
+}
+export function useEditorSession({ dirtyScope, equals, initialBaselineValue, onReset, onSave, value, }) {
+    const registry = useEditorSessionRegistry(false);
+    const [session] = useState(() => createEditorSession({
+        dirtyScope,
+        equals,
+        initialBaselineValue,
+        initialValue: value,
+        onSave,
+    }));
+    const serializedValue = canonicalSerialize(value);
+    const isDirty = useSyncExternalStore(session.subscribe, session.isDirty, () => false);
+    const isSaving = useSyncExternalStore(session.subscribe, session.isSaving, () => false);
+    useEffect(() => registry.register(session), [registry, session]);
+    useEffect(() => {
+        session.setOnSave(onSave);
+    }, [onSave, session]);
+    useEffect(() => {
+        session.update(JSON.parse(serializedValue));
+    }, [serializedValue, session]);
+    return {
+        isDirty,
+        isSaving,
+        markClean: session.markClean,
+        requestExit: registry.requestExit,
+        reset: () => {
+            const resetValue = session.reset();
+            onReset?.(resetValue);
+            return resetValue;
+        },
+        save: session.save,
+    };
+}
+export function useEditorExitGuard() {
+    const registry = useEditorSessionRegistry(true);
+    const snapshot = useSyncExternalStore(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
+    return {
+        hasDirtyChanges: snapshot.dirty,
+        requestExit: registry.requestExit,
+    };
+}
+function useEditorSessionRegistry(required) {
+    const registry = useContext(EditorSessionRegistryContext);
+    const [standaloneRegistry] = useState(createEditorSessionRegistry);
+    if (!registry && required) {
+        throw new Error("Editor session hooks must be used inside EditorSessionProvider.");
+    }
+    return registry ?? standaloneRegistry;
+}

package/dist/react/RichTextBody.d.ts

@@ -0,0 +1,18 @@
+import type { RefObject } from "react";
+import { type EditorKeyboardShortcutCommand } from "./editorNavigation";
+type RichTextBodyProps = {
+    bodyRef: RefObject<HTMLDivElement | null>;
+    disabled: boolean;
+    label: string;
+    onArrowUpFromFirstLine: () => void;
+    onBackspace: () => boolean;
+    onEnter: (event: {
+        shiftKey: boolean;
+    }) => boolean;
+    onFocus: () => void;
+    onInput: () => void;
+    onSelectionChange: () => void;
+    onShortcutCommand: (command: EditorKeyboardShortcutCommand) => void;
+};
+export declare function RichTextBody({ bodyRef, disabled, label, onArrowUpFromFirstLine, onBackspace, onEnter, onFocus, onInput, onSelectionChange, onShortcutCommand, }: RichTextBodyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/RichTextBody.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getCodeBlockSelectionTarget, getEditorKeyboardShortcut, isCursorOnFirstLine, isSelectAllShortcut, } from "./editorNavigation.js";
+// Renders the editable rich-text body and reports input and selection changes.
+export function RichTextBody({ bodyRef, disabled, label, onArrowUpFromFirstLine, onBackspace, onEnter, onFocus, onInput, onSelectionChange, onShortcutCommand, }) {
+    return (_jsx("div", { "aria-label": label, className: "bayon-rte-body", contentEditable: !disabled, "data-placeholder": "Tell your story...", dir: "auto", onBlur: onSelectionChange, onClick: (event) => {
+            if (event.target instanceof HTMLInputElement &&
+                event.target.type === "checkbox") {
+                onInput();
+            }
+        }, onFocus: onFocus, onInput: onInput, onKeyDown: (event) => {
+            if (isSelectAllShortcut(event)) {
+                const code = getCodeBlockSelectionTarget(event.currentTarget, window.getSelection());
+                if (code) {
+                    event.preventDefault();
+                    selectElementContents(code);
+                    onSelectionChange();
+                    return;
+                }
+            }
+            if (event.key === "Enter" && onEnter(event)) {
+                event.preventDefault();
+                return;
+            }
+            if (event.key === "Backspace" && onBackspace()) {
+                event.preventDefault();
+                return;
+            }
+            const shortcutCommand = getEditorKeyboardShortcut(event);
+            if (shortcutCommand) {
+                event.preventDefault();
+                onShortcutCommand(shortcutCommand);
+                return;
+            }
+            if (event.key === "ArrowUp" &&
+                isCursorOnFirstLine(event.currentTarget.textContent ?? "", getTextOffsetWithin(event.currentTarget))) {
+                event.preventDefault();
+                onArrowUpFromFirstLine();
+            }
+        }, onKeyUp: onSelectionChange, onMouseUp: onSelectionChange, onPaste: (event) => {
+            event.preventDefault();
+            document.execCommand("insertText", false, event.clipboardData.getData("text/plain"));
+            onInput();
+        }, ref: bodyRef, role: "textbox", suppressContentEditableWarning: true, tabIndex: disabled ? -1 : 0 }));
+}
+function selectElementContents(element) {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+}
+function getTextOffsetWithin(root) {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+        return 0;
+    }
+    const selectionRange = selection.getRangeAt(0);
+    if (!root.contains(selectionRange.startContainer)) {
+        return 0;
+    }
+    const textRange = document.createRange();
+    textRange.selectNodeContents(root);
+    textRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
+    return textRange.toString().length;
+}

package/dist/react/RichTextDocumentSurface.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export type RichTextDocumentSurfaceBackground = "transparent" | "panel";
+export declare function RichTextDocumentSurface({ background, children, }: {
+    background?: RichTextDocumentSurfaceBackground;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/RichTextDocumentSurface.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function RichTextDocumentSurface({ background = "transparent", children, }) {
+    const hasPanelBackground = background === "panel";
+    return (_jsx("section", { className: `bayon-rte-surface${hasPanelBackground ? " bayon-rte-surface--panel" : ""}`, children: _jsx("div", { className: "bayon-rte-surface__inner", children: children }) }));
+}

package/dist/react/RichTextEditor.d.ts

@@ -0,0 +1,45 @@
+import { type RichTextDocumentSurfaceBackground } from "./RichTextDocumentSurface";
+import type { RichTextBlock } from "../types";
+type RichTextEditorProps = {
+    bodyLabel: string;
+    contentBlocks: RichTextBlock[];
+    disabled?: boolean;
+    documentBackground?: RichTextDocumentSurfaceBackground;
+    helperText?: string;
+    onContentBlocksChange: (value: RichTextBlock[]) => void;
+    onTitleChange: (value: string) => void;
+    required?: boolean;
+    title: string;
+    titleLabel: string;
+    titleValidationMessage?: string;
+    transcriptionEnabled?: boolean;
+    transcriptionLanguage?: string;
+};
+export declare function RichTextEditor({ bodyLabel, contentBlocks, disabled, documentBackground, helperText, onContentBlocksChange, onTitleChange, required, title, titleLabel, titleValidationMessage, transcriptionEnabled, transcriptionLanguage, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function getDeletionFocusTarget(blocks: RichTextBlock[], blockId: string): {
+    blockId: string;
+    position: "end";
+} | {
+    blockId: string;
+    position: "start";
+} | undefined;
+export declare function normalizeSoftBreakHtml(html: string): string;
+export declare function hasEditableTrailingWhitespace(value: string): boolean;
+export declare function shouldDelayTypographyNormalization(value: string): boolean;
+export declare function splitCheckboxMarkdownAtTextOffset(markdown: string, offset: number): {
+    after: string;
+    before: string;
+};
+export declare function getCheckboxEnterAction(event: {
+    shiftKey: boolean;
+}): "line-break" | "next-checkbox";
+export declare function shouldPadTrailingLineBreak(textAfterCursor: string): boolean;
+export declare function resolveTranscriptionConfig(config?: {
+    enabled?: boolean;
+    language?: string;
+}): {
+    enabled: boolean;
+    language: string | undefined;
+};
+export declare function appendTranscriptText(currentText: string, transcript: string): string;
+export {};