captify 0.1.18 → 1.1.0

package/dist/collaboration/components/document-editor.js

@@ -0,0 +1,915 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * DocumentEditor - Collaborative markdown editor with GitHub-style header
+ *
+ * Features Write/Preview tabs similar to GitHub's markdown editor.
+ * Write mode uses Y.Text for real-time collaborative markdown editing.
+ * Toolbar actions insert raw markdown syntax (e.g., # for headings, ** for bold).
+ * Preview mode shows rendered markdown content.
+ */
+import { COLLABORATION_UI_TEXT, COMMENT_HIGHLIGHT, DOCUMENT_EDITOR, DOCUMENT_TOC, INLINE_POPOVER, YJS_TEXT_KEY, } from "../collaboration.constants";
+import { buildMarkdownToc, encodeToBase64 } from "../collaboration.utilities";
+import { TextareaCommentHighlightOverlay } from "./textarea-comment-highlight-overlay";
+import { TextareaCursorOverlay } from "./textarea-cursor-overlay";
+import { useDocumentPresence } from "../hooks/use-document-presence";
+import { useMarkdownEditor } from "../hooks/use-markdown-editor";
+import { useYjs } from "../providers/yjs-provider";
+import { updateCommentRequest } from "../../comments/api/comments.client";
+import Comments from "../../comments/components/comments";
+import { Response } from "../../shared/components/ai-elements";
+import { Button } from "../../shared/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../../shared/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../shared/components/ui/popover";
+import { ScrollArea } from "../../shared/components/ui/scroll-area";
+import { Textarea } from "../../shared/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../../shared/components/ui/tooltip";
+import { cn } from "../../shared/utilities/cn";
+import { Bold, Code, FileCode, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlighter, ImageIcon, Italic, Link, List, ListChecks, ListOrdered, MessageSquarePlus, Minus, MoreHorizontal, Quote, RotateCcw, Strikethrough, Subscript, Superscript, Table2, X, } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import * as Y from "yjs";
+function ToolbarButton({ onClick, isActive = false, disabled = false, tooltip, icon, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onClick, onMouseDown: (e) => e.preventDefault(), disabled: disabled, "aria-label": tooltip, "aria-pressed": isActive, className: cn("inline-flex items-center justify-center rounded p-1.5", "text-foreground hover:text-muted-foreground hover:bg-muted/80", "transition-colors disabled:pointer-events-none disabled:opacity-50", isActive && "text-foreground bg-muted"), children: icon }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: tooltip })] }));
+}
+/**
+ * Vertical separator for toolbar
+ */
+function ToolbarSeparator() {
+    return _jsx("div", { className: "bg-border mx-2 h-4 w-px" });
+}
+/**
+ * All available markdown actions
+ */
+const MARKDOWN_ACTIONS = [
+    // Headings
+    {
+        id: "h1",
+        label: "Heading 1",
+        description: "# Large heading",
+        icon: Heading1,
+        category: "headings",
+        action: { type: "lineStart", prefix: "# " },
+    },
+    {
+        id: "h2",
+        label: "Heading 2",
+        description: "## Medium heading",
+        icon: Heading2,
+        category: "headings",
+        action: { type: "lineStart", prefix: "## " },
+    },
+    {
+        id: "h3",
+        label: "Heading 3",
+        description: "### Small heading",
+        icon: Heading3,
+        category: "headings",
+        action: { type: "lineStart", prefix: "### " },
+    },
+    {
+        id: "h4",
+        label: "Heading 4",
+        description: "#### Smaller heading",
+        icon: Heading4,
+        category: "headings",
+        action: { type: "lineStart", prefix: "#### " },
+    },
+    {
+        id: "h5",
+        label: "Heading 5",
+        description: "##### Tiny heading",
+        icon: Heading5,
+        category: "headings",
+        action: { type: "lineStart", prefix: "##### " },
+    },
+    {
+        id: "h6",
+        label: "Heading 6",
+        description: "###### Smallest heading",
+        icon: Heading6,
+        category: "headings",
+        action: { type: "lineStart", prefix: "###### " },
+    },
+    // Formatting
+    {
+        id: "bold",
+        label: "Bold",
+        description: "**bold text**",
+        icon: Bold,
+        category: "formatting",
+        action: { type: "wrap", before: "**", after: "**", defaultText: "bold text" },
+    },
+    {
+        id: "italic",
+        label: "Italic",
+        description: "_italic text_",
+        icon: Italic,
+        category: "formatting",
+        action: { type: "wrap", before: "_", after: "_", defaultText: "italic text" },
+    },
+    {
+        id: "strikethrough",
+        label: "Strikethrough",
+        description: "~~strikethrough~~",
+        icon: Strikethrough,
+        category: "formatting",
+        action: { type: "wrap", before: "~~", after: "~~", defaultText: "strikethrough" },
+    },
+    {
+        id: "inline-code",
+        label: "Inline Code",
+        description: "`code`",
+        icon: Code,
+        category: "formatting",
+        action: { type: "wrap", before: "`", after: "`", defaultText: "code" },
+    },
+    {
+        id: "highlight",
+        label: "Highlight",
+        description: "==highlighted text==",
+        icon: Highlighter,
+        category: "formatting",
+        action: { type: "wrap", before: "==", after: "==", defaultText: "highlighted text" },
+    },
+    {
+        id: "subscript",
+        label: "Subscript",
+        description: "~subscript~",
+        icon: Subscript,
+        category: "formatting",
+        action: { type: "wrap", before: "~", after: "~", defaultText: "subscript" },
+    },
+    {
+        id: "superscript",
+        label: "Superscript",
+        description: "^superscript^",
+        icon: Superscript,
+        category: "formatting",
+        action: { type: "wrap", before: "^", after: "^", defaultText: "superscript" },
+    },
+    // Lists
+    {
+        id: "bullet-list",
+        label: "Bullet List",
+        description: "- list item",
+        icon: List,
+        category: "lists",
+        action: { type: "lineStart", prefix: "- " },
+    },
+    {
+        id: "numbered-list",
+        label: "Numbered List",
+        description: "1. numbered item",
+        icon: ListOrdered,
+        category: "lists",
+        action: { type: "lineStart", prefix: "1. " },
+    },
+    {
+        id: "task-list",
+        label: "Task List",
+        description: "- [ ] task item",
+        icon: ListChecks,
+        category: "lists",
+        action: { type: "lineStart", prefix: "- [ ] " },
+    },
+    // Blocks
+    {
+        id: "blockquote",
+        label: "Blockquote",
+        description: "> quoted text",
+        icon: Quote,
+        category: "blocks",
+        action: { type: "lineStart", prefix: "> " },
+    },
+    {
+        id: "code-block",
+        label: "Code Block",
+        description: "```code block```",
+        icon: FileCode,
+        category: "blocks",
+        action: { type: "wrap", before: "```\n", after: "\n```", defaultText: "code block" },
+    },
+    {
+        id: "horizontal-rule",
+        label: "Horizontal Rule",
+        description: "--- divider line",
+        icon: Minus,
+        category: "blocks",
+        action: { type: "insert", text: "\n---\n" },
+    },
+    // Media
+    {
+        id: "link",
+        label: "Link",
+        description: "[text](url)",
+        icon: Link,
+        category: "media",
+        action: { type: "wrap", before: "[", after: "](url)", defaultText: "link text" },
+    },
+    {
+        id: "image",
+        label: "Image",
+        description: "![alt](url)",
+        icon: ImageIcon,
+        category: "media",
+        action: { type: "wrap", before: "![", after: "](url)", defaultText: "alt text" },
+    },
+    {
+        id: "table",
+        label: "Table",
+        description: "Insert a table",
+        icon: Table2,
+        category: "media",
+        action: {
+            type: "insert",
+            text: `| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |`,
+        },
+    },
+];
+const CATEGORY_LABELS = {
+    headings: "Headings",
+    formatting: "Formatting",
+    lists: "Lists",
+    blocks: "Blocks",
+    media: "Media & Elements",
+};
+/**
+ * More actions button with searchable dropdown
+ */
+function MoreActionsButton({ disabled, onAction, }) {
+    const [open, setOpen] = useState(false);
+    const handleSelect = (action) => {
+        onAction(action);
+        setOpen(false);
+    };
+    // Group actions by category
+    const groupedActions = MARKDOWN_ACTIONS.reduce((acc, action) => {
+        if (!acc[action.category]) {
+            acc[action.category] = [];
+        }
+        acc[action.category].push(action);
+        return acc;
+    }, {});
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-7 w-7", disabled: disabled, "aria-label": "More formatting options", onMouseDown: (e) => e.preventDefault(), children: _jsx(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": "true" }) }) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "More options" })] }), _jsx(PopoverContent, { className: "w-64 p-0", align: "end", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search formatting..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), Object.keys(groupedActions).map((category) => (_jsx(CommandGroup, { heading: CATEGORY_LABELS[category], children: groupedActions[category].map((action) => {
+                                        const Icon = action.icon;
+                                        return (_jsxs(CommandItem, { value: `${action.label} ${action.description}`, onSelect: () => handleSelect(action), children: [_jsx(Icon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: action.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: action.description })] })] }, action.id));
+                                    }) }, category)))] })] }) })] }));
+}
+/**
+ * DocumentEditor component for collaborative markdown editing.
+ *
+ * This component provides a GitHub-style markdown editor with Write/Preview tabs.
+ * In Write mode, you work with raw markdown text synced in real-time via Yjs.
+ * Toolbar buttons insert markdown syntax (e.g., # for headings, ** for bold).
+ *
+ * @example
+ * ```tsx
+ * function EditorPage() {
+ *   const editorRef = useRef<DocumentEditorRef>(null);
+ *
+ *   const handleInsert = (text: string) => {
+ *     editorRef.current?.insertContent(text);
+ *   };
+ *
+ *   return (
+ *     <YjsProvider documentId={docId} user={user}>
+ *       <DocumentEditor
+ *         ref={editorRef}
+ *         showToolbar
+ *         onUpdate={(content) => console.log(content)}
+ *         onSelectionChange={(text) => console.log('Selected:', text)}
+ *       />
+ *     </YjsProvider>
+ *   );
+ * }
+ * ```
+ */
+export const DocumentEditor = forwardRef(function DocumentEditor({ editable = true, className, showToolbar = true, placeholder = "Write your content in Markdown...", onUpdate, onSelectionChange, documentId, currentUser, comments = [], commentThreads = [], canComment = true, mentionableUsers = [], focusedCommentId, onCommentClick, onInlineCommentsRefresh, }, ref) {
+    var _a;
+    const [activeTab, setActiveTab] = useState("write");
+    const [showToc, setShowToc] = useState(true);
+    // Use the markdown editor hook for real-time collaboration
+    const { content, setContent, textareaRef, isReady, insertText, insertAtLineStart } = useMarkdownEditor({
+        placeholder,
+        editable,
+        onUpdate,
+    });
+    const tocItems = useMemo(() => buildMarkdownToc(content), [content]);
+    const previewContentRef = useRef(null);
+    // Get collaborators for cursor overlay
+    const { collaborators } = useDocumentPresence();
+    const { ydoc } = useYjs();
+    const ytext = useMemo(() => ydoc.getText(YJS_TEXT_KEY), [ydoc]);
+    const [commentSelection, setCommentSelection] = useState(null);
+    const selectionMirrorRef = useRef(null);
+    const lineNumbersRef = useRef(null);
+    const isValidSelection = !!commentSelection && commentSelection.text.length >= COMMENT_HIGHLIGHT.MIN_SELECTION_LENGTH;
+    const [inlinePopover, setInlinePopover] = useState(null);
+    const activeThread = (inlinePopover === null || inlinePopover === void 0 ? void 0 : inlinePopover.threadId)
+        ? ((_a = commentThreads.find((thread) => thread.id === inlinePopover.threadId)) !== null && _a !== void 0 ? _a : null)
+        : null;
+    const activeInlineMetadata = (inlinePopover === null || inlinePopover === void 0 ? void 0 : inlinePopover.metadata)
+        ? inlinePopover.metadata
+        : (activeThread === null || activeThread === void 0 ? void 0 : activeThread.metadata)
+            ? activeThread.metadata.inlineComment
+            : undefined;
+    const [popoverCoords, setPopoverCoords] = useState(null);
+    const popoverRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStartPos = useRef(null);
+    const [isResizing, setIsResizing] = useState(false);
+    const [popoverSize, setPopoverSize] = useState({
+        width: 720,
+        height: 500,
+    });
+    const resizeStartPos = useRef(null);
+    const getPopoverCoords = useCallback((position) => {
+        if (!position || !textareaRef.current || typeof window === "undefined")
+            return null;
+        const textareaRect = textareaRef.current.getBoundingClientRect();
+        const top = textareaRect.top + position.top + position.height + INLINE_POPOVER.OFFSET_PX;
+        const left = textareaRect.left + position.left;
+        return {
+            top: Math.max(INLINE_POPOVER.VIEWPORT_PADDING_PX, top),
+            left: Math.max(INLINE_POPOVER.VIEWPORT_PADDING_PX, left),
+        };
+    }, [textareaRef]);
+    useLayoutEffect(() => {
+        if (!popoverCoords || !popoverRef.current || !inlinePopover || !textareaRef.current)
+            return;
+        const padding = INLINE_POPOVER.VIEWPORT_PADDING_PX;
+        const rect = popoverRef.current.getBoundingClientRect();
+        const maxTop = window.innerHeight - rect.height - padding;
+        const maxLeft = window.innerWidth - rect.width - padding;
+        let nextTop = popoverCoords.top;
+        let nextLeft = popoverCoords.left;
+        const textareaRect = textareaRef.current.getBoundingClientRect();
+        if (nextTop > maxTop) {
+            const aboveTop = textareaRect.top + inlinePopover.position.top - rect.height - INLINE_POPOVER.OFFSET_PX;
+            nextTop = aboveTop;
+        }
+        if (nextLeft > maxLeft) {
+            const flippedLeft = textareaRect.left + inlinePopover.position.left - rect.width - INLINE_POPOVER.OFFSET_PX;
+            nextLeft = flippedLeft;
+        }
+        nextTop = Math.min(Math.max(padding, nextTop), Math.max(padding, maxTop));
+        nextLeft = Math.min(Math.max(padding, nextLeft), Math.max(padding, maxLeft));
+        if (nextTop !== popoverCoords.top || nextLeft !== popoverCoords.left) {
+            setPopoverCoords({ top: nextTop, left: nextLeft });
+        }
+    }, [popoverCoords, inlinePopover, textareaRef]);
+    const getMirrorStyles = useCallback((textarea) => {
+        const computed = window.getComputedStyle(textarea);
+        return {
+            fontFamily: computed.fontFamily,
+            fontSize: computed.fontSize,
+            fontWeight: computed.fontWeight,
+            fontStyle: computed.fontStyle,
+            letterSpacing: computed.letterSpacing,
+            lineHeight: computed.lineHeight,
+            textTransform: computed.textTransform,
+            wordWrap: computed.wordWrap,
+            wordSpacing: computed.wordSpacing,
+            whiteSpace: "pre-wrap",
+            overflowWrap: computed.overflowWrap,
+            padding: computed.padding,
+            border: computed.border,
+            boxSizing: computed.boxSizing,
+        };
+    }, []);
+    const getSelectionPosition = useCallback((end) => {
+        const textarea = textareaRef.current;
+        const mirror = selectionMirrorRef.current;
+        if (!textarea || !mirror)
+            return null;
+        const styles = getMirrorStyles(textarea);
+        Object.assign(mirror.style, styles);
+        mirror.style.width = `${textarea.clientWidth}px`;
+        const beforeEnd = content.substring(0, end);
+        mirror.innerHTML = "";
+        mirror.appendChild(document.createTextNode(beforeEnd));
+        const marker = document.createElement("span");
+        marker.textContent = "\u200B";
+        mirror.appendChild(marker);
+        const markerRect = marker.getBoundingClientRect();
+        const mirrorRect = mirror.getBoundingClientRect();
+        return {
+            top: markerRect.top - mirrorRect.top - textarea.scrollTop,
+            left: markerRect.left - mirrorRect.left,
+            height: markerRect.height,
+        };
+    }, [textareaRef, content, getMirrorStyles]);
+    const updateInlineStatus = useCallback(async (status) => {
+        var _a, _b;
+        const thread = activeThread;
+        if (!thread)
+            return;
+        const currentMeta = ((_a = thread.metadata) !== null && _a !== void 0 ? _a : {});
+        const inlineMeta = (_b = currentMeta.inlineComment) !== null && _b !== void 0 ? _b : activeInlineMetadata;
+        if (!inlineMeta)
+            return;
+        const nextMetadata = Object.assign(Object.assign({}, currentMeta), { inlineComment: Object.assign(Object.assign({}, inlineMeta), { status }) });
+        await updateCommentRequest(thread.id, {
+            content: thread.content,
+            metadata: nextMetadata,
+        });
+        setInlinePopover((prev) => prev ? Object.assign(Object.assign({}, prev), { metadata: Object.assign(Object.assign({}, inlineMeta), { status }) }) : prev);
+        onInlineCommentsRefresh === null || onInlineCommentsRefresh === void 0 ? void 0 : onInlineCommentsRefresh();
+    }, [activeThread, activeInlineMetadata, onInlineCommentsRefresh]);
+    const handleReopenInline = useCallback(async () => {
+        await updateInlineStatus("open");
+    }, [updateInlineStatus]);
+    const isInlineResolved = (activeInlineMetadata === null || activeInlineMetadata === void 0 ? void 0 : activeInlineMetadata.status) === "resolved";
+    useEffect(() => {
+        if (!selectionMirrorRef.current) {
+            const mirror = document.createElement("div");
+            mirror.style.position = "absolute";
+            mirror.style.top = "-9999px";
+            mirror.style.left = "-9999px";
+            mirror.style.visibility = "hidden";
+            mirror.style.whiteSpace = "pre-wrap";
+            mirror.style.wordWrap = "break-word";
+            document.body.appendChild(mirror);
+            selectionMirrorRef.current = mirror;
+        }
+        return () => {
+            if (selectionMirrorRef.current) {
+                document.body.removeChild(selectionMirrorRef.current);
+                selectionMirrorRef.current = null;
+            }
+        };
+    }, []);
+    // Expose methods via ref
+    useImperativeHandle(ref, () => ({
+        insertContent: (text) => {
+            const textarea = textareaRef.current;
+            if (!textarea || !editable)
+                return;
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const newContent = content.substring(0, start) + text + content.substring(end);
+            setContent(newContent);
+            // Move cursor after inserted content
+            window.requestAnimationFrame(() => {
+                const newPos = start + text.length;
+                textarea.setSelectionRange(newPos, newPos);
+                textarea.focus();
+            });
+        },
+        getContent: () => content,
+        scrollToLine: (lineNumber) => {
+            const textarea = textareaRef.current;
+            if (!textarea)
+                return;
+            const lines = content.split("\n");
+            const totalLines = Math.max(1, lines.length);
+            const targetLine = Math.min(Math.max(1, lineNumber), totalLines);
+            let index = 0;
+            for (let i = 0; i < targetLine - 1; i += 1) {
+                index += lines[i].length + 1;
+            }
+            const computed = window.getComputedStyle(textarea);
+            const lineHeight = Number.parseFloat(computed.lineHeight);
+            const paddingTop = Number.parseFloat(computed.paddingTop) || 0;
+            const resolvedLineHeight = Number.isNaN(lineHeight)
+                ? DOCUMENT_EDITOR.LINE_HEIGHT_PX
+                : lineHeight;
+            textarea.setSelectionRange(index, index);
+            textarea.scrollTop = Math.max(0, (targetLine - 1) * resolvedLineHeight + paddingTop - resolvedLineHeight);
+        },
+    }), [content, setContent, textareaRef, editable]);
+    const scrollToEditorLine = useCallback((lineNumber) => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const lines = content.split("\n");
+        const totalLines = Math.max(1, lines.length);
+        const targetLine = Math.min(Math.max(1, lineNumber), totalLines);
+        let index = 0;
+        for (let i = 0; i < targetLine - 1; i += 1) {
+            index += lines[i].length + 1;
+        }
+        const computed = window.getComputedStyle(textarea);
+        const paddingTop = Number.parseFloat(computed.paddingTop) || 0;
+        const mirror = selectionMirrorRef.current;
+        if (mirror) {
+            const styles = getMirrorStyles(textarea);
+            Object.assign(mirror.style, styles);
+            mirror.style.width = `${textarea.clientWidth}px`;
+            mirror.innerHTML = "";
+            mirror.appendChild(document.createTextNode(content.substring(0, index)));
+            const marker = document.createElement("span");
+            marker.textContent = "\u200B";
+            mirror.appendChild(marker);
+            const markerRect = marker.getBoundingClientRect();
+            const mirrorRect = mirror.getBoundingClientRect();
+            const lineTop = markerRect.top - mirrorRect.top;
+            textarea.setSelectionRange(index, index);
+            textarea.focus();
+            textarea.scrollTop = Math.max(0, lineTop - paddingTop);
+            return;
+        }
+        const lineHeight = Number.parseFloat(computed.lineHeight);
+        const resolvedLineHeight = Number.isNaN(lineHeight)
+            ? DOCUMENT_EDITOR.LINE_HEIGHT_PX
+            : lineHeight;
+        textarea.setSelectionRange(index, index);
+        textarea.focus();
+        const lineTop = (targetLine - 1) * resolvedLineHeight + paddingTop;
+        textarea.scrollTop = Math.max(0, lineTop - paddingTop);
+    }, [content, getMirrorStyles, textareaRef]);
+    const scrollPreviewToId = useCallback((id, text) => {
+        const container = previewContentRef.current;
+        if (!container)
+            return;
+        const tocTargets = Array.from(container.querySelectorAll("[data-toc-id]"));
+        let target = tocTargets.find((element) => element.dataset.tocId === id);
+        if (!target) {
+            const headings = Array.from(container.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+            target = headings.find((heading) => heading.id === id);
+            if (!target && text) {
+                const normalized = text.trim().toLowerCase();
+                target = headings.find((heading) => { var _a; return ((_a = heading.textContent) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()) === normalized; });
+            }
+        }
+        if (!target)
+            return;
+        const root = container.closest('[data-slot="scroll-area"]');
+        const viewport = root === null || root === void 0 ? void 0 : root.querySelector('[data-slot="scroll-area-viewport"]');
+        if (viewport) {
+            const targetRect = target.getBoundingClientRect();
+            const viewportRect = viewport.getBoundingClientRect();
+            const nextTop = viewport.scrollTop + (targetRect.top - viewportRect.top) - DOCUMENT_TOC.SCROLL_OFFSET_PX;
+            viewport.scrollTo({ top: Math.max(0, nextTop), behavior: "smooth" });
+            return;
+        }
+        target.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, []);
+    const handleTocClick = useCallback((id, line, text) => {
+        if (editable && activeTab === "write") {
+            scrollToEditorLine(line);
+            return;
+        }
+        scrollPreviewToId(id, text);
+    }, [activeTab, editable, scrollPreviewToId, scrollToEditorLine]);
+    const isPreviewActive = !editable || activeTab === "preview";
+    const isTocVisible = showToc && tocItems.length > 0;
+    const tocNav = isTocVisible ? (_jsxs("aside", { className: "bg-muted/20 flex min-h-0 w-56 shrink-0 flex-col self-stretch border-r px-0 py-3", children: [_jsx("div", { className: "dark:text-muted-foreground px-2 pb-2 text-xs font-semibold tracking-wide text-slate-600 uppercase", children: DOCUMENT_TOC.TITLE }), _jsx("nav", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto", children: tocItems.map((item) => (_jsx("button", { type: "button", onClick: () => handleTocClick(item.id, item.line, item.text), className: cn("text-foreground/90 hover:text-foreground px-2 text-left text-xs leading-5 break-words whitespace-normal transition-colors", DOCUMENT_TOC.INDENT_CLASSES[Math.min(item.level - 1, 5)]), children: item.text }, `toc-${item.id}-${item.line}`))) })] })) : null;
+    useEffect(() => {
+        if (!isPreviewActive)
+            return;
+        const container = previewContentRef.current;
+        if (!container || tocItems.length === 0)
+            return;
+        const headings = Array.from(container.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+        if (headings.length === 0)
+            return;
+        headings.forEach((heading, index) => {
+            const item = tocItems[index];
+            if (!item)
+                return;
+            if (heading.id !== item.id) {
+                heading.id = item.id;
+            }
+            heading.setAttribute("data-toc-id", item.id);
+        });
+    }, [isPreviewActive, tocItems]);
+    // Track selection changes
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea || !onSelectionChange)
+            return;
+        const updateSelection = () => {
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            if (start === end) {
+                onSelectionChange(undefined);
+            }
+            else {
+                onSelectionChange(content.substring(start, end));
+            }
+        };
+        // Listen to selection events
+        const handleSelect = () => updateSelection();
+        const handleKeyUp = () => updateSelection();
+        const handleMouseUp = () => updateSelection();
+        textarea.addEventListener("select", handleSelect);
+        textarea.addEventListener("keyup", handleKeyUp);
+        textarea.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            textarea.removeEventListener("select", handleSelect);
+            textarea.removeEventListener("keyup", handleKeyUp);
+            textarea.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [textareaRef, content, onSelectionChange]);
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea || !canComment)
+            return;
+        const updateSelection = () => {
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            if (start === end) {
+                setCommentSelection(null);
+                return;
+            }
+            const text = content.substring(start, end);
+            setCommentSelection({ start, end, text });
+        };
+        const handleSelect = () => updateSelection();
+        const handleKeyUp = () => updateSelection();
+        const handleMouseUp = () => {
+            setTimeout(updateSelection, 0);
+        };
+        textarea.addEventListener("select", handleSelect);
+        textarea.addEventListener("keyup", handleKeyUp);
+        textarea.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            textarea.removeEventListener("select", handleSelect);
+            textarea.removeEventListener("keyup", handleKeyUp);
+            textarea.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [textareaRef, content, canComment]);
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        const lineNumbers = lineNumbersRef.current;
+        if (!textarea || !lineNumbers)
+            return;
+        const syncScroll = () => {
+            lineNumbers.scrollTop = textarea.scrollTop;
+        };
+        syncScroll();
+        textarea.addEventListener("scroll", syncScroll, { passive: true });
+        return () => {
+            textarea.removeEventListener("scroll", syncScroll);
+        };
+    }, [textareaRef, content]);
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const handleScroll = () => setInlinePopover(null);
+        textarea.addEventListener("scroll", handleScroll, { passive: true });
+        window.addEventListener("resize", handleScroll, { passive: true });
+        return () => {
+            textarea.removeEventListener("scroll", handleScroll);
+            window.removeEventListener("resize", handleScroll);
+        };
+    }, [textareaRef]);
+    // Toolbar action handlers - insert markdown syntax
+    const handleHeading = useCallback(() => {
+        insertAtLineStart("## ");
+    }, [insertAtLineStart]);
+    const handleBold = useCallback(() => {
+        insertText("**", "**", "bold text");
+    }, [insertText]);
+    const handleItalic = useCallback(() => {
+        insertText("_", "_", "italic text");
+    }, [insertText]);
+    const handleCode = useCallback(() => {
+        insertText("`", "`", "code");
+    }, [insertText]);
+    const handleLink = useCallback(() => {
+        const url = window.prompt(COLLABORATION_UI_TEXT.URL_PROMPT);
+        if (url) {
+            insertText("[", `](${url})`, "link text");
+        }
+    }, [insertText]);
+    const handleNumberedList = useCallback(() => {
+        insertAtLineStart("1. ");
+    }, [insertAtLineStart]);
+    const handleBulletList = useCallback(() => {
+        insertAtLineStart("- ");
+    }, [insertAtLineStart]);
+    const handleTaskList = useCallback(() => {
+        insertAtLineStart("- [ ] ");
+    }, [insertAtLineStart]);
+    const handleImage = useCallback(() => {
+        const url = window.prompt("Enter image URL:");
+        if (url) {
+            insertText("![", `](${url})`, "alt text");
+        }
+    }, [insertText]);
+    const handleTable = useCallback(() => {
+        const tableTemplate = `| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |`;
+        insertText("\n", "\n", tableTemplate);
+    }, [insertText]);
+    const handleAddComment = useCallback(() => {
+        if (!canComment || !currentUser || !commentSelection || !isValidSelection)
+            return;
+        const position = getSelectionPosition(commentSelection.end);
+        if (!position)
+            return;
+        const anchorStart = encodeToBase64(Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(ytext, commentSelection.start)));
+        const anchorEnd = encodeToBase64(Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(ytext, commentSelection.end)));
+        setInlinePopover({
+            position,
+            metadata: {
+                anchorStart,
+                anchorEnd,
+                anchorText: commentSelection.text,
+                status: "open",
+            },
+        });
+        setPopoverCoords(getPopoverCoords(position));
+    }, [
+        canComment,
+        currentUser,
+        commentSelection,
+        isValidSelection,
+        getSelectionPosition,
+        getPopoverCoords,
+        ytext,
+    ]);
+    useEffect(() => {
+        if (!canComment || !currentUser)
+            return;
+        const handleKeyDown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "m") {
+                event.preventDefault();
+                if (isValidSelection) {
+                    handleAddComment();
+                }
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [canComment, currentUser, isValidSelection, handleAddComment]);
+    const handleInlineCommentClick = useCallback((commentId, position) => {
+        setInlinePopover({ position, threadId: commentId });
+        setPopoverCoords(getPopoverCoords(position));
+        onCommentClick === null || onCommentClick === void 0 ? void 0 : onCommentClick(commentId);
+    }, [onCommentClick, getPopoverCoords]);
+    const handleCloseInlinePopover = useCallback(() => {
+        setInlinePopover(null);
+        setCommentSelection(null);
+        setPopoverCoords(null);
+        setIsDragging(false);
+        setIsResizing(false);
+        dragStartPos.current = null;
+        resizeStartPos.current = null;
+        // Reset to default size
+        setPopoverSize({ width: 720, height: 500 });
+    }, []);
+    // Drag handlers for movable inline comment dialog
+    const handleMouseDown = useCallback((e) => {
+        // Only allow dragging from the header
+        const target = e.target;
+        if (!target.closest("[data-drag-handle]"))
+            return;
+        e.preventDefault();
+        setIsDragging(true);
+        if (popoverCoords) {
+            dragStartPos.current = {
+                x: e.clientX,
+                y: e.clientY,
+                initialTop: popoverCoords.top,
+                initialLeft: popoverCoords.left,
+            };
+        }
+    }, [popoverCoords]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging || !dragStartPos.current)
+            return;
+        const deltaX = e.clientX - dragStartPos.current.x;
+        const deltaY = e.clientY - dragStartPos.current.y;
+        const newTop = dragStartPos.current.initialTop + deltaY;
+        const newLeft = dragStartPos.current.initialLeft + deltaX;
+        setPopoverCoords({
+            top: Math.max(0, newTop),
+            left: Math.max(0, newLeft),
+        });
+    }, [isDragging]);
+    const handleMouseUp = useCallback(() => {
+        if (isDragging) {
+            setIsDragging(false);
+        }
+    }, [isDragging]);
+    // Add global mouse event listeners for dragging
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            return () => {
+                document.removeEventListener("mousemove", handleMouseMove);
+                document.removeEventListener("mouseup", handleMouseUp);
+            };
+        }
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    // Resize handlers for resizable inline comment dialog
+    const handleResizeMouseDown = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsResizing(true);
+        resizeStartPos.current = {
+            x: e.clientX,
+            y: e.clientY,
+            initialWidth: popoverSize.width,
+            initialHeight: popoverSize.height,
+        };
+    }, [popoverSize]);
+    const handleResizeMouseMove = useCallback((e) => {
+        if (!isResizing || !resizeStartPos.current)
+            return;
+        const deltaX = e.clientX - resizeStartPos.current.x;
+        const deltaY = e.clientY - resizeStartPos.current.y;
+        const newWidth = Math.max(400, resizeStartPos.current.initialWidth + deltaX);
+        const newHeight = Math.max(300, resizeStartPos.current.initialHeight + deltaY);
+        setPopoverSize({
+            width: newWidth,
+            height: newHeight,
+        });
+    }, [isResizing]);
+    const handleResizeMouseUp = useCallback(() => {
+        if (isResizing) {
+            setIsResizing(false);
+        }
+    }, [isResizing]);
+    // Add global mouse event listeners for resizing
+    useEffect(() => {
+        if (isResizing) {
+            document.addEventListener("mousemove", handleResizeMouseMove);
+            document.addEventListener("mouseup", handleResizeMouseUp);
+            return () => {
+                document.removeEventListener("mousemove", handleResizeMouseMove);
+                document.removeEventListener("mouseup", handleResizeMouseUp);
+            };
+        }
+    }, [isResizing, handleResizeMouseMove, handleResizeMouseUp]);
+    // Handler for "More" dropdown actions
+    const handleMoreAction = useCallback((action) => {
+        switch (action.action.type) {
+            case "wrap":
+                insertText(action.action.before, action.action.after, action.action.defaultText);
+                break;
+            case "lineStart":
+                insertAtLineStart(action.action.prefix);
+                break;
+            case "insert":
+                insertText(action.action.text, "", "");
+                break;
+        }
+    }, [insertText, insertAtLineStart]);
+    // Loading state
+    if (!isReady) {
+        return (_jsx("div", { className: cn("bg-muted/50 animate-pulse rounded-md border", "min-h-[300px]", className), role: "status", "aria-busy": "true", "aria-label": "Loading editor" }));
+    }
+    // Read-only mode - just show preview
+    if (!editable) {
+        return (_jsxs("div", { className: cn("flex flex-col rounded-md border", className), children: [_jsxs("div", { className: "bg-muted/30 flex items-center justify-between border-b px-4 py-2.5", children: [_jsxs("span", { className: "text-muted-foreground text-sm font-medium", children: [COLLABORATION_UI_TEXT.PERMISSIONS.VIEW_ONLY, _jsxs("span", { className: "ml-2 hidden sm:inline", children: ["\u2014 ", COLLABORATION_UI_TEXT.PERMISSIONS.VIEW_ONLY_DESCRIPTION] })] }), _jsx("div", { role: "group", "aria-label": DOCUMENT_TOC.TOGGLE_GROUP_LABEL, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", onClick: () => setShowToc((prev) => !prev), "aria-label": DOCUMENT_TOC.TOGGLE_LABEL, "aria-pressed": showToc, children: _jsx(List, { className: "h-4 w-4", "aria-hidden": "true" }) }) }), _jsx(TooltipContent, { children: DOCUMENT_TOC.TOGGLE_LABEL })] }) })] }), _jsx("div", { className: "bg-background min-h-0 flex-1 overflow-hidden", children: _jsxs("div", { className: "flex h-full", children: [tocNav, _jsx("div", { className: "min-w-0 flex-1", children: _jsx(ScrollArea, { className: "h-full", children: _jsx("div", { ref: previewContentRef, className: "px-4 py-3", children: content ? (_jsx(Response, { className: "prose prose-sm dark:prose-invert max-w-none", children: content })) : (_jsx("p", { className: "text-muted-foreground italic", children: "Nothing to preview" })) }) }) })] }) })] }));
+    }
+    return (_jsx(TooltipProvider, { delayDuration: 300, children: _jsxs("div", { className: cn("flex flex-col rounded-md border", className), children: [_jsxs("div", { className: "bg-muted/30 flex items-center justify-between border-b px-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { role: "group", "aria-label": DOCUMENT_TOC.TOGGLE_GROUP_LABEL, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", onClick: () => setShowToc((prev) => !prev), "aria-label": DOCUMENT_TOC.TOGGLE_LABEL, "aria-pressed": showToc, children: _jsx(List, { className: "h-4 w-4", "aria-hidden": "true" }) }) }), _jsx(TooltipContent, { children: DOCUMENT_TOC.TOGGLE_LABEL })] }) }), _jsxs("button", { type: "button", onClick: () => setActiveTab("write"), className: cn("relative px-4 py-2.5 text-sm font-medium transition-colors", activeTab === "write"
+                                        ? "text-foreground"
+                                        : "text-muted-foreground hover:text-foreground"), children: ["Write", activeTab === "write" && (_jsx("div", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-orange-500" }))] }), _jsxs("button", { type: "button", onClick: () => setActiveTab("preview"), className: cn("relative px-4 py-2.5 text-sm font-medium transition-colors", activeTab === "preview"
+                                        ? "text-foreground"
+                                        : "text-muted-foreground hover:text-foreground"), children: ["Preview", activeTab === "preview" && (_jsx("div", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-orange-500" }))] })] }), _jsx("div", { className: "flex items-center gap-1", children: activeTab === "write" && (showToolbar || canComment) && (_jsxs("div", { className: "flex items-center py-1", children: [showToolbar && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onClick: handleHeading, tooltip: "Heading (##)", icon: _jsx(Heading, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarButton, { onClick: handleBold, tooltip: "Bold (**text**)", icon: _jsx(Bold, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarButton, { onClick: handleItalic, tooltip: "Italic (_text_)", icon: _jsx(Italic, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarSeparator, {}), _jsx(ToolbarButton, { onClick: handleCode, tooltip: "Code (`code`)", icon: _jsx(Code, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarButton, { onClick: handleLink, tooltip: "Link ([text](url))", icon: _jsx(Link, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarSeparator, {}), _jsx(ToolbarButton, { onClick: handleNumberedList, tooltip: "Numbered list (1. item)", icon: _jsx(ListOrdered, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarButton, { onClick: handleBulletList, tooltip: "Bullet list (- item)", icon: _jsx(List, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarButton, { onClick: handleTaskList, tooltip: "Task list (- [ ] item)", icon: _jsx(ListChecks, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarSeparator, {}), _jsx(ToolbarButton, { onClick: handleImage, tooltip: "Insert image", icon: _jsx(ImageIcon, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarButton, { onClick: handleTable, tooltip: "Insert table", icon: _jsx(Table2, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(ToolbarSeparator, {}), _jsx(MoreActionsButton, { onAction: handleMoreAction })] })), canComment && currentUser && (_jsxs(_Fragment, { children: [showToolbar && _jsx(ToolbarSeparator, {}), _jsx(ToolbarButton, { onClick: handleAddComment, tooltip: "Add comment (Ctrl+Shift+M)", disabled: !isValidSelection, icon: _jsx(MessageSquarePlus, { className: "h-4 w-4", "aria-hidden": "true" }) })] }))] })) })] }), activeTab === "write" ? (
+                /* Write tab - Markdown textarea with real-time sync */
+                _jsxs("div", { className: "bg-background relative min-h-0 flex-1 overflow-hidden", children: [_jsxs("div", { className: "relative flex h-full min-h-0 overflow-hidden", children: [tocNav, _jsxs("div", { className: "relative flex min-w-0 flex-1", children: [_jsx("div", { ref: lineNumbersRef, "aria-hidden": "true", className: "text-muted-foreground bg-muted/20 flex h-full w-10 shrink-0 flex-col overflow-hidden border-r py-3 pr-2 text-right font-mono text-sm leading-6 select-none", children: Array.from({ length: Math.max(1, content.split("\n").length) }, (_, index) => (_jsx("span", { children: index + 1 }, `line-${index + 1}`))) }), _jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx(Textarea, { ref: textareaRef, value: content, onChange: editable ? (e) => setContent(e.target.value) : undefined, placeholder: placeholder, readOnly: !editable, className: "h-full min-h-[300px] w-full resize-none rounded-none border-0 px-4 py-3 font-mono text-sm leading-6 focus-visible:ring-0" }), _jsx(TextareaCommentHighlightOverlay, { comments: comments, textareaRef: textareaRef, content: content, focusedCommentId: focusedCommentId, onCommentClick: handleInlineCommentClick }), _jsx(TextareaCursorOverlay, { collaborators: collaborators, textareaRef: textareaRef, content: content })] })] })] }), inlinePopover &&
+                            documentId &&
+                            currentUser &&
+                            popoverCoords &&
+                            createPortal(
+                            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+                            _jsxs("div", { className: "bg-popover text-popover-foreground fixed z-[1000] overflow-hidden rounded-lg border shadow-lg", ref: popoverRef, style: {
+                                    top: popoverCoords.top,
+                                    left: popoverCoords.left,
+                                    width: `${popoverSize.width}px`,
+                                    height: `${popoverSize.height}px`,
+                                    maxWidth: "calc(100vw - 2rem)",
+                                    maxHeight: "calc(100vh - 2rem)",
+                                    cursor: isDragging ? "grabbing" : undefined,
+                                }, role: "dialog", "aria-label": "Inline comment", onMouseDown: handleMouseDown, children: [_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", "data-drag-handle": true, style: { cursor: isDragging ? "grabbing" : "grab" }, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-sm font-medium", children: "Inline comment" }), (activeInlineMetadata === null || activeInlineMetadata === void 0 ? void 0 : activeInlineMetadata.anchorText) && (_jsxs("div", { className: "text-muted-foreground line-clamp-1 text-xs", children: ["\u201C", activeInlineMetadata.anchorText.length > 60
+                                                                ? `${activeInlineMetadata.anchorText.slice(0, 60)}...`
+                                                                : activeInlineMetadata.anchorText, "\u201D"] }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [activeInlineMetadata && (_jsx(_Fragment, { children: activeThread && isInlineResolved && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", onClick: handleReopenInline, "aria-label": "Reopen inline comment", children: _jsx(RotateCcw, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }) }), _jsx(TooltipContent, { children: "Reopen" })] })) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", onClick: handleCloseInlinePopover, "aria-label": "Close", children: _jsx(X, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }) }), _jsx(TooltipContent, { children: "Close" })] })] })] }), _jsx("div", { className: "overflow-y-auto", style: { height: "calc(100% - 56px)" }, children: _jsx(Comments, { entityId: documentId, entityType: "document", currentUser: currentUser, mentionableUsers: mentionableUsers, enableThreading: true, enableAiMentions: true, showSortControls: false, showSummarizeButton: false, showCount: false, fetchOnMount: false, initialComments: activeThread ? [activeThread] : [], canComment: !activeThread && canComment, canReplyComment: canComment, hideFormAfterSubmit: true, commentMetadata: (parentId) => parentId
+                                                ? undefined
+                                                : (inlinePopover === null || inlinePopover === void 0 ? void 0 : inlinePopover.metadata)
+                                                    ? { inlineComment: inlinePopover.metadata }
+                                                    : undefined, callbacks: {
+                                                onCommentAdded: (comment) => {
+                                                    if (!(inlinePopover === null || inlinePopover === void 0 ? void 0 : inlinePopover.threadId) && !comment.parentId) {
+                                                        setInlinePopover((prev) => prev ? Object.assign(Object.assign({}, prev), { threadId: comment.id }) : prev);
+                                                        onCommentClick === null || onCommentClick === void 0 ? void 0 : onCommentClick(comment.id);
+                                                    }
+                                                    onInlineCommentsRefresh === null || onInlineCommentsRefresh === void 0 ? void 0 : onInlineCommentsRefresh();
+                                                },
+                                                onCommentDeleted: () => {
+                                                    onInlineCommentsRefresh === null || onInlineCommentsRefresh === void 0 ? void 0 : onInlineCommentsRefresh();
+                                                },
+                                                onCommentEdited: () => {
+                                                    onInlineCommentsRefresh === null || onInlineCommentsRefresh === void 0 ? void 0 : onInlineCommentsRefresh();
+                                                },
+                                            }, className: "p-3", defaultRepliesExpanded: true }) }), _jsx("div", { className: "absolute right-0 bottom-0 h-4 w-4 cursor-se-resize", onMouseDown: handleResizeMouseDown, style: {
+                                            background: "linear-gradient(135deg, transparent 50%, currentColor 50%)",
+                                            opacity: 0.3,
+                                        }, "aria-label": "Resize dialog" })] }), document.body)] })) : (
+                /* Preview tab - Rendered markdown */
+                _jsx("div", { className: "bg-background min-h-0 flex-1 overflow-hidden", children: _jsxs("div", { className: "flex h-full", children: [tocNav, _jsx("div", { className: "min-w-0 flex-1", children: _jsx(ScrollArea, { className: "h-full", children: _jsx("div", { ref: previewContentRef, className: "px-4 py-3", children: content ? (_jsx(Response, { className: "prose prose-sm dark:prose-invert max-w-none", children: content })) : (_jsx("p", { className: "text-muted-foreground italic", children: "Nothing to preview" })) }) }) })] }) }))] }) }));
+});
+//# sourceMappingURL=document-editor.js.map