@kubex/zinc 1.0.9 → 1.0.11

package/docs/pages/components/dropdown.md

@@ -6,7 +6,12 @@ layout: component
 ---
 
 ```html:preview
-<zn-dropdown></zn-dropdown>
+<zn-dropdown t="[object Object]" placement="bottom-start">
+              <zn-menu actions="[{&quot;confirm&quot;:{&quot;type&quot;:&quot;success&quot;,&quot;trigger&quot;:&quot;reactivate10&quot;,&quot;caption&quot;:&quot;Reactivate Access&quot;,&quot;content&quot;:&quot;Are you sure you want to reactivate access for John Doe?&quot;,&quot;action&quot;:&quot;#&quot;},&quot;title&quot;:&quot;Reactivate Access&quot;,&quot;style&quot;:&quot;success&quot;}]" t="[object Object]" role="menu"></zn-menu>
+              <button slot="trigger">
+                <zn-icon src="more_vert" t="[object Object]" size="24" library="material-symbols-outlined"></zn-icon>
+              </button>
+            </zn-dropdown>
 ```
 
 ## Examples

package/docs/pages/components/table.md

@@ -6,7 +6,7 @@ layout: component
 ---
 
 ```html:preview
-<zn-table></zn-table>
+<zn-table fixed-first="" t="light" has-actions="" data="{&quot;header&quot;:[&quot;Full Name&quot;,&quot;User ID&quot;,&quot;Email&quot;,&quot;Type&quot;,&quot;Partner&quot;,&quot;State&quot;,&quot;Date Joined&quot;],&quot;items&quot;: [{&quot;actions&quot;: [{&quot;confirm&quot;: {&quot;type&quot;: &quot;success&quot;,&quot;trigger&quot;: &quot;reactivate10&quot;,&quot;caption&quot;: &quot;Reactivate Access&quot;,&quot;content&quot;: &quot;Are you sure you want to reactivate access for John Doe?&quot;,&quot;action&quot;: &quot;#&quot;},&quot;title&quot;: &quot;Reactivate Access&quot;,&quot;style&quot;: &quot;success&quot;}],&quot;caption&quot;: &quot;John Doe&quot;,&quot;data&quot;: [&quot;1&quot;,&quot;john.doe@example.com&quot;,&quot;Member&quot;,&quot;&quot;,&quot;&lt;span class='zn-success'&gt;Active&lt;/span&gt;&quot;,&quot;2025-01-01 12:10:20&quot;]}]}"></zn-table>
 ```
 
 ## Examples

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/button-menu/button-menu.component.ts

@@ -307,6 +307,7 @@ export default class ZnButtonMenu extends ZincElement {
   public setDynamicButtons(btns: NodeListOf<ZnButton>) {
     // remove all buttons that have the zn-button-menu__added class
     this.removeAllButtons();
+    if (!btns || btns.length === 0) return;
 
     // add the new buttons
     btns.forEach((button: ZnButton) => {

package/src/components/editor/editor.component.ts

@@ -25,6 +25,18 @@ import type ToolbarComponent from "./modules/toolbar/toolbar.component";
 
 import styles from './editor.scss';
 
+export interface EditorFeatureConfig {
+  codeBlocksEnabled?: boolean;
+  dividersEnabled?: boolean;
+  linksEnabled?: boolean;
+  attachmentsEnabled?: boolean;
+  imagesEnabled?: boolean;
+  videosEnabled?: boolean;
+  datesEnabled?: boolean;
+  emojisEnabled?: boolean;
+  codeEnabled?: boolean;
+}
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/editor
@@ -66,6 +78,17 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   @property({attribute: 'attachment-url', type: String})
   uploadAttachmentUrl: string;
 
+  /* Feature Permission Attributes */
+  @property({attribute: 'code-blocks', type: Boolean}) codeBlocksEnabled: boolean = false;
+  @property({attribute: 'dividers', type: Boolean}) dividersEnabled: boolean = false;
+  @property({attribute: 'links', type: Boolean}) linksEnabled: boolean = false;
+  @property({attribute: 'attachments', type: Boolean}) attachmentsEnabled: boolean = false;
+  @property({attribute: 'images', type: Boolean}) imagesEnabled: boolean = false;
+  @property({attribute: 'videos', type: Boolean}) videosEnabled: boolean = false;
+  @property({attribute: 'dates', type: Boolean}) datesEnabled: boolean = false;
+  @property({attribute: 'emojis', type: Boolean}) emojisEnabled: boolean = false;
+  @property({attribute: 'code', type: Boolean}) codeEnabled: boolean = false;
+  @property({attribute: 'ai', type: Boolean}) aiEnabled: boolean = false;
   @property({attribute: 'ai-path'}) aiPath: string = '';
 
   private quillElement: Quill;
@@ -111,10 +134,16 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     });
 
     Quill.register({'modules/toolbar': Toolbar}, true);
-    Quill.register({'modules/datePicker': DatePicker}, true);
-    Quill.register({'modules/emoji': Emoji}, true);
-    Quill.register({'modules/headlessEmoji': HeadlessEmoji}, true);
-    Quill.register({'modules/attachment': Attachment}, true);
+    if (this.datesEnabled) {
+      Quill.register({'modules/datePicker': DatePicker}, true);
+    }
+    if (this.emojisEnabled) {
+      Quill.register({'modules/emoji': Emoji}, true);
+      Quill.register({'modules/headlessEmoji': HeadlessEmoji}, true);
+    }
+    if (this.attachmentsEnabled) {
+      Quill.register({'modules/attachment': Attachment}, true);
+    }
     Quill.register({'modules/timeTracking': TimeTracking}, true);
     Quill.register({'modules/dragAndDrop': DragAndDrop}, true);
     Quill.register({'modules/imageResize': ImageResize}, true);
@@ -122,80 +151,106 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     Quill.register({'modules/dialog': Dialog}, true);
 
     /* AI Modules */
-    Quill.register('modules/ai', QuillAI as any, true);
+    if (this.aiEnabled) {
+      Quill.register('modules/ai', QuillAI as any, true);
+    }
 
     // Register a custom HR blot so we can insert an inline horizontal rule block
-    const BlockEmbed = Quill.import('blots/block/embed') as { new(...args: any[]): any };
-
-    class HrBlot extends BlockEmbed {
-      static blotName = 'hr';
-      static tagName = 'HR';
-      static className = 'ql-hr';
-
-      static create(): HTMLElement {
-        const node = document.createElement('hr');
-        node.classList.add('ql-hr');
-        return node;
+    if (this.dividersEnabled) {
+      const BlockEmbed = Quill.import('blots/block/embed') as { new(...args: any[]): any };
+
+      class HrBlot extends BlockEmbed {
+        static blotName = 'hr';
+        static tagName = 'HR';
+        static className = 'ql-hr';
+
+        static create(): HTMLElement {
+          const node = document.createElement('hr');
+          node.classList.add('ql-hr');
+          return node;
+        }
       }
-    }
 
-    Quill.register({'formats/hr': HrBlot}, true);
+      Quill.register({'formats/hr': HrBlot}, true);
+    }
 
-    const attachmentInput = this.getForm()?.querySelector('input[name="attachments"]');
     const startTimeInput = this.getForm()?.querySelector('input[name="startTime"]');
     const openTimeInput = this.getForm()?.querySelector('input[name="openTime"]');
 
+    const featureConfig: EditorFeatureConfig = {
+      codeBlocksEnabled: this.codeBlocksEnabled,
+      dividersEnabled: this.dividersEnabled,
+      linksEnabled: this.linksEnabled,
+      attachmentsEnabled: this.attachmentsEnabled,
+      imagesEnabled: this.imagesEnabled,
+      videosEnabled: this.videosEnabled,
+      datesEnabled: this.datesEnabled,
+      emojisEnabled: this.emojisEnabled,
+      codeEnabled: this.codeEnabled,
+    };
+
     const quill = new Quill(this.editor, {
       modules: {
         toolbar: {
           container: this.toolbar,
+          config: featureConfig
+        },
+        contextMenu: {
+          config: featureConfig
         },
-        contextMenu: {},
         keyboard: {
           bindings: bindings
         },
         dialog: {
           editorId: this.id
         },
-        emoji: {},
-        headlessEmoji: {},
-        datePicker: {},
-        ai: {
-          path: this.aiPath
-        },
+        ...(this.datesEnabled && {
+          datePicker: {}
+        }),
+        ...(this.emojisEnabled && {
+          emoji: {},
+          headlessEmoji: {},
+        }),
+        ...(this.aiEnabled && {
+          ai: {
+            path: this.aiPath
+          }
+        }),
         timeTracking: {
           startTimeInput: startTimeInput as HTMLInputElement,
           openTimeInput: openTimeInput as HTMLInputElement
         },
-        attachment: {
-          attachmentInput: attachmentInput,
-          onFileUploaded: () => {
-            window.onbeforeunload = () => null;
+        ...(this.attachmentsEnabled && {
+          attachment: {
+            attachmentInput: this.getForm()?.querySelector('input[name="attachments"]'),
+            onFileUploaded: () => {
+              window.onbeforeunload = () => null;
+            },
+            upload: (file: File) => {
+              window.onbeforeunload = () => 'You have unsaved changes. Are you sure you want to leave?';
+              return new Promise((resolve) => {
+                const fd = new FormData();
+                fd.append('filename', file.name);
+                fd.append('size', file.size.toString());
+                fd.append('mimeType', file.type);
+
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', this.uploadAttachmentUrl, true);
+                xhr.onload = () => {
+                  if (xhr.status === 200) {
+                    const response = JSON.parse(xhr.responseText) as {
+                      uploadPath: string;
+                      uploadUrl: string;
+                      originalFilename: string;
+                    };
+                    resolve({path: response.uploadPath, url: response.uploadUrl, filename: response.originalFilename});
+                  }
+                };
+                xhr.send(fd);
+              });
+            },
           },
-          upload: (file: File) => {
-            window.onbeforeunload = () => 'You have unsaved changes. Are you sure you want to leave?';
-            return new Promise((resolve) => {
-              const fd = new FormData();
-              fd.append('filename', file.name);
-              fd.append('size', file.size.toString());
-              fd.append('mimeType', file.type);
-
-              const xhr = new XMLHttpRequest();
-              xhr.open('POST', this.uploadAttachmentUrl, true);
-              xhr.onload = () => {
-                if (xhr.status === 200) {
-                  const response = JSON.parse(xhr.responseText) as {
-                    uploadPath: string;
-                    uploadUrl: string;
-                    originalFilename: string;
-                  };
-                  resolve({path: response.uploadPath, url: response.uploadUrl, filename: response.originalFilename});
-                }
-              };
-              xhr.send(fd);
-            });
-          },
-        },
+        }),
         imageResize: {},
         history: {}
       },
@@ -339,7 +394,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
           const emoji = this.quillElement.getModule('headlessEmoji') as HeadlessEmoji;
           const menu = this.quillElement.getModule('contextMenu') as ContextMenu;
           const dialog = this.quillElement.getModule('dialog') as Dialog;
-          if (emoji.isOpen() || menu.isOpen() || dialog.isOpen()) {
+          if (emoji?.isOpen() || menu?.isOpen() || dialog?.isOpen()) {
             return false;
           }
 

package/src/components/editor/modules/context-menu/context-menu-component.ts

@@ -10,6 +10,7 @@ export interface ResultItem {
   format?: string;
   key?: string;
   value?: string | boolean;
+  order?: number;
 }
 
 export default class ContextMenuComponent extends ZincElement {

package/src/components/editor/modules/context-menu/context-menu.scss

@@ -6,7 +6,7 @@
   border: 1px solid var(--zn-border-color);
   border-radius: 8px;
   box-shadow: var(--zn-shadow-medium);
-  padding: 6px;
+  padding: 6px 0;
   max-height: 220px;
   overflow-y: auto;
   min-width: 360px;

package/src/components/editor/modules/context-menu/context-menu.ts

@@ -4,6 +4,7 @@ import {litToHTML} from "../../../../utilities/lit-to-html";
 import {type ResultItem} from "./context-menu-component";
 import Quill, {Delta} from "quill";
 import ZnEditorQuickAction from "./quick-action";
+import type {EditorFeatureConfig} from "../../editor.component";
 import type ContextMenuComponent from "./context-menu-component";
 import type Toolbar from "../toolbar/toolbar";
 
@@ -14,10 +15,12 @@ class ContextMenu {
   private _startIndex = -1;
   private _keydownHandler = (e: KeyboardEvent) => this.onKeydown(e);
   private _docClickHandler = (e: MouseEvent) => this.onDocumentClick(e);
+  private _featureConfig: EditorFeatureConfig = {};
 
-  constructor(quill: Quill) {
+  constructor(quill: Quill, options: { config: EditorFeatureConfig }) {
     this._quill = quill;
     this._toolbarModule = quill.getModule('toolbar') as Toolbar;
+    this._featureConfig = options.config || {};
 
     this.initComponent();
     this.attachEvents();
@@ -199,7 +202,7 @@ class ContextMenu {
           Quill.sources.USER
         );
 
-        setTimeout(() => this._quill.setSelection(insertIndex + contentDelta.length(), 0, Quill.sources.SILENT), 0);
+        setTimeout(() => this._quill.setSelection(insertIndex + contentDelta.length() + 1, 0, Quill.sources.SILENT), 0);
       }
       this._quill.focus();
       this.hide();
@@ -225,6 +228,7 @@ class ContextMenu {
 
   private _getOptions(): ResultItem[] {
     const options: ResultItem[] = [];
+    let orderCounter = 0;
 
     // 1) Quick Actions
     const root = this._quill.container.getRootNode() as ShadowRoot;
@@ -236,41 +240,69 @@ class ContextMenu {
 
         const {label, content, uri, icon, key} = quickAction;
 
+        let order: number;
+        if (typeof quickAction.order === 'number') {
+          order = quickAction.order!;
+        } else {
+          order = orderCounter++;
+        }
+
         if (label && icon) {
           if (key) {
-            options.push({icon, label, format: 'toolbar', key: key});
+            options.push({icon, label, format: 'toolbar', key: key, order});
           } else if (uri) {
-            options.push({icon, label, format: 'dialog', value: uri});
+            options.push({icon, label, format: 'dialog', value: uri, order});
           } else if (content) {
-            options.push({icon, label, format: 'insert', value: content});
+            options.push({icon, label, format: 'insert', value: content, order});
           }
         }
       });
     }
 
-    // 2) Built-in Actions
+    // 2) Built-in Actions (In order they should appear)
     options.push(
-      {icon: 'format_bold', label: 'Bold', format: 'bold'},
-      {icon: 'format_italic', label: 'Italic', format: 'italic'},
-      {icon: 'format_underlined', label: 'Underline', format: 'underline'},
-      {icon: 'strikethrough_s', label: 'Strikethrough', format: 'strike'},
-      {icon: 'format_quote', label: 'Blockquote', format: 'blockquote'},
-      {icon: 'code', label: 'Inline Code', format: 'code'},
-      {icon: 'code_blocks', label: 'Code Block', format: 'code-block'},
-      {icon: 'format_h1', label: 'Heading 1', format: 'header', value: '1'},
-      {icon: 'format_h2', label: 'Heading 2', format: 'header', value: '2'},
-      {icon: 'match_case', label: 'Normal Text', format: 'header', value: ''},
-      {icon: 'format_list_bulleted', label: 'Bulleted List', format: 'list', value: 'bullet'},
-      {icon: 'format_list_numbered', label: 'Numbered List', format: 'list', value: 'ordered'},
-      {icon: 'checklist', label: 'Checklist', format: 'list', value: 'checked'},
-      {icon: 'link', label: 'Link', format: 'link', value: true},
-      {icon: 'horizontal_rule', label: 'Divider', format: 'divider'},
-      {icon: 'attachment', label: 'Attachment', format: 'attachment'},
-      {icon: 'image', label: 'Image', format: 'image'},
-      {icon: 'video_camera_back', label: 'Video', format: 'video'},
-      {icon: 'calendar_today', label: 'Date', format: 'date'},
-      {icon: 'format_clear', label: 'Clear Formatting', format: 'clean'}
+      {icon: 'format_bold', label: 'Bold', format: 'bold', order: orderCounter++},
+      {icon: 'format_italic', label: 'Italic', format: 'italic', order: orderCounter++},
+      {icon: 'format_underlined', label: 'Underline', format: 'underline', order: orderCounter++},
+      {icon: 'strikethrough_s', label: 'Strikethrough', format: 'strike', order: orderCounter++},
+      {icon: 'format_quote', label: 'Blockquote', format: 'blockquote', order: orderCounter++},
     );
+    if (this._featureConfig.codeEnabled !== false) {
+      options.push({icon: 'code', label: 'Inline Code', format: 'code', order: orderCounter++});
+    }
+    if (this._featureConfig.codeBlocksEnabled !== false) {
+      options.push({icon: 'code_blocks', label: 'Code Block', format: 'code-block', order: orderCounter++});
+    }
+    options.push(
+      {icon: 'format_h1', label: 'Heading 1', format: 'header', value: '1', order: orderCounter++},
+      {icon: 'format_h2', label: 'Heading 2', format: 'header', value: '2', order: orderCounter++},
+      {icon: 'match_case', label: 'Normal Text', format: 'header', value: '', order: orderCounter++},
+      {icon: 'format_list_bulleted', label: 'Bulleted List', format: 'list', value: 'bullet', order: orderCounter++},
+      {icon: 'format_list_numbered', label: 'Numbered List', format: 'list', value: 'ordered', order: orderCounter++},
+      {icon: 'checklist', label: 'Checklist', format: 'list', value: 'checked', order: orderCounter++}
+    );
+    if (this._featureConfig.linksEnabled !== false) {
+      options.push({icon: 'link', label: 'Link', format: 'link', value: true, order: orderCounter++});
+    }
+    if (this._featureConfig.dividersEnabled !== false) {
+      options.push({icon: 'horizontal_rule', label: 'Divider', format: 'divider', order: orderCounter++});
+    }
+    if (this._featureConfig.attachmentsEnabled !== false) {
+      options.push({icon: 'attachment', label: 'Attachment', format: 'attachment', order: orderCounter++});
+    }
+    if (this._featureConfig.imagesEnabled !== false) {
+      options.push({icon: 'image', label: 'Image', format: 'image', order: orderCounter++});
+    }
+    if (this._featureConfig.videosEnabled !== false) {
+      options.push({icon: 'video_camera_back', label: 'Video', format: 'video', order: orderCounter++});
+    }
+    if (this._featureConfig.datesEnabled !== false) {
+      options.push({icon: 'calendar_today', label: 'Date', format: 'date', order: orderCounter++});
+    }
+    options.push({icon: 'format_clear', label: 'Clear Formatting', format: 'clean', order: orderCounter++});
+
+    // Sort options by order property
+    options.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 
     return options;
   }

package/src/components/editor/modules/context-menu/quick-action/quick-action.component.ts

@@ -8,6 +8,7 @@ export default class ZnEditorQuickAction extends ZincElement {
   @property() content: string;
   @property() key: string;
   @property() icon: string;
+  @property({type: Number}) order?: number | null;
 
   render() {
     return html`

package/src/components/editor/modules/toolbar/toolbar.component.ts

@@ -6,6 +6,7 @@ import ZnButton from "../../../button";
 import ZnEditorTool from "./tool";
 import ZnMenu from "../../../menu";
 import ZnMenuItem from "../../../menu-item";
+import type {EditorFeatureConfig} from "../../editor.component";
 
 import styles from './toolbar.scss';
 
@@ -22,6 +23,7 @@ export default class ToolbarComponent extends ZincElement {
   @query('.toolbar__overflow-menu') private _overflowMenu!: HTMLElement;
   @query('.toolbar__group--overflow') private _overflowGroup!: HTMLElement;
 
+  private _featureConfig: EditorFeatureConfig = {};
   private _resizeObserver: ResizeObserver | null = null;
   private _resizeId: number | null = null;
 
@@ -78,6 +80,10 @@ export default class ToolbarComponent extends ZincElement {
     });
   }
 
+  public configureToolbar(config: EditorFeatureConfig) {
+    this._featureConfig = config;
+  }
+
   private getToolbarWidth() {
     const host = this as unknown as HTMLElement;
     let width = host.getBoundingClientRect?.().width || host.offsetWidth || 0;
@@ -456,6 +462,13 @@ export default class ToolbarComponent extends ZincElement {
   }
 
   render() {
+    const showInsertOptions = this._featureConfig.dividersEnabled ||
+      this._featureConfig.linksEnabled ||
+      this._featureConfig.attachmentsEnabled ||
+      this._featureConfig.imagesEnabled ||
+      this._featureConfig.videosEnabled;
+    const showInsertGroup = showInsertOptions || this._featureConfig.datesEnabled || this._featureConfig.emojisEnabled;
+
     return html`
       <div class="toolbar">
         <div class="toolbar__group">${this._textOptions()}</div>
@@ -463,11 +476,12 @@ export default class ToolbarComponent extends ZincElement {
         <div class="toolbar__group">${this._historyOptions()}</div>
         <div class="toolbar__group">${this._colorOptions()}</div>
         <div class="toolbar__group">${this._listOptions()}</div>
-        <div class="toolbar__group">
-          ${this._insertOptions()}
-          ${this._dateOption()}
-          ${this._emojiOptions()}
-        </div>
+        ${showInsertGroup ? html`
+          <div class="toolbar__group">
+            ${showInsertOptions ? html`${this._insertOptions()}` : ''}
+            ${this._featureConfig.datesEnabled ? html`${this._dateOption()}` : ''}
+            ${this._featureConfig.emojisEnabled ? html`${this._emojiOptions()}` : ''}
+          </div>` : ''}
         <div class="toolbar__group">
           <slot></slot>
         </div>
@@ -550,14 +564,18 @@ export default class ToolbarComponent extends ZincElement {
             <zn-icon src="format_quote" size="18" slot="prefix"></zn-icon>
             Quote
           </zn-menu-item>
-          <zn-menu-item type="checkbox" checked-position="right" data-format="code">
-            <zn-icon src="code" size="18" slot="prefix"></zn-icon>
-            Code
-          </zn-menu-item>
-          <zn-menu-item type="checkbox" checked-position="right" data-format="code-block">
-            <zn-icon src="code_blocks" size="18" slot="prefix"></zn-icon>
-            Code Block
-          </zn-menu-item>
+          ${this._featureConfig.codeEnabled ? html`
+            <zn-menu-item type="checkbox" checked-position="right" data-format="code">
+              <zn-icon src="code" size="18" slot="prefix"></zn-icon>
+              Code
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.codeBlocksEnabled ? html`
+            <zn-menu-item type="checkbox" checked-position="right" data-format="code-block">
+              <zn-icon src="code_blocks" size="18" slot="prefix"></zn-icon>
+              Code Block
+            </zn-menu-item>
+          ` : ''}
           <zn-menu-item data-format="clean">
             <zn-icon src="format_clear" size="18" slot="prefix"></zn-icon>
             Clear Formatting
@@ -680,26 +698,36 @@ export default class ToolbarComponent extends ZincElement {
           <zn-icon src="add" size="18"></zn-icon>
         </zn-button>
         <zn-menu>
-          <zn-menu-item checked-position="right" data-format="divider">
-            <zn-icon src="horizontal_rule" size="18" slot="prefix"></zn-icon>
-            Divider
-          </zn-menu-item>
-          <zn-menu-item checked-position="right" data-format="link">
-            <zn-icon src="link" size="18" slot="prefix"></zn-icon>
-            Link
-          </zn-menu-item>
-          <zn-menu-item checked-position="right" data-format="attachment">
-            <zn-icon src="attachment" size="18" slot="prefix"></zn-icon>
-            Attachment
-          </zn-menu-item>
-          <zn-menu-item checked-position="right" data-format="image">
-            <zn-icon src="image" size="18" slot="prefix"></zn-icon>
-            Image
-          </zn-menu-item>
-          <zn-menu-item checked-position="right" data-format="video">
-            <zn-icon src="video_camera_back" size="18" slot="prefix"></zn-icon>
-            Video
-          </zn-menu-item>
+          ${this._featureConfig.dividersEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="divider">
+              <zn-icon src="horizontal_rule" size="18" slot="prefix"></zn-icon>
+              Divider
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.linksEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="link">
+              <zn-icon src="link" size="18" slot="prefix"></zn-icon>
+              Link
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.attachmentsEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="attachment">
+              <zn-icon src="attachment" size="18" slot="prefix"></zn-icon>
+              Attachment
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.imagesEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="image">
+              <zn-icon src="image" size="18" slot="prefix"></zn-icon>
+              Image
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.videosEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="video">
+              <zn-icon src="video_camera_back" size="18" slot="prefix"></zn-icon>
+              Video
+            </zn-menu-item>
+          ` : ''}
         </zn-menu>
       </zn-dropdown>`;
   }

package/src/components/editor/modules/toolbar/toolbar.ts

@@ -1,6 +1,7 @@
 import './toolbar.component';
 import Quill from "quill";
 import QuillToolbar from "quill/modules/toolbar";
+import type {EditorFeatureConfig} from "../../editor.component";
 import type Attachment from "../attachment/attachment";
 import type DialogComponent from "../dialog/dialog.component";
 import type Emoji from "../emoji/emoji";
@@ -17,20 +18,34 @@ class Toolbar extends QuillToolbar {
   constructor(quill: Quill, options: {
     container: ToolbarComponent;
     handlers?: Record<string, (value?: any) => void>;
+    config?: EditorFeatureConfig;
   }) {
     super(quill, options);
 
+    const featureConfig = options.config;
+
     // Add handlers after parent Toolbar initialization
-    this.addHandler('attachment', () => null);
-    this.addHandler('date', () => this._openDatePicker());
-    this.addHandler('divider', () => this._insertDivider());
+    if (featureConfig?.attachmentsEnabled) {
+      this.addHandler('attachment', () => null);
+    }
+    if (featureConfig?.datesEnabled) {
+      this.addHandler('date', () => this._openDatePicker());
+    }
+    if (featureConfig?.dividersEnabled) {
+      this.addHandler('divider', () => this._insertDivider());
+    }
+    if (featureConfig?.imagesEnabled) {
+      this.addHandler('image', () => this._addImage());
+    }
     this.addHandler('redo', () => quill.history.redo());
     this.addHandler('undo', () => quill.history.undo());
     this.addHandler('dialog', (value: string) => this._openDialog(value));
-    this.addHandler('image', () => this._addImage());
 
     this._quill = quill;
     this._component = options.container;
+    if (featureConfig) {
+      this._component.configureToolbar(featureConfig)
+    }
 
     this._component.updateComplete.then(() => {
       this._attachToolbarHandlers();

package/src/components/header/header.scss

@@ -233,6 +233,7 @@
     align-items: center;
     flex-wrap: wrap;
     gap: var(--zn-spacing-x-small);
+    word-break: break-word;
   }
 
   slot[name="nav"] {

package/src/components/menu/menu.component.ts

@@ -112,7 +112,8 @@ export default class ZnMenu extends ZincElement {
                           action="${item.confirm?.action}"></zn-confirm>
               <zn-menu-item @mousedown=${this.handleMouseDown}
                             @keydown=${this.handleKeyDown}
-                            id="${item.confirm?.trigger}">
+                            id="${item.confirm?.trigger}"
+                            confirm>
                 ${(item.icon) ? html`
                   <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
                 ${item.title}