@editability/editor-lexical 0.1.2 → 0.1.4

package/dist/overlay.js

@@ -1,18 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { diffWords, fnv1a64, normalizeTextContent, sanitizeHref } from "@editability/shared";
-import { createActiveEditor } from "./lexical/editor.js";
+import { createActiveEditor, } from "./lexical/editor.js";
 const DRAFT_KEY = "editability:draft:v1";
+const EMPTY_FORMAT_STATE = {
+    bold: false,
+    italic: false,
+    link: false,
+    blockType: "paragraph",
+    listType: null,
+};
 export function OverlayApp({ apiBase, googleClientId }) {
     const [user, setUser] = useState(null);
     const [loading, setLoading] = useState(true);
     const [draft, setDraft] = useState(() => loadDraft());
     const [activeId, setActiveId] = useState(null);
     const [activeEditor, setActiveEditor] = useState(null);
+    const [formatState, setFormatState] = useState(EMPTY_FORMAT_STATE);
+    const [historyState, setHistoryState] = useState({ canUndo: false, canRedo: false });
     const [publishOpen, setPublishOpen] = useState(false);
     const [message, setMessage] = useState("");
     const [error, setError] = useState(null);
     const [publishing, setPublishing] = useState(false);
+    const [linkOpen, setLinkOpen] = useState(false);
+    const [linkUrl, setLinkUrl] = useState("");
+    const [linkError, setLinkError] = useState(null);
+    const [blockMenuOpen, setBlockMenuOpen] = useState(false);
     const observerRef = useRef(null);
     const applyingRef = useRef(false);
     const applyScheduledRef = useRef(null);
@@ -22,6 +35,9 @@ export function OverlayApp({ apiBase, googleClientId }) {
     const activeSnapshotRef = useRef(null);
     const activeChangeRef = useRef(null);
     const draftRef = useRef(draft);
+    const linkInputRef = useRef(null);
+    const linkPanelRef = useRef(null);
+    const blockMenuRef = useRef(null);
     const changes = useMemo(() => Object.values(draft.changes), [draft]);
     useEffect(() => {
         ensureStyles();
@@ -42,6 +58,46 @@ export function OverlayApp({ apiBase, googleClientId }) {
     useEffect(() => {
         activeIdRef.current = activeId;
     }, [activeId]);
+    useEffect(() => {
+        if (!activeEditor) {
+            setFormatState(EMPTY_FORMAT_STATE);
+            setHistoryState({ canUndo: false, canRedo: false });
+        }
+    }, [activeEditor]);
+    useEffect(() => {
+        if (!linkOpen) {
+            return;
+        }
+        const id = window.requestAnimationFrame(() => linkInputRef.current?.focus());
+        return () => window.cancelAnimationFrame(id);
+    }, [linkOpen]);
+    useEffect(() => {
+        if (!linkOpen && !blockMenuOpen) {
+            return;
+        }
+        const handler = (event) => {
+            const target = event.target;
+            if (!target) {
+                return;
+            }
+            if (linkOpen && linkPanelRef.current?.contains(target)) {
+                return;
+            }
+            if (blockMenuOpen && blockMenuRef.current?.contains(target)) {
+                return;
+            }
+            setLinkOpen(false);
+            setBlockMenuOpen(false);
+        };
+        document.addEventListener("mousedown", handler, true);
+        return () => document.removeEventListener("mousedown", handler, true);
+    }, [linkOpen, blockMenuOpen]);
+    useEffect(() => {
+        setLinkOpen(false);
+        setBlockMenuOpen(false);
+        setLinkUrl("");
+        setLinkError(null);
+    }, [activeId]);
     useEffect(() => {
         document.body.classList.toggle("editability-authenticated", Boolean(user));
         return () => {
@@ -90,6 +146,11 @@ export function OverlayApp({ apiBase, googleClientId }) {
             if (!id) {
                 return;
             }
+            const nestedInteractive = findNestedInteractive(block);
+            if (nestedInteractive) {
+                console.warn("Editability: blocked editing for element containing interactive children. Wrap only text nodes or add nested <Editability> for interactive labels.");
+                return;
+            }
             if (activeId === id) {
                 return;
             }
@@ -98,10 +159,18 @@ export function OverlayApp({ apiBase, googleClientId }) {
             }
             const existing = draftRef.current.changes[id];
             activeSnapshotRef.current = { id, html: existing ? existing.originalHtml : block.innerHTML };
-            const { editor, change } = activateBlock(block, id, draftRef.current, setDraft, setActiveId, setActiveEditor);
+            const { editor, change } = activateBlock(block, id, draftRef.current, setDraft, setActiveId, setActiveEditor, setFormatState, setHistoryState);
             activeEditorRef.current = editor;
             activeElementRef.current = block;
             activeChangeRef.current = change;
+            const clickPoint = { x: event.clientX, y: event.clientY };
+            window.requestAnimationFrame(() => {
+                if (activeElementRef.current !== block) {
+                    return;
+                }
+                placeCaretAtPoint(block, clickPoint);
+                editor.editor.focus();
+            });
         };
         const linkGuard = (event) => {
             const target = event.target;
@@ -137,6 +206,66 @@ export function OverlayApp({ apiBase, googleClientId }) {
             destroyActiveEditor("done", true, draftRef, activeEditorRef, activeElementRef, activeIdRef, activeSnapshotRef, activeChangeRef, setDraft, setActiveEditor, setActiveId, observerRef, applyingRef);
         }
     };
+    const isBlockMode = activeEditor?.mode === "block";
+    const blockLabel = formatState.blockType === "paragraph"
+        ? "Paragraph"
+        : formatState.blockType === "blockquote"
+            ? "Quote"
+            : `Heading ${formatState.blockType.replace("h", "")}`;
+    const handleBlockSelect = (type) => {
+        if (!activeEditor || !isBlockMode) {
+            return;
+        }
+        activeEditor.setBlockType(type);
+        setBlockMenuOpen(false);
+    };
+    const handleListToggle = (type) => {
+        if (!activeEditor || !isBlockMode) {
+            return;
+        }
+        activeEditor.toggleList(type);
+    };
+    const handleLinkOpen = () => {
+        if (!activeEditor) {
+            return;
+        }
+        activeEditor.captureSelection();
+        const existingUrl = activeEditor.getSelectedLinkUrl();
+        setLinkUrl(existingUrl ?? "");
+        setLinkError(null);
+        setLinkOpen(true);
+    };
+    const handleLinkApply = () => {
+        if (!activeEditor) {
+            return;
+        }
+        const trimmed = linkUrl.trim();
+        if (!trimmed) {
+            activeEditor.setLink(null);
+            setLinkOpen(false);
+            setLinkUrl("");
+            setLinkError(null);
+            return;
+        }
+        const sanitized = sanitizeHref(trimmed);
+        if (!sanitized) {
+            setLinkError("Please enter a valid URL.");
+            return;
+        }
+        activeEditor.setLink(sanitized.href);
+        setLinkOpen(false);
+        setLinkUrl("");
+        setLinkError(null);
+    };
+    const handleLinkRemove = () => {
+        if (!activeEditor) {
+            return;
+        }
+        activeEditor.setLink(null);
+        setLinkOpen(false);
+        setLinkUrl("");
+        setLinkError(null);
+    };
     const handlePublish = async () => {
         if (publishing) {
             return;
@@ -221,25 +350,30 @@ export function OverlayApp({ apiBase, googleClientId }) {
     if (!user) {
         return (_jsx("div", { className: "editability-overlay", children: _jsxs("div", { className: "editability-login", children: [_jsx("h2", { children: "Sign in to edit" }), _jsx("p", { children: "Only allowlisted editors can enter edit mode." }), _jsx(LoginPanel, { apiBase: apiBase, googleClientId: googleClientId, onLogin: setUser, loading: false }), _jsx("button", { className: "editability-btn", onClick: handleExit, children: "Exit" })] }) }));
     }
-    return (_jsxs("div", { className: "editability-overlay", children: [_jsxs("div", { className: "editability-bar", children: [_jsxs("div", { className: "editability-left", children: [_jsx("span", { className: "editability-pill", children: "Editability" }), activeId ? _jsx("span", { className: "editability-status", children: "Editing" }) : _jsx("span", { className: "editability-status", children: "Select text" })] }), _jsxs("div", { className: "editability-center", children: [_jsx("button", { className: "editability-btn", onClick: () => activeEditor?.undo(), disabled: !activeEditor, children: "Undo" }), _jsx("button", { className: "editability-btn", onClick: () => activeEditor?.redo(), disabled: !activeEditor, children: "Redo" }), _jsx("button", { className: "editability-btn", onClick: () => activeEditor?.setBold(), disabled: !activeEditor, children: "Bold" }), _jsx("button", { className: "editability-btn", onClick: () => activeEditor?.setItalic(), disabled: !activeEditor, children: "Italic" }), _jsx("button", { className: "editability-btn", onClick: () => {
-                                    if (!activeEditor)
-                                        return;
-                                    activeEditor.captureSelection();
-                                    const url = prompt("Link URL (leave blank to remove):");
-                                    if (url === null)
-                                        return;
-                                    const normalized = url.trim();
-                                    if (!normalized) {
-                                        activeEditor.setLink(null);
-                                        return;
-                                    }
-                                    const sanitized = sanitizeHref(normalized);
-                                    if (!sanitized) {
-                                        alert("Invalid link.");
-                                        return;
-                                    }
-                                    activeEditor.setLink(sanitized.href);
-                                }, disabled: !activeEditor, children: "Link" }), _jsx("button", { className: "editability-btn", onClick: handleDone, disabled: !activeEditor, children: "Done" })] }), _jsxs("div", { className: "editability-right", children: [_jsx("button", { className: "editability-btn", onClick: () => setPublishOpen(true), disabled: changeCount === 0 || publishing, children: publishing ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "editability-spinner", "aria-hidden": true }), "Publishing\u2026"] })) : (`Publish (${changeCount})`) }), _jsx("button", { className: "editability-btn", onClick: handleDiscard, disabled: changeCount === 0, children: "Discard" }), user ? (_jsxs("div", { className: "editability-user", children: [user.picture ? _jsx("img", { src: user.picture, alt: "" }) : null, _jsx("span", { children: user.name ?? user.email }), _jsx("button", { className: "editability-btn", onClick: handleLogout, children: "Log out" })] })) : (_jsx(LoginPanel, { apiBase: apiBase, googleClientId: googleClientId, onLogin: setUser, loading: loading })), _jsx("button", { className: "editability-btn", onClick: handleExit, children: "Exit" })] })] }), publishOpen ? (_jsx(PublishModal, { changes: changes, message: message, setMessage: setMessage, onClose: () => setPublishOpen(false), onPublish: handlePublish, error: error, publishing: publishing })) : null] }));
+    return (_jsxs("div", { className: "editability-overlay", children: [_jsxs("div", { className: "editability-bar", children: [_jsxs("div", { className: "editability-left", children: [_jsxs("div", { className: "editability-brand", children: [_jsx("span", { className: "editability-pill", children: "Editability" }), activeId ? _jsx("span", { className: "editability-status", children: "Editing" }) : _jsx("span", { className: "editability-status", children: "Select text" })] }), _jsxs("span", { className: `editability-badge ${changeCount > 0 ? "editability-badge-active" : ""}`, children: [changeCount, " ", changeCount === 1 ? "change" : "changes"] })] }), _jsxs("div", { className: "editability-center", children: [_jsxs("div", { className: "editability-group", children: [_jsx("button", { className: "editability-btn editability-icon-btn", onClick: () => activeEditor?.undo(), disabled: !activeEditor || !historyState.canUndo, "aria-label": "Undo", children: _jsx(IconUndo, {}) }), _jsx("button", { className: "editability-btn editability-icon-btn", onClick: () => activeEditor?.redo(), disabled: !activeEditor || !historyState.canRedo, "aria-label": "Redo", children: _jsx(IconRedo, {}) })] }), _jsx("div", { className: "editability-divider" }), _jsx("div", { className: "editability-group", children: _jsxs("div", { className: "editability-popover-anchor", children: [_jsxs("button", { className: "editability-btn editability-block-btn", onClick: () => setBlockMenuOpen((open) => !open), disabled: !activeEditor || !isBlockMode, "aria-haspopup": "menu", "aria-expanded": blockMenuOpen, children: [_jsx("span", { children: blockLabel }), _jsx(IconChevron, {})] }), blockMenuOpen ? (_jsxs("div", { className: "editability-menu", ref: blockMenuRef, role: "menu", children: [_jsxs("button", { className: `editability-menu-item ${formatState.blockType === "paragraph" ? "active" : ""}`, onClick: () => handleBlockSelect("paragraph"), role: "menuitem", children: [_jsx(IconParagraph, {}), _jsx("span", { children: "Paragraph" })] }), _jsxs("button", { className: `editability-menu-item ${formatState.blockType === "h1" ? "active" : ""}`, onClick: () => handleBlockSelect("h1"), role: "menuitem", children: [_jsx(IconHeading, { label: "H1" }), _jsx("span", { children: "Heading 1" })] }), _jsxs("button", { className: `editability-menu-item ${formatState.blockType === "h2" ? "active" : ""}`, onClick: () => handleBlockSelect("h2"), role: "menuitem", children: [_jsx(IconHeading, { label: "H2" }), _jsx("span", { children: "Heading 2" })] }), _jsxs("button", { className: `editability-menu-item ${formatState.blockType === "h3" ? "active" : ""}`, onClick: () => handleBlockSelect("h3"), role: "menuitem", children: [_jsx(IconHeading, { label: "H3" }), _jsx("span", { children: "Heading 3" })] }), _jsxs("button", { className: `editability-menu-item ${formatState.blockType === "h4" ? "active" : ""}`, onClick: () => handleBlockSelect("h4"), role: "menuitem", children: [_jsx(IconHeading, { label: "H4" }), _jsx("span", { children: "Heading 4" })] }), _jsxs("button", { className: `editability-menu-item ${formatState.blockType === "h5" ? "active" : ""}`, onClick: () => handleBlockSelect("h5"), role: "menuitem", children: [_jsx(IconHeading, { label: "H5" }), _jsx("span", { children: "Heading 5" })] }), _jsxs("button", { className: `editability-menu-item ${formatState.blockType === "h6" ? "active" : ""}`, onClick: () => handleBlockSelect("h6"), role: "menuitem", children: [_jsx(IconHeading, { label: "H6" }), _jsx("span", { children: "Heading 6" })] }), _jsxs("button", { className: `editability-menu-item ${formatState.blockType === "blockquote" ? "active" : ""}`, onClick: () => handleBlockSelect("blockquote"), role: "menuitem", children: [_jsx(IconQuote, {}), _jsx("span", { children: "Quote" })] })] })) : null] }) }), _jsxs("div", { className: "editability-group", children: [_jsx("button", { className: `editability-btn editability-icon-btn ${formatState.listType === "bullet" ? "active" : ""}`, onClick: () => handleListToggle("bullet"), disabled: !activeEditor || !isBlockMode, "aria-pressed": formatState.listType === "bullet", "aria-label": "Bulleted list", children: _jsx(IconListBullet, {}) }), _jsx("button", { className: `editability-btn editability-icon-btn ${formatState.listType === "number" ? "active" : ""}`, onClick: () => handleListToggle("number"), disabled: !activeEditor || !isBlockMode, "aria-pressed": formatState.listType === "number", "aria-label": "Numbered list", children: _jsx(IconListNumber, {}) })] }), _jsxs("div", { className: "editability-group", children: [_jsx("button", { className: `editability-btn editability-icon-btn ${formatState.bold ? "active" : ""}`, onClick: () => activeEditor?.setBold(), disabled: !activeEditor, "aria-pressed": formatState.bold, "aria-label": "Bold", children: _jsx(IconBold, {}) }), _jsx("button", { className: `editability-btn editability-icon-btn ${formatState.italic ? "active" : ""}`, onClick: () => activeEditor?.setItalic(), disabled: !activeEditor, "aria-pressed": formatState.italic, "aria-label": "Italic", children: _jsx(IconItalic, {}) }), _jsxs("div", { className: "editability-popover-anchor", children: [_jsx("button", { className: `editability-btn editability-icon-btn ${formatState.link ? "active" : ""}`, onMouseDown: (event) => {
+                                                    if (!activeEditor) {
+                                                        return;
+                                                    }
+                                                    event.preventDefault();
+                                                    activeEditor.captureSelection();
+                                                }, onClick: () => {
+                                                    if (!activeEditor)
+                                                        return;
+                                                    if (linkOpen) {
+                                                        setLinkOpen(false);
+                                                        return;
+                                                    }
+                                                    handleLinkOpen();
+                                                }, disabled: !activeEditor, "aria-pressed": formatState.link, "aria-label": "Link", children: _jsx(IconLink, {}) }), linkOpen ? (_jsxs("div", { className: "editability-popover", ref: linkPanelRef, children: [_jsx("div", { className: "editability-popover-title", children: "Add link" }), _jsx("input", { ref: linkInputRef, className: "editability-input", placeholder: "https:// or /path", value: linkUrl, onChange: (event) => setLinkUrl(event.target.value), onKeyDown: (event) => {
+                                                            if (event.key === "Enter") {
+                                                                event.preventDefault();
+                                                                handleLinkApply();
+                                                            }
+                                                            if (event.key === "Escape") {
+                                                                setLinkOpen(false);
+                                                                setLinkError(null);
+                                                            }
+                                                        } }), linkError ? _jsx("div", { className: "editability-error editability-error-inline", children: linkError }) : null, _jsxs("div", { className: "editability-popover-actions", children: [_jsx("button", { className: "editability-btn editability-primary", onClick: handleLinkApply, children: "Apply" }), _jsx("button", { className: "editability-btn editability-ghost", onClick: handleLinkRemove, children: "Remove" })] })] })) : null] })] }), _jsx("button", { className: "editability-btn editability-cta", onClick: handleDone, disabled: !activeEditor, children: "Done" })] }), _jsxs("div", { className: "editability-right", children: [_jsx("button", { className: "editability-btn editability-primary", onClick: () => setPublishOpen(true), disabled: changeCount === 0 || publishing, children: publishing ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "editability-spinner", "aria-hidden": true }), "Publishing\u2026"] })) : (`Publish (${changeCount})`) }), _jsx("button", { className: "editability-btn", onClick: handleDiscard, disabled: changeCount === 0, children: "Discard" }), user ? (_jsxs("div", { className: "editability-user", children: [user.picture ? _jsx("img", { src: user.picture, alt: "" }) : null, _jsx("span", { children: user.name ?? user.email }), _jsx("button", { className: "editability-btn", onClick: handleLogout, children: "Log out" })] })) : (_jsx(LoginPanel, { apiBase: apiBase, googleClientId: googleClientId, onLogin: setUser, loading: loading })), _jsx("button", { className: "editability-btn editability-ghost", onClick: handleExit, children: "Exit" })] })] }), publishOpen ? (_jsx(PublishModal, { changes: changes, message: message, setMessage: setMessage, onClose: () => setPublishOpen(false), onPublish: handlePublish, error: error, publishing: publishing })) : null] }));
 }
 function LoginPanel({ apiBase, googleClientId, onLogin, loading }) {
     const containerRef = useRef(null);
@@ -303,19 +437,20 @@ function buildLabel(change) {
     const tag = change.tag.toLowerCase();
     return `${tag.toUpperCase()}: ${snippet}${change.originalText.length > 40 ? "…" : ""}`;
 }
-function activateBlock(element, id, draft, setDraft, setActiveId, setActiveEditor) {
+function activateBlock(element, id, draft, setDraft, setActiveId, setActiveEditor, setFormatState, setHistoryState) {
     const mode = determineMode(element);
     const existing = draft.changes[id];
     const originalHtml = existing?.originalHtml ?? element.innerHTML;
     const originalText = existing?.originalText ?? normalizeTextContent(element.textContent ?? "");
     const datasetFingerprint = element.dataset.editabilityFp;
     const fingerprint = datasetFingerprint ?? existing?.fingerprint ?? fnv1a64(originalText);
+    const baselineAst = htmlToAst(originalHtml, mode);
     const current = existing
         ? { ...existing, fingerprint }
         : {
             id,
             mode,
-            ast: htmlToAst(originalHtml, mode),
+            ast: baselineAst,
             fingerprint,
             originalHtml,
             originalText,
@@ -328,11 +463,8 @@ function activateBlock(element, id, draft, setDraft, setActiveId, setActiveEdito
         initialHtml: existing ? renderAstToHtml(existing.ast) : originalHtml,
         onUpdate: (ast) => {
             const next = { ...current, ast, lastPath: window.location.pathname };
-            const afterHtml = renderAstToHtml(ast);
-            const normalizedOriginal = normalizeHtml(current.originalHtml);
-            const normalizedAfter = normalizeHtml(afterHtml);
             const updated = { ...draft, updatedAt: Date.now(), changes: { ...draft.changes } };
-            if (normalizedOriginal === normalizedAfter) {
+            if (astEquals(ast, baselineAst)) {
                 delete updated.changes[id];
             }
             else {
@@ -341,6 +473,8 @@ function activateBlock(element, id, draft, setDraft, setActiveId, setActiveEdito
             saveDraft(updated);
             setDraft(updated);
         },
+        onFormat: setFormatState,
+        onHistory: setHistoryState,
     });
     setActiveId(id);
     setActiveEditor(active);
@@ -348,7 +482,16 @@ function activateBlock(element, id, draft, setDraft, setActiveId, setActiveEdito
 }
 function determineMode(element) {
     const tag = element.tagName.toLowerCase();
-    if (["div", "section", "article", "main", "aside", "nav", "header", "footer"].includes(tag)) {
+    if ([
+        "div",
+        "section",
+        "article",
+        "main",
+        "aside",
+        "nav",
+        "header",
+        "footer",
+    ].includes(tag)) {
         return "block";
     }
     return "inline";
@@ -435,7 +578,121 @@ function renderAstToHtml(ast) {
     if (ast.mode === "inline") {
         return ast.nodes.map(renderInlineNode).join("");
     }
-    return ast.nodes.map((block) => `<p>${block.children.map(renderInlineNode).join("")}</p>`).join("");
+    return ast.nodes.map(renderBlockNode).join("");
+}
+function renderBlockNode(block) {
+    switch (block.type) {
+        case "paragraph":
+            return `<p>${block.children.map(renderInlineNode).join("")}</p>`;
+        case "heading": {
+            const level = Math.min(6, Math.max(1, block.level));
+            return `<h${level}>${block.children.map(renderInlineNode).join("")}</h${level}>`;
+        }
+        case "blockquote":
+            return `<blockquote>${block.children.map(renderInlineNode).join("")}</blockquote>`;
+        case "list": {
+            const tag = block.ordered ? "ol" : "ul";
+            const items = block.items
+                .map((item) => `<li>${item.map(renderInlineNode).join("")}</li>`)
+                .join("");
+            return `<${tag}>${items}</${tag}>`;
+        }
+        default:
+            return "";
+    }
+}
+function isInlineAst(ast) {
+    return ast.mode === "inline";
+}
+function isBlockAst(ast) {
+    return ast.mode === "block";
+}
+function astEquals(a, b) {
+    if (isInlineAst(a) && isInlineAst(b)) {
+        return inlineNodesEqual(a.nodes, b.nodes);
+    }
+    if (isBlockAst(a) && isBlockAst(b)) {
+        return blockNodesEqual(a.nodes, b.nodes);
+    }
+    return false;
+}
+function blockNodesEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    return a.every((node, idx) => {
+        const right = b[idx];
+        if (node.type !== right.type) {
+            return false;
+        }
+        switch (node.type) {
+            case "paragraph":
+            case "blockquote":
+                return inlineNodesEqual(node.children, right.children);
+            case "heading":
+                return (node.level === right.level &&
+                    inlineNodesEqual(node.children, right.children));
+            case "list":
+                return (node.ordered === right.ordered &&
+                    listItemsEqual(node.items, right.items));
+            default:
+                return false;
+        }
+    });
+}
+function listItemsEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i += 1) {
+        if (!inlineNodesEqual(a[i], b[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+function inlineNodesEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i += 1) {
+        const left = a[i];
+        const right = b[i];
+        if (left.type !== right.type) {
+            return false;
+        }
+        switch (left.type) {
+            case "text": {
+                if (right.type !== "text") {
+                    return false;
+                }
+                if (left.text !== right.text ||
+                    Boolean(left.bold) !== Boolean(right.bold) ||
+                    Boolean(left.italic) !== Boolean(right.italic)) {
+                    return false;
+                }
+                break;
+            }
+            case "linebreak": {
+                if (right.type !== "linebreak") {
+                    return false;
+                }
+                break;
+            }
+            case "link": {
+                if (right.type !== "link") {
+                    return false;
+                }
+                if (left.href !== right.href || !inlineNodesEqual(left.children, right.children)) {
+                    return false;
+                }
+                break;
+            }
+            default:
+                return false;
+        }
+    }
+    return true;
 }
 function renderInlineNode(node) {
     if (node.type === "text") {
@@ -465,6 +722,24 @@ function renderInlineNode(node) {
     }
     return "";
 }
+const BLOCKED_INTERACTIVE_SELECTOR = "button, input, textarea, select, option, label, details, summary";
+function findNestedInteractive(root) {
+    if (root.matches(BLOCKED_INTERACTIVE_SELECTOR)) {
+        return root;
+    }
+    const matches = root.querySelectorAll(BLOCKED_INTERACTIVE_SELECTOR);
+    for (const el of Array.from(matches)) {
+        if (el === root) {
+            continue;
+        }
+        const editableAncestor = el.closest("[data-editability-id]");
+        if (editableAncestor && editableAncestor !== root) {
+            continue;
+        }
+        return el;
+    }
+    return null;
+}
 function escapeHtml(value) {
     return value
         .replace(/&/g, "&amp;")
@@ -472,14 +747,23 @@ function escapeHtml(value) {
         .replace(/>/g, "&gt;")
         .replace(/\"/g, "&quot;");
 }
-function normalizeHtml(html) {
-    return html.replace(/\s+/g, " ").trim();
-}
 function astToText(ast) {
     if (ast.mode === "inline") {
         return ast.nodes.map(nodeToText).join("");
     }
-    return ast.nodes.map((block) => block.children.map(nodeToText).join(" ")).join(" ");
+    return ast.nodes.map(blockToText).join(" ");
+}
+function blockToText(block) {
+    switch (block.type) {
+        case "paragraph":
+        case "heading":
+        case "blockquote":
+            return block.children.map(nodeToText).join(" ");
+        case "list":
+            return block.items.map((item) => item.map(nodeToText).join(" ")).join(" ");
+        default:
+            return "";
+    }
 }
 function nodeToText(node) {
     if (node.type === "text") {
@@ -499,26 +783,96 @@ function htmlToAst(html, mode) {
     if (mode === "inline") {
         return { mode: "inline", nodes: collectInline(wrapper) };
     }
-    const blocks = [];
-    const paragraphs = wrapper.querySelectorAll("p");
-    if (paragraphs.length === 0) {
-        blocks.push({ type: "paragraph", children: collectInline(wrapper) });
-    }
-    else {
-        paragraphs.forEach((p) => {
-            blocks.push({ type: "paragraph", children: collectInline(p) });
-        });
+    const blocks = collectBlocks(wrapper);
+    if (blocks.length === 0) {
+        const inline = collectInline(wrapper);
+        return { mode: "block", nodes: [{ type: "paragraph", children: inline }] };
     }
     return { mode: "block", nodes: blocks };
 }
+function collectBlocks(wrapper) {
+    const blocks = [];
+    let pendingInline = [];
+    const flushInline = () => {
+        if (!hasInlineContent(pendingInline)) {
+            pendingInline = [];
+            return;
+        }
+        blocks.push({ type: "paragraph", children: pendingInline });
+        pendingInline = [];
+    };
+    wrapper.childNodes.forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            pendingInline.push(...collectInlineFromText(node.textContent ?? ""));
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+        }
+        const element = node;
+        const tag = element.tagName.toLowerCase();
+        if (tag === "p") {
+            flushInline();
+            blocks.push({ type: "paragraph", children: collectInline(element) });
+            return;
+        }
+        if (tag === "blockquote") {
+            flushInline();
+            blocks.push({ type: "blockquote", children: collectInline(element) });
+            return;
+        }
+        if (tag === "ul" || tag === "ol") {
+            flushInline();
+            blocks.push({ type: "list", ordered: tag === "ol", items: collectListItems(element) });
+            return;
+        }
+        if (isHeadingTag(tag)) {
+            flushInline();
+            blocks.push({
+                type: "heading",
+                level: Math.min(6, Math.max(1, Number(tag.slice(1)))),
+                children: collectInline(element),
+            });
+            return;
+        }
+        pendingInline.push(...collectInline(element));
+    });
+    flushInline();
+    return blocks;
+}
+function collectListItems(list) {
+    const items = [];
+    list.childNodes.forEach((child) => {
+        if (child.nodeType !== Node.ELEMENT_NODE) {
+            return;
+        }
+        const element = child;
+        if (element.tagName.toLowerCase() !== "li") {
+            return;
+        }
+        const onlyParagraph = element.children.length === 1 && element.children[0].tagName.toLowerCase() === "p";
+        const target = onlyParagraph ? element.children[0] : element;
+        items.push(collectInline(target));
+    });
+    return items;
+}
+function isHeadingTag(tag) {
+    return /^h[1-6]$/.test(tag);
+}
+function hasInlineContent(nodes) {
+    return normalizeTextContent(nodes.map(nodeToText).join("")).length > 0;
+}
+function collectInlineFromText(text) {
+    if (!text) {
+        return [];
+    }
+    return [{ type: "text", text }];
+}
 function collectInline(root) {
     const nodes = [];
     root.childNodes.forEach((node) => {
         if (node.nodeType === Node.TEXT_NODE) {
-            const text = node.textContent ?? "";
-            if (text) {
-                nodes.push({ type: "text", text });
-            }
+            nodes.push(...collectInlineFromText(node.textContent ?? ""));
             return;
         }
         if (node.nodeType !== Node.ELEMENT_NODE) {
@@ -589,15 +943,13 @@ function persistActiveDraft(draftRef, activeChangeRef, editor, setDraft) {
         return;
     }
     const ast = editor.getAst();
-    const afterHtml = renderAstToHtml(ast);
-    const normalizedOriginal = normalizeHtml(change.originalHtml);
-    const normalizedAfter = normalizeHtml(afterHtml);
+    const baselineAst = htmlToAst(change.originalHtml, change.mode);
     const updated = {
         ...draftRef.current,
         updatedAt: Date.now(),
         changes: { ...draftRef.current.changes },
     };
-    if (normalizedOriginal === normalizedAfter) {
+    if (astEquals(ast, baselineAst)) {
         delete updated.changes[change.id];
     }
     else {
@@ -615,6 +967,47 @@ async function fetchMe(apiBase) {
     const data = (await response.json());
     return data.user;
 }
+function getRangeFromPoint(point) {
+    const doc = document;
+    if (doc.caretRangeFromPoint) {
+        return doc.caretRangeFromPoint(point.x, point.y);
+    }
+    if (doc.caretPositionFromPoint) {
+        const position = doc.caretPositionFromPoint(point.x, point.y);
+        if (!position) {
+            return null;
+        }
+        const range = document.createRange();
+        range.setStart(position.offsetNode, position.offset);
+        range.collapse(true);
+        return range;
+    }
+    return null;
+}
+function placeCaretAtPoint(container, point) {
+    const range = getRangeFromPoint(point);
+    if (!range || !container.contains(range.startContainer)) {
+        placeCaretAtEnd(container);
+        return;
+    }
+    const selection = window.getSelection();
+    if (!selection) {
+        return;
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function placeCaretAtEnd(container) {
+    const selection = window.getSelection();
+    if (!selection) {
+        return;
+    }
+    const range = document.createRange();
+    range.selectNodeContents(container);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
 function ensureStyles() {
     if (document.getElementById("editability-style")) {
         return;
@@ -622,37 +1015,85 @@ function ensureStyles() {
     const style = document.createElement("style");
     style.id = "editability-style";
     style.textContent = `
-    .editability-authenticated [data-editability-id]:hover { outline: 2px dashed #2f855a; outline-offset: 2px; cursor: text; }
-    .editability-authenticated [data-editability-id].editability-dirty { outline: 2px solid #3182ce; outline-offset: 2px; }
-    .editability-overlay { position: fixed; inset: auto 0 0 0; z-index: 9999; font-family: ui-sans-serif, system-ui; }
-    .editability-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: #0f172a; color: #f8fafc; box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.25); }
-    .editability-left, .editability-center, .editability-right { display: flex; align-items: center; gap: 8px; }
-    .editability-pill { padding: 4px 10px; background: #38bdf8; color: #0f172a; border-radius: 999px; font-weight: 600; }
-    .editability-status { opacity: 0.8; }
-    .editability-btn { padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(148, 163, 184, 0.3); background: #1e293b; color: #f8fafc; font-size: 13px; }
-    .editability-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    .editability-btn:hover:not(:disabled) { background: #334155; }
-    .editability-primary { background: #38bdf8; color: #0f172a; border-color: transparent; }
+    @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");
+    :root {
+      --editability-bg: #0b1020;
+      --editability-surface: rgba(11, 18, 38, 0.92);
+      --editability-surface-soft: rgba(14, 24, 45, 0.9);
+      --editability-border: rgba(148, 163, 184, 0.28);
+      --editability-accent: #5eead4;
+      --editability-accent-strong: #38bdf8;
+      --editability-text: #f8fafc;
+      --editability-muted: #94a3b8;
+    }
+    .editability-authenticated [data-editability-id]:hover { outline: 2px dashed rgba(94, 234, 212, 0.9); outline-offset: 2px; cursor: text; }
+    .editability-authenticated [data-editability-id].editability-dirty { outline: 2px solid rgba(56, 189, 248, 0.9); outline-offset: 2px; }
+    .editability-active.editability-inline p { margin: 0; padding: 0; display: inline; font: inherit; line-height: inherit; }
+    .editability-active.editability-inline p > span,
+    .editability-active.editability-inline span[data-lexical-text] { font: inherit; line-height: inherit; }
+    .editability-active.editability-block.editability-no-paragraphs p { margin: 0; padding: 0; font: inherit; line-height: inherit; }
+    .editability-active.editability-block.editability-no-paragraphs p > span,
+    .editability-active.editability-block.editability-no-paragraphs span[data-lexical-text] { font: inherit; line-height: inherit; }
+    .editability-overlay { position: fixed; inset: auto 0 0 0; z-index: 9999; font-family: "Space Grotesk", ui-sans-serif, system-ui; color: var(--editability-text); }
+    .editability-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: linear-gradient(135deg, rgba(11, 16, 32, 0.98), rgba(15, 23, 42, 0.92)); border-top: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 -14px 30px rgba(2, 6, 23, 0.5); backdrop-filter: blur(16px); }
+    .editability-left, .editability-center, .editability-right { display: flex; align-items: center; gap: 12px; }
+    .editability-left { min-width: 220px; }
+    .editability-center { flex: 1; flex-wrap: wrap; justify-content: center; }
+    .editability-right { justify-content: flex-end; min-width: 260px; }
+    .editability-brand { display: flex; align-items: center; gap: 8px; }
+    .editability-pill { padding: 4px 12px; background: var(--editability-accent); color: #05121d; border-radius: 999px; font-weight: 700; letter-spacing: 0.2px; }
+    .editability-status { font-size: 12px; opacity: 0.8; }
+    .editability-badge { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--editability-border); font-size: 12px; color: var(--editability-muted); }
+    .editability-badge-active { color: #bae6fd; border-color: rgba(56, 189, 248, 0.6); background: rgba(56, 189, 248, 0.15); }
+    .editability-group { display: flex; align-items: center; gap: 6px; }
+    .editability-divider { width: 1px; height: 26px; background: rgba(148, 163, 184, 0.2); }
+    .editability-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--editability-border); background: var(--editability-surface-soft); color: var(--editability-text); font-size: 12px; font-weight: 600; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
+    .editability-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+    .editability-btn:hover:not(:disabled) { background: rgba(30, 41, 59, 0.85); border-color: rgba(148, 163, 184, 0.45); transform: translateY(-1px); }
+    .editability-btn.active { background: rgba(94, 234, 212, 0.18); border-color: rgba(94, 234, 212, 0.6); color: var(--editability-accent); }
+    .editability-icon-btn { width: 36px; height: 34px; padding: 0; justify-content: center; }
+    .editability-icon { width: 18px; height: 18px; }
+    .editability-block-btn { min-width: 140px; justify-content: space-between; }
+    .editability-primary { background: var(--editability-accent); color: #05121d; border-color: transparent; }
+    .editability-cta { background: rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.5); color: #bae6fd; }
+    .editability-ghost { background: transparent; border-color: rgba(148, 163, 184, 0.2); color: var(--editability-muted); }
     .editability-spinner { display: inline-block; width: 12px; height: 12px; border-radius: 999px; border: 2px solid rgba(248, 250, 252, 0.4); border-top-color: #f8fafc; animation: editability-spin 0.8s linear infinite; margin-right: 6px; vertical-align: -2px; }
     @keyframes editability-spin { to { transform: rotate(360deg); } }
-    .editability-user { display: flex; align-items: center; gap: 8px; }
-    .editability-user img { width: 24px; height: 24px; border-radius: 999px; }
-    .editability-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; }
-    .editability-modal-content { background: #ffffff; color: #0f172a; padding: 24px; border-radius: 16px; width: min(900px, 90vw); max-height: 80vh; overflow: auto; }
+    .editability-popover-anchor { position: relative; }
+    .editability-menu { position: absolute; bottom: calc(100% + 10px); left: 0; top: auto; background: var(--editability-surface); border: 1px solid var(--editability-border); border-radius: 14px; padding: 6px; min-width: 180px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 18px 30px rgba(2, 6, 23, 0.45); z-index: 10001; }
+    .editability-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--editability-text); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
+    .editability-menu-item:hover { background: rgba(148, 163, 184, 0.12); }
+    .editability-menu-item.active { background: rgba(94, 234, 212, 0.2); border-color: rgba(94, 234, 212, 0.5); color: var(--editability-accent); }
+    .editability-popover { position: absolute; bottom: calc(100% + 10px); right: 0; top: auto; min-width: 240px; background: var(--editability-surface); border: 1px solid var(--editability-border); border-radius: 14px; padding: 12px; box-shadow: 0 18px 30px rgba(2, 6, 23, 0.45); display: flex; flex-direction: column; gap: 8px; z-index: 10001; }
+    .editability-popover-title { font-size: 12px; font-weight: 600; color: var(--editability-muted); }
+    .editability-input { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(15, 23, 42, 0.6); color: var(--editability-text); font-size: 13px; }
+    .editability-input:focus { outline: none; border-color: rgba(94, 234, 212, 0.7); box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.15); }
+    .editability-popover-actions { display: flex; gap: 8px; justify-content: flex-end; }
+    .editability-user { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.12); }
+    .editability-user img { width: 26px; height: 26px; border-radius: 999px; }
+    .editability-modal { position: fixed; inset: 0; background: rgba(11, 16, 32, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
+    .editability-modal-content { background: #ffffff; color: #0f172a; padding: 24px; border-radius: 18px; width: min(900px, 92vw); max-height: 80vh; overflow: auto; }
     .editability-change { border-bottom: 1px solid #e2e8f0; padding: 12px 0; }
     .editability-change-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
-    .editability-preview { background: #f8fafc; border-radius: 8px; padding: 12px; min-height: 40px; }
+    .editability-preview { background: #f8fafc; border-radius: 10px; padding: 12px; min-height: 40px; }
     .editability-diff { margin-top: 8px; font-size: 12px; }
     .editability-diff span.added { background: #bbf7d0; }
     .editability-diff span.removed { background: #fecaca; text-decoration: line-through; }
     .editability-muted { opacity: 0.7; }
     .editability-label { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
-    .editability-label input { padding: 8px; border-radius: 6px; border: 1px solid #cbd5f5; }
+    .editability-label input { padding: 8px; border-radius: 8px; border: 1px solid #cbd5f5; }
     .editability-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
     .editability-error { color: #dc2626; }
-    .editability-login { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(15, 23, 42, 0.8); color: #f8fafc; padding: 24px; text-align: center; }
-    .editability-login h2 { margin: 0; font-size: 20px; }
+    .editability-error-inline { font-size: 12px; color: #fecaca; }
+    .editability-login { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(circle at top, rgba(56, 189, 248, 0.2), rgba(11, 16, 32, 0.95)); color: #f8fafc; padding: 24px; text-align: center; }
+    .editability-login h2 { margin: 0; font-size: 22px; }
     .editability-login p { margin: 0; max-width: 360px; opacity: 0.9; }
+    @media (max-width: 900px) {
+      .editability-bar { flex-direction: column; align-items: stretch; }
+      .editability-left, .editability-right { justify-content: space-between; }
+      .editability-center { justify-content: flex-start; }
+      .editability-right { flex-wrap: wrap; }
+    }
   `;
     document.head.appendChild(style);
 }
@@ -671,4 +1112,40 @@ function loadGoogleScript() {
         document.head.appendChild(script);
     });
 }
+function Icon({ children, viewBox = "0 0 24 24", }) {
+    return (_jsx("svg", { className: "editability-icon", viewBox: viewBox, "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: children }));
+}
+function IconUndo() {
+    return (_jsxs(Icon, { children: [_jsx("path", { d: "M7 7l-4 5 4 5" }), _jsx("path", { d: "M3 12h9a6 6 0 0 1 0 12h-2" })] }));
+}
+function IconRedo() {
+    return (_jsxs(Icon, { children: [_jsx("path", { d: "M17 7l4 5-4 5" }), _jsx("path", { d: "M21 12h-9a6 6 0 0 0 0 12h2" })] }));
+}
+function IconChevron() {
+    return (_jsx(Icon, { children: _jsx("path", { d: "M6 9l6 6 6-6" }) }));
+}
+function IconBold() {
+    return (_jsxs(Icon, { children: [_jsx("path", { d: "M8 5h6a3 3 0 0 1 0 6H8z" }), _jsx("path", { d: "M8 11h7a3 3 0 0 1 0 6H8z" })] }));
+}
+function IconItalic() {
+    return (_jsxs(Icon, { children: [_jsx("path", { d: "M10 5h8" }), _jsx("path", { d: "M6 19h8" }), _jsx("path", { d: "M14 5l-4 14" })] }));
+}
+function IconLink() {
+    return (_jsxs(Icon, { children: [_jsx("path", { d: "M10 13a5 5 0 0 1 0-7l1.5-1.5a5 5 0 1 1 7 7L17 12" }), _jsx("path", { d: "M14 11a5 5 0 0 1 0 7L12.5 19.5a5 5 0 0 1-7-7L7 11" })] }));
+}
+function IconListBullet() {
+    return (_jsxs(Icon, { children: [_jsx("circle", { cx: "5", cy: "7", r: "1.5", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "5", cy: "12", r: "1.5", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "5", cy: "17", r: "1.5", fill: "currentColor", stroke: "none" }), _jsx("path", { d: "M9 7h10" }), _jsx("path", { d: "M9 12h10" }), _jsx("path", { d: "M9 17h10" })] }));
+}
+function IconListNumber() {
+    return (_jsxs(Icon, { children: [_jsx("text", { x: "3", y: "9", fontSize: "7", fontWeight: "600", fontFamily: "inherit", fill: "currentColor", stroke: "none", children: "1" }), _jsx("text", { x: "3", y: "17", fontSize: "7", fontWeight: "600", fontFamily: "inherit", fill: "currentColor", stroke: "none", children: "2" }), _jsx("path", { d: "M9 7h10" }), _jsx("path", { d: "M9 12h10" }), _jsx("path", { d: "M9 17h10" })] }));
+}
+function IconParagraph() {
+    return (_jsxs(Icon, { children: [_jsx("text", { x: "4", y: "16", fontSize: "9", fontWeight: "600", fontFamily: "inherit", fill: "currentColor", stroke: "none", children: "P" }), _jsx("path", { d: "M12 8h8" }), _jsx("path", { d: "M12 12h8" }), _jsx("path", { d: "M12 16h8" })] }));
+}
+function IconHeading({ label }) {
+    return (_jsxs(Icon, { children: [_jsx("text", { x: "3", y: "15", fontSize: "8", fontWeight: "700", fontFamily: "inherit", fill: "currentColor", stroke: "none", children: label }), _jsx("path", { d: "M12 8h8" }), _jsx("path", { d: "M12 12h8" }), _jsx("path", { d: "M12 16h8" })] }));
+}
+function IconQuote() {
+    return (_jsxs(Icon, { children: [_jsx("path", { d: "M6 8h5v5H6z" }), _jsx("path", { d: "M13 8h5v5h-5z" }), _jsx("path", { d: "M6 13a4 4 0 0 0 4 4" }), _jsx("path", { d: "M13 13a4 4 0 0 0 4 4" })] }));
+}
 //# sourceMappingURL=overlay.js.map