@kubex/zinc 1.1.185 → 2.0.1

package/src/components/editor/editor.test.ts

@@ -49,8 +49,7 @@ describe('<zn-editor>', () => {
       document.dispatchEvent(new Event('zn-editor-update'));
       await el.updateComplete;
 
-      // Quill's getSemanticHTML encodes spaces as &nbsp;
-      expect(sessionStorage.getItem(KEY)).to.contain('Typed&nbsp;reply');
+      expect(sessionStorage.getItem(KEY)).to.contain('Typed reply');
     });
 
     it('should clear cached content on form submit', async () => {
@@ -62,10 +61,39 @@ describe('<zn-editor>', () => {
 
       document.dispatchEvent(new Event('zn-editor-update'));
       await el.updateComplete;
-      expect(sessionStorage.getItem(KEY)).to.contain('Typed&nbsp;reply');
+      expect(sessionStorage.getItem(KEY)).to.contain('Typed reply');
 
       form.requestSubmit();
       expect(sessionStorage.getItem(KEY)).to.equal(null);
     });
   });
+
+  describe('merge fields', () => {
+    it('should show tokens as labelled chips and keep the raw token in the value', async () => {
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor merge-fields .value=${'<p>Hi {{ recipient.firstName }}</p>'}>
+          <zn-editor-quick-action slot="context-items" icon="braces@lu" label="First name"
+                                  content="{{recipient.firstName}}"></zn-editor-quick-action>
+        </zn-editor>`);
+
+      const chip = el.shadowRoot!.querySelector<HTMLElement>('.ql-merge-field')!;
+      expect(chip.textContent).to.contain('First name');
+
+      (el as unknown as { quillElement: { insertText: (i: number, t: string, s: string) => void } })
+        .quillElement.insertText(0, 'Oh ', 'user');
+      expect(el.value).to.equal('<p>Oh Hi {{recipient.firstName}}</p>');
+    });
+  });
+
+  describe('document mode', () => {
+    it('should render designed HTML in place and keep it as written', async () => {
+      const markup = '<table width="600"><tbody><tr><td style="color:red">Hi</td></tr></tbody></table>';
+      const el = await fixture<ZnEditor>(html`<zn-editor document-mode .value=${markup}></zn-editor>`);
+
+      const frame = el.shadowRoot!.querySelector<HTMLIFrameElement>('.editor__document')!;
+      await new Promise(resolve => frame.addEventListener('load', resolve, {once: true}));
+      expect(frame.contentDocument!.querySelector('td')!.getAttribute('style')).to.equal('color:red');
+      expect(el.value).to.equal(markup);
+    });
+  });
 });

package/src/components/editor/modules/ai/panel/ai-panel.scss

@@ -20,7 +20,6 @@
   position: relative;
   min-width: 240px;
   width: 240px;
-  transition: width 0.8s ease, height 0.8s ease;
 
   &::part(base) {
     margin-bottom: 0;

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

@@ -3,15 +3,18 @@ import type Toolbar from "../toolbar/toolbar";
 
 interface AttachmentOptions {
   upload: (file: File) => Promise<{ path: any; url: any; filename: any }>;
-  onFileUploaded?: (node: HTMLElement, {url}: { url: string }) => void;
+  // node is null when the chip was removed (or reset) during the upload
+  onFileUploaded?: (node: HTMLElement | null, {url}: { url: string }) => void;
+  onFileUploadFailed?: (error: Error) => void;
   attachmentInput?: HTMLInputElement;
 }
 
-const generateId = () => {
-  const name = 'attachment';
-  const id = new Date().getTime();
-  return `${name}_${id}`;
-};
+// Mirrors the server's upload body-size limit.
+const MAX_ATTACHMENT_BYTES = 30 * 1024 * 1024;
+
+let nextAttachmentId = 0;
+
+const generateId = () => `attachment_${++nextAttachmentId}`;
 
 export default class Attachment {
   private _quill: Quill;
@@ -46,38 +49,33 @@ export default class Attachment {
   }
 
   private _fileChanged() {
-    if (!this._fileHolder?.files || this._fileHolder.files.length < 0) {
-      return;
-    }
+    const file = this._fileHolder?.files?.[0];
+    if (!file) return;
 
-    const file = this._fileHolder.files[0];
     this.addAttachment(file);
   }
 
   public addAttachment(file: File, dataUrl?: string) {
     const attachmentId = generateId();
-    const insertWithDataUrl = (base64: string) => {
-      this._insertAttachment({dataUrl: base64, file, id: attachmentId});
-    };
+    this._insertAttachment({href: dataUrl || URL.createObjectURL(file), file, id: attachmentId});
 
-    if (dataUrl) {
-      insertWithDataUrl(dataUrl);
-    } else {
-      const fileReader = new FileReader();
-      fileReader.addEventListener('load', () => {
-        const base64Content = fileReader.result as string;
-        insertWithDataUrl(base64Content);
-      }, false);
-      fileReader.readAsDataURL(file);
+    if (file.size > MAX_ATTACHMENT_BYTES) {
+      this._markAttachmentFailed(attachmentId, 'File too large (max 30 MB)');
+      return;
     }
 
     if (typeof this._options.upload === 'function') {
+      // the rejection handler covers only the upload, so each upload settles exactly once
       this._options.upload(file).then(async ({path, url}: { path: string; url: string }) => {
         await this._uploadAttachment(file, url);
-        this._updateAttachment(attachmentId, url, path);
-      }).catch((err: { message: string }) => {
+        return {path, url};
+      }).then(({path, url}) => this._updateAttachment(attachmentId, url, path), (err: Error) => {
         console.warn(err.message);
+        this._markAttachmentFailed(attachmentId, 'Upload failed');
+        this._options.onFileUploadFailed?.(err);
       });
+    } else {
+      this._markAttachmentFailed(attachmentId, 'Upload failed');
     }
   }
 
@@ -98,14 +96,36 @@ export default class Attachment {
     this._quill.container.appendChild(attachmentContainer);
   }
 
-  private _insertAttachment({dataUrl, file, id}: { dataUrl: string; file: File; id: string }) {
-    this._attachmentContainer.appendChild(this._createAttachment(dataUrl, file, id));
+  private _insertAttachment({href, file, id}: { href: string; file: File; id: string }) {
+    this._attachmentContainer.appendChild(this._createAttachment(href, file, id));
   }
 
-  private _updateAttachment(id: string, url: string, filename: string) {
-    const element = this._quill.container.querySelector(`#${id}`);
+  private _markAttachmentFailed(id: string, message: string) {
+    const element = this._quill.container.querySelector<HTMLElement>(`#${id}`);
     if (!element) return;
 
+    const attachmentName = element.querySelector('.attachment-name');
+    if (attachmentName) {
+      attachmentName.textContent = message;
+    }
+    element.style.borderColor = '#d93025';
+  }
+
+  private _revokeObjectUrl(element: Element) {
+    const href = element.getAttribute('href');
+    if (href?.startsWith('blob:')) {
+      URL.revokeObjectURL(href);
+    }
+  }
+
+  private _updateAttachment(id: string, url: string, filename: string) {
+    const element = this._quill.container.querySelector<HTMLElement>(`#${id}`);
+    if (!element) {
+      this._options.onFileUploaded?.(null, {url});
+      return;
+    }
+
+    this._revokeObjectUrl(element);
     element.setAttribute('href', url);
     const attachmentName = element.querySelector('.attachment-name');
     if (attachmentName) {
@@ -117,7 +137,7 @@ export default class Attachment {
     }
 
     if (this._options.onFileUploaded) {
-      this._options.onFileUploaded(element as HTMLElement, {url});
+      this._options.onFileUploaded(element, {url});
     }
 
     // add the url to the hidden input
@@ -131,9 +151,9 @@ export default class Attachment {
     }
   }
 
-  private _createAttachment(dataUrl: string, file: File, id: string) {
+  private _createAttachment(href: string, file: File, id: string) {
     const attachment = document.createElement('a');
-    attachment.setAttribute('href', dataUrl);
+    attachment.setAttribute('href', href);
     attachment.setAttribute('id', id);
     attachment.setAttribute('download', file.name);
     attachment.style.padding = '10px';
@@ -165,6 +185,7 @@ export default class Attachment {
 
   /** Clear every staged attachment preview and reset the backing form input. */
   public reset() {
+    Array.from(this._attachmentContainer.children).forEach(chip => this._revokeObjectUrl(chip));
     this._attachmentContainer.replaceChildren();
     const attachments = this._options.attachmentInput;
     if (attachments) {
@@ -175,6 +196,7 @@ export default class Attachment {
   private _removeAttachment(id: string) {
     const attachment = this._quill.container.querySelector(`#${id}`);
     if (attachment) {
+      this._revokeObjectUrl(attachment);
       attachment.remove();
     }
 

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

@@ -29,6 +29,10 @@ class ContextMenu {
   private _dismissedIndex = -1;
   private _keydownHandler = (e: KeyboardEvent) => this.onKeydown(e);
   private _docClickHandler = (e: MouseEvent) => this.onDocumentClick(e);
+  private _pointerHeld = false;
+  private _pointerReleaseHandler = () => {
+    this._pointerHeld = false;
+  };
   private _featureConfig: EditorFeatureConfig = {};
   private readonly _caretAnchor: VirtualElement = {
     getBoundingClientRect: () => this.caretRect()
@@ -57,6 +61,10 @@ class ContextMenu {
     this._quill.on(Quill.events.EDITOR_CHANGE, () => this.updateFromEditor());
     this._quill.root.addEventListener('keydown', this._keydownHandler);
     this._menu.addEventListener(SLASH_ITEM_SELECT, (e: Event) => this.onItemSelect(e as CustomEvent<{ item: ContextMenuItem }>));
+    this._menu.addEventListener('pointerdown', () => {
+      this._pointerHeld = true;
+      this._quill.container.ownerDocument.addEventListener('pointerup', this._pointerReleaseHandler, {once: true, capture: true});
+    });
     this._quill.focus();
   }
 
@@ -202,6 +210,15 @@ class ContextMenu {
       return;
     }
 
+    if (key === 'dialog' && this._pointerHeld) {
+      // Items select on mousedown; a modal opened mid-press is light-dismissed by the pointerup landing on its backdrop
+      this._quill.container.ownerDocument.addEventListener('pointerup', () => {
+        setTimeout(() => this._toolbarModule.callFormat(key, value));
+      }, {once: true, capture: true});
+      this.hide();
+      return;
+    }
+
     this._toolbarModule.callFormat(key, value);
     this._quill.focus();
     this.hide();

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

@@ -54,13 +54,35 @@ export default class DialogComponent extends ZincElement {
   private handleContentCloserClick = (e: Event) => {
     for (const node of e.composedPath()) {
       if (node === this) return;
-      if (node instanceof HTMLElement && node.hasAttribute('dialog-closer')) {
+      if (!(node instanceof HTMLElement)) continue;
+      if (node.hasAttribute('dialog-closer')) {
         this.dialogEl.close();
         return;
       }
+      const mode = node.getAttribute('editor-mode');
+      if (mode === 'insert' || mode === 'replace') {
+        this.insertContent(node, mode);
+        return;
+      }
     }
   };
 
+  /** Inserts the element named by the control's `editor-content-id`: a `<template>` as HTML, anything else as text.
+   * The control's form is submitted first, as inserting closes the dialog and detaches it. */
+  private insertContent(control: HTMLElement, mode: 'insert' | 'replace') {
+    const id = control.getAttribute('editor-content-id');
+    const source = id ? (control.getRootNode() as Document | ShadowRoot).getElementById(id) : null;
+    if (!source) return;
+
+    const content = source instanceof HTMLTemplateElement
+      ? {html: source.innerHTML.trim()}
+      : {text: ((source as HTMLInputElement).value ?? source.textContent ?? '').trim()};
+    if (!content.html && !content.text) return;
+
+    control.closest('form')?.requestSubmit();
+    this.emit('zn-editor-insert', {detail: {mode, ...content}});
+  }
+
   setContent(content: string) {
     this.innerHTML = content;
   }

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

@@ -0,0 +1,28 @@
+import '../../../../../dist/zn.min.js';
+import {expect, fixture, html, oneEvent} from '@open-wc/testing';
+import type DialogComponent from './dialog.component';
+import type {ZnEditorInsertEvent} from '../events/zn-editor-insert';
+
+describe('<zn-editor-dialog> content inserts', () => {
+  const dialog = () => fixture<DialogComponent>(html`
+    <zn-editor-dialog>
+      <template id="reply"><p>Hi <b>there</b></p></template>
+      <span id="plain">Plain reply</span>
+      <button id="html" editor-mode="replace" editor-content-id="reply">Replace</button>
+      <button id="text" editor-mode="insert" editor-content-id="plain">Insert</button>
+    </zn-editor-dialog>`);
+
+  it('inserts a template as HTML', async () => {
+    const el = await dialog();
+    setTimeout(() => el.querySelector<HTMLElement>('#html')!.click());
+    const event = await oneEvent(el, 'zn-editor-insert') as ZnEditorInsertEvent;
+    expect(event.detail).to.deep.equal({mode: 'replace', html: '<p>Hi <b>there</b></p>'});
+  });
+
+  it('inserts any other element as text', async () => {
+    const el = await dialog();
+    setTimeout(() => el.querySelector<HTMLElement>('#text')!.click());
+    const event = await oneEvent(el, 'zn-editor-insert') as ZnEditorInsertEvent;
+    expect(event.detail).to.deep.equal({mode: 'insert', text: 'Plain reply'});
+  });
+});

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

@@ -20,7 +20,7 @@ class Emoji {
     const host = this.getHostEditor();
     if (host) {
       this._mo = new MutationObserver(() => this.initPicker());
-      this._mo.observe(host, {attributes: true, attributeFilter: ['t']});
+      this._mo.observe(host, {attributes: true, attributeFilter: ['t', 'm']});
     }
   }
 
@@ -45,11 +45,10 @@ class Emoji {
     }
   }
 
+  // `m` is the rendered mode the editor mirrors from the page; older pages set `t="dark"` instead
   private getTheme(): 'light' | 'dark' {
-    const host: any = this.getHostEditor();
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-    const t = host?.t ?? host?.getAttribute?.('t');
-    return t === 'dark' ? 'dark' : 'light';
+    const host = this.getHostEditor();
+    return host?.getAttribute('m') === 'dark' || host?.getAttribute('t') === 'dark' ? 'dark' : 'light';
   }
 
   public initPicker() {

package/src/components/editor/modules/merge-field/merge-field.ts

@@ -0,0 +1,83 @@
+import Delta from "quill-delta";
+import Embed from "quill/blots/embed";
+import Quill from "quill";
+import type {Op} from "quill-delta";
+
+export interface MergeFieldValue {
+  token: string;
+  label: string;
+}
+
+const TOKEN = /\{\{\s*[^{}]+?\s*\}\}/g;
+
+/** A `{{token}}` replacement shown as a labelled chip, saved back out as the raw token. */
+export class MergeFieldBlot extends Embed {
+  static blotName = 'mergeField';
+  static tagName = 'SPAN';
+  static className = 'ql-merge-field';
+
+  static create(value: MergeFieldValue): HTMLElement {
+    const node = super.create() as HTMLElement;
+    node.dataset.token = value.token;
+    node.dataset.label = value.label;
+    node.title = value.token;
+    node.textContent = value.label;
+    return node;
+  }
+
+  static value(node: HTMLElement): MergeFieldValue {
+    return {token: node.dataset.token ?? '', label: node.dataset.label ?? ''};
+  }
+
+  html(): string {
+    return ((this.domNode as HTMLElement).dataset.token ?? '')
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+}
+
+export const normaliseToken = (token: string) => token.replace(/\s+/g, '');
+
+class MergeField {
+  constructor(quill: Quill, options: { labels?: Record<string, string> }) {
+    const labels = options.labels ?? {};
+
+    // The browser types a space after an embed into its caret guard and leaves the caret before it
+    quill.keyboard.addBinding({key: ' '}, (range: { index: number; length: number }) => {
+      if (range.length || !range.index) return true;
+      const before = quill.getContents(range.index - 1, 1).ops[0]?.insert;
+      if (typeof before !== 'object' || !('mergeField' in before)) return true;
+
+      quill.insertText(range.index, ' ', Quill.sources.USER);
+      quill.setSelection(range.index + 1, 0, Quill.sources.SILENT);
+      return false;
+    });
+    // Ahead of Quill's own space handlers, such as list autofill
+    const spaceBindings = (quill.keyboard as unknown as { bindings: Record<string, unknown[]> }).bindings[' '];
+    spaceBindings?.unshift(spaceBindings.pop());
+
+    // Text nodes only, so tokens inside attributes such as href stay as they are
+    quill.clipboard.addMatcher(Node.TEXT_NODE, (_node: Node, delta: Delta) => {
+      return new Delta(delta.ops.flatMap((op: Op) => {
+        if (typeof op.insert !== 'string' || !op.insert.includes('{{')) return [op];
+
+        const attrs = op.attributes ? {attributes: op.attributes} : {};
+        const ops: Op[] = [];
+        let last = 0;
+        for (const match of op.insert.matchAll(TOKEN)) {
+          if (match.index! > last) {
+            ops.push({insert: op.insert.slice(last, match.index), ...attrs});
+          }
+          const token = normaliseToken(match[0]);
+          ops.push({insert: {mergeField: {token, label: labels[token] ?? token.slice(2, -2)}}, ...attrs});
+          last = match.index! + match[0].length;
+        }
+        if (last < op.insert.length) {
+          ops.push({insert: op.insert.slice(last), ...attrs});
+        }
+        return ops;
+      }));
+    });
+  }
+}
+
+export default MergeField;