snice 4.14.0 → 4.16.0

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

@@ -1,5 +1,5 @@
 /*!
- * snice v4.13.0
+ * snice v4.15.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -64,8 +64,28 @@ var SniceDoc = (function (exports, snice) {
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  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}";
+  var cssContent = ":host{display:block;font-family:var(--snice-doc-font-family, var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif));font-size:var(--snice-doc-font-size, var(--snice-font-size-md, 16px));line-height:var(--snice-line-height-loose, 1.6);color:var(--snice-doc-text-color,var(--snice-color-text,#333));background:var(--snice-doc-background,var(--snice-color-background,#fff));height:100%;min-height:600px}.doc-wrapper{display:flex;flex-direction:column;height:100%}.toolbar{display:flex;gap:var(--snice-spacing-2xs,4px);padding:var(--snice-spacing-xs,8px) var(--snice-spacing-sm,12px);background:var(--snice-doc-toolbar-background,var(--snice-color-background-secondary,#f6f8fa));border-bottom:1px solid var(--snice-doc-border,var(--snice-color-border,#e1e4e8));flex-wrap:wrap;position:relative}.toolbar-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border:1px solid var(--snice-doc-border,var(--snice-color-border,#e1e4e8));background:var(--snice-doc-background,var(--snice-color-background,#fff));border-radius:var(--snice-border-radius-md,4px);cursor:pointer;font-weight:var(--snice-font-weight-semibold,600);font-size:var(--snice-font-size-sm, 14px);color:var(--snice-doc-text-color,var(--snice-color-text,#333));transition:all var(--snice-transition-fast, 150ms);min-width:32px;min-height:32px}.toolbar-btn:hover{background:var(--snice-doc-hover-background,var(--snice-color-background-hover,#e8eaed));border-color:var(--snice-doc-primary-color,var(--snice-color-primary,#0969da))}.toolbar-btn:active{transform:translateY(1px)}.toolbar-divider{width:1px;background:var(--snice-doc-border,var(--snice-color-border,#e1e4e8));margin:0 var(--snice-spacing-2xs,4px)}.doc-main{display:flex;flex:1;overflow:hidden}.doc-sidebar{width:200px;background:var(--snice-doc-sidebar-background,var(--snice-color-background-secondary,#f6f8fa));border-right:1px solid var(--snice-doc-border,var(--snice-color-border,#e1e4e8));padding:var(--snice-spacing-md,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,var(--snice-color-background,#fff));border:1px solid var(--snice-doc-border,var(--snice-color-border,#e1e4e8));border-radius:var(--snice-border-radius-md,4px);width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-sm, 14px);color:var(--snice-doc-text-color,var(--snice-color-text,#333));transition:background var(--snice-transition-fast, 150ms)}.sidebar-toggle:hover{background:var(--snice-doc-hover-background,var(--snice-color-background-hover,#e1e4e8))}.sidebar-header{font-weight:var(--snice-font-weight-semibold,600);font-size:var(--snice-font-size-xs, 12px);color:var(--snice-doc-muted-color,var(--snice-color-text-secondary,#666));text-transform:uppercase;padding:0 var(--snice-spacing-md,16px) var(--snice-spacing-xs,8px);margin-bottom:var(--snice-spacing-xs,8px);border-bottom:1px solid var(--snice-doc-border,var(--snice-color-border,#e1e4e8))}.sidebar-item{display:flex;align-items:center;gap:var(--snice-spacing-sm,12px);padding:10px var(--snice-spacing-md,16px);border:none;background:0 0;cursor:pointer;width:100%;text-align:left;font-size:var(--snice-font-size-sm, 14px);color:var(--snice-doc-text-color,var(--snice-color-text,#333));transition:background var(--snice-transition-fast, 150ms)}.sidebar-item:hover{background:var(--snice-doc-hover-background,var(--snice-color-background-hover,#f0f0f0))}.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,var(--snice-color-text-tertiary,#999));pointer-events:none}.doc-editor p{margin:0 0 var(--snice-spacing-sm,12px);min-height:1.6em}.doc-editor h1{font-size:2em;font-weight:var(--snice-font-weight-bold,700);line-height:var(--snice-line-height-dense, 1.2);margin:var(--snice-spacing-lg,24px) 0 var(--snice-spacing-md,16px)}.doc-editor h2{font-size:1.5em;font-weight:var(--snice-font-weight-bold,700);line-height:1.3;margin:20px 0 var(--snice-spacing-sm,12px)}.doc-editor h3{font-size:1.25em;font-weight:var(--snice-font-weight-bold,700);line-height:1.4;margin:var(--snice-spacing-md,16px) 0 var(--snice-spacing-xs,8px)}.doc-editor ol,.doc-editor ul{margin:0 0 var(--snice-spacing-sm,12px);padding-left:30px}.doc-editor li{margin:var(--snice-spacing-2xs,4px) 0}.doc-editor code{font-family:var(--snice-font-family-mono, 'Monaco', 'Menlo', 'Consolas', monospace);font-size:.9em;background:var(--snice-doc-inline-code-background,var(--snice-color-background-tertiary,rgba(175,184,193,.2)));padding:2px 6px;border-radius:var(--snice-border-radius-sm,3px)}.doc-editor a{color:var(--snice-doc-link-color,var(--snice-color-primary,#0969da));text-decoration:underline}.doc-editor img{max-width:100%;height:auto;display:block;margin:var(--snice-spacing-md,16px) 0;border-radius:var(--snice-border-radius-md,4px)}.doc-editor table{border-collapse:collapse;width:100%;margin:var(--snice-spacing-md,16px) 0}.doc-editor table td,.doc-editor table th{border:1px solid var(--snice-doc-border,var(--snice-color-border,#e1e4e8));padding:var(--snice-spacing-xs,8px) var(--snice-spacing-sm,12px)}.doc-editor table th{background:var(--snice-doc-sidebar-background,var(--snice-color-background-secondary,#f6f8fa));font-weight:var(--snice-font-weight-semibold,600)}.doc-editor hr{margin:20px 0;border:none;border-top:1px solid var(--snice-doc-border,var(--snice-color-border,#e1e4e8))}.download-menu{position:absolute;right:var(--snice-spacing-sm,12px);top:100%;background:var(--snice-doc-background,var(--snice-color-background,#fff));border:1px solid var(--snice-doc-border,var(--snice-color-border,#e1e4e8));border-radius:var(--snice-border-radius-lg,6px);box-shadow:var(--snice-shadow-md,0 4px 12px rgba(0,0,0,.15));z-index:var(--snice-z-index-dropdown,100);min-width:160px;padding:var(--snice-spacing-2xs,4px)}.download-menu-item{display:block;width:100%;padding:var(--snice-spacing-xs,8px) var(--snice-spacing-sm,12px);border:none;background:0 0;text-align:left;font-size:var(--snice-font-size-sm, 14px);color:var(--snice-doc-text-color,var(--snice-color-text,#333));cursor:pointer;border-radius:var(--snice-border-radius-md,4px)}.download-menu-item:hover{background:var(--snice-doc-hover-background,var(--snice-color-background-hover,#e8eaed))}.toolbar-btn .icon--material{font-family:'Material Symbols Outlined',sans-serif;font-size:20px;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased}.toolbar-btn .icon--fa{font-size:var(--snice-font-size-sm, 14px)}:host([readonly]) .doc-sidebar,:host([readonly]) .toolbar{display:none}:host([readonly]) .doc-editor{cursor:default}";
 
+  const ICON_MAP = {
+      default: {
+          bold: 'B', italic: 'I', underline: 'U', strikethrough: 'S',
+          h1: 'H1', h2: 'H2', h3: 'H3', paragraph: 'P',
+          'bullet-list': '•', 'numbered-list': '1.',
+          link: '🔗', image: '🖼', table: '📊', divider: '―', download: '⬇'
+      },
+      material: {
+          bold: 'format_bold', italic: 'format_italic', underline: 'format_underlined', strikethrough: 'strikethrough_s',
+          h1: 'looks_one', h2: 'looks_two', h3: 'looks_3', paragraph: 'notes',
+          'bullet-list': 'format_list_bulleted', 'numbered-list': 'format_list_numbered',
+          link: 'link', image: 'image', table: 'table_chart', divider: 'horizontal_rule', download: 'download'
+      },
+      fontawesome: {
+          bold: 'fa-bold', italic: 'fa-italic', underline: 'fa-underline', strikethrough: 'fa-strikethrough',
+          h1: 'fa-heading', h2: 'fa-heading', h3: 'fa-heading', paragraph: 'fa-paragraph',
+          'bullet-list': 'fa-list-ul', 'numbered-list': 'fa-list-ol',
+          link: 'fa-link', image: 'fa-image', table: 'fa-table', divider: 'fa-minus', download: 'fa-download'
+      }
+  };
   /**
    * snice-doc - Simple document editor
    */
@@ -82,6 +102,9 @@ var SniceDoc = (function (exports, snice) {
       let _readonly_decorators;
       let _readonly_initializers = [];
       let _readonly_extraInitializers = [];
+      let _icons_decorators;
+      let _icons_initializers = [];
+      let _icons_extraInitializers = [];
       let _styles_decorators;
       let _init_decorators;
       let _cleanup_decorators;
@@ -91,7 +114,8 @@ var SniceDoc = (function (exports, snice) {
               super(...arguments);
               this.placeholder = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _placeholder_initializers, 'Start typing...'));
               this.readonly = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _readonly_initializers, false));
-              this.editor = __runInitializers(this, _readonly_extraInitializers);
+              this.icons = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _icons_initializers, 'default'));
+              this.editor = __runInitializers(this, _icons_extraInitializers);
               this.showFormatToolbar = false;
               this.formatToolbarPosition = null;
               this.savedSelection = null;
@@ -135,12 +159,10 @@ var SniceDoc = (function (exports, snice) {
                   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();
                   }
               };
               this.saveSelectionBeforeAction = (e) => {
-                  // Save selection before clicking toolbar/sidebar buttons
                   this.saveCurrentSelection();
               };
               this.handleSelectionChange = () => {
@@ -148,18 +170,17 @@ var SniceDoc = (function (exports, snice) {
                   if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
                       return;
                   }
-                  // Check if selection is within our editor
                   const range = selection.getRangeAt(0);
                   if (!this.editor.contains(range.commonAncestorContainer)) {
                       return;
                   }
-                  // Could add floating toolbar here if desired
               };
           }
           static {
               const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
               _placeholder_decorators = [snice.property({ type: String })];
               _readonly_decorators = [snice.property({ type: Boolean })];
+              _icons_decorators = [snice.property({ type: String })];
               _styles_decorators = [snice.styles()];
               _init_decorators = [snice.ready()];
               _cleanup_decorators = [snice.dispose()];
@@ -168,6 +189,7 @@ var SniceDoc = (function (exports, snice) {
               __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(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, _icons_decorators, { kind: "field", name: "icons", static: false, private: false, access: { has: obj => "icons" in obj, get: obj => obj.icons, set: (obj, value) => { obj.icons = value; } }, metadata: _metadata }, _icons_initializers, _icons_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 });
@@ -179,7 +201,6 @@ var SniceDoc = (function (exports, snice) {
           init() {
               this.initializeDOM();
               document.addEventListener('selectionchange', this.handleSelectionChange);
-              // Save selection whenever editor loses focus
               this.editor.addEventListener('blur', this.saveCurrentSelection);
           }
           cleanup() {
@@ -191,17 +212,14 @@ var SniceDoc = (function (exports, snice) {
                   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
+              p.innerHTML = '<br>';
               this.editor.appendChild(p);
               this.editor.addEventListener('paste', this.handlePaste);
               this.editor.addEventListener('keyup', this.saveCurrentSelection);
@@ -210,27 +228,53 @@ var SniceDoc = (function (exports, snice) {
               wrapper.appendChild(this.editor);
               this.shadowRoot.appendChild(wrapper);
           }
+          createToolbarButton(icon, title) {
+              const btn = document.createElement('button');
+              btn.className = 'toolbar-btn';
+              btn.title = title;
+              const map = ICON_MAP[this.icons];
+              const iconValue = map[icon] || icon;
+              if (this.icons === 'material') {
+                  const span = document.createElement('span');
+                  span.className = 'icon--material';
+                  span.setAttribute('part', 'icon');
+                  span.textContent = iconValue;
+                  btn.appendChild(span);
+              }
+              else if (this.icons === 'fontawesome') {
+                  const i = document.createElement('i');
+                  i.className = `icon--fa fa-solid ${iconValue}`;
+                  i.setAttribute('part', 'icon');
+                  btn.appendChild(i);
+              }
+              else {
+                  btn.textContent = iconValue;
+              }
+              return btn;
+          }
           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: 'bold', icon: 'bold', title: 'Bold (Ctrl+B)' },
+                  { cmd: 'italic', icon: 'italic', title: 'Italic (Ctrl+I)' },
+                  { cmd: 'underline', icon: 'underline', title: 'Underline (Ctrl+U)' },
+                  { cmd: 'strikeThrough', icon: 'strikethrough', title: 'Strikethrough' },
+                  { cmd: 'divider' },
+                  { cmd: 'formatBlock', value: 'h1', icon: 'h1', title: 'Heading 1' },
+                  { cmd: 'formatBlock', value: 'h2', icon: 'h2', title: 'Heading 2' },
+                  { cmd: 'formatBlock', value: 'h3', icon: 'h3', title: 'Heading 3' },
+                  { cmd: 'formatBlock', value: 'p', icon: 'paragraph', title: 'Paragraph' },
                   { 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: 'insertUnorderedList', icon: 'bullet-list', title: 'Bullet List' },
+                  { cmd: 'insertOrderedList', icon: 'numbered-list', title: 'Numbered List' },
                   { cmd: 'divider' },
-                  { cmd: 'insertUnorderedList', label: '•', title: 'Bullet List' },
-                  { cmd: 'insertOrderedList', label: '1.', title: 'Numbered List' },
+                  { cmd: 'createLink', icon: 'link', title: 'Insert Link' },
+                  { cmd: 'insertImage', icon: 'image', title: 'Insert Image' },
+                  { cmd: 'insertTable', icon: 'table', title: 'Insert Table' },
+                  { cmd: 'insertDivider', icon: 'divider', title: 'Insert Divider' },
                   { 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' },
+                  { cmd: 'download', icon: 'download', title: 'Download' },
               ];
               tools.forEach(tool => {
                   if (tool.cmd === 'divider') {
@@ -239,10 +283,7 @@ var SniceDoc = (function (exports, snice) {
                       toolbar.appendChild(divider);
                   }
                   else {
-                      const btn = document.createElement('button');
-                      btn.className = 'toolbar-btn';
-                      btn.textContent = tool.label || '';
-                      btn.title = tool.title || '';
+                      const btn = this.createToolbarButton(tool.icon, tool.title);
                       btn.addEventListener('click', () => this.execCommand(tool.cmd, tool.value));
                       toolbar.appendChild(btn);
                   }
@@ -251,6 +292,10 @@ var SniceDoc = (function (exports, snice) {
               return toolbar;
           }
           execCommand(cmd, value) {
+              if (cmd === 'download') {
+                  this.showDownloadMenu();
+                  return;
+              }
               this.editor.focus();
               switch (cmd) {
                   case 'createLink':
@@ -270,6 +315,41 @@ var SniceDoc = (function (exports, snice) {
                       break;
               }
           }
+          showDownloadMenu() {
+              const existing = this.shadowRoot?.querySelector('.download-menu');
+              if (existing) {
+                  existing.remove();
+                  return;
+              }
+              const menu = document.createElement('div');
+              menu.className = 'download-menu';
+              const formats = [
+                  { format: 'html', label: 'HTML (.html)' },
+                  { format: 'markdown', label: 'Markdown (.md)' },
+                  { format: 'text', label: 'Plain Text (.txt)' },
+              ];
+              formats.forEach(f => {
+                  const item = document.createElement('button');
+                  item.className = 'download-menu-item';
+                  item.textContent = f.label;
+                  item.addEventListener('click', () => {
+                      this.downloadAs(f.format);
+                      menu.remove();
+                  });
+                  menu.appendChild(item);
+              });
+              const toolbar = this.shadowRoot?.querySelector('.toolbar');
+              if (toolbar) {
+                  toolbar.appendChild(menu);
+              }
+              const closeHandler = (e) => {
+                  if (!menu.contains(e.target)) {
+                      menu.remove();
+                      document.removeEventListener('click', closeHandler);
+                  }
+              };
+              setTimeout(() => document.addEventListener('click', closeHandler), 0);
+          }
           showLinkDialog() {
               const dialog = document.createElement('snice-modal');
               dialog.setAttribute('title', 'Insert Link');
@@ -306,7 +386,6 @@ var SniceDoc = (function (exports, snice) {
               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();
@@ -352,7 +431,6 @@ var SniceDoc = (function (exports, snice) {
               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();
@@ -432,9 +510,7 @@ var SniceDoc = (function (exports, snice) {
               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;
@@ -489,7 +565,6 @@ var SniceDoc = (function (exports, snice) {
               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);
                   }
@@ -526,12 +601,123 @@ var SniceDoc = (function (exports, snice) {
           setHTML(html) {
               this.editor.innerHTML = html;
           }
+          /**
+           * Get document as plain text
+           */
+          getText() {
+              return this.editor.innerText || '';
+          }
+          /**
+           * Get document as markdown
+           */
+          getMarkdown() {
+              return this.nodeToMarkdown(this.editor).trim() + '\n';
+          }
+          /**
+           * Download document in specified format
+           */
+          downloadAs(format, filename) {
+              let content;
+              let mimeType;
+              let ext;
+              switch (format) {
+                  case 'html':
+                      content = this.getHTML();
+                      mimeType = 'text/html';
+                      ext = 'html';
+                      break;
+                  case 'markdown':
+                      content = this.getMarkdown();
+                      mimeType = 'text/markdown';
+                      ext = 'md';
+                      break;
+                  case 'text':
+                      content = this.getText();
+                      mimeType = 'text/plain';
+                      ext = 'txt';
+                      break;
+              }
+              const name = filename || `document.${ext}`;
+              const blob = new Blob([content], { type: mimeType });
+              const url = URL.createObjectURL(blob);
+              const a = document.createElement('a');
+              a.href = url;
+              a.download = name;
+              a.click();
+              URL.revokeObjectURL(url);
+          }
           /**
            * Clear document
            */
           clear() {
               this.editor.innerHTML = '<p><br></p>';
           }
+          nodeToMarkdown(node) {
+              if (node.nodeType === Node.TEXT_NODE) {
+                  return node.textContent || '';
+              }
+              if (node.nodeType !== Node.ELEMENT_NODE)
+                  return '';
+              const el = node;
+              const tag = el.tagName.toLowerCase();
+              const children = Array.from(el.childNodes).map(n => this.nodeToMarkdown(n)).join('');
+              switch (tag) {
+                  case 'h1': return `# ${children.trim()}\n\n`;
+                  case 'h2': return `## ${children.trim()}\n\n`;
+                  case 'h3': return `### ${children.trim()}\n\n`;
+                  case 'h4': return `#### ${children.trim()}\n\n`;
+                  case 'h5': return `##### ${children.trim()}\n\n`;
+                  case 'h6': return `###### ${children.trim()}\n\n`;
+                  case 'p': return `${children.trim()}\n\n`;
+                  case 'br': return '\n';
+                  case 'b':
+                  case 'strong': return `**${children}**`;
+                  case 'i':
+                  case 'em': return `*${children}*`;
+                  case 'u': return `<u>${children}</u>`;
+                  case 's':
+                  case 'strike':
+                  case 'del': return `~~${children}~~`;
+                  case 'a': return `[${children}](${el.href})`;
+                  case 'img': return `![${el.alt || ''}](${el.src})`;
+                  case 'ul': return this.listToMarkdown(el, false);
+                  case 'ol': return this.listToMarkdown(el, true);
+                  case 'li': return children.trim();
+                  case 'hr': return '---\n\n';
+                  case 'code': return `\`${children}\``;
+                  case 'blockquote': return children.split('\n').filter(l => l.trim()).map(line => `> ${line}`).join('\n') + '\n\n';
+                  case 'table': return this.tableToMarkdown(el);
+                  case 'div': return children;
+                  default: return children;
+              }
+          }
+          listToMarkdown(el, ordered) {
+              let result = '';
+              const items = el.querySelectorAll(':scope > li');
+              items.forEach((li, i) => {
+                  const prefix = ordered ? `${i + 1}. ` : '- ';
+                  const content = this.nodeToMarkdown(li);
+                  result += `${prefix}${content}\n`;
+              });
+              return result + '\n';
+          }
+          tableToMarkdown(el) {
+              const rows = el.querySelectorAll('tr');
+              if (rows.length === 0)
+                  return '';
+              let result = '';
+              let isFirst = true;
+              rows.forEach(row => {
+                  const cells = row.querySelectorAll('td, th');
+                  const cellTexts = Array.from(cells).map(cell => this.nodeToMarkdown(cell).trim());
+                  result += `| ${cellTexts.join(' | ')} |\n`;
+                  if (isFirst) {
+                      result += `| ${cellTexts.map(() => '---').join(' | ')} |\n`;
+                      isFirst = false;
+                  }
+              });
+              return result + '\n';
+          }
       });
       return _classThis;
   })();