@bayonai/rich-text-editor 0.1.2

package/dist/writingStats.d.ts

@@ -0,0 +1,5 @@
+import type { RichTextBlock } from "./types";
+export declare function getWritingStats(value: RichTextBlock[]): {
+    readingMinutes: number;
+    wordCount: number;
+};

package/dist/writingStats.js

@@ -0,0 +1,9 @@
+import { richTextBlocksToPlainText } from "./richText.js";
+export function getWritingStats(value) {
+    const plainText = richTextBlocksToPlainText(value);
+    const wordCount = plainText ? plainText.split(" ").length : 0;
+    return {
+        readingMinutes: Math.max(1, Math.ceil(wordCount / 225)),
+        wordCount,
+    };
+}

package/dist-cjs/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWritingStats = exports.sanitizeRichTextHtml = exports.sanitizeRichTextBlocks = exports.richTextBlocksToPlainText = exports.markdownToEditorHtml = exports.isRichTextBlocksEmpty = exports.editorHtmlToMarkdown = exports.createRichTextBlockId = exports.createEmptyRichTextBlocks = exports.createEditorSessionRegistry = exports.getEditorSaveControlState = exports.defaultEditorSessionEquals = exports.createEditorSession = exports.canonicalSerialize = void 0;
+var session_1 = require("./session");
+Object.defineProperty(exports, "canonicalSerialize", { enumerable: true, get: function () { return session_1.canonicalSerialize; } });
+Object.defineProperty(exports, "createEditorSession", { enumerable: true, get: function () { return session_1.createEditorSession; } });
+Object.defineProperty(exports, "defaultEditorSessionEquals", { enumerable: true, get: function () { return session_1.defaultEditorSessionEquals; } });
+var saveControl_1 = require("./saveControl");
+Object.defineProperty(exports, "getEditorSaveControlState", { enumerable: true, get: function () { return saveControl_1.getEditorSaveControlState; } });
+var sessionRegistry_1 = require("./sessionRegistry");
+Object.defineProperty(exports, "createEditorSessionRegistry", { enumerable: true, get: function () { return sessionRegistry_1.createEditorSessionRegistry; } });
+var richText_1 = require("./richText");
+Object.defineProperty(exports, "createEmptyRichTextBlocks", { enumerable: true, get: function () { return richText_1.createEmptyRichTextBlocks; } });
+Object.defineProperty(exports, "createRichTextBlockId", { enumerable: true, get: function () { return richText_1.createRichTextBlockId; } });
+Object.defineProperty(exports, "editorHtmlToMarkdown", { enumerable: true, get: function () { return richText_1.editorHtmlToMarkdown; } });
+Object.defineProperty(exports, "isRichTextBlocksEmpty", { enumerable: true, get: function () { return richText_1.isRichTextBlocksEmpty; } });
+Object.defineProperty(exports, "markdownToEditorHtml", { enumerable: true, get: function () { return richText_1.markdownToEditorHtml; } });
+Object.defineProperty(exports, "richTextBlocksToPlainText", { enumerable: true, get: function () { return richText_1.richTextBlocksToPlainText; } });
+Object.defineProperty(exports, "sanitizeRichTextBlocks", { enumerable: true, get: function () { return richText_1.sanitizeRichTextBlocks; } });
+Object.defineProperty(exports, "sanitizeRichTextHtml", { enumerable: true, get: function () { return richText_1.sanitizeRichTextHtml; } });
+var writingStats_1 = require("./writingStats");
+Object.defineProperty(exports, "getWritingStats", { enumerable: true, get: function () { return writingStats_1.getWritingStats; } });

package/dist-cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist-cjs/react/BlockActionTool.js

@@ -0,0 +1,40 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockActionTool = BlockActionTool;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RichTextIcons_1 = require("./RichTextIcons");
+function BlockActionTool({ activeBlockId, draggedBlockId, onAction, onHoverChange, onPointerDragEnd, onPointerDragMove, onPointerDragStart, onToggleMenu, placement, }) {
+    const menuOpen = activeBlockId === placement.blockId;
+    const dragging = draggedBlockId === placement.blockId;
+    const pointerStartRef = (0, react_1.useRef)(null);
+    const suppressClickRef = (0, react_1.useRef)(false);
+    return ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(RichTextIcons_1.CloseIcon, { size: 19 }) })) : ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(RichTextIcons_1.DragHandleIcon, { size: 19 }) })), menuOpen ? ((0, jsx_runtime_1.jsxs)("div", { className: "bayon-rte-block-tool__actions", children: [(0, jsx_runtime_1.jsx)(BlockActionButton, { label: "Copy block", onClick: () => onAction("copy", placement.blockId), children: (0, jsx_runtime_1.jsx)(RichTextIcons_1.CopyIcon, { size: 17 }) }), (0, jsx_runtime_1.jsx)(BlockActionButton, { label: "Cut block", onClick: () => onAction("cut", placement.blockId), children: (0, jsx_runtime_1.jsx)(RichTextIcons_1.CutIcon, { size: 17 }) }), (0, jsx_runtime_1.jsx)(BlockActionButton, { label: "Delete block", onClick: () => onAction("delete", placement.blockId), children: (0, jsx_runtime_1.jsx)(RichTextIcons_1.DeleteIcon, { size: 17 }) })] })) : null] }));
+}
+function BlockActionButton({ children, label, onClick, }) {
+    return ((0, jsx_runtime_1.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-cjs/react/EditorSessionProvider.js

@@ -0,0 +1,79 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorSessionProvider = EditorSessionProvider;
+exports.useEditorSession = useEditorSession;
+exports.useEditorExitGuard = useEditorExitGuard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const session_1 = require("../session");
+const sessionRegistry_1 = require("../sessionRegistry");
+const session_2 = require("../session");
+const UnsavedChangesDialog_1 = require("./UnsavedChangesDialog");
+const EditorSessionRegistryContext = (0, react_1.createContext)(null);
+function EditorSessionProvider({ children, }) {
+    const [registry] = (0, react_1.useState)(sessionRegistry_1.createEditorSessionRegistry);
+    const snapshot = (0, react_1.useSyncExternalStore)(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
+    (0, react_1.useEffect)(() => {
+        if (!snapshot.dirty) {
+            return;
+        }
+        function handleBeforeUnload(event) {
+            event.preventDefault();
+            event.returnValue = "";
+        }
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }, [snapshot.dirty]);
+    return ((0, jsx_runtime_1.jsxs)(EditorSessionRegistryContext.Provider, { value: registry, children: [children, (0, jsx_runtime_1.jsx)(UnsavedChangesDialog_1.UnsavedChangesDialog, { error: snapshot.error, onDiscardAndLeave: registry.discardAndExit, onSaveAndLeave: () => {
+                    void registry.saveAndExit().catch(() => undefined);
+                }, onStay: registry.stay, open: snapshot.pendingExit, saving: snapshot.saving })] }));
+}
+function useEditorSession({ dirtyScope, equals, initialBaselineValue, onReset, onSave, value, }) {
+    const registry = useEditorSessionRegistry(false);
+    const [session] = (0, react_1.useState)(() => (0, session_1.createEditorSession)({
+        dirtyScope,
+        equals,
+        initialBaselineValue,
+        initialValue: value,
+        onSave,
+    }));
+    const serializedValue = (0, session_2.canonicalSerialize)(value);
+    const isDirty = (0, react_1.useSyncExternalStore)(session.subscribe, session.isDirty, () => false);
+    const isSaving = (0, react_1.useSyncExternalStore)(session.subscribe, session.isSaving, () => false);
+    (0, react_1.useEffect)(() => registry.register(session), [registry, session]);
+    (0, react_1.useEffect)(() => {
+        session.setOnSave(onSave);
+    }, [onSave, session]);
+    (0, react_1.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,
+    };
+}
+function useEditorExitGuard() {
+    const registry = useEditorSessionRegistry(true);
+    const snapshot = (0, react_1.useSyncExternalStore)(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
+    return {
+        hasDirtyChanges: snapshot.dirty,
+        requestExit: registry.requestExit,
+    };
+}
+function useEditorSessionRegistry(required) {
+    const registry = (0, react_1.useContext)(EditorSessionRegistryContext);
+    const [standaloneRegistry] = (0, react_1.useState)(sessionRegistry_1.createEditorSessionRegistry);
+    if (!registry && required) {
+        throw new Error("Editor session hooks must be used inside EditorSessionProvider.");
+    }
+    return registry ?? standaloneRegistry;
+}

package/dist-cjs/react/RichTextBody.js

@@ -0,0 +1,69 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextBody = RichTextBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editorNavigation_1 = require("./editorNavigation");
+// Renders the editable rich-text body and reports input and selection changes.
+function RichTextBody({ bodyRef, disabled, label, onArrowUpFromFirstLine, onBackspace, onEnter, onFocus, onInput, onSelectionChange, onShortcutCommand, }) {
+    return ((0, jsx_runtime_1.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 ((0, editorNavigation_1.isSelectAllShortcut)(event)) {
+                const code = (0, editorNavigation_1.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 = (0, editorNavigation_1.getEditorKeyboardShortcut)(event);
+            if (shortcutCommand) {
+                event.preventDefault();
+                onShortcutCommand(shortcutCommand);
+                return;
+            }
+            if (event.key === "ArrowUp" &&
+                (0, editorNavigation_1.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-cjs/react/RichTextDocumentSurface.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextDocumentSurface = RichTextDocumentSurface;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function RichTextDocumentSurface({ background = "transparent", children, }) {
+    const hasPanelBackground = background === "panel";
+    return ((0, jsx_runtime_1.jsx)("section", { className: `bayon-rte-surface${hasPanelBackground ? " bayon-rte-surface--panel" : ""}`, children: (0, jsx_runtime_1.jsx)("div", { className: "bayon-rte-surface__inner", children: children }) }));
+}