@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist/react/editor/editorOperations.d.ts

@@ -0,0 +1,10 @@
+import type { RichTextBlock, RichTextSelectionSnapshot } from "../../core/types";
+export type { RichTextSelectionSnapshot } from "../../core/types";
+export type RichTextEditorOperationKind = "delete" | "indent" | "insert" | "outdent" | "reorder" | "toggle" | "update";
+export type RichTextEditorOperation = {
+    kind: RichTextEditorOperationKind;
+    nextContentBlocks: RichTextBlock[];
+    previousContentBlocks: RichTextBlock[];
+    selection: RichTextSelectionSnapshot;
+};
+export declare function createEditorOperation(operation: RichTextEditorOperation): RichTextEditorOperation;

package/dist/react/editor/editorOperations.js

@@ -0,0 +1,3 @@
+export function createEditorOperation(operation) {
+    return operation;
+}

package/dist/react/editor/editorSelection.d.ts

@@ -0,0 +1,3 @@
+import type { RichTextSelectionSnapshot } from "../../core/types";
+export declare function captureRichTextSelection(body: HTMLElement | null, selection?: Selection | null): RichTextSelectionSnapshot | null;
+export declare function restoreRichTextSelection(body: HTMLElement, snapshot: RichTextSelectionSnapshot | null): boolean;

package/dist/react/editor/editorSelection.js

@@ -0,0 +1,215 @@
+export function captureRichTextSelection(body, selection = getCurrentSelection()) {
+    if (!body || !selection || selection.rangeCount === 0) {
+        return null;
+    }
+    const range = selection.getRangeAt(0);
+    if (!body.contains(range.startContainer)) {
+        return null;
+    }
+    const activeBlock = getSelectionBlock(range.startContainer, body);
+    const blockId = activeBlock?.getAttribute("data-block-id");
+    if (!activeBlock || !blockId) {
+        return null;
+    }
+    const selectionRoot = getSelectionTextRoot(activeBlock, range.startContainer);
+    const offset = getTextOffsetWithin(selectionRoot, range);
+    return {
+        affinity: offset === 0 ? "start" : "end",
+        blockId,
+        offset,
+    };
+}
+export function restoreRichTextSelection(body, snapshot) {
+    if (!snapshot) {
+        return false;
+    }
+    const block = body.querySelector(`[data-block-id="${cssEscape(snapshot.blockId)}"]`);
+    if (!block) {
+        return false;
+    }
+    const selectionRoot = getSelectionTextRoot(block, block);
+    const target = findFocusTargetAtVisibleTextOffset(selectionRoot, snapshot.offset);
+    if (!target) {
+        focusNodeEnd(selectionRoot);
+        return true;
+    }
+    const range = getOwnerDocument(body).createRange();
+    range.setStart(target.node, target.offset);
+    range.collapse(true);
+    const selection = getOwnerWindow(body).getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    return true;
+}
+function getCurrentSelection() {
+    return typeof window === "undefined" ? null : window.getSelection();
+}
+function getSelectionBlock(node, body) {
+    const element = node.nodeType === 3
+        ? node.parentElement
+        : node.nodeType === 1
+            ? node
+            : null;
+    const block = element?.closest("[data-block-id]");
+    return block && body.contains(block) ? block : null;
+}
+function getSelectionTextRoot(block, node) {
+    const nodeElement = node.nodeType === 3
+        ? node.parentElement
+        : node.nodeType === 1
+            ? node
+            : null;
+    const activeLabel = nodeElement?.closest("[data-bullet-label], [data-ordered-label], [data-checkbox-label], [data-toggle-label]");
+    if (activeLabel && block.contains(activeLabel)) {
+        return activeLabel;
+    }
+    const directLabel = Array.from(block.querySelectorAll(getTreeRowLabelSelector())).find((label) => label.parentElement?.hasAttribute("data-rich-text-row"));
+    if (directLabel) {
+        return directLabel;
+    }
+    const code = block.querySelector("code");
+    return code ?? block;
+}
+function getTreeRowLabelSelector() {
+    return [
+        "[data-bullet-label]",
+        "[data-ordered-label]",
+        "[data-checkbox-label]",
+        "[data-toggle-label]",
+    ].join(", ");
+}
+function getTextOffsetWithin(root, range) {
+    const textRange = getOwnerDocument(root).createRange();
+    textRange.selectNodeContents(root);
+    textRange.setEnd(range.startContainer, range.startOffset);
+    return getEditorVisibleTextLength(textRange.cloneContents());
+}
+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 === 3) {
+            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 focusNodeEnd(root) {
+    const target = findLastTextFocusTarget(root);
+    const range = getOwnerDocument(root).createRange();
+    if (target) {
+        range.setStart(target.node, target.offset);
+    }
+    else {
+        range.selectNodeContents(root);
+        range.collapse(false);
+    }
+    const selection = getOwnerWindow(root).getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+}
+function findLastTextFocusTarget(root) {
+    for (const child of Array.from(root.childNodes).reverse()) {
+        if (child.nodeType === 3) {
+            return {
+                node: child,
+                offset: child.textContent?.length ?? 0,
+            };
+        }
+        if (isLineBreakNode(child)) {
+            return {
+                node: root,
+                offset: getChildNodeIndex(child) + 1,
+            };
+        }
+        const target = findLastTextFocusTarget(child);
+        if (target) {
+            return target;
+        }
+    }
+    return null;
+}
+function getEditorVisibleTextLength(root) {
+    let length = 0;
+    for (const child of Array.from(root.childNodes)) {
+        if (child.nodeType === 3) {
+            length += getVisibleTextLength(child.textContent ?? "");
+            continue;
+        }
+        if (isLineBreakNode(child)) {
+            length += 1;
+            continue;
+        }
+        length += getEditorVisibleTextLength(child);
+    }
+    return length;
+}
+function isLineBreakNode(node) {
+    return node.nodeType === 1 && node.tagName === "BR";
+}
+function getChildNodeIndex(node) {
+    return Array.prototype.indexOf.call(node.parentNode?.childNodes ?? [], node);
+}
+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 getOwnerDocument(node) {
+    return node.ownerDocument ?? document;
+}
+function getOwnerWindow(node) {
+    return getOwnerDocument(node).defaultView ?? window;
+}
+function cssEscape(value) {
+    if (typeof CSS !== "undefined" && CSS.escape) {
+        return CSS.escape(value);
+    }
+    return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}

package/dist/react/{editorShortcuts.d.ts → editor/editorShortcuts.d.ts}

@@ -7,6 +7,16 @@ export type TextBlockShortcut = {
 } | {
     type: "quote";
     markdown: string;
+} | {
+    type: "bullet";
+    markdown: string;
+} | {
+    type: "ordered";
+    markdown: string;
+} | {
+    type: "toggle";
+    collapsed: boolean;
+    markdown: string;
 } | {
     type: "checkbox";
     checked: boolean;

package/dist/react/{editorShortcuts.js → editor/editorShortcuts.js}

@@ -1,10 +1,11 @@
 const dividerMarkers = new Set(["---", "—-", "***", "___"]);
 export function getTextBlockShortcut(markdown) {
     const trimmed = markdown.trim();
+    const line = markdown.replace(/\u00a0/g, " ");
     if (dividerMarkers.has(trimmed)) {
         return { type: "divider" };
     }
-    const checkbox = trimmed.match(/^\[( |x|X)?\]\s*(.*)$/);
+    const checkbox = line.match(/^\[( |x|X)?\]\s*(.*)$/);
     if (checkbox) {
         return {
             type: "checkbox",
@@ -15,9 +16,24 @@ export function getTextBlockShortcut(markdown) {
     if (trimmed.startsWith("# ")) {
         return { type: "heading", markdown: trimmed.slice(2).trim() };
     }
+    if (trimmed.startsWith(">> ")) {
+        return {
+            type: "toggle",
+            collapsed: false,
+            markdown: trimmed.slice(3).trim(),
+        };
+    }
     if (trimmed.startsWith("> ")) {
         return { type: "quote", markdown: trimmed.slice(2).trim() };
     }
+    const bullet = line.match(/^[-*]\s(.*)$/);
+    if (bullet) {
+        return { type: "bullet", markdown: bullet[1]?.trim() ?? "" };
+    }
+    const ordered = line.match(/^1\.\s(.*)$/);
+    if (ordered) {
+        return { type: "ordered", markdown: ordered[1]?.trim() ?? "" };
+    }
     if (trimmed.startsWith("```")) {
         return { type: "code", text: trimmed.slice(3).trimStart() };
     }

package/dist/react/{RichTextIcons.d.ts → icons/RichTextIcons.d.ts}

@@ -5,6 +5,7 @@ export type RichTextIconProps = {
 export declare function AddIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function BoldIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function CloseIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function BulletListIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function CopyIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function CodeIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function CutIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
@@ -16,6 +17,8 @@ export declare function ImageIcon(props: RichTextIconProps): import("react/jsx-r
 export declare function ItalicIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function LinkIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function MicIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasteIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function QuoteIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function StopIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function TitleIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleIcon(props: RichTextIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/{RichTextIcons.js → icons/RichTextIcons.js}

@@ -11,6 +11,9 @@ export function BoldIcon(props) {
 export function CloseIcon(props) {
     return (_jsx(IconSvg, { ...props, children: _jsx("path", { d: "m6 6 12 12M18 6 6 18", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" }) }));
 }
+export function BulletListIcon(props) {
+    return (_jsxs(IconSvg, { ...props, children: [_jsx("path", { d: "M9 7h10M9 12h10M9 17h10", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" }), _jsx("circle", { cx: "5", cy: "7", fill: "currentColor", r: "1.4" }), _jsx("circle", { cx: "5", cy: "12", fill: "currentColor", r: "1.4" }), _jsx("circle", { cx: "5", cy: "17", fill: "currentColor", r: "1.4" })] }));
+}
 export function CopyIcon(props) {
     return (_jsxs(IconSvg, { ...props, children: [_jsx("rect", { height: "11", rx: "1.8", stroke: "currentColor", strokeWidth: "2", width: "9", x: "9", y: "7" }), _jsx("path", { d: "M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" })] }));
 }
@@ -44,6 +47,9 @@ export function LinkIcon(props) {
 export function MicIcon(props) {
     return (_jsxs(IconSvg, { ...props, children: [_jsx("path", { d: "M12 4a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V7a3 3 0 0 0-3-3Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }), _jsx("path", { d: "M5 11a7 7 0 0 0 14 0M12 18v3m-3 0h6", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" })] }));
 }
+export function PasteIcon(props) {
+    return (_jsxs(IconSvg, { ...props, children: [_jsx("path", { d: "M9 5h6m-6 0a3 3 0 0 1 6 0m-6 0H7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }), _jsx("path", { d: "M12 9v7m-3-3 3 3 3-3", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })] }));
+}
 export function QuoteIcon(props) {
     return (_jsx(IconSvg, { ...props, children: _jsx("path", { d: "M9 7H6.5A2.5 2.5 0 0 0 4 9.5V17h5v-5H6.5v-1.5H9zm11 0h-2.5A2.5 2.5 0 0 0 15 9.5V17h5v-5h-2.5v-1.5H20z", fill: "currentColor" }) }));
 }
@@ -53,3 +59,6 @@ export function StopIcon(props) {
 export function TitleIcon(props) {
     return (_jsx(IconSvg, { ...props, children: _jsx("path", { d: "M5 6h14M12 6v12m-4 0h8", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" }) }));
 }
+export function ToggleIcon(props) {
+    return (_jsx(IconSvg, { ...props, children: _jsx("path", { d: "m8 7 4 5-4 5M13 7h6M13 12h6M13 17h6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }));
+}

package/dist/react/index.d.ts

@@ -1,9 +1,12 @@
-export { EditorSessionProvider, useEditorExitGuard, useEditorSession, } from "./EditorSessionProvider";
-export type { EditorSessionControls, EditorSessionProviderProps, UseEditorSessionOptions, } from "./EditorSessionProvider";
-export { RichTextDocumentSurface } from "./RichTextDocumentSurface";
-export type { RichTextDocumentSurfaceBackground } from "./RichTextDocumentSurface";
-export { RichTextEditor } from "./RichTextEditor";
-export { RichTextReadTitle } from "./RichTextTitleInput";
-export { RichTextRenderer } from "./RichTextRenderer";
-export { UnsavedChangesDialog } from "./UnsavedChangesDialog";
-export type { UnsavedChangesDialogProps } from "./UnsavedChangesDialog";
+export { EditorSessionProvider, useEditorExitGuard, useEditorSession, } from "./session/EditorSessionProvider";
+export type { EditorSessionControls, EditorSessionProviderProps, UseEditorSessionOptions, } from "./session/EditorSessionProvider";
+export { RichTextDocumentSurface } from "./editor/RichTextDocumentSurface";
+export type { RichTextDocumentSurfaceBackground } from "./editor/RichTextDocumentSurface";
+export { RichTextEditor, type RichTextEditorBehavior, type RichTextContentChange, type RichTextHistoryControls, type RichTextHistoryLabel, type RichTextHistoryMetadata, type RichTextHistorySnapshot, type RichTextHistorySnapshotEntry, type RichTextImageUploadHandler, type RichTextImageUploadResult, } from "./editor/RichTextEditor";
+export type { RichTextEditorEntitlements, RichTextFeatureGate, RichTextLockedFeatureMode, } from "../core/features";
+export { createEditorOperation, type RichTextEditorOperation, type RichTextEditorOperationKind, } from "./editor/editorOperations";
+export { RichTextReadTitle } from "./editor/RichTextTitleInput";
+export { RichTextRenderer, type RichTextAnnotationTarget, } from "./editor/RichTextRenderer";
+export type { RichTextToolBlockRenderer } from "./editor/RichTextRenderedBlock";
+export { UnsavedChangesDialog } from "./session/UnsavedChangesDialog";
+export type { UnsavedChangesDialogProps } from "./session/UnsavedChangesDialog";

package/dist/react/index.js

@@ -1,6 +1,7 @@
-export { EditorSessionProvider, useEditorExitGuard, useEditorSession, } from "./EditorSessionProvider.js";
-export { RichTextDocumentSurface } from "./RichTextDocumentSurface.js";
-export { RichTextEditor } from "./RichTextEditor.js";
-export { RichTextReadTitle } from "./RichTextTitleInput.js";
-export { RichTextRenderer } from "./RichTextRenderer.js";
-export { UnsavedChangesDialog } from "./UnsavedChangesDialog.js";
+export { EditorSessionProvider, useEditorExitGuard, useEditorSession, } from "./session/EditorSessionProvider.js";
+export { RichTextDocumentSurface } from "./editor/RichTextDocumentSurface.js";
+export { RichTextEditor, } from "./editor/RichTextEditor.js";
+export { createEditorOperation, } from "./editor/editorOperations.js";
+export { RichTextReadTitle } from "./editor/RichTextTitleInput.js";
+export { RichTextRenderer, } from "./editor/RichTextRenderer.js";
+export { UnsavedChangesDialog } from "./session/UnsavedChangesDialog.js";

package/dist/react/{EditorSessionProvider.d.ts → session/EditorSessionProvider.d.ts}

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
-import { type EditorDirtyScope, type EditorSessionValue } from "../session";
-import { type EditorExitAction } from "../sessionRegistry";
+import { type EditorDirtyScope, type EditorSessionValue } from "../../session/session";
+import { type EditorExitAction } from "../../session/sessionRegistry";
 export type EditorSessionProviderProps = {
     children: ReactNode;
 };

package/dist/react/{EditorSessionProvider.js → session/EditorSessionProvider.js}

@@ -1,9 +1,9 @@
 "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 { createEditorSession, } from "../../session/session.js";
+import { createEditorSessionRegistry, } from "../../session/sessionRegistry.js";
+import { canonicalSerialize } from "../../session/session.js";
 import { UnsavedChangesDialog } from "./UnsavedChangesDialog.js";
 const EditorSessionRegistryContext = createContext(null);
 export function EditorSessionProvider({ children, }) {

package/dist/react/{UnsavedChangesDialog.js → session/UnsavedChangesDialog.js}

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RichTextStyleScope } from "./RichTextStyles.js";
+import { RichTextStyleScope } from "../styles/RichTextStyles.js";
 export function UnsavedChangesDialog({ error, onDiscardAndLeave, onSaveAndLeave, onStay, open, saving, }) {
     if (!open) {
         return null;