@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist-cjs/react/editor/editorSelection.js

@@ -0,0 +1,219 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.captureRichTextSelection = captureRichTextSelection;
+exports.restoreRichTextSelection = restoreRichTextSelection;
+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,
+    };
+}
+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-cjs/react/{editorShortcuts.js → editor/editorShortcuts.js}

@@ -4,10 +4,11 @@ exports.getTextBlockShortcut = getTextBlockShortcut;
 const dividerMarkers = new Set(["---", "—-", "***", "___"]);
 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",
@@ -18,9 +19,24 @@ 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-cjs/react/{RichTextIcons.js → icons/RichTextIcons.js}

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddIcon = AddIcon;
 exports.BoldIcon = BoldIcon;
 exports.CloseIcon = CloseIcon;
+exports.BulletListIcon = BulletListIcon;
 exports.CopyIcon = CopyIcon;
 exports.CodeIcon = CodeIcon;
 exports.CutIcon = CutIcon;
@@ -14,9 +15,11 @@ exports.ImageIcon = ImageIcon;
 exports.ItalicIcon = ItalicIcon;
 exports.LinkIcon = LinkIcon;
 exports.MicIcon = MicIcon;
+exports.PasteIcon = PasteIcon;
 exports.QuoteIcon = QuoteIcon;
 exports.StopIcon = StopIcon;
 exports.TitleIcon = TitleIcon;
+exports.ToggleIcon = ToggleIcon;
 const jsx_runtime_1 = require("react/jsx-runtime");
 function IconSvg({ children, className, size = 18, viewBox = "0 0 24 24", }) {
     return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", className: className, fill: "none", height: size, viewBox: viewBox, width: size, children: children }));
@@ -30,6 +33,9 @@ function BoldIcon(props) {
 function CloseIcon(props) {
     return ((0, jsx_runtime_1.jsx)(IconSvg, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "m6 6 12 12M18 6 6 18", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" }) }));
 }
+function BulletListIcon(props) {
+    return ((0, jsx_runtime_1.jsxs)(IconSvg, { ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M9 7h10M9 12h10M9 17h10", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "5", cy: "7", fill: "currentColor", r: "1.4" }), (0, jsx_runtime_1.jsx)("circle", { cx: "5", cy: "12", fill: "currentColor", r: "1.4" }), (0, jsx_runtime_1.jsx)("circle", { cx: "5", cy: "17", fill: "currentColor", r: "1.4" })] }));
+}
 function CopyIcon(props) {
     return ((0, jsx_runtime_1.jsxs)(IconSvg, { ...props, children: [(0, jsx_runtime_1.jsx)("rect", { height: "11", rx: "1.8", stroke: "currentColor", strokeWidth: "2", width: "9", x: "9", y: "7" }), (0, jsx_runtime_1.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" })] }));
 }
@@ -63,6 +69,9 @@ function LinkIcon(props) {
 function MicIcon(props) {
     return ((0, jsx_runtime_1.jsxs)(IconSvg, { ...props, children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 11a7 7 0 0 0 14 0M12 18v3m-3 0h6", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" })] }));
 }
+function PasteIcon(props) {
+    return ((0, jsx_runtime_1.jsxs)(IconSvg, { ...props, children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 9v7m-3-3 3 3 3-3", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })] }));
+}
 function QuoteIcon(props) {
     return ((0, jsx_runtime_1.jsx)(IconSvg, { ...props, children: (0, jsx_runtime_1.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" }) }));
 }
@@ -72,3 +81,6 @@ function StopIcon(props) {
 function TitleIcon(props) {
     return ((0, jsx_runtime_1.jsx)(IconSvg, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M5 6h14M12 6v12m-4 0h8", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" }) }));
 }
+function ToggleIcon(props) {
+    return ((0, jsx_runtime_1.jsx)(IconSvg, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "m8 7 4 5-4 5M13 7h6M13 12h6M13 17h6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }));
+}

package/dist-cjs/react/index.js

@@ -1,17 +1,19 @@
 "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");
+exports.UnsavedChangesDialog = exports.RichTextRenderer = exports.RichTextReadTitle = exports.createEditorOperation = exports.RichTextEditor = exports.RichTextDocumentSurface = exports.useEditorSession = exports.useEditorExitGuard = exports.EditorSessionProvider = void 0;
+var EditorSessionProvider_1 = require("./session/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");
+var RichTextDocumentSurface_1 = require("./editor/RichTextDocumentSurface");
 Object.defineProperty(exports, "RichTextDocumentSurface", { enumerable: true, get: function () { return RichTextDocumentSurface_1.RichTextDocumentSurface; } });
-var RichTextEditor_1 = require("./RichTextEditor");
+var RichTextEditor_1 = require("./editor/RichTextEditor");
 Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return RichTextEditor_1.RichTextEditor; } });
-var RichTextTitleInput_1 = require("./RichTextTitleInput");
+var editorOperations_1 = require("./editor/editorOperations");
+Object.defineProperty(exports, "createEditorOperation", { enumerable: true, get: function () { return editorOperations_1.createEditorOperation; } });
+var RichTextTitleInput_1 = require("./editor/RichTextTitleInput");
 Object.defineProperty(exports, "RichTextReadTitle", { enumerable: true, get: function () { return RichTextTitleInput_1.RichTextReadTitle; } });
-var RichTextRenderer_1 = require("./RichTextRenderer");
+var RichTextRenderer_1 = require("./editor/RichTextRenderer");
 Object.defineProperty(exports, "RichTextRenderer", { enumerable: true, get: function () { return RichTextRenderer_1.RichTextRenderer; } });
-var UnsavedChangesDialog_1 = require("./UnsavedChangesDialog");
+var UnsavedChangesDialog_1 = require("./session/UnsavedChangesDialog");
 Object.defineProperty(exports, "UnsavedChangesDialog", { enumerable: true, get: function () { return UnsavedChangesDialog_1.UnsavedChangesDialog; } });

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

@@ -6,9 +6,9 @@ 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 session_1 = require("../../session/session");
+const sessionRegistry_1 = require("../../session/sessionRegistry");
+const session_2 = require("../../session/session");
 const UnsavedChangesDialog_1 = require("./UnsavedChangesDialog");
 const EditorSessionRegistryContext = (0, react_1.createContext)(null);
 function EditorSessionProvider({ children, }) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnsavedChangesDialog = UnsavedChangesDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const RichTextStyles_1 = require("./RichTextStyles");
+const RichTextStyles_1 = require("../styles/RichTextStyles");
 function UnsavedChangesDialog({ error, onDiscardAndLeave, onSaveAndLeave, onStay, open, saving, }) {
     if (!open) {
         return null;