@kubex/zinc 1.1.40 → 1.1.42

package/docs/pages/components/editor.md

@@ -119,6 +119,23 @@ In ticket mode (default), Enter creates new lines. Forms must be submitted using
 </script>
 ```
 
+### Caching Unsent Content
+
+Set a `store-key` to cache what the agent has typed, so an unsent reply survives page reloads and navigation. Content is saved as it is typed, restored when an editor with the same key next loads, and cleared when the form is submitted or the editor is emptied.
+
+Use a key unique to the conversation — for example the ticket or chat ID. Add the `local-storage` attribute to persist across tabs and browser restarts (otherwise `sessionStorage` is used, scoped to the current tab). Cached content expires after a day by default; tune with `store-ttl` (seconds).
+
+```html:preview
+<zn-editor
+  name="reply"
+  interaction-type="ticket"
+  store-key="ticket-12345"
+  local-storage
+  style="height: 250px">
+</zn-editor>
+<p><small>Type something, then reload the page — your draft is restored.</small></p>
+```
+
 ### Enabling Features
 
 The editor has many optional features that can be enabled with boolean attributes.

package/package.json

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

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

@@ -3,6 +3,7 @@ import {deepQuerySelectorAll} from "../../utilities/query";
 import {FormControlController} from '../../internal/form';
 import {on} from "../../utilities/on";
 import {property, query} from 'lit/decorators.js';
+import {Store} from "../../internal/storage";
 import Attachment from "./modules/attachment/attachment";
 import ContextMenu from "./modules/context-menu/context-menu";
 import DatePicker from "./modules/date-picker/date-picker";
@@ -90,6 +91,21 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   @property({attribute: 'ai', type: Boolean}) aiEnabled: boolean = false;
   @property({attribute: 'ai-path'}) aiPath: string = '';
 
+  /**
+   * Caches unsent content while typing and restores it when the editor next loads,
+   * so agent replies in tickets/chats survive reloads and navigation. Use a key
+   * unique to the conversation (e.g. the ticket ID). The cache is cleared on submit.
+   */
+  @property({attribute: 'store-key', reflect: true}) storeKey: string = "";
+
+  /** Cached-content expiry in seconds. Defaults to 1 day. */
+  @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 86400;
+
+  /** Cache to localStorage instead of sessionStorage, persisting across tabs and browser restarts. */
+  @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
+
+  protected _store: Store;
+
   private quillElement: Quill;
   private _content: string = '';
   private _selectionRange: Range = {index: 0, length: 0};
@@ -119,6 +135,11 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     this.formControlController.updateValidity();
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._store = new Store(this.localStorage ? window.localStorage : window.sessionStorage, "zned:", this.storeTtl);
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     this.formControlController.updateValidity();
 
@@ -261,6 +282,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     this.quillElement = quill;
 
     this.getForm()?.addEventListener('submit', () => {
+      this._clearCachedContent();
       setTimeout(() => {
         const attachmentModule = this.quillElement.getModule('attachment') as Attachment;
         attachmentModule?.reset();
@@ -372,6 +394,14 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
       this._selectionRange = range ?? oldRange;
     });
 
+    if (this.storeKey && this._isEmpty(this.value ?? '')) {
+      const cached = this._store.get(this.storeKey);
+      if (cached) {
+        this.value = cached;
+        this.editorHtml.value = cached;
+      }
+    }
+
     const delta = quill.clipboard.convert({html: this.value});
     quill.setContents(delta, Quill.sources.SILENT);
 
@@ -382,15 +412,30 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   private _handleTextChange() {
     this.value = this.quillElement.getSemanticHTML();
     this.editorHtml.value = this.value;
+    this._cacheContent();
     this.emit('zn-change');
   }
 
-  private _getQuillKeyboardBindings() {
-    const empty = (value: string) => {
-      const match = value.match(/[^<pbr\s>/]/);
-      return match === null;
-    };
+  private _isEmpty(value: string) {
+    return value.match(/[^<pbr\s>/]/) === null;
+  }
+
+  private _cacheContent() {
+    if (!this.storeKey || !this._store) return;
+    if (this._isEmpty(this.value)) {
+      this._store.remove(this.storeKey);
+    } else {
+      this._store.set(this.storeKey, this.value);
+    }
+  }
 
+  private _clearCachedContent() {
+    if (this.storeKey && this._store) {
+      this._store.remove(this.storeKey);
+    }
+  }
+
+  private _getQuillKeyboardBindings() {
     // Always add an Enter binding to support emoji selection in all interaction types
     return {
       'enter': {
@@ -406,7 +451,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
           if (this.interactionType === 'chat') {
             const form = this.closest('form');
-            const hasText = !!this.value && this.value.trim().length > 0 && !empty(this.value);
+            const hasText = !!this.value && this.value.trim().length > 0 && !this._isEmpty(this.value);
             const attachmentInput = form?.querySelector('input[name="attachments"]') as HTMLInputElement | null;
             const hasAttachments = !!attachmentInput?.value && attachmentInput.value !== '[]';
             if (form && (hasText || hasAttachments)) {

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

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnEditor from './editor.component';
 
 describe('<zn-editor>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,64 @@ describe('<zn-editor>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('content caching', () => {
+    const KEY = 'zned:test-draft';
+
+    afterEach(() => {
+      sessionStorage.removeItem(KEY);
+      localStorage.removeItem(KEY);
+    });
+
+    it('should restore cached content into an empty editor', async () => {
+      sessionStorage.setItem(KEY, '0,<p>Hello draft</p>');
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor store-key="test-draft"></zn-editor>`);
+
+      expect(el.value).to.contain('Hello draft');
+    });
+
+    it('should not overwrite an initial value with cached content', async () => {
+      sessionStorage.setItem(KEY, '0,<p>Hello draft</p>');
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor store-key="test-draft" .value=${'<p>Existing</p>'}></zn-editor>`);
+
+      expect(el.value).to.contain('Existing');
+      expect(el.value).to.not.contain('Hello draft');
+    });
+
+    it('should read from localStorage when local-storage is set', async () => {
+      localStorage.setItem(KEY, '0,<p>Local draft</p>');
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor store-key="test-draft" local-storage></zn-editor>`);
+
+      expect(el.value).to.contain('Local draft');
+    });
+
+    it('should cache content when the editor changes', async () => {
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor store-key="test-draft" .value=${'<p>Typed reply</p>'}></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');
+    });
+
+    it('should clear cached content on form submit', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form @submit=${(e: Event) => e.preventDefault()}>
+          <zn-editor store-key="test-draft" .value=${'<p>Typed reply</p>'}></zn-editor>
+        </form>`);
+      const el = form.querySelector<ZnEditor>('zn-editor')!;
+
+      document.dispatchEvent(new Event('zn-editor-update'));
+      await el.updateComplete;
+      expect(sessionStorage.getItem(KEY)).to.contain('Typed&nbsp;reply');
+
+      form.requestSubmit();
+      expect(sessionStorage.getItem(KEY)).to.equal(null);
+    });
+  });
 });

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

@@ -96,8 +96,9 @@ export default class DialogComponent extends ZincElement {
               context-data=${JSON.stringify({'editor-id': this._editorId})}>
         <zn-button
           class="editor-dialog__close"
-          icon="close"
-          icon-size="24"
+          icon="x@lu"
+          icon-button="small"
+          icon-size="20"
           type="button"
           color="transparent"
           @click="${() => this.dialogEl.close()}"

package/src/components/editor/modules/dialog/dialog.scss

@@ -32,7 +32,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin: var(--zn-spacing-small);
+    margin: var(--zn-spacing-x-small);
     z-index: 10001;
   }