snice 3.4.0 → 3.5.0

package/dist/components/doc/snice-doc.js

@@ -1,89 +1,10 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, query, styles, ready, dispose, watch, dispatch, render, css, html } from 'snice';
+import { element, property, styles, ready, dispose, css } from 'snice';
 
-var cssContent = ":host{display:block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';font-size:16px;line-height:1.5;color:var(--snice-doc-text-color,#333);background:var(--snice-doc-background,#fff);padding:var(--snice-doc-padding,40px 20px);min-height:var(--snice-doc-min-height,400px)}.doc-container{max-width:var(--snice-doc-max-width,900px);margin:0 auto}.doc-block{position:relative;margin:4px 0;min-height:1.5em}.doc-block:hover .block-handle{opacity:1}.block-handle{position:absolute;left:-30px;top:4px;width:20px;height:20px;opacity:0;cursor:grab;display:flex;align-items:center;justify-content:center;color:var(--snice-doc-muted-color,#999);transition:opacity .2s}.block-handle:active{cursor:grabbing}.block-handle svg{width:16px;height:16px}.block-content{outline:0;word-wrap:break-word;white-space:pre-wrap}.block-content:empty:before{content:attr(data-placeholder);color:var(--snice-doc-placeholder-color,#999);pointer-events:none}.block-paragraph{margin:2px 0}.block-heading-1 .block-content{font-size:2em;font-weight:700;line-height:1.2;margin:.67em 0}.block-heading-2 .block-content{font-size:1.5em;font-weight:700;line-height:1.3;margin:.75em 0}.block-heading-3 .block-content{font-size:1.25em;font-weight:700;line-height:1.4;margin:.83em 0}.block-bulleted-list{display:flex;align-items:flex-start}.block-bulleted-list:before{content:'•';margin-right:8px;margin-top:2px;color:var(--snice-doc-text-color,#333)}.block-numbered-list{display:flex;align-items:flex-start}.block-numbered-list:before{content:attr(data-number) '.';margin-right:8px;margin-top:2px;min-width:24px;color:var(--snice-doc-text-color,#333)}.block-todo{display:flex;align-items:flex-start}.todo-checkbox{margin-right:8px;margin-top:4px;cursor:pointer;flex-shrink:0}.block-todo.checked .block-content{text-decoration:line-through;opacity:.6}.block-code .block-content{font-family:Monaco,Menlo,'Ubuntu Mono',Consolas,source-code-pro,monospace;font-size:.9em;background:var(--snice-doc-code-background,#f6f8fa);border:1px solid var(--snice-doc-code-border,#e1e4e8);border-radius:6px;padding:16px;overflow-x:auto;white-space:pre}.block-quote .block-content{border-left:3px solid var(--snice-doc-quote-border,#e1e4e8);padding-left:16px;color:var(--snice-doc-muted-color,#666);font-style:italic}.block-divider{border:none;border-top:1px solid var(--snice-doc-divider-color,#e1e4e8);margin:16px 0;height:1px}.format-bold{font-weight:700}.format-italic{font-style:italic}.format-underline{text-decoration:underline}.format-strikethrough{text-decoration:line-through}.format-code{font-family:Monaco,Menlo,'Ubuntu Mono',Consolas,source-code-pro,monospace;font-size:.9em;background:var(--snice-doc-inline-code-background,rgba(175,184,193,.2));padding:2px 6px;border-radius:3px}.format-link{color:var(--snice-doc-link-color,#0969da);text-decoration:underline;cursor:pointer}.format-link:hover{opacity:.8}.block-menu{position:absolute;left:0;top:100%;background:var(--snice-doc-menu-background,#fff);border:1px solid var(--snice-doc-menu-border,#e1e4e8);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:300px;overflow-y:auto;z-index:1000;min-width:240px}.block-menu-item{display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;transition:background .2s}.block-menu-item.selected,.block-menu-item:hover{background:var(--snice-doc-menu-hover,#f6f8fa)}.block-menu-icon{width:20px;height:20px;flex-shrink:0;color:var(--snice-doc-muted-color,#666)}.block-menu-label{font-size:14px;color:var(--snice-doc-text-color,#333)}.format-toolbar{position:absolute;left:50%;transform:translateX(-50%);background:var(--snice-doc-toolbar-background,#1f2328);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px;display:flex;gap:2px;z-index:1000}.format-button{width:32px;height:32px;border:none;background:0 0;color:var(--snice-doc-toolbar-text,#fff);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .2s}.format-button:hover{background:var(--snice-doc-toolbar-hover,rgba(255,255,255,.1))}.format-button.active{background:var(--snice-doc-toolbar-active,rgba(88,166,255,.3))}.format-button svg{width:16px;height:16px}.doc-block.dragging{opacity:.5}.doc-block.drag-over{border-top:2px solid var(--snice-doc-primary-color,#0969da)}:host([readonly]) .block-handle,:host([readonly]) .block-menu,:host([readonly]) .format-toolbar{display:none}:host([readonly]) .block-content{cursor:default}:host([readonly]) .todo-checkbox{pointer-events:none}";
+var cssContent = ":host{display:block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--snice-doc-text-color,#333);background:var(--snice-doc-background,#fff);height:100%;min-height:600px}.doc-wrapper{display:flex;flex-direction:column;height:100%}.toolbar{display:flex;gap:4px;padding:8px 12px;background:var(--snice-doc-sidebar-background,#f6f8fa);border-bottom:1px solid var(--snice-doc-border,#e1e4e8);flex-wrap:wrap}.toolbar-btn{padding:6px 12px;border:1px solid var(--snice-doc-border,#e1e4e8);background:var(--snice-doc-background,#fff);border-radius:4px;cursor:pointer;font-weight:600;font-size:14px;color:var(--snice-doc-text-color,#333);transition:.2s;min-width:32px;text-align:center}.toolbar-btn:hover{background:var(--snice-doc-menu-hover,#e8eaed);border-color:var(--snice-doc-primary-color,#0969da)}.toolbar-btn:active{transform:translateY(1px)}.toolbar-divider{width:1px;background:var(--snice-doc-border,#e1e4e8);margin:0 4px}.doc-main{display:flex;flex:1;overflow:hidden}.doc-sidebar{width:200px;background:var(--snice-doc-sidebar-background,#f6f8fa);border-right:1px solid var(--snice-doc-border,#e1e4e8);padding:16px 0;flex-shrink:0;transition:width .3s;position:relative}.doc-sidebar.collapsed{width:50px}.sidebar-toggle{position:absolute;top:10px;right:10px;background:var(--snice-doc-background,#fff);border:1px solid var(--snice-doc-border,#e1e4e8);border-radius:4px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--snice-doc-text-color,#333);transition:background .2s}.sidebar-toggle:hover{background:var(--snice-doc-menu-hover,#e1e4e8)}.sidebar-header{font-weight:600;font-size:12px;color:var(--snice-doc-muted-color,#666);text-transform:uppercase;padding:0 16px 8px;margin-bottom:8px;border-bottom:1px solid var(--snice-doc-border,#e1e4e8)}.sidebar-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border:none;background:0 0;cursor:pointer;width:100%;text-align:left;font-size:14px;color:var(--snice-doc-text-color,#333);transition:background .2s}.sidebar-item:hover{background:var(--snice-doc-background,#fff)}.sidebar-icon{font-size:18px;width:24px;text-align:center}.doc-editor{flex:1;padding:60px 100px;overflow-y:auto;outline:0;max-width:850px;margin:0 auto;width:100%}.doc-editor:empty:before{content:attr(data-placeholder);color:var(--snice-doc-placeholder-color,#999);pointer-events:none}.doc-editor p{margin:0 0 12px;min-height:1.6em}.doc-editor h1{font-size:2em;font-weight:700;line-height:1.2;margin:24px 0 16px}.doc-editor h2{font-size:1.5em;font-weight:700;line-height:1.3;margin:20px 0 12px}.doc-editor h3{font-size:1.25em;font-weight:700;line-height:1.4;margin:16px 0 8px}.doc-editor ol,.doc-editor ul{margin:0 0 12px;padding-left:30px}.doc-editor li{margin:4px 0}.doc-editor code{font-family:Monaco,Menlo,'Ubuntu Mono',Consolas,monospace;font-size:.9em;background:var(--snice-doc-inline-code-background,rgba(175,184,193,.2));padding:2px 6px;border-radius:3px}.doc-editor a{color:var(--snice-doc-link-color,#0969da);text-decoration:underline}.doc-editor img{max-width:100%;height:auto;display:block;margin:16px 0;border-radius:4px}.doc-editor table{border-collapse:collapse;width:100%;margin:16px 0}.doc-editor table td,.doc-editor table th{border:1px solid var(--snice-doc-border,#e1e4e8);padding:8px 12px}.doc-editor table th{background:var(--snice-doc-sidebar-background,#f6f8fa);font-weight:600}.doc-editor hr{margin:20px 0;border:none;border-top:1px solid var(--snice-doc-border,#e1e4e8)}:host([readonly]) .doc-sidebar,:host([readonly]) .toolbar{display:none}:host([readonly]) .doc-editor{cursor:default}";
 
 /**
- * Generate unique ID
- */
-function generateId() {
-    return Math.random().toString(36).substring(2, 15);
-}
-/**
- * Block menu items
- */
-const BLOCK_MENU_ITEMS = [
-    {
-        type: 'paragraph',
-        label: 'Paragraph',
-        icon: '¶',
-        keywords: ['text', 'paragraph', 'p'],
-    },
-    {
-        type: 'heading-1',
-        label: 'Heading 1',
-        icon: 'H1',
-        keywords: ['h1', 'heading', 'title'],
-    },
-    {
-        type: 'heading-2',
-        label: 'Heading 2',
-        icon: 'H2',
-        keywords: ['h2', 'heading', 'subtitle'],
-    },
-    {
-        type: 'heading-3',
-        label: 'Heading 3',
-        icon: 'H3',
-        keywords: ['h3', 'heading'],
-    },
-    {
-        type: 'bulleted-list',
-        label: 'Bulleted List',
-        icon: '•',
-        keywords: ['ul', 'list', 'bullet'],
-    },
-    {
-        type: 'numbered-list',
-        label: 'Numbered List',
-        icon: '1.',
-        keywords: ['ol', 'list', 'number'],
-    },
-    {
-        type: 'todo',
-        label: 'To-do List',
-        icon: '☐',
-        keywords: ['todo', 'checkbox', 'task'],
-    },
-    {
-        type: 'code',
-        label: 'Code Block',
-        icon: '</>',
-        keywords: ['code', 'snippet'],
-    },
-    {
-        type: 'quote',
-        label: 'Quote',
-        icon: '"',
-        keywords: ['quote', 'blockquote'],
-    },
-    {
-        type: 'divider',
-        label: 'Divider',
-        icon: '―',
-        keywords: ['divider', 'separator', 'hr'],
-    },
-];
-/**
- * snice-doc - Document editor component
- *
- * A Notion-like document editor with block-based editing
- *
- * @element snice-doc
- *
- * @fires {CustomEvent<{ blocks: DocBlock[] }>} doc-change - Fires when document changes
- * @fires {CustomEvent<{ blockId: string }>} doc-focus - Fires when a block receives focus
- * @fires {CustomEvent<{ blockId: string }>} doc-blur - Fires when a block loses focus
+ * snice-doc - Simple document editor
  */
 let SniceDoc = (() => {
     let _classDecorators = [element('snice-doc')];
@@ -92,143 +13,98 @@ let SniceDoc = (() => {
     let _classThis;
     let _classSuper = HTMLElement;
     let _instanceExtraInitializers = [];
-    let _blocks_decorators;
-    let _blocks_initializers = [];
-    let _blocks_extraInitializers = [];
     let _placeholder_decorators;
     let _placeholder_initializers = [];
     let _placeholder_extraInitializers = [];
     let _readonly_decorators;
     let _readonly_initializers = [];
     let _readonly_extraInitializers = [];
-    let _container_decorators;
-    let _container_initializers = [];
-    let _container_extraInitializers = [];
-    let _firstBlockElement_decorators;
-    let _firstBlockElement_initializers = [];
-    let _firstBlockElement_extraInitializers = [];
     let _styles_decorators;
     let _init_decorators;
     let _cleanup_decorators;
-    let _blocksChanged_decorators;
-    let _emitChange_decorators;
-    let _emitFocus_decorators;
-    let _emitBlur_decorators;
-    let _render_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
         constructor() {
             super(...arguments);
-            this.blocks = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _blocks_initializers, [{ id: generateId(), type: 'paragraph', content: '', formats: [] }]));
-            this.placeholder = (__runInitializers(this, _blocks_extraInitializers), __runInitializers(this, _placeholder_initializers, "Type '/' for commands..."));
+            this.placeholder = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _placeholder_initializers, 'Start typing...'));
             this.readonly = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _readonly_initializers, false));
-            this.container = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _container_initializers, void 0));
-            this.firstBlockElement = (__runInitializers(this, _container_extraInitializers), __runInitializers(this, _firstBlockElement_initializers, void 0));
-            this.selection = (__runInitializers(this, _firstBlockElement_extraInitializers), null);
-            this.draggedBlock = null;
-            this.showBlockMenu = false;
-            this.blockMenuFilter = '';
-            this.blockMenuSelectedIndex = 0;
-            this.blockMenuBlockId = '';
-            this.handleKeyDown = (e) => {
+            this.editor = __runInitializers(this, _readonly_extraInitializers);
+            this.showFormatToolbar = false;
+            this.formatToolbarPosition = null;
+            this.savedSelection = null;
+            this.handlePaste = (e) => {
                 if (this.readonly)
                     return;
-                const target = e.target;
-                if (!target.classList.contains('block-content'))
-                    return;
-                const blockId = target.dataset.blockId;
-                const block = this.blocks.find((b) => b.id === blockId);
-                if (!block)
-                    return;
-                // Handle block menu navigation
-                if (this.showBlockMenu) {
-                    if (e.key === 'ArrowDown') {
-                        e.preventDefault();
-                        this.blockMenuSelectedIndex = Math.min(this.blockMenuSelectedIndex + 1, this.getFilteredBlockMenuItems().length - 1);
-                        return;
-                    }
-                    if (e.key === 'ArrowUp') {
-                        e.preventDefault();
-                        this.blockMenuSelectedIndex = Math.max(this.blockMenuSelectedIndex - 1, 0);
-                        return;
-                    }
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        const items = this.getFilteredBlockMenuItems();
-                        if (items[this.blockMenuSelectedIndex]) {
-                            this.selectBlockType(this.blockMenuBlockId, items[this.blockMenuSelectedIndex].type);
+                const items = e.clipboardData?.items;
+                if (items) {
+                    for (let i = 0; i < items.length; i++) {
+                        if (items[i].type.indexOf('image') !== -1) {
+                            e.preventDefault();
+                            const blob = items[i].getAsFile();
+                            if (blob) {
+                                const reader = new FileReader();
+                                reader.onload = (event) => {
+                                    const dataUrl = event.target?.result || null;
+                                    if (!dataUrl)
+                                        return;
+                                    const img = document.createElement('img');
+                                    img.src = dataUrl;
+                                    img.style.maxWidth = '100%';
+                                    img.style.height = 'auto';
+                                    const selection = window.getSelection();
+                                    if (selection && selection.rangeCount > 0) {
+                                        const range = selection.getRangeAt(0);
+                                        range.insertNode(img);
+                                        range.setStartAfter(img);
+                                        range.collapse(true);
+                                        selection.removeAllRanges();
+                                        selection.addRange(range);
+                                    }
+                                };
+                                reader.readAsDataURL(blob);
+                            }
+                            return;
                         }
-                        return;
-                    }
-                    if (e.key === 'Escape') {
-                        e.preventDefault();
-                        this.hideBlockMenu();
-                        return;
                     }
                 }
-                // Enter - create new block
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    this.createNewBlock(blockId);
-                    return;
+            };
+            this.saveCurrentSelection = () => {
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    // Just save it - we'll validate when restoring
+                    this.savedSelection = range.cloneRange();
                 }
-                // Backspace on empty block - remove block
-                if (e.key === 'Backspace' && block.content === '' && this.blocks.length > 1) {
-                    e.preventDefault();
-                    this.removeBlock(blockId);
+            };
+            this.saveSelectionBeforeAction = (e) => {
+                // Save selection before clicking toolbar/sidebar buttons
+                this.saveCurrentSelection();
+            };
+            this.handleSelectionChange = () => {
+                const selection = window.getSelection();
+                if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
                     return;
                 }
-                // Keyboard shortcuts
-                if (e.ctrlKey || e.metaKey) {
-                    if (e.key === 'b') {
-                        e.preventDefault();
-                        this.toggleFormat('bold');
-                    }
-                    else if (e.key === 'i') {
-                        e.preventDefault();
-                        this.toggleFormat('italic');
-                    }
-                    else if (e.key === 'u') {
-                        e.preventDefault();
-                        this.toggleFormat('underline');
-                    }
-                }
-            };
-            this.handlePaste = (e) => {
-                if (this.readonly)
+                // Check if selection is within our editor
+                const range = selection.getRangeAt(0);
+                if (!this.editor.contains(range.commonAncestorContainer)) {
                     return;
-                // Allow default paste behavior for now
-                // Could add special handling for HTML/markdown paste
+                }
+                // Could add floating toolbar here if desired
             };
         }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _blocks_decorators = [property({ type: Array, attribute: false })];
             _placeholder_decorators = [property({ type: String })];
             _readonly_decorators = [property({ type: Boolean })];
-            _container_decorators = [query('.doc-container')];
-            _firstBlockElement_decorators = [query('.block-content')];
             _styles_decorators = [styles()];
             _init_decorators = [ready()];
             _cleanup_decorators = [dispose()];
-            _blocksChanged_decorators = [watch('blocks')];
-            _emitChange_decorators = [dispatch('doc-change')];
-            _emitFocus_decorators = [dispatch('doc-focus')];
-            _emitBlur_decorators = [dispatch('doc-blur')];
-            _render_decorators = [render()];
             __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _blocksChanged_decorators, { kind: "method", name: "blocksChanged", static: false, private: false, access: { has: obj => "blocksChanged" in obj, get: obj => obj.blocksChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _emitChange_decorators, { kind: "method", name: "emitChange", static: false, private: false, access: { has: obj => "emitChange" in obj, get: obj => obj.emitChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _emitFocus_decorators, { kind: "method", name: "emitFocus", static: false, private: false, access: { has: obj => "emitFocus" in obj, get: obj => obj.emitFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _emitBlur_decorators, { kind: "method", name: "emitBlur", static: false, private: false, access: { has: obj => "emitBlur" in obj, get: obj => obj.emitBlur }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _blocks_decorators, { kind: "field", name: "blocks", static: false, private: false, access: { has: obj => "blocks" in obj, get: obj => obj.blocks, set: (obj, value) => { obj.blocks = value; } }, metadata: _metadata }, _blocks_initializers, _blocks_extraInitializers);
             __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
             __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
-            __esDecorate(null, null, _container_decorators, { kind: "field", name: "container", static: false, private: false, access: { has: obj => "container" in obj, get: obj => obj.container, set: (obj, value) => { obj.container = value; } }, metadata: _metadata }, _container_initializers, _container_extraInitializers);
-            __esDecorate(null, null, _firstBlockElement_decorators, { kind: "field", name: "firstBlockElement", static: false, private: false, access: { has: obj => "firstBlockElement" in obj, get: obj => obj.firstBlockElement, set: (obj, value) => { obj.firstBlockElement = value; } }, metadata: _metadata }, _firstBlockElement_initializers, _firstBlockElement_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -238,385 +114,360 @@ let SniceDoc = (() => {
             return css /*css*/ `${cssContent}`;
         }
         init() {
-            this.addEventListener('keydown', this.handleKeyDown);
-            this.addEventListener('paste', this.handlePaste);
+            this.initializeDOM();
+            document.addEventListener('selectionchange', this.handleSelectionChange);
+            // Save selection whenever editor loses focus
+            this.editor.addEventListener('blur', this.saveCurrentSelection);
         }
         cleanup() {
-            this.removeEventListener('keydown', this.handleKeyDown);
-            this.removeEventListener('paste', this.handlePaste);
-        }
-        blocksChanged() {
-            this.emitChange();
+            document.removeEventListener('selectionchange', this.handleSelectionChange);
+            this.editor.removeEventListener('blur', this.saveCurrentSelection);
         }
-        emitChange() {
-            return new CustomEvent('doc-change', {
-                detail: { blocks: this.blocks },
-                bubbles: true,
-                composed: true,
+        initializeDOM() {
+            if (!this.shadowRoot)
+                return;
+            const wrapper = document.createElement('div');
+            wrapper.className = 'doc-wrapper';
+            // Create toolbar
+            const toolbar = this.createToolbar();
+            wrapper.appendChild(toolbar);
+            // Create editor
+            this.editor = document.createElement('div');
+            this.editor.className = 'doc-editor';
+            this.editor.contentEditable = String(!this.readonly);
+            this.editor.setAttribute('data-placeholder', this.placeholder);
+            // Add default paragraph
+            const p = document.createElement('p');
+            p.innerHTML = '<br>'; // Placeholder for empty paragraph
+            this.editor.appendChild(p);
+            this.editor.addEventListener('paste', this.handlePaste);
+            this.editor.addEventListener('keyup', this.saveCurrentSelection);
+            this.editor.addEventListener('mouseup', this.saveCurrentSelection);
+            this.editor.addEventListener('click', this.saveCurrentSelection);
+            wrapper.appendChild(this.editor);
+            this.shadowRoot.appendChild(wrapper);
+        }
+        createToolbar() {
+            const toolbar = document.createElement('div');
+            toolbar.className = 'toolbar';
+            const tools = [
+                { cmd: 'bold', label: 'B', title: 'Bold (Ctrl+B)' },
+                { cmd: 'italic', label: 'I', title: 'Italic (Ctrl+I)' },
+                { cmd: 'underline', label: 'U', title: 'Underline (Ctrl+U)' },
+                { cmd: 'strikeThrough', label: 'S', title: 'Strikethrough' },
+                { cmd: 'divider' },
+                { cmd: 'formatBlock', value: 'h1', label: 'H1', title: 'Heading 1' },
+                { cmd: 'formatBlock', value: 'h2', label: 'H2', title: 'Heading 2' },
+                { cmd: 'formatBlock', value: 'h3', label: 'H3', title: 'Heading 3' },
+                { cmd: 'formatBlock', value: 'p', label: 'P', title: 'Paragraph' },
+                { cmd: 'divider' },
+                { cmd: 'insertUnorderedList', label: '•', title: 'Bullet List' },
+                { cmd: 'insertOrderedList', label: '1.', title: 'Numbered List' },
+                { cmd: 'divider' },
+                { cmd: 'createLink', label: '🔗', title: 'Insert Link' },
+                { cmd: 'insertImage', label: '🖼', title: 'Insert Image' },
+                { cmd: 'insertTable', label: '📊', title: 'Insert Table' },
+                { cmd: 'insertDivider', label: '―', title: 'Insert Divider' },
+            ];
+            tools.forEach(tool => {
+                if (tool.cmd === 'divider') {
+                    const divider = document.createElement('div');
+                    divider.className = 'toolbar-divider';
+                    toolbar.appendChild(divider);
+                }
+                else {
+                    const btn = document.createElement('button');
+                    btn.className = 'toolbar-btn';
+                    btn.textContent = tool.label || '';
+                    btn.title = tool.title || '';
+                    btn.addEventListener('click', () => this.execCommand(tool.cmd, tool.value));
+                    toolbar.appendChild(btn);
+                }
             });
+            toolbar.addEventListener('mousedown', this.saveSelectionBeforeAction);
+            return toolbar;
+        }
+        execCommand(cmd, value) {
+            this.editor.focus();
+            switch (cmd) {
+                case 'createLink':
+                    this.showLinkDialog();
+                    break;
+                case 'insertImage':
+                    this.insertImage();
+                    break;
+                case 'insertTable':
+                    this.insertTable();
+                    break;
+                case 'insertDivider':
+                    this.insertDivider();
+                    break;
+                default:
+                    document.execCommand(cmd, false, value);
+                    break;
+            }
         }
-        emitFocus(blockId) {
-            return new CustomEvent('doc-focus', {
-                detail: { blockId },
-                bubbles: true,
-                composed: true,
+        showLinkDialog() {
+            const dialog = document.createElement('snice-modal');
+            dialog.setAttribute('title', 'Insert Link');
+            const content = document.createElement('div');
+            content.style.padding = '20px';
+            const input = document.createElement('snice-input');
+            input.setAttribute('label', 'URL');
+            input.setAttribute('placeholder', 'https://example.com');
+            input.style.width = '100%';
+            content.appendChild(input);
+            const actions = document.createElement('div');
+            actions.style.display = 'flex';
+            actions.style.gap = '10px';
+            actions.style.justifyContent = 'flex-end';
+            actions.style.marginTop = '20px';
+            const cancelBtn = document.createElement('snice-button');
+            cancelBtn.textContent = 'Cancel';
+            cancelBtn.setAttribute('variant', 'secondary');
+            cancelBtn.addEventListener('click', () => {
+                dialog.remove();
+            });
+            actions.appendChild(cancelBtn);
+            const insertBtn = document.createElement('snice-button');
+            insertBtn.textContent = 'Insert';
+            insertBtn.addEventListener('click', () => {
+                const url = input.value;
+                if (url) {
+                    this.restoreSelection();
+                    document.execCommand('createLink', false, url);
+                }
+                dialog.remove();
+            });
+            actions.appendChild(insertBtn);
+            content.appendChild(actions);
+            dialog.appendChild(content);
+            document.body.appendChild(dialog);
+            // Wait for components to be ready, then show modal
+            customElements.whenDefined('snice-modal').then(() => {
+                requestAnimationFrame(() => {
+                    dialog.show();
+                    setTimeout(() => input.focus(), 100);
+                });
             });
         }
-        emitBlur(blockId) {
-            return new CustomEvent('doc-blur', {
-                detail: { blockId },
-                bubbles: true,
-                composed: true,
+        insertImage() {
+            this.showImageDialog();
+        }
+        showImageDialog() {
+            const dialog = document.createElement('snice-modal');
+            dialog.setAttribute('title', 'Insert Image');
+            const content = document.createElement('div');
+            content.style.padding = '20px';
+            const input = document.createElement('snice-input');
+            input.setAttribute('label', 'Image URL');
+            input.setAttribute('placeholder', 'https://example.com/image.jpg');
+            input.style.width = '100%';
+            content.appendChild(input);
+            const actions = document.createElement('div');
+            actions.style.display = 'flex';
+            actions.style.gap = '10px';
+            actions.style.justifyContent = 'flex-end';
+            actions.style.marginTop = '20px';
+            const cancelBtn = document.createElement('snice-button');
+            cancelBtn.textContent = 'Cancel';
+            cancelBtn.setAttribute('variant', 'secondary');
+            cancelBtn.addEventListener('click', () => {
+                dialog.remove();
+            });
+            actions.appendChild(cancelBtn);
+            const insertBtn = document.createElement('snice-button');
+            insertBtn.textContent = 'Insert';
+            insertBtn.addEventListener('click', () => {
+                const url = input.value;
+                if (url) {
+                    this.doInsertImage(url);
+                }
+                dialog.remove();
+            });
+            actions.appendChild(insertBtn);
+            content.appendChild(actions);
+            dialog.appendChild(content);
+            document.body.appendChild(dialog);
+            // Wait for components to be ready, then show modal
+            customElements.whenDefined('snice-modal').then(() => {
+                requestAnimationFrame(() => {
+                    dialog.show();
+                    setTimeout(() => input.focus(), 100);
+                });
             });
         }
-        /**
-         * Get current blocks
-         */
-        getBlocks() {
-            return [...this.blocks];
+        doInsertImage(url) {
+            this.restoreSelection();
+            this.editor.focus();
+            const img = document.createElement('img');
+            img.src = url;
+            img.style.maxWidth = '100%';
+            img.style.height = 'auto';
+            img.style.display = 'block';
+            img.style.margin = '10px 0';
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                if (!this.editor.contains(range.commonAncestorContainer)) {
+                    this.editor.appendChild(img);
+                }
+                else {
+                    range.insertNode(img);
+                    range.setStartAfter(img);
+                    range.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            }
+            else {
+                this.editor.appendChild(img);
+            }
         }
-        /**
-         * Set blocks
-         */
-        setBlocks(blocks) {
-            this.blocks = blocks.map((b) => ({ ...b }));
+        insertTable() {
+            this.showTableDialog();
+        }
+        showTableDialog() {
+            const dialog = document.createElement('snice-modal');
+            dialog.setAttribute('title', 'Insert Table');
+            const content = document.createElement('div');
+            content.style.padding = '20px';
+            const rowsInput = document.createElement('snice-input');
+            rowsInput.setAttribute('label', 'Rows');
+            rowsInput.setAttribute('type', 'number');
+            rowsInput.setAttribute('value', '3');
+            rowsInput.style.width = '100%';
+            rowsInput.style.marginBottom = '15px';
+            content.appendChild(rowsInput);
+            const colsInput = document.createElement('snice-input');
+            colsInput.setAttribute('label', 'Columns');
+            colsInput.setAttribute('type', 'number');
+            colsInput.setAttribute('value', '3');
+            colsInput.style.width = '100%';
+            content.appendChild(colsInput);
+            const actions = document.createElement('div');
+            actions.style.display = 'flex';
+            actions.style.gap = '10px';
+            actions.style.justifyContent = 'flex-end';
+            actions.style.marginTop = '20px';
+            const cancelBtn = document.createElement('snice-button');
+            cancelBtn.textContent = 'Cancel';
+            cancelBtn.setAttribute('variant', 'secondary');
+            cancelBtn.addEventListener('click', () => {
+                dialog.remove();
+            });
+            actions.appendChild(cancelBtn);
+            const insertBtn = document.createElement('snice-button');
+            insertBtn.textContent = 'Insert';
+            insertBtn.addEventListener('click', () => {
+                const rows = parseInt(rowsInput.value) || 3;
+                const cols = parseInt(colsInput.value) || 3;
+                this.doInsertTable(rows, cols);
+                dialog.remove();
+            });
+            actions.appendChild(insertBtn);
+            content.appendChild(actions);
+            dialog.appendChild(content);
+            document.body.appendChild(dialog);
+            // Wait for components to be ready, then show modal
+            customElements.whenDefined('snice-modal').then(() => {
+                // Use connectedCallback to ensure the component is fully initialized
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        dialog.open = true;
+                        setTimeout(() => rowsInput.focus(), 100);
+                    });
+                });
+            });
         }
-        /**
-         * Export as JSON
-         */
-        toJSON() {
-            return JSON.stringify(this.blocks, null, 2);
+        doInsertTable(rows, cols) {
+            this.restoreSelection();
+            this.editor.focus();
+            const table = document.createElement('table');
+            table.style.borderCollapse = 'collapse';
+            table.style.width = '100%';
+            table.style.margin = '10px 0';
+            for (let i = 0; i < rows; i++) {
+                const tr = document.createElement('tr');
+                for (let j = 0; j < cols; j++) {
+                    const td = document.createElement('td');
+                    td.style.border = '1px solid #ddd';
+                    td.style.padding = '8px';
+                    td.innerHTML = '<br>';
+                    tr.appendChild(td);
+                }
+                table.appendChild(tr);
+            }
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                if (!this.editor.contains(range.commonAncestorContainer)) {
+                    this.editor.appendChild(table);
+                }
+                else {
+                    range.insertNode(table);
+                    range.setStartAfter(table);
+                    range.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            }
+            else {
+                this.editor.appendChild(table);
+            }
         }
-        /**
-         * Import from JSON
-         */
-        fromJSON(json) {
-            try {
-                const blocks = JSON.parse(json);
-                if (Array.isArray(blocks)) {
-                    this.blocks = blocks;
+        insertDivider() {
+            this.restoreSelection();
+            this.editor.focus();
+            const hr = document.createElement('hr');
+            hr.style.margin = '20px 0';
+            hr.style.border = 'none';
+            hr.style.borderTop = '1px solid #e1e4e8';
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                // Check if the range is within the editor
+                if (!this.editor.contains(range.commonAncestorContainer)) {
+                    this.editor.appendChild(hr);
+                }
+                else {
+                    range.insertNode(hr);
+                    range.setStartAfter(hr);
+                    range.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
                 }
             }
-            catch (error) {
-                console.error('Failed to parse JSON:', error);
+            else {
+                this.editor.appendChild(hr);
             }
         }
-        /**
-         * Export as Markdown
-         */
-        toMarkdown() {
-            return this.blocks
-                .map((block) => {
-                switch (block.type) {
-                    case 'heading-1':
-                        return `# ${block.content}`;
-                    case 'heading-2':
-                        return `## ${block.content}`;
-                    case 'heading-3':
-                        return `### ${block.content}`;
-                    case 'bulleted-list':
-                        return `- ${block.content}`;
-                    case 'numbered-list':
-                        return `1. ${block.content}`;
-                    case 'todo':
-                        return `- [${block.checked ? 'x' : ' '}] ${block.content}`;
-                    case 'code':
-                        return `\`\`\`\n${block.content}\n\`\`\``;
-                    case 'quote':
-                        return `> ${block.content}`;
-                    case 'divider':
-                        return '---';
-                    default:
-                        return block.content;
+        restoreSelection() {
+            if (this.savedSelection) {
+                const selection = window.getSelection();
+                if (selection) {
+                    selection.removeAllRanges();
+                    selection.addRange(this.savedSelection);
                 }
-            })
-                .join('\n\n');
+            }
         }
         /**
-         * Export as HTML
+         * Get document HTML
          */
-        toHTML() {
-            return this.blocks
-                .map((block) => {
-                const content = this.escapeHtml(block.content);
-                switch (block.type) {
-                    case 'heading-1':
-                        return `<h1>${content}</h1>`;
-                    case 'heading-2':
-                        return `<h2>${content}</h2>`;
-                    case 'heading-3':
-                        return `<h3>${content}</h3>`;
-                    case 'bulleted-list':
-                        return `<ul><li>${content}</li></ul>`;
-                    case 'numbered-list':
-                        return `<ol><li>${content}</li></ol>`;
-                    case 'todo':
-                        return `<input type="checkbox" ${block.checked ? 'checked' : ''}>${content}`;
-                    case 'code':
-                        return `<pre><code>${content}</code></pre>`;
-                    case 'quote':
-                        return `<blockquote>${content}</blockquote>`;
-                    case 'divider':
-                        return '<hr>';
-                    default:
-                        return `<p>${content}</p>`;
-                }
-            })
-                .join('\n');
+        getHTML() {
+            return this.editor.innerHTML;
         }
         /**
-         * Focus the editor
+         * Set document HTML
          */
-        focus() {
-            this.firstBlockElement?.focus();
+        setHTML(html) {
+            this.editor.innerHTML = html;
         }
         /**
-         * Clear all content
+         * Clear document
          */
         clear() {
-            this.blocks = [{ id: generateId(), type: 'paragraph', content: '', formats: [] }];
-        }
-        escapeHtml(text) {
-            return text
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;')
-                .replace(/"/g, '&quot;')
-                .replace(/'/g, '&#039;');
-        }
-        handleInput(blockId, e) {
-            if (this.readonly)
-                return;
-            const target = e.target;
-            const content = target.textContent || '';
-            const blockIndex = this.blocks.findIndex((b) => b.id === blockId);
-            if (blockIndex === -1)
-                return;
-            // Check for block menu trigger
-            if (content.startsWith('/')) {
-                this.showBlockMenuFor(blockId, content.slice(1));
-            }
-            else {
-                this.hideBlockMenu();
-            }
-            // Update block content
-            this.blocks = this.blocks.map((b) => b.id === blockId ? { ...b, content: content } : b);
-        }
-        handleFocus(blockId) {
-            this.emitFocus(blockId);
-        }
-        handleBlur(blockId) {
-            this.emitBlur(blockId);
-        }
-        createNewBlock(afterBlockId) {
-            const index = this.blocks.findIndex((b) => b.id === afterBlockId);
-            if (index === -1)
-                return;
-            const newBlock = {
-                id: generateId(),
-                type: 'paragraph',
-                content: '',
-                formats: [],
-            };
-            this.blocks = [
-                ...this.blocks.slice(0, index + 1),
-                newBlock,
-                ...this.blocks.slice(index + 1),
-            ];
-            // Focus new block
-            setTimeout(() => {
-                const el = this.shadowRoot?.querySelector(`[data-block-id="${newBlock.id}"]`);
-                el?.focus();
-            });
-        }
-        removeBlock(blockId) {
-            const index = this.blocks.findIndex((b) => b.id === blockId);
-            if (index === -1)
-                return;
-            this.blocks = this.blocks.filter((b) => b.id !== blockId);
-            // Focus previous block
-            if (index > 0) {
-                setTimeout(() => {
-                    const prevBlock = this.blocks[index - 1];
-                    const el = this.shadowRoot?.querySelector(`[data-block-id="${prevBlock.id}"]`);
-                    el?.focus();
-                });
-            }
-        }
-        toggleFormat(format) {
-            // TODO: Implement inline formatting
-            console.log('Toggle format:', format);
-        }
-        showBlockMenuFor(blockId, filter) {
-            this.showBlockMenu = true;
-            this.blockMenuBlockId = blockId;
-            this.blockMenuFilter = filter;
-            this.blockMenuSelectedIndex = 0;
-        }
-        hideBlockMenu() {
-            this.showBlockMenu = false;
-            this.blockMenuFilter = '';
-            this.blockMenuSelectedIndex = 0;
-        }
-        getFilteredBlockMenuItems() {
-            if (!this.blockMenuFilter)
-                return BLOCK_MENU_ITEMS;
-            const filter = this.blockMenuFilter.toLowerCase();
-            return BLOCK_MENU_ITEMS.filter((item) => item.label.toLowerCase().includes(filter) ||
-                item.keywords.some((k) => k.includes(filter)));
-        }
-        selectBlockType(blockId, type) {
-            this.blocks = this.blocks.map((b) => b.id === blockId ? { ...b, type, content: '' } : b);
-            this.hideBlockMenu();
-            // Focus the block
-            setTimeout(() => {
-                const el = this.shadowRoot?.querySelector(`[data-block-id="${blockId}"]`);
-                el?.focus();
-            });
-        }
-        handleBlockMenuItemClick(blockId, type) {
-            this.selectBlockType(blockId, type);
-        }
-        handleTodoToggle(blockId) {
-            if (this.readonly)
-                return;
-            this.blocks = this.blocks.map((b) => b.id === blockId ? { ...b, checked: !b.checked } : b);
-        }
-        handleDragStart(blockId, e) {
-            if (this.readonly)
-                return;
-            this.draggedBlock = blockId;
-            e.dataTransfer.effectAllowed = 'move';
-        }
-        handleDragOver(blockId, e) {
-            if (this.readonly)
-                return;
-            if (!this.draggedBlock || this.draggedBlock === blockId)
-                return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = 'move';
-        }
-        handleDrop(blockId, e) {
-            if (this.readonly)
-                return;
-            e.preventDefault();
-            if (!this.draggedBlock || this.draggedBlock === blockId)
-                return;
-            const draggedIndex = this.blocks.findIndex((b) => b.id === this.draggedBlock);
-            const targetIndex = this.blocks.findIndex((b) => b.id === blockId);
-            if (draggedIndex === -1 || targetIndex === -1)
-                return;
-            const newBlocks = [...this.blocks];
-            const [draggedBlock] = newBlocks.splice(draggedIndex, 1);
-            newBlocks.splice(targetIndex, 0, draggedBlock);
-            this.blocks = newBlocks;
-            this.draggedBlock = null;
-        }
-        handleDragEnd() {
-            this.draggedBlock = null;
-        }
-        render() {
-            return html /*html*/ `
-      <div class="doc-container">
-        ${this.blocks.map((block, index) => this.renderBlock(block, index))}
-        ${this.showBlockMenu ? this.renderBlockMenu() : ''}
-      </div>
-    `;
-        }
-        renderBlock(block, index) {
-            const placeholder = index === 0 && !block.content ? this.placeholder : "Type '/' for commands";
-            const isDivider = block.type === 'divider';
-            if (isDivider) {
-                return html /*html*/ `
-        <div class="doc-block block-divider" data-block-id="${block.id}">
-          <div
-            class="block-handle"
-            draggable="${!this.readonly}"
-            @dragstart="${(e) => this.handleDragStart(block.id, e)}"
-            @dragend="${() => this.handleDragEnd()}"
-          >
-            <svg viewBox="0 0 16 16" fill="currentColor">
-              <circle cx="3" cy="3" r="1.5" />
-              <circle cx="8" cy="3" r="1.5" />
-              <circle cx="3" cy="8" r="1.5" />
-              <circle cx="8" cy="8" r="1.5" />
-              <circle cx="3" cy="13" r="1.5" />
-              <circle cx="8" cy="13" r="1.5" />
-            </svg>
-          </div>
-        </div>
-      `;
-            }
-            const isTodo = block.type === 'todo';
-            const isNumberedList = block.type === 'numbered-list';
-            return html /*html*/ `
-      <div
-        class="doc-block block-${block.type} ${block.checked ? 'checked' : ''} ${this
-                .draggedBlock === block.id
-                ? 'dragging'
-                : ''}"
-        data-block-id="${block.id}"
-        @dragover="${(e) => this.handleDragOver(block.id, e)}"
-        @drop="${(e) => this.handleDrop(block.id, e)}"
-        data-number="${isNumberedList ? index + 1 : ''}"
-      >
-        <div
-          class="block-handle"
-          draggable="${!this.readonly}"
-          @dragstart="${(e) => this.handleDragStart(block.id, e)}"
-          @dragend="${() => this.handleDragEnd()}"
-        >
-          <svg viewBox="0 0 16 16" fill="currentColor">
-            <circle cx="3" cy="3" r="1.5" />
-            <circle cx="8" cy="3" r="1.5" />
-            <circle cx="3" cy="8" r="1.5" />
-            <circle cx="8" cy="8" r="1.5" />
-            <circle cx="3" cy="13" r="1.5" />
-            <circle cx="8" cy="13" r="1.5" />
-          </svg>
-        </div>
-        ${isTodo
-                ? html `<input
-              type="checkbox"
-              class="todo-checkbox"
-              ?checked="${block.checked}"
-              @change="${() => this.handleTodoToggle(block.id)}"
-            />`
-                : ''}
-        <div
-          class="block-content"
-          contenteditable="${!this.readonly}"
-          data-block-id="${block.id}"
-          data-placeholder="${placeholder}"
-          @input="${(e) => this.handleInput(block.id, e)}"
-          @focus="${() => this.handleFocus(block.id)}"
-          @blur="${() => this.handleBlur(block.id)}"
-        >
-          ${block.content}
-        </div>
-      </div>
-    `;
-        }
-        renderBlockMenu() {
-            const items = this.getFilteredBlockMenuItems();
-            return html /*html*/ `
-      <div class="block-menu">
-        ${items.map((item, index) => html `
-            <div
-              class="block-menu-item ${index === this.blockMenuSelectedIndex ? 'selected' : ''}"
-              @click="${() => this.handleBlockMenuItemClick(this.blockMenuBlockId, item.type)}"
-            >
-              <div class="block-menu-icon">${item.icon}</div>
-              <div class="block-menu-label">${item.label}</div>
-            </div>
-          `)}
-        ${items.length === 0
-                ? html `<div class="block-menu-item">
-              <div class="block-menu-label">No results</div>
-            </div>`
-                : ''}
-      </div>
-    `;
+            this.editor.innerHTML = '<p><br></p>';
         }
     });
     return _classThis;