@kubex/zinc 1.1.43 → 1.1.45

package/package.json

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

package/src/components/content-block/content-block.component.ts

@@ -196,6 +196,7 @@ export default class ContentBlock extends ZincElement {
             <slot name="icon">
               <zn-icon src="${this.avatar}"
                        library="avatar"
+                       size="36"
                        round></zn-icon>
             </slot>
           </div>

package/src/components/content-block/content-block.scss

@@ -16,10 +16,10 @@
 .content-block-header {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--zn-spacing-small);
   width: 100%;
   max-width: 100%;
-  padding: var(--zn-base-gap) 0;
+  padding-block: var(--zn-spacing-small);
   position: relative;
 }
 
@@ -37,7 +37,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: var(--zn-spacing-small);
   min-width: 0;
   flex-grow: 1;
   overflow: hidden;
@@ -51,7 +51,7 @@
   margin: 0;
   display: flex;
   align-items: center;
-  gap: var(--zn-spacing-x-small);
+  gap: var(--zn-spacing-small);
   flex-shrink: 0;
   overflow: hidden;
   white-space: nowrap;
@@ -72,7 +72,7 @@
 .content-block-header__actions {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--zn-spacing-small);
   margin-left: auto;
   flex-shrink: 0;
 }
@@ -92,11 +92,10 @@
 }
 
 .text-section {
-  font-size: 13px;
-  line-height: 19px;
+  @include wc.text-style(paragraph);
 
   a {
-    font-size: 10px;
+    font-size: var(--zn-font-size-small);
     opacity: 0.8;
   }
 }

package/src/components/data-table/data-table.component.ts

@@ -245,6 +245,7 @@ export default class ZnDataTable extends ZincElement {
 
   // Data Table Properties
   private _initialLoad = true;
+  private _hasLoadedData = false;
   private _lastTableContent: TemplateResult = html``;
 
   private readonly resizeObserver = new ResizeController(this, {
@@ -363,7 +364,9 @@ export default class ZnDataTable extends ZincElement {
     } else if (this.dataUri) {
       tableBody = this._dataTask.render({
         pending: () => {
-          if (this._initialLoad) {
+          // Show the skeleton until data has rendered at least once, so the
+          // first fetch on a no-initial-load table doesn't render blank space
+          if (this._initialLoad || !this._hasLoadedData) {
             return html`
               <div>${this.loadingTable()}</div>`;
           }
@@ -372,6 +375,7 @@ export default class ZnDataTable extends ZincElement {
         },
         complete: (data) => {
           this._initialLoad = false;
+          this._hasLoadedData = true;
           this._lastTableContent = html`
             <div>${this.renderTable(data as Response)}</div>`;
           return this._lastTableContent;
@@ -401,6 +405,7 @@ export default class ZnDataTable extends ZincElement {
         page: 1,
       };
       this._initialLoad = false;
+      this._hasLoadedData = true;
       this._lastTableContent = html`
             <div>${this.renderTable(response)}</div>`;
       tableBody = this._lastTableContent;

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

@@ -21,6 +21,7 @@ import ZnTextarea from "../textarea";
 import type {OnEvent} from "../../utilities/on";
 import type {Range} from "quill";
 import type {ZincFormControl} from '../../internal/zinc-element';
+import type {ZnEditorInsertEvent} from "./modules/events/zn-editor-insert";
 import type ToolbarComponent from "./modules/toolbar/toolbar.component";
 
 import styles from './editor.scss';
@@ -281,6 +282,9 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     this.quillElement = quill;
 
+    const dialogModule = quill.getModule('dialog') as Dialog | undefined;
+    dialogModule?.component?.addEventListener('zn-editor-insert', this._handleEditorInsert);
+
     this.getForm()?.addEventListener('submit', () => {
       this._clearCachedContent();
       setTimeout(() => {
@@ -509,6 +513,52 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     }
   }
 
+  private _handleEditorInsert = (e: ZnEditorInsertEvent) => {
+    const detail: Partial<ZnEditorInsertEvent['detail']> = e.detail ?? {};
+    const mode = detail.mode;
+    if (mode !== 'insert' && mode !== 'replace') return;
+
+    e.stopPropagation();
+
+    if (detail.html) {
+      this._insertHtml(mode, detail.html);
+      return;
+    }
+
+    if (detail.text) {
+      this._content = detail.text.trim();
+      if (mode === 'replace') {
+        this._replaceTextAtSelection();
+      } else {
+        this._insertTextAtSelection();
+      }
+    }
+  };
+
+  private _insertHtml(mode: 'insert' | 'replace', content: string) {
+    const quill = this.quillElement;
+    const range = quill.getSelection();
+
+    let index: number;
+    if (mode === 'replace') {
+      if (range && range.length > 0) {
+        quill.deleteText(range.index, range.length);
+        index = range.index;
+      } else {
+        quill.setText('');
+        index = 0;
+      }
+    } else {
+      index = range ? range.index : this._selectionRange.index;
+    }
+
+    const lengthBefore = quill.getLength();
+    quill.clipboard.dangerouslyPasteHTML(index, content, Quill.sources.USER);
+    quill.setSelection(index + Math.max(0, quill.getLength() - lengthBefore), 0);
+
+    this._closePopups();
+  }
+
   private _replaceTextAtSelection() {
     const range = this.quillElement.getSelection();
     if (range) {

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

@@ -0,0 +1,83 @@
+import '../../../../../dist/zn.min.js';
+import {aTimeout, expect, fixture, html} from '@open-wc/testing';
+import type ZnEditor from '../../editor.component';
+
+interface QuillLike {
+  focus: () => void;
+  insertText: (index: number, text: string, source: string) => void;
+  setSelection: (index: number, length: number, source: string) => void;
+  root: HTMLElement;
+}
+
+interface ContextMenuLike extends HTMLElement {
+  open: boolean;
+  results: { label: string }[];
+  setActiveIndex: (index: number) => void;
+}
+
+interface EditorDialogLike extends HTMLElement {
+  dialogEl: HTMLDialogElement;
+}
+
+describe('<zn-editor> context menu tools', () => {
+  afterEach(() => {
+    document.querySelectorAll('zn-context-menu, zn-editor-dialog').forEach(el => el.remove());
+  });
+
+  const editorWithTool = () => fixture<ZnEditor>(html`
+    <zn-editor id="test-editor">
+      <zn-editor-tool uri="/canned"
+                      label="Canned Responses"
+                      icon="messages-square@lu"
+                      key="canned-responses"
+                      context-menu
+                      slot="tools"></zn-editor-tool>
+    </zn-editor>`);
+
+  const openContextMenu = async (el: ZnEditor): Promise<QuillLike> => {
+    const quill = (el as unknown as { quillElement: QuillLike }).quillElement;
+    quill.focus();
+    quill.insertText(0, '/', 'user');
+    quill.setSelection(1, 0, 'user');
+    await aTimeout(50);
+    return quill;
+  };
+
+  const contextMenu = (): ContextMenuLike =>
+    document.querySelector('zn-context-menu') as unknown as ContextMenuLike;
+
+  it('lists a context-menu flagged tool in the slash menu', async () => {
+    const el = await editorWithTool();
+    await openContextMenu(el);
+
+    const menu = contextMenu();
+    expect(menu, 'context menu should exist').to.exist;
+    expect(menu.open, 'context menu should be open').to.be.true;
+
+    const labels = menu.results.map(r => r.label);
+    expect(labels).to.include('Canned Responses');
+  });
+
+  it('opens the tool dialog when the slash menu entry is activated with Enter', async () => {
+    const el = await editorWithTool();
+    const quill = await openContextMenu(el);
+
+    const menu = contextMenu();
+    const index = menu.results.findIndex(r => r.label === 'Canned Responses');
+    expect(index).to.be.greaterThan(-1);
+    menu.setActiveIndex(index);
+
+    quill.root.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    }));
+    await aTimeout(100);
+
+    const dialog = document.querySelector('zn-editor-dialog') as unknown as EditorDialogLike;
+    expect(dialog, 'editor dialog should exist').to.exist;
+    expect(dialog.dialogEl.open, 'dialog should be open').to.be.true;
+    expect(dialog.innerHTML).to.contain('/canned');
+  });
+});

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

@@ -2,9 +2,10 @@ import './context-menu-component';
 import {html} from "lit";
 import {litToHTML} from "../../../../utilities/lit-to-html";
 import {type ResultItem} from "./context-menu-component";
-import Quill from "quill";
 import Delta from "quill-delta";
+import Quill from "quill";
 import ZnEditorQuickAction from "./quick-action";
+import ZnEditorTool from "../toolbar/tool";
 import type {EditorFeatureConfig} from "../../editor.component";
 import type ContextMenuComponent from "./context-menu-component";
 import type Toolbar from "../toolbar/toolbar";
@@ -258,6 +259,18 @@ class ContextMenu {
           }
         }
       });
+
+      const toolSlot = root.querySelector('slot[name="tools"]') as HTMLSlotElement | null;
+      const tools = toolSlot ? toolSlot.assignedElements({flatten: true}) : [];
+      tools.forEach((tool: Element) => {
+        if (!(tool instanceof ZnEditorTool) || !tool.contextMenu) return;
+
+        const {label, icon, key} = tool;
+        if (!label || !icon || !key) return;
+
+        const order = typeof tool.order === 'number' ? tool.order : orderCounter++;
+        options.push({icon, label, format: 'toolbar', key: key, order});
+      });
     }
 
     // 2) Built-in Actions (In order they should appear)

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

@@ -11,6 +11,11 @@ export default class DialogComponent extends ZincElement {
 
   @state() private hasFocus = false;
 
+  /** Set when loaded content declares it renders its own header (including a
+   * [dialog-closer] control) via a composed zn-dialog-header event, replacing
+   * the floating chrome close button. */
+  @state() private hasContentHeader = false;
+
   @query('dialog') dialogEl!: HTMLDialogElement;
 
   @property({type: Boolean, reflect: true}) open = false;
@@ -33,9 +38,29 @@ export default class DialogComponent extends ZincElement {
     this.dialogEl.addEventListener("close", () => {
       this.open = false;
       this.innerHTML = '';
+      this.hasContentHeader = false;
+    });
+
+    // Content is nested inside the app-space's shadow tree, so both contracts
+    // are composed: clicks on [dialog-closer] close the dialog (same contract
+    // as zn-dialog), and zn-dialog-header swaps the chrome closer for one the
+    // content lays out itself.
+    this.addEventListener('click', this.handleContentCloserClick);
+    this.addEventListener('zn-dialog-header', () => {
+      this.hasContentHeader = true;
     });
   }
 
+  private handleContentCloserClick = (e: Event) => {
+    for (const node of e.composedPath()) {
+      if (node === this) return;
+      if (node instanceof HTMLElement && node.hasAttribute('dialog-closer')) {
+        this.dialogEl.close();
+        return;
+      }
+    }
+  };
+
   setContent(content: string) {
     this.innerHTML = content;
   }
@@ -94,15 +119,14 @@ export default class DialogComponent extends ZincElement {
                 'editor-dialog--has-focus': this.hasFocus,
               })}"
               context-data=${JSON.stringify({'editor-id': this._editorId})}>
-        <zn-button
-          class="editor-dialog__close"
-          icon="x@lu"
-          icon-button="small"
-          icon-size="20"
-          type="button"
-          color="transparent"
-          @click="${() => this.dialogEl.close()}"
-        ></zn-button>
+        ${this.hasContentHeader ? nothing : html`
+          <zn-button
+            class="editor-dialog__close"
+            icon="x@lu"
+            icon-button="small"
+            icon-size="20"
+            @click="${() => this.dialogEl.close()}"
+          ></zn-button>`}
         <div class="editor-dialog__content">
           <slot>${this._getLoadingState()}</slot>
         </div>

package/src/components/editor/modules/events/zn-dialog-header.ts

@@ -0,0 +1,13 @@
+/**
+ * Dispatched (composed, bubbling) by editor-dialog content that renders its
+ * own header row, including a [dialog-closer] control. The dialog responds by
+ * removing its floating chrome close button so content doesn't need to
+ * reserve space for it.
+ */
+export type ZnDialogHeaderEvent = CustomEvent<void>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-dialog-header': ZnDialogHeaderEvent;
+  }
+}

package/src/components/editor/modules/events/zn-editor-insert.ts

@@ -0,0 +1,11 @@
+export type ZnEditorInsertEvent = CustomEvent<{
+  mode: 'insert' | 'replace';
+  text?: string;
+  html?: string;
+}>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-editor-insert': ZnEditorInsertEvent;
+  }
+}

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

@@ -9,12 +9,15 @@ export default class ZnEditorTool extends ZincElement {
   @property() icon: string;
   @property() handler: string = 'dialog';
 
+  @property({type: Boolean, attribute: 'context-menu', reflect: true}) contextMenu = false;
+  @property({type: Number}) order?: number | null;
+
   render() {
     return html`
       <zn-button class="tool-action"
                  color="transparent"
                  icon="${this.icon}"
-                 icon-size="18"
+                 icon-size="20"
                  data-format="${this.handler}"
                  data-format-type="${this.uri}"
                  data-toolbar-key="${this.key}"

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

@@ -98,8 +98,20 @@ class Toolbar extends QuillToolbar {
       formatter => formatter.getAttribute('data-toolbar-key') === key && formatter.tagName === 'ZN-BUTTON'
     );
 
-    const tool = (matches?.length ? (matches[0] as HTMLElement) : null);
+    // _formatters is collected once at init, before slotted zn-editor-tool
+    // elements have necessarily rendered their shadow roots — resolve slotted
+    // tools again at trigger time so context-menu activation finds them.
+    const tool = (matches?.length ? (matches[0] as HTMLElement) : null)
+      ?? this._slottedToolButton(key);
     if (tool) {
+      // Tool buttons live in the tool's own shadow root; a synthetic click
+      // doesn't propagate across the slot boundary to the toolbar's click
+      // listener, so invoke the format directly.
+      const format = tool.getAttribute('data-format');
+      if (format) {
+        this.callFormat(format, tool.getAttribute('data-format-type') ?? undefined);
+        return;
+      }
       tool.click();
       return;
     }
@@ -115,6 +127,18 @@ class Toolbar extends QuillToolbar {
     }
   }
 
+  private _slottedToolButton(key: string): HTMLElement | null {
+    const slot = this._component.shadowRoot?.querySelector('slot');
+    const assigned = slot ? slot.assignedElements({flatten: true}) : [];
+    for (const element of assigned) {
+      const button = element.shadowRoot?.querySelector(`[data-toolbar-key="${key}"]`);
+      if (button instanceof HTMLElement) {
+        return button;
+      }
+    }
+    return null;
+  }
+
   private _attachToolbarHandlers() {
     const shadowRoot = this._component.shadowRoot;
     const shadowFormatters = shadowRoot?.querySelectorAll('[data-format]') ?? [];