@jotx-labs/editor 2.4.130

package/dist/components/JotxEditor.js

@@ -0,0 +1,1121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JotxEditor = JotxEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * JotxEditor - Main Tiptap editor with block support
+ * Modular, extensible, beautiful
+ */
+const react_1 = require("react");
+const react_2 = require("@tiptap/react");
+const core_1 = require("@tiptap/core");
+const starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
+const extension_placeholder_1 = __importDefault(require("@tiptap/extension-placeholder"));
+const extension_task_list_1 = __importDefault(require("@tiptap/extension-task-list"));
+const extension_task_item_1 = __importDefault(require("@tiptap/extension-task-item"));
+const extension_link_1 = __importDefault(require("@tiptap/extension-link"));
+const extension_table_row_1 = __importDefault(require("@tiptap/extension-table-row"));
+const extension_table_cell_1 = __importDefault(require("@tiptap/extension-table-cell"));
+const extension_table_header_1 = __importDefault(require("@tiptap/extension-table-header"));
+const extension_highlight_1 = __importDefault(require("@tiptap/extension-highlight"));
+// Define Global Attribute Extension for Block IDs
+const BlockIdExtension = core_1.Extension.create({
+    name: 'blockId',
+    addGlobalAttributes() {
+        return [
+            {
+                types: [
+                    'heading', 'paragraph', 'codeBlock', 'blockquote',
+                    'imageBlock', 'videoBlock', 'floatImageBlock',
+                    'math', 'mermaid', 'chart', 'datetime', 'linkCard',
+                    'callout', 'toggle', 'section', 'jotxlink',
+                    'bulletList', 'orderedList', 'listItem', 'taskItem', 'taskList',
+                    'horizontalRule', 'linkBlock', 'attach', 'table', 'tableRow', 'tableCell',
+                    'codeReference'
+                ],
+                attributes: {
+                    blockId: {
+                        default: null,
+                        keepOnSplit: false,
+                        renderHTML: attributes => {
+                            if (!attributes.blockId)
+                                return {};
+                            return { 'data-id': attributes.blockId };
+                        },
+                        parseHTML: element => element.getAttribute('data-id'),
+                    },
+                },
+            },
+        ];
+    },
+});
+const react_renderer_1 = require("@jotx-labs/react-renderer");
+const SlashMenuExtension_1 = require("../extensions/SlashMenuExtension");
+const formatting_1 = require("../extensions/formatting");
+const CalloutNode_1 = require("../extensions/CalloutNode");
+const AttachNode_1 = require("../extensions/AttachNode");
+const MermaidNode_1 = require("../extensions/MermaidNode");
+const ChartNode_1 = require("../extensions/ChartNode");
+const JotxLinkNode_1 = require("../extensions/JotxLinkNode");
+const ImageNode_1 = require("../extensions/ImageNode");
+const ImageBlockNode_1 = require("../extensions/ImageBlockNode");
+const vscode_api_1 = require("../bridge/vscode-api");
+const FloatImageBlockNode_1 = require("../extensions/FloatImageBlockNode");
+const VideoBlockNode_1 = require("../extensions/VideoBlockNode");
+const CodeBlockNode_1 = require("../extensions/CodeBlockNode");
+const CodeReferenceNode_1 = require("../extensions/CodeReferenceNode");
+const JotxTable_1 = require("../extensions/JotxTable");
+const TableFilterExtension_1 = require("../extensions/TableFilterExtension");
+const DateTimeNode_1 = require("../extensions/DateTimeNode");
+const MathNode_1 = require("../extensions/MathNode");
+const BlockOpsExtension_1 = require("../extensions/BlockOpsExtension");
+const CalloutActionsExtension_1 = require("../extensions/CalloutActionsExtension");
+const LinkNode_1 = require("../extensions/LinkNode");
+const GridCardNode_1 = require("../extensions/GridCardNode");
+const CardNode_1 = require("../extensions/CardNode");
+const ButtonNode_1 = require("../extensions/ButtonNode");
+const ToggleNode_1 = require("../extensions/ToggleNode");
+const UrlInputDialog_1 = require("./UrlInputDialog");
+const SectionNode_1 = require("../extensions/SectionNode");
+const SlashMenu_1 = require("./SlashMenu");
+require("./JotxEditor.css");
+require("./ImageVideoBlocks.css");
+const bridge_utils_1 = require("../bridge/bridge-utils");
+const logger_1 = require("../utils/logger");
+const LinkDialog_1 = require("./LinkDialog");
+const TableToolbar_1 = require("./TableToolbar");
+const ImageToolbar_1 = require("./ImageToolbar");
+const BlockMenu_1 = require("./BlockMenu");
+const SearchBar_1 = require("./SearchBar");
+const SearchExtension_1 = require("../extensions/SearchExtension");
+const SpellCheckExtension_1 = require("../extensions/SpellCheckExtension");
+const EditorRibbon_1 = require("./EditorRibbon");
+require("./SearchHighlight.css");
+require("./SpellCheck.css");
+function JotxEditor({ documentId, documentType, tiptapDoc, onChange, ribbonExpanded = false }) {
+    logger_1.logger.log('🎨 JotxEditor component rendering (jotx 2.0)', { documentId, documentType, tiptapDoc });
+    // Debug: Check for jotxlink nodes in the document
+    const checkForJotxLink = (content) => {
+        let count = 0;
+        for (const node of content || []) {
+            if (node.type === 'jotxlink')
+                count++;
+            if (node.content)
+                count += checkForJotxLink(node.content);
+        }
+        return count;
+    };
+    const jotxLinkCount = tiptapDoc?.content ? checkForJotxLink(tiptapDoc.content) : 0;
+    logger_1.logger.log(`🔗 JotxLink nodes in document: ${jotxLinkCount}`);
+    const [showSlashMenu, setShowSlashMenu] = (0, react_1.useState)(false);
+    const [slashMenuPosition, setSlashMenuPosition] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [slashMenuQuery, setSlashMenuQuery] = (0, react_1.useState)('');
+    const [calloutToolbar, setCalloutToolbar] = (0, react_1.useState)({ visible: false, x: 0, y: 0, variant: 'info' });
+    const [showLinkDialog, setShowLinkDialog] = (0, react_1.useState)(false);
+    const [showSearchBar, setShowSearchBar] = (0, react_1.useState)(false);
+    const [searchState, setSearchState] = (0, react_1.useState)({ currentMatch: 0, totalMatches: 0 });
+    const [showUrlInputDialog, setShowUrlInputDialog] = (0, react_1.useState)(false);
+    const [urlInputType, setUrlInputType] = (0, react_1.useState)('image');
+    const [showTemplatePicker, setShowTemplatePicker] = (0, react_1.useState)(false);
+    const [availableTemplates, setAvailableTemplates] = (0, react_1.useState)([]);
+    const [editorContext, setEditorContext] = (0, react_1.useState)('paragraph');
+    const isLoadingExternalChange = (0, react_1.useRef)(false);
+    logger_1.logger.log('⚙️ Creating Tiptap editor with initial content...');
+    logger_1.logger.log('🔍 Registering extensions:', {
+        ImageBlockNode: ImageBlockNode_1.ImageBlockNode.name,
+        FloatImageBlockNode: FloatImageBlockNode_1.FloatImageBlockNode.name,
+        VideoBlockNode: VideoBlockNode_1.VideoBlockNode.name
+    });
+    // Initialize Generic Adapter
+    const genericAdapter = new react_renderer_1.GenericTiptapAdapter();
+    const genericExtensions = genericAdapter.getExtensions();
+    const editor = (0, react_2.useEditor)({
+        content: tiptapDoc || { type: 'doc', content: [] },
+        extensions: [
+            BlockIdExtension, // Add Custom Global Attribute Extension
+            BlockOpsExtension_1.BlockOpsExtension,
+            CalloutActionsExtension_1.CalloutActionsExtension,
+            SearchExtension_1.SearchExtension,
+            starter_kit_1.default.configure({
+                codeBlock: false, // Registry (We use CodeBlockNode)
+                heading: {},
+                bulletList: {},
+                orderedList: {},
+                listItem: {},
+                dropcursor: {
+                    color: 'var(--vscode-editorCursor-foreground)',
+                    width: 2,
+                },
+                gapcursor: false,
+            }),
+            // Dynamic blocks from Registry
+            ...genericExtensions,
+            // Keep these for now until migrated
+            CodeReferenceNode_1.CodeReferenceNode,
+            CodeBlockNode_1.CodeBlockNode,
+            extension_link_1.default.configure({
+                openOnClick: true,
+                autolink: true,
+                linkOnPaste: false
+            }),
+            ImageNode_1.ImageNode.configure({
+                inline: false,
+                allowBase64: true
+            }),
+            ImageBlockNode_1.ImageBlockNode,
+            FloatImageBlockNode_1.FloatImageBlockNode,
+            VideoBlockNode_1.VideoBlockNode,
+            extension_task_list_1.default.configure({}),
+            extension_task_item_1.default.configure({
+                nested: true
+            }),
+            // Custom table nodes so we can persist filter/sort state as data attributes
+            JotxTable_1.JotxTable.configure({ resizable: true }),
+            extension_table_row_1.default,
+            extension_table_header_1.default,
+            extension_table_cell_1.default,
+            TableFilterExtension_1.TableFilterExtension,
+            extension_highlight_1.default.configure({
+                multicolor: false
+            }),
+            CalloutNode_1.CalloutNode,
+            AttachNode_1.AttachNode,
+            LinkNode_1.LinkNode,
+            MermaidNode_1.MermaidNode,
+            ChartNode_1.ChartNode,
+            JotxLinkNode_1.JotxLinkNode,
+            DateTimeNode_1.DateTimeNode,
+            MathNode_1.MathNode,
+            ToggleNode_1.ToggleNode,
+            SectionNode_1.SectionNode,
+            GridCardNode_1.GridCardNode,
+            CardNode_1.CardNode,
+            ButtonNode_1.ButtonNode,
+            extension_placeholder_1.default.configure({
+                placeholder: ({ node }) => {
+                    if (node.type.name === 'heading') {
+                        return 'Heading';
+                    }
+                    return 'Type \'/\' for commands...';
+                }
+            }),
+            ...formatting_1.FormattingExtensions,
+            SlashMenuExtension_1.SlashMenuExtension.configure({
+                onOpen: (position, query) => {
+                    logger_1.logger.log('🎉 SlashMenu onOpen called!', { position, query });
+                    setShowSlashMenu(true);
+                    setSlashMenuPosition(position);
+                    setSlashMenuQuery(query);
+                },
+                onClose: () => {
+                    logger_1.logger.log('🚪 SlashMenu onClose called!');
+                    setShowSlashMenu(false);
+                    setSlashMenuQuery('');
+                },
+                onQueryChange: (query) => {
+                    logger_1.logger.log('📝 SlashMenu onQueryChange:', query);
+                    setSlashMenuQuery(query);
+                }
+            }),
+            SpellCheckExtension_1.SpellCheckExtension.configure({
+                enabled: true,
+                debounceMs: 300,
+            })
+        ],
+        editorProps: {
+            attributes: {
+                class: 'jotx-editor-content'
+            },
+            handlePaste: (_view, event) => {
+                try {
+                    const dt = event.clipboardData;
+                    if (!dt)
+                        return false;
+                    // 2) Check for images first (raster or SVG)
+                    const items = Array.from(dt.items || []);
+                    const imgItem = items.find((it) => it.kind === 'file' && it.type.startsWith('image/'));
+                    if (imgItem) {
+                        // Image file from clipboard - AUTO CREATE IMAGE BLOCK
+                        const file = imgItem.getAsFile();
+                        if (!file)
+                            return false;
+                        (async () => {
+                            logger_1.logger.log('📋 PASTED IMAGE - Auto-creating image block', file);
+                            // Convert to PNG (preferred) via canvas
+                            let pngBase64 = null;
+                            try {
+                                const bmp = await window.createImageBitmap?.(file);
+                                if (bmp) {
+                                    const canvas = document.createElement('canvas');
+                                    canvas.width = bmp.width;
+                                    canvas.height = bmp.height;
+                                    const ctx = canvas.getContext('2d');
+                                    ctx?.drawImage(bmp, 0, 0);
+                                    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+                                    if (blob) {
+                                        pngBase64 = await new Promise((resolve, reject) => {
+                                            const reader = new FileReader();
+                                            reader.onerror = () => reject(new Error('Failed to read PNG blob'));
+                                            reader.onload = () => {
+                                                const s = (reader.result || '').toString();
+                                                const idx = s.indexOf(',');
+                                                resolve(idx >= 0 ? s.slice(idx + 1) : s);
+                                            };
+                                            reader.readAsDataURL(blob);
+                                        });
+                                    }
+                                }
+                            }
+                            catch {
+                                // ignore, fallback below
+                            }
+                            const base64 = pngBase64 ||
+                                (await new Promise((resolve, reject) => {
+                                    const reader = new FileReader();
+                                    reader.onerror = () => reject(new Error('Failed to read image from clipboard'));
+                                    reader.onload = () => {
+                                        const s = (reader.result || '').toString();
+                                        const idx = s.indexOf(',');
+                                        resolve(idx >= 0 ? s.slice(idx + 1) : s);
+                                    };
+                                    reader.readAsDataURL(file);
+                                }));
+                            const res = await (0, bridge_utils_1.savePastedImage)({ mime: 'image/png', base64 });
+                            // AUTO INSERT IMAGE BLOCK (not inline image)
+                            editor
+                                ?.chain()
+                                .focus()
+                                .insertContent([
+                                {
+                                    type: 'imageBlock',
+                                    attrs: {
+                                        src: res.webviewUri,
+                                        alt: '',
+                                        width: 800,
+                                        height: 'auto',
+                                        align: 'center',
+                                        caption: ''
+                                    }
+                                },
+                                { type: 'paragraph' }
+                            ])
+                                .run();
+                            logger_1.logger.log('✅ Image block auto-created!');
+                        })();
+                        event.preventDefault();
+                        return true;
+                    }
+                    // 1) SVG paste as text (fallback)
+                    const text = dt.getData('text/plain') || '';
+                    if (text.trim().startsWith('<svg')) {
+                        ;
+                        (async () => {
+                            const res = await (0, bridge_utils_1.savePastedImage)({ mime: 'image/svg+xml', text });
+                            editor
+                                ?.chain()
+                                .focus()
+                                .insertContent([
+                                {
+                                    type: 'imageBlock',
+                                    attrs: {
+                                        src: res.webviewUri,
+                                        alt: '',
+                                        width: 800,
+                                        height: 'auto',
+                                        align: 'center',
+                                        caption: ''
+                                    }
+                                },
+                                { type: 'paragraph' }
+                            ])
+                                .run();
+                        })();
+                        event.preventDefault();
+                        return true;
+                    }
+                    // No image found
+                    return false;
+                }
+                catch (e) {
+                    logger_1.logger.warn('paste handler failed', e);
+                    return false;
+                }
+            }
+        },
+        onUpdate: ({ editor }) => {
+            // Don't trigger onChange if we're loading an external change
+            if (isLoadingExternalChange.current) {
+                logger_1.logger.log('⏭️ Skipping onChange - loading external change');
+                return;
+            }
+            // Send Tiptap JSON instead of HTML for proper conversion
+            const json = editor.getJSON();
+            onChange?.(JSON.stringify(json));
+        }
+    });
+    // Update search state from plugin
+    const updateSearchState = () => {
+        if (!editor) {
+            setSearchState({ currentMatch: 0, totalMatches: 0 });
+            return;
+        }
+        const state = editor.state;
+        const pluginState = SearchExtension_1.searchPluginKey.getState(state);
+        if (!pluginState) {
+            setSearchState({ currentMatch: 0, totalMatches: 0 });
+            return;
+        }
+        setSearchState({
+            currentMatch: pluginState.matches.length > 0 ? pluginState.currentIndex + 1 : 0,
+            totalMatches: pluginState.matches.length
+        });
+    };
+    // Search handlers
+    const handleSearch = (query) => {
+        if (!editor)
+            return;
+        editor.commands.setSearchTerm(query);
+        // Update state and scroll after plugin updates
+        setTimeout(() => {
+            updateSearchState();
+            const state = editor.state;
+            const pluginState = SearchExtension_1.searchPluginKey.getState(state);
+            if (pluginState && pluginState.matches.length > 0) {
+                scrollToCurrentMatch();
+            }
+        }, 10);
+    };
+    const handleNextMatch = () => {
+        if (!editor)
+            return;
+        editor.commands.nextSearchMatch();
+        setTimeout(() => {
+            updateSearchState();
+            scrollToCurrentMatch();
+        }, 10);
+    };
+    const handlePreviousMatch = () => {
+        if (!editor)
+            return;
+        editor.commands.previousSearchMatch();
+        setTimeout(() => {
+            updateSearchState();
+            scrollToCurrentMatch();
+        }, 10);
+    };
+    const handleCloseSearch = () => {
+        if (!editor)
+            return;
+        editor.commands.clearSearch();
+        setShowSearchBar(false);
+        setSearchState({ currentMatch: 0, totalMatches: 0 });
+    };
+    const scrollToCurrentMatch = () => {
+        if (!editor)
+            return;
+        const state = editor.state;
+        const pluginState = SearchExtension_1.searchPluginKey.getState(state);
+        if (!pluginState || pluginState.matches.length === 0)
+            return;
+        const currentMatch = pluginState.matches[pluginState.currentIndex];
+        if (!currentMatch)
+            return;
+        try {
+            // Find the DOM node at the current match position
+            const view = editor.view;
+            const domAtPos = view.domAtPos(currentMatch.from);
+            if (domAtPos.node) {
+                // Get the element (either the node itself or its parent if it's a text node)
+                const element = domAtPos.node.nodeType === Node.TEXT_NODE
+                    ? domAtPos.node.parentElement
+                    : domAtPos.node;
+                if (element && element instanceof HTMLElement) {
+                    // Scroll the element into view with smooth behavior
+                    element.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center',
+                        inline: 'nearest'
+                    });
+                }
+            }
+        }
+        catch (error) {
+            logger_1.logger.warn('Failed to scroll to match:', error);
+        }
+    };
+    // Keyboard shortcuts for search
+    (0, react_1.useEffect)(() => {
+        const handleKeyDown = (e) => {
+            // Cmd/Ctrl+F to open search
+            if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+                e.preventDefault();
+                setShowSearchBar(true);
+                return;
+            }
+            // Escape to close search (only if search is open)
+            if (showSearchBar && e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                handleCloseSearch();
+                return;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown, true); // Use capture phase
+        return () => window.removeEventListener('keydown', handleKeyDown, true);
+    }, [showSearchBar, editor]);
+    (0, react_1.useEffect)(() => {
+        logger_1.logger.log('✅ Editor initialized:', !!editor);
+        if (editor && !editor.isDestroyed) {
+            logger_1.logger.log('🔍 Registered node types in schema:', Object.keys(editor.schema.nodes));
+            logger_1.logger.log('🔍 imageBlock node:', editor.schema.nodes.imageBlock);
+            logger_1.logger.log('🔍 floatImageBlock node:', editor.schema.nodes.floatImageBlock);
+            logger_1.logger.log('🔍 videoBlock node:', editor.schema.nodes.videoBlock);
+            const currentContent = JSON.stringify(editor.getJSON());
+            const newContent = JSON.stringify(tiptapDoc);
+            logger_1.logger.log('📄 Editor content update check:');
+            logger_1.logger.log('   - New tiptapDoc:', newContent?.substring(0, 200));
+            logger_1.logger.log('   - Current content:', currentContent?.substring(0, 200));
+            logger_1.logger.log('   - Are different?', currentContent !== newContent);
+            if (currentContent !== newContent) {
+                logger_1.logger.log('   ➡️ Setting content in Tiptap from external change');
+                isLoadingExternalChange.current = true;
+                // Update content without triggering onUpdate callback
+                editor.commands.setContent(tiptapDoc || { type: 'doc', content: [] });
+                // Reset flag immediately after setContent completes
+                setTimeout(() => {
+                    isLoadingExternalChange.current = false;
+                    logger_1.logger.log('   ✅ Content set, onChange re-enabled');
+                }, 50);
+            }
+            else {
+                logger_1.logger.log('   ⏭️ Content unchanged, skipping');
+            }
+        }
+    }, [tiptapDoc, editor]);
+    const handleSlashCommand = (command) => {
+        logger_1.logger.log('⚡ handleSlashCommand:', command);
+        if (!editor) {
+            logger_1.logger.error('❌ Editor not available!');
+            return;
+        }
+        setShowSlashMenu(false);
+        // Delete the "/query" trigger text before inserting the block (Notion-like UX)
+        try {
+            const pluginState = SlashMenuExtension_1.slashMenuPluginKey.getState(editor.state);
+            if (pluginState?.range?.from != null && pluginState?.range?.to != null) {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange({ from: pluginState.range.from, to: pluginState.range.to })
+                    .run();
+            }
+        }
+        catch {
+            // non-fatal
+        }
+        switch (command) {
+            case 'heading1':
+                logger_1.logger.log('📝 Setting Heading 1');
+                editor.chain().focus().setNode('heading', { level: 1 }).run();
+                break;
+            case 'heading2':
+                logger_1.logger.log('📝 Setting Heading 2');
+                editor.chain().focus().setNode('heading', { level: 2 }).run();
+                break;
+            case 'heading3':
+                logger_1.logger.log('📝 Setting Heading 3');
+                editor.chain().focus().setNode('heading', { level: 3 }).run();
+                break;
+            case 'paragraph':
+                logger_1.logger.log('📝 Setting Paragraph');
+                editor.chain().focus().setParagraph().run();
+                break;
+            case 'bulletList':
+                logger_1.logger.log('📝 Setting Bullet List');
+                editor.chain().focus().toggleBulletList().run();
+                break;
+            case 'orderedList':
+                logger_1.logger.log('📝 Setting Ordered List');
+                editor.chain().focus().toggleOrderedList().run();
+                break;
+            case 'checklist':
+                logger_1.logger.log('📝 Setting Checklist');
+                editor.chain().focus().toggleTaskList().run();
+                break;
+            case 'blockquote':
+                logger_1.logger.log('📝 Setting Blockquote');
+                editor.chain().focus().toggleBlockquote().run();
+                break;
+            case 'codeBlock':
+                logger_1.logger.log('📝 Setting Code Block');
+                editor.chain().focus().setNode('codeBlock', { language: 'plaintext' }).run();
+                break;
+            case 'divider':
+                logger_1.logger.log('📝 Setting Divider');
+                editor.chain().focus().setHorizontalRule().run();
+                // Force update to ensure persistence
+                setTimeout(() => editor.commands.focus(), 10);
+                break;
+            case 'callout': {
+                editor.chain().focus().wrapIn('callout', { variant: 'info' }).run();
+                break;
+            }
+            case 'image': {
+                setUrlInputType('image');
+                setShowUrlInputDialog(true);
+                break;
+            }
+            case 'link': {
+                setShowLinkDialog(true);
+                break;
+            }
+            case 'attach': {
+                ;
+                (async () => {
+                    const picked = await (0, bridge_utils_1.pickAttachmentFile)();
+                    if (!picked)
+                        return;
+                    editor
+                        .chain()
+                        .focus()
+                        .insertContent([
+                        {
+                            type: 'attach',
+                            attrs: { path: picked.path },
+                            content: [{ type: 'paragraph', content: [{ type: 'text', text: picked.name }] }]
+                        },
+                        { type: 'paragraph' }
+                    ])
+                        .run();
+                })();
+                break;
+            }
+            case 'table': {
+                editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+                break;
+            }
+            case 'mermaid': {
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([
+                    {
+                        type: 'mermaid',
+                        attrs: {
+                            src: 'flowchart TD\n  A[Start] --> B{Decision}\n  B -->|Yes| C[OK]\n  B -->|No| D[Fix]\n'
+                        }
+                    },
+                    { type: 'paragraph' }
+                ])
+                    .run();
+                break;
+            }
+            case 'chart': {
+                const json = JSON.stringify({ labels: ['Jan', 'Feb', 'Mar', 'Apr'], datasets: [{ label: 'Events', data: [12, 19, 8, 15] }] }, null, 2);
+                editor.chain().focus().insertContent([{ type: 'chart', attrs: { chartType: 'bar', json } }, { type: 'paragraph' }]).run();
+                break;
+            }
+            case 'datetime': {
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([{ type: 'datetime', attrs: { mode: 'datetime', value: '' } }, { type: 'paragraph' }])
+                    .run();
+                break;
+            }
+            case 'math': {
+                editor.chain().focus().insertContent([{ type: 'math', attrs: { src: '', display: 'block' } }, { type: 'paragraph' }]).run();
+                break;
+            }
+            case 'jotxlink': {
+                editor.chain().focus().insertContent([{ type: 'jotxlink', attrs: { refType: '', refId: '' } }, { type: 'paragraph' }]).run();
+                break;
+            }
+            case 'toggle': {
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([
+                    {
+                        type: 'toggle',
+                        attrs: { title: 'Toggle', collapsed: false },
+                        content: [{ type: 'paragraph' }]
+                    },
+                    { type: 'paragraph' }
+                ])
+                    .run();
+                break;
+            }
+            case 'section': {
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([
+                    {
+                        type: 'section',
+                        attrs: { title: 'Section', collapsed: false },
+                        content: [{ type: 'paragraph' }]
+                    },
+                    { type: 'paragraph' }
+                ])
+                    .run();
+                break;
+            }
+            case 'gridcard': {
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([
+                    {
+                        type: 'gridcard',
+                        attrs: { layout: '2x2' },
+                        content: [
+                            { type: 'card', attrs: { title: 'Card 1', value: '', icon: '📝', color: 'teal', link: '' } },
+                            { type: 'card', attrs: { title: 'Card 2', value: '', icon: '📊', color: 'blue', link: '' } },
+                            { type: 'card', attrs: { title: 'Card 3', value: '', icon: '🚀', color: 'green', link: '' } },
+                            { type: 'card', attrs: { title: 'Card 4', value: '', icon: '⚙️', color: 'purple', link: '' } }
+                        ]
+                    },
+                    { type: 'paragraph' }
+                ])
+                    .run();
+                break;
+            }
+            case 'button': {
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([
+                    { type: 'button', attrs: { label: 'Click Me', link: '', style: 'primary', align: 'left' } },
+                    { type: 'paragraph' }
+                ])
+                    .run();
+                break;
+            }
+            case 'imageBlock': {
+                logger_1.logger.log('📝 Inserting Image Block');
+                logger_1.logger.log('🔍 Editor state BEFORE insert:', editor.state.doc.toJSON());
+                logger_1.logger.log('🔍 Available node types:', Object.keys(editor.schema.nodes));
+                logger_1.logger.log('🔍 ImageBlock node exists?', !!editor.schema.nodes.imageBlock);
+                const content = {
+                    type: 'imageBlock',
+                    attrs: {
+                        src: '',
+                        alt: '',
+                        width: 800,
+                        height: 'auto',
+                        align: 'center',
+                        caption: ''
+                    }
+                };
+                logger_1.logger.log('🔍 Inserting content:', JSON.stringify(content, null, 2));
+                try {
+                    const result = editor
+                        .chain()
+                        .focus()
+                        .insertContent([content, { type: 'paragraph' }])
+                        .run();
+                    logger_1.logger.log('✅ insertContent result:', result);
+                    logger_1.logger.log('🔍 Editor state AFTER insert:', editor.state.doc.toJSON());
+                }
+                catch (error) {
+                    logger_1.logger.error('❌ insertContent ERROR:', error);
+                }
+                break;
+            }
+            case 'floatImageBlock': {
+                logger_1.logger.log('📝 Inserting Float Image Block (CONTAINER)');
+                logger_1.logger.log('🔍 FloatImageBlock node exists?', !!editor.schema.nodes.floatImageBlock);
+                // Float image is now a CONTAINER with content inside
+                const content = {
+                    type: 'floatImageBlock',
+                    attrs: {
+                        src: '',
+                        alt: '',
+                        width: 400,
+                        height: 'auto',
+                        float: 'left',
+                        caption: ''
+                    },
+                    content: [
+                        {
+                            type: 'paragraph'
+                        }
+                    ]
+                };
+                logger_1.logger.log('🔍 Inserting content:', JSON.stringify(content, null, 2));
+                try {
+                    const result = editor
+                        .chain()
+                        .insertContent([content, { type: 'paragraph' }])
+                        .run();
+                    logger_1.logger.log('✅ insertContent result:', result);
+                }
+                catch (error) {
+                    logger_1.logger.error('❌ insertContent ERROR:', error);
+                }
+                break;
+            }
+            case 'videoBlock': {
+                logger_1.logger.log('📝 Inserting Video Block');
+                logger_1.logger.log('🔍 VideoBlock node exists?', !!editor.schema.nodes.videoBlock);
+                const content = {
+                    type: 'videoBlock',
+                    attrs: {
+                        type: 'youtube',
+                        url: '',
+                        src: '',
+                        title: '',
+                        width: 800,
+                        height: 450,
+                        controls: 'true',
+                        autoplay: 'false',
+                        muted: 'false',
+                        loop: 'false'
+                    }
+                };
+                logger_1.logger.log('🔍 Inserting content:', JSON.stringify(content, null, 2));
+                try {
+                    const result = editor
+                        .chain()
+                        .focus()
+                        .insertContent([content, { type: 'paragraph' }])
+                        .run();
+                    logger_1.logger.log('✅ insertContent result:', result);
+                }
+                catch (error) {
+                    logger_1.logger.error('❌ insertContent ERROR:', error);
+                }
+                break;
+            }
+            case 'properties': {
+                // Disallow nesting properties/table/headings inside table cells
+                if (editor.isActive('table')) {
+                    return;
+                }
+                // Insert as a valid ProseMirror table node (NOT raw HTML) so it's editable everywhere.
+                // No samples: header + 1 empty row.
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([
+                    {
+                        type: 'table',
+                        content: [
+                            {
+                                type: 'tableRow',
+                                content: [
+                                    { type: 'tableHeader', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Key' }] }] },
+                                    { type: 'tableHeader', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Value' }] }] },
+                                    { type: 'tableHeader', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Type' }] }] }
+                                ]
+                            },
+                            {
+                                type: 'tableRow',
+                                content: [
+                                    { type: 'tableCell', content: [{ type: 'paragraph' }] },
+                                    { type: 'tableCell', content: [{ type: 'paragraph' }] },
+                                    { type: 'tableCell', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'text' }] }] }
+                                ]
+                            }
+                        ]
+                    },
+                    { type: 'paragraph' }
+                ])
+                    .run();
+                break;
+            }
+            case 'codeReference': {
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([
+                    {
+                        type: 'codeReference',
+                        attrs: { path: '', lines: '', language: '' }
+                    },
+                    { type: 'paragraph' }
+                ])
+                    .run();
+                break;
+            }
+            case 'useTemplate': {
+                // Request template list from backend
+                logger_1.logger.log('🔵 useTemplate clicked - requesting template list from backend');
+                const vscode = (0, vscode_api_1.getVSCodeAPI)();
+                vscode.postMessage({
+                    type: 'requestTemplateList'
+                });
+                logger_1.logger.log('📤 postMessage sent: requestTemplateList');
+                break;
+            }
+        }
+        // CRITICAL: Force trigger save after any block insertion
+        // Tiptap's onUpdate may not fire synchronously, causing data loss on close
+        setTimeout(() => {
+            if (editor) {
+                const json = editor.getJSON();
+                onChange?.(JSON.stringify(json));
+                logger_1.logger.log('🔄 Flushed save after block insertion');
+            }
+        }, 50);
+    };
+    const getTableContext = () => {
+        if (!editor)
+            return { inTableCell: false, inPropertiesTable: false };
+        const inTableCell = editor.isActive('table');
+        if (!inTableCell)
+            return { inTableCell: false, inPropertiesTable: false };
+        try {
+            const { from } = editor.state.selection;
+            const domAt = editor.view.domAtPos(from).node;
+            const el = domAt?.nodeType === 1 ? domAt : domAt?.parentElement;
+            const table = el?.closest?.('table');
+            if (!table)
+                return { inTableCell: true, inPropertiesTable: false };
+            const ths = Array.from(table.querySelectorAll('th')).slice(0, 3);
+            const header = ths.map((t) => (t.textContent || '').trim().toLowerCase());
+            const inPropertiesTable = header[0] === 'key' && header[1] === 'value' && header[2] === 'type';
+            return { inTableCell: true, inPropertiesTable };
+        }
+        catch {
+            return { inTableCell: true, inPropertiesTable: false };
+        }
+    };
+    const getActiveCalloutVariant = () => {
+        if (!editor)
+            return null;
+        const { $from } = editor.state.selection;
+        for (let d = $from.depth; d > 0; d--) {
+            const node = $from.node(d);
+            if (node.type?.name === 'callout') {
+                return node.attrs?.variant || 'info';
+            }
+        }
+        return null;
+    };
+    const setCalloutVariant = (variant) => {
+        if (!editor)
+            return;
+        const { $from } = editor.state.selection;
+        for (let d = $from.depth; d > 0; d--) {
+            const node = $from.node(d);
+            if (node.type?.name === 'callout') {
+                const pos = $from.before(d);
+                const tr = editor.state.tr.setNodeMarkup(pos, undefined, {
+                    ...node.attrs,
+                    variant
+                });
+                editor.view.dispatch(tr);
+                editor.commands.focus();
+                setCalloutToolbar((s) => ({ ...s, variant }));
+                return;
+            }
+        }
+    };
+    // Floating callout toolbar (variant picker)
+    (0, react_1.useEffect)(() => {
+        if (!editor)
+            return;
+        const update = () => {
+            const variant = getActiveCalloutVariant();
+            if (!variant) {
+                setCalloutToolbar((s) => (s.visible ? { ...s, visible: false } : s));
+                return;
+            }
+            const v = variant;
+            const { from } = editor.state.selection;
+            const coords = editor.view.coordsAtPos(from);
+            const inTable = editor.isActive('table');
+            // Position above selection; if inside a table, offset further up so it doesn't overlap table toolbar
+            const x = Math.max(12, Math.min(window.innerWidth - 220, coords.left));
+            const y = Math.max(12, coords.top - (inTable ? 92 : 48));
+            setCalloutToolbar({ visible: true, x, y, variant: v || 'info' });
+        };
+        update();
+        editor.on('selectionUpdate', update);
+        editor.on('transaction', update);
+        return () => {
+            editor.off('selectionUpdate', update);
+            editor.off('transaction', update);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor]);
+    // Context detection for ribbon toolbar
+    (0, react_1.useEffect)(() => {
+        if (!editor)
+            return;
+        const detectContext = () => {
+            if (editor.isActive('table')) {
+                setEditorContext('table');
+            }
+            else if (editor.isActive('bulletList') || editor.isActive('orderedList') || editor.isActive('taskList')) {
+                setEditorContext('list');
+            }
+            else if (editor.isActive('mermaid')) {
+                setEditorContext('mermaid');
+            }
+            else if (editor.isActive('chart')) {
+                setEditorContext('chart');
+            }
+            else if (editor.isActive('codeBlock')) {
+                setEditorContext('code');
+            }
+            else if (editor.isActive('math')) {
+                setEditorContext('math');
+            }
+            else if (editor.isActive('callout')) {
+                setEditorContext('callout');
+            }
+            else if (editor.isActive('image') || editor.isActive('imageBlock')) {
+                setEditorContext('image');
+            }
+            else if (editor.isActive('heading')) {
+                setEditorContext('heading');
+            }
+            else {
+                setEditorContext('paragraph');
+            }
+        };
+        detectContext();
+        editor.on('selectionUpdate', detectContext);
+        editor.on('transaction', detectContext);
+        return () => {
+            editor.off('selectionUpdate', detectContext);
+            editor.off('transaction', detectContext);
+        };
+    }, [editor]);
+    // Update search state when editor state changes
+    (0, react_1.useEffect)(() => {
+        if (!editor || !showSearchBar)
+            return;
+        const updateHandler = () => {
+            updateSearchState();
+        };
+        editor.on('transaction', updateHandler);
+        return () => {
+            editor.off('transaction', updateHandler);
+        };
+    }, [editor, showSearchBar]);
+    // Listen for template list from backend
+    (0, react_1.useEffect)(() => {
+        const handleTemplateList = (event) => {
+            logger_1.logger.log('📥 Received templateList event:', event.detail);
+            const templates = event.detail;
+            logger_1.logger.log('📋 Templates:', templates);
+            setAvailableTemplates(templates);
+            setShowTemplatePicker(true);
+            logger_1.logger.log('✅ Modal should now be visible');
+        };
+        const handleTemplateContent = (event) => {
+            logger_1.logger.log('📥 handleTemplateContent called');
+            logger_1.logger.log('📥 event.detail:', event.detail);
+            const tiptapBlocks = event.detail;
+            logger_1.logger.log('📥 tiptapBlocks:', tiptapBlocks);
+            logger_1.logger.log('📥 tiptapBlocks?.content:', tiptapBlocks?.content);
+            logger_1.logger.log('📥 editor available:', !!editor);
+            if (editor && tiptapBlocks && tiptapBlocks.content) {
+                logger_1.logger.log('📥 Inserting template content:', tiptapBlocks.content.length, 'blocks');
+                // Insert the template blocks at the current cursor position
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent(tiptapBlocks.content)
+                    .run();
+                logger_1.logger.log('✅ Template inserted successfully');
+            }
+            else {
+                logger_1.logger.warn('⚠️ Cannot insert template - missing data:', {
+                    hasEditor: !!editor,
+                    hasTiptapBlocks: !!tiptapBlocks,
+                    hasContent: !!tiptapBlocks?.content
+                });
+            }
+        };
+        window.addEventListener('templateList', handleTemplateList);
+        window.addEventListener('templateContent', handleTemplateContent);
+        return () => {
+            window.removeEventListener('templateList', handleTemplateList);
+            window.removeEventListener('templateContent', handleTemplateContent);
+        };
+    }, [editor]);
+    // Open links externally (VS Code) instead of navigating inside the webview
+    (0, react_1.useEffect)(() => {
+        if (!editor)
+            return;
+        const el = editor.view.dom;
+        const onClick = (e) => {
+            const target = e.target;
+            const a = target?.closest?.('a[href]');
+            if (!a)
+                return;
+            const href = a.getAttribute('href') || '';
+            if (!href)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            (0, bridge_utils_1.openExternal)(href).catch(() => { });
+        };
+        el.addEventListener('click', onClick);
+        return () => el.removeEventListener('click', onClick);
+    }, [editor]);
+    // Close link dialog on Escape
+    (0, react_1.useEffect)(() => {
+        if (!showLinkDialog)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                setShowLinkDialog(false);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [showLinkDialog]);
+    if (!editor) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "jotx-editor-loading", children: "Initializing editor..." });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "jotx-editor", children: [(0, jsx_runtime_1.jsx)(EditorRibbon_1.EditorRibbon, { editor: editor, expanded: ribbonExpanded, context: editorContext }), (0, jsx_runtime_1.jsxs)("div", { className: "jotx-editor-wrapper", children: [(0, jsx_runtime_1.jsx)(LinkDialog_1.LinkDialog, { isOpen: showLinkDialog, onCancel: () => setShowLinkDialog(false), onSubmit: ({ href, label }) => {
+                            setShowLinkDialog(false);
+                            const text = (label || href).trim();
+                            editor
+                                ?.chain()
+                                .focus()
+                                // insert as its own paragraph so it roundtrips cleanly as `def link`
+                                .insertContent([
+                                {
+                                    type: 'paragraph',
+                                    content: [
+                                        {
+                                            type: 'text',
+                                            text,
+                                            marks: [{ type: 'link', attrs: { href } }]
+                                        }
+                                    ]
+                                },
+                                { type: 'paragraph' }
+                            ])
+                                .run();
+                        } }), calloutToolbar.visible && ((0, jsx_runtime_1.jsx)("div", { className: "jotx-callout-toolbar jotx-callout-toolbar-floating", style: { left: `${calloutToolbar.x}px`, top: `${calloutToolbar.y}px` }, children: ['info', 'warning', 'success', 'danger'].map((v) => ((0, jsx_runtime_1.jsx)("button", { "data-variant": v, className: `jotx-callout-chip ${calloutToolbar.variant === v ? 'active' : ''}`, onMouseDown: (e) => {
+                                // prevent editor losing selection
+                                e.preventDefault();
+                            }, onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                setCalloutVariant(v);
+                            }, title: `Callout: ${v}`, children: v }, v))) })), (0, jsx_runtime_1.jsx)(BlockMenu_1.BlockMenu, { editor: editor }), (0, jsx_runtime_1.jsx)(TableToolbar_1.TableToolbar, { editor: editor }), (0, jsx_runtime_1.jsx)(ImageToolbar_1.ImageToolbar, { editor: editor }), (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { visible: showSearchBar, onSearch: handleSearch, onNext: handleNextMatch, onPrevious: handlePreviousMatch, onClose: handleCloseSearch, currentMatch: searchState.currentMatch, totalMatches: searchState.totalMatches }), (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor })] }), showSlashMenu && ((0, jsx_runtime_1.jsx)(SlashMenu_1.SlashMenu, { documentType: documentType, query: slashMenuQuery, position: slashMenuPosition, context: getTableContext(), onSelect: handleSlashCommand, onClose: () => setShowSlashMenu(false) })), showUrlInputDialog && ((0, jsx_runtime_1.jsx)(UrlInputDialog_1.UrlInputDialog, { isOpen: showUrlInputDialog, title: 'Insert Image URL', onCancel: () => setShowUrlInputDialog(false), onSubmit: ({ url }) => {
+                    setShowUrlInputDialog(false);
+                    if (urlInputType === 'image') {
+                        editor.chain().focus().setImage({ src: url, alt: '', dataSrc: null, width: 70, align: 'left' }).run();
+                    }
+                } })), showTemplatePicker && ((0, jsx_runtime_1.jsx)("div", { className: "jotx-modal-overlay", onClick: () => setShowTemplatePicker(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "jotx-modal-content jotx-template-picker", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "jotx-modal-header", children: [(0, jsx_runtime_1.jsx)("h3", { children: "\uD83D\uDCCB Choose a Template" }), (0, jsx_runtime_1.jsx)("button", { className: "jotx-modal-close", onClick: () => setShowTemplatePicker(false), children: "\u2715" })] }), (0, jsx_runtime_1.jsx)("div", { className: "jotx-template-list", children: availableTemplates.map((template) => ((0, jsx_runtime_1.jsxs)("button", { className: "jotx-template-item", onClick: () => {
+                                    setShowTemplatePicker(false);
+                                    const vscode = (0, vscode_api_1.getVSCodeAPI)();
+                                    vscode.postMessage({
+                                        type: 'requestTemplateContent',
+                                        fileName: template.fileName
+                                    });
+                                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "jotx-template-icon", children: "\uD83D\uDCC4" }), (0, jsx_runtime_1.jsx)("span", { className: "jotx-template-name", children: template.name })] }, template.fileName))) })] }) }))] }));
+}
+//# sourceMappingURL=JotxEditor.js.map