@kubex/zinc 1.0.4 → 1.0.6

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

@@ -1,29 +1,30 @@
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {deepQuerySelectorAll} from "../../utilities/query";
 import {FormControlController} from '../../internal/form';
+import {on} from "../../utilities/on";
 import {property, query} from 'lit/decorators.js';
-import AttachmentModule from "./modules/attachment-module";
-import DialogModule from "./modules/dialog-module/dialog-module";
-import DragAndDropModule from "./modules/drag-drop-module";
-import ImageResizeModule from "./modules/image-resize-module/image-resize-module";
-import MenuModule from "./modules/menu-module/menu-module";
-import Quill, {Range} from "quill";
-import TimeTrackingModule from "./modules/time-tracking-module";
+import {trim} from "lodash";
+import Attachment from "./modules/attachment/attachment";
+import ContextMenu from "./modules/context-menu/context-menu";
+import DatePicker from "./modules/date-picker/date-picker";
+import Dialog from "./modules/dialog/dialog";
+import DragAndDrop from "./modules/drag-drop/drag-drop";
+import Emoji from "./modules/emoji/emoji";
+import HeadlessEmoji from "./modules/emoji/headless/headless-emoji";
+import ImageResize from "./modules/image-resize/image-resize";
+import Quill from "quill";
+import QuillAI from "./modules/ai";
+import TimeTracking from "./modules/time-tracking/time-tracking";
+import Toolbar from "./modules/toolbar/toolbar";
 import ZincElement from '../../internal/zinc-element';
+import ZnTextarea from "../textarea";
+import type {OnEvent} from "../../utilities/on";
+import type {Range} from "quill";
 import type {ZincFormControl} from '../../internal/zinc-element';
-import type {ZnShowCannedResponseDialogEvent} from "./modules/events/zn-show-canned-response-dialog";
-import type DialogModuleComponent from "./modules/dialog-module/dialog-module.component";
-import type MenuModuleComponent from "./modules/menu-module/menu-module.component";
+import type ToolbarComponent from "./modules/toolbar/toolbar.component";
 
 import styles from './editor.scss';
 
-export interface CannedResponse {
-  title: string;
-  content: string;
-  command: string;
-  labels?: string[];
-  count: string;
-}
-
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/editor
@@ -52,21 +53,24 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   @query('#editorHtml')
   private editorHtml: HTMLTextAreaElement;
 
+  @query('#toolbar')
+  private toolbar: ToolbarComponent;
+
+  @property({reflect: true}) id: string;
   @property() name: string;
   @property() value: string;
 
   @property({attribute: 'interaction-type', type: String})
   interactionType: 'ticket' | 'chat' = 'chat';
 
-  @property({attribute: 'canned-responses', type: Array})
-  cannedResponses: any[];
-
-  @property({attribute: 'canned-responses-url'}) cannedResponsesUri: string;
-
   @property({attribute: 'attachment-url', type: String})
   uploadAttachmentUrl: string;
 
+  @property({attribute: 'ai-path'}) aiPath: string = '';
+
   private quillElement: Quill;
+  private _content: string = '';
+  private _selectionRange: Range = {index: 0, length: 0};
 
   get validity(): ValidityState {
     return this.editorHtml.validity;
@@ -98,78 +102,79 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     const bindings = this._getQuillKeyboardBindings();
 
-    Quill.register('modules/dialogModule', DialogModule as any);
-    Quill.register('modules/menuModule', MenuModule as any);
-    Quill.register('modules/attachmentModule', AttachmentModule as any);
-    Quill.register('modules/timeTrackingModule', TimeTrackingModule as any);
-    Quill.register('modules/dragAndDropModule', DragAndDropModule as any);
-    Quill.register('modules/imageResizeModule', ImageResizeModule as any);
+    let checkId = this.id
+    if (!checkId) {
+      checkId = "abc"
+    }
+    on(document, 'click', `[editor-id="` + checkId + `"]`, (e: OnEvent) => {
+      this._handleEditorChange(e);
+    });
+
+    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);
+    Quill.register({'modules/timeTracking': TimeTracking}, true);
+    Quill.register({'modules/dragAndDrop': DragAndDrop}, true);
+    Quill.register({'modules/imageResize': ImageResize}, true);
+    Quill.register({'modules/contextMenu': ContextMenu}, true);
+    Quill.register({'modules/dialog': Dialog}, true);
+
+    /* AI Modules */
+    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;
+      }
+    }
+
+    Quill.register({'formats/hr': HrBlot}, true);
 
-    this._updateIcons();
     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 container = [
-      ['bold', 'italic', 'underline', 'strike'],
-      ['undo', 'redo'],
-      [{'list': 'ordered'}, {'list': 'bullet'}],
-    ];
-    container.push(this.interactionType === 'ticket' ? ['link', 'image', 'attachment'] : ['link', 'image', 'video']);
-    container.push(['remove-formatting']);
-
     const quill = new Quill(this.editor, {
       modules: {
         toolbar: {
-          container,
-          handlers: {
-            'attachment': () => null,
-            'placeholder': function (value: string) {
-              if (value) {
-                const editor: Quill | null = this.quill;
-                if (editor) {
-                  const cursorPosition = editor.getSelection()?.index;
-                  if (cursorPosition) {
-                    editor.insertText(cursorPosition, value);
-                    editor.setSelection(new Range(cursorPosition, value.length));
-                  }
-                }
-              }
-            },
-            'redo': () => this.quillElement.history.redo(),
-            'undo': () => this.quillElement.history.undo(),
-            'remove-formatting': () => {
-              const range = this.quillElement.getSelection();
-              if (range) {
-                this.quillElement.formatText(range.index, range.length, 'bold', false);
-                this.quillElement.formatText(range.index, range.length, 'italic', false);
-                this.quillElement.formatText(range.index, range.length, 'underline', false);
-                this.quillElement.formatText(range.index, range.length, 'strike', false);
-              }
-
-            }
-          }
+          container: this.toolbar,
         },
+        contextMenu: {},
         keyboard: {
           bindings: bindings
         },
-        dialogModule: {},
-        menuModule: {
-          cannedResponses: this.cannedResponses,
-          cannedResponsesUri: this.cannedResponsesUri
+        dialog: {
+          editorId: this.id
         },
-        timeTrackingModule: {
+        emoji: {},
+        headlessEmoji: {},
+        datePicker: {},
+        ai: {
+          path: this.aiPath
+        },
+        timeTracking: {
           startTimeInput: startTimeInput as HTMLInputElement,
           openTimeInput: openTimeInput as HTMLInputElement
         },
-        attachmentModule: {
+        attachment: {
           attachmentInput: attachmentInput,
           onFileUploaded: () => {
             window.onbeforeunload = () => null;
           },
           upload: (file: File) => {
             window.onbeforeunload = () => 'You have unsaved changes. Are you sure you want to leave?';
-            return new Promise((resolve, _) => {
+            return new Promise((resolve) => {
               const fd = new FormData();
               fd.append('filename', file.name);
               fd.append('size', file.size.toString());
@@ -179,7 +184,11 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
               xhr.open('POST', this.uploadAttachmentUrl, true);
               xhr.onload = () => {
                 if (xhr.status === 200) {
-                  const response = JSON.parse(xhr.responseText);
+                  const response = JSON.parse(xhr.responseText) as {
+                    uploadPath: string;
+                    uploadUrl: string;
+                    originalFilename: string;
+                  };
                   resolve({path: response.uploadPath, url: response.uploadUrl, filename: response.originalFilename});
                 }
               };
@@ -187,7 +196,8 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
             });
           },
         },
-        imageResizeModule: {}
+        imageResize: {},
+        history: {}
       },
       placeholder: 'Compose your reply...',
       theme: 'snow',
@@ -196,8 +206,6 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     this.quillElement = quill;
 
-    this._supplyPlaceholderDialog();
-
     // @ts-expect-error getSelection is available it lies.
     const hasShadowRootSelection = !!(document.createElement('div').attachShadow({mode: 'open'}).getSelection);
     // Each browser engine has a different implementation for retrieving the Range
@@ -209,16 +217,12 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
           return rootNode?.getSelection()?.getRangeAt(0);
         } else {
           const selection = window.getSelection();
-          // @ts-expect-error getComposedRanges is available it lies.
-          if (selection.getComposedRanges) {
+          if (selection && "getComposedRanges" in selection && typeof selection.getComposedRanges === 'function') {
             // Webkit range retrieval is done with getComposedRanges (see: https://bugs.webkit.org/show_bug.cgi?id=163921)
-            // @ts-ignore
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-            return selection?.getComposedRanges(rootNode)[0];
+            return Array.isArray(selection.getComposedRanges(rootNode)) ? (selection.getComposedRanges(rootNode) as unknown[])[0] : undefined;
           } else {
             // Gecko implements the range API properly in Native Shadow: https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
-            // @ts-ignore
-            return selection.getRangeAt(0);
+            return selection?.getRangeAt(0);
           }
         }
       } catch {
@@ -266,7 +270,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
       if (selection === null) return;
       if (startNode !== null) {
         if (!quill.selection.hasFocus()) quill.selection.root.focus();
-        const native = (quill.selection.getNativeRange() || {}).native;
+        const native = quill.selection.getNativeRange()?.native;
         // @ts-ignore
         if (native === null || force || startNode !== native?.startContainer || startOffset !== native.startOffset || endNode !== native.endContainer || endOffset !== native.endOffset) {
           if (startNode.tagName === "BR") {
@@ -292,25 +296,20 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
       }
     }
 
-    // Listen for 'View All' click from menu module
-    document.addEventListener('zn-show-canned-response-dialog', (e: ZnShowCannedResponseDialogEvent) => {
-      const dialog: DialogModuleComponent | null = document.querySelector('zn-dialog-module');
-      const dialogModule = this.quillElement.getModule('dialogModule') as DialogModule;
-      if (dialog && dialogModule && e.detail.commands) {
-        dialogModule.setCommands(e.detail.commands);
-        dialog.allCommands = e.detail.commands; // Need a ref of original list when searching
-      }
-    });
-
     /**
      * Subscribe to selection change separately, because emitter in Quill doesn't catch this event in Shadow DOM
      **/
-    document.addEventListener('selectionchange', () => this.quillElement.selection.update());
+    document.addEventListener('selectionchange', () => {
+      this.quillElement.selection.update();
+    });
 
     document.addEventListener('zn-editor-update', this._handleTextChange.bind(this));
     quill.on('text-change', this._handleTextChange.bind(this));
 
-    this._setupTitleAttributes(quill);
+    // Track selection range inside the editor so other modules can access it
+    quill.on(Quill.events.SELECTION_CHANGE, (range: Range, oldRange: Range) => {
+      this._selectionRange = range ?? oldRange;
+    });
 
     const delta = quill.clipboard.convert({html: this.value});
     quill.setContents(delta, Quill.sources.SILENT);
@@ -325,95 +324,134 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     this.emit('zn-change');
   }
 
-  private _updateIcons() {
-    // @ts-expect-error icons has no type
-    const icons: { [key: string]: string } = Quill.import("ui/icons");
-    if (icons) {
-      icons["undo"] = `<zn-icon src="undo" size="20"></zn-icon>`;
-      icons["redo"] = `<zn-icon src="redo" size="20"></zn-icon>`;
-      icons["remove-formatting"] = `<zn-icon src="format_clear" size="20"></zn-icon>`;
-
-      if (this.interactionType === 'ticket') {
-        icons["attachment"] = `<zn-icon src="attachment" size="20"></zn-icon>`;
-      }
-    }
-  }
-
   private _getQuillKeyboardBindings() {
-    const bindings = {
-      'remove-formatting': {
-        key: 'V',
-        shiftKey: true,
-        handler: (_range: any, context: any) => {
-          const clipboard = context.event.clipboardData;
-          const text = clipboard.getData('text/plain');
-          const html = clipboard.getData('text/html');
-          const delta = this.quillElement.clipboard.convert({html: html, text: text});
-          this.quillElement.setContents(delta, 'silent');
-          this.quillElement.setSelection(delta.length(), Quill.sources.SILENT);
-        }
-      },
-    };
-
     const empty = (value: string) => {
       const match = value.match(/[^<pbr\s>/]/);
       return match === null;
     };
 
-    if (this.interactionType === 'chat') {
-      // @ts-expect-error bindings has no type
-      bindings['enter'] = {
+    // Always add an Enter binding to support emoji selection in all interaction types
+    return {
+      'enter': {
         key: 'Enter',
         shiftKey: false,
         handler: () => {
-          const dialog = document.querySelector('zn-dialog-module') as DialogModuleComponent | null;
-          const isDialogOpen = dialog?.open ?? false;
-          const menu = document.querySelector('zn-menu-module') as MenuModuleComponent | null;
-          const isMenuOpen = menu?.open ?? false;
-          if (!isMenuOpen && !isDialogOpen) {
+          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()) {
+            return false;
+          }
+
+          if (this.interactionType === 'chat') {
             const form = this.closest('form');
             if (form && this.value && this.value.trim().length > 0 && !empty(this.value)) {
               this.emit('zn-submit', {detail: {value: this.value, element: this}});
               form.requestSubmit();
               this.quillElement.setText('');
+              // prevent default Enter (submit completed)
+              return false;
             }
+            // If we didn't submit, allow default so Enter inserts newline
+            return true;
           }
+
+          // For non-chat interactions, allow default behavior (newline)
+          return true;
         },
-      };
+      }
+    };
+  }
+
+  private _handleEditorChange(e: OnEvent) {
+    const target = e.selectedTarget as HTMLElement;
+    if (!target.hasAttribute('editor-mode')) return;
+
+    const editorMode = target.getAttribute('editor-mode');
+    if (!editorMode) return;
+
+    const contentContainer = target.getAttribute('editor-content-id');
+    if (!contentContainer) return;
+
+    // Find which element contains the content to insert
+    // Priority: currentTarget > selectedTarget > target > composedPath > querySelector
+    const contentElement: Element | null =
+      (e.currentTarget instanceof Element && e.currentTarget.closest('#' + contentContainer)) ||
+      (e.selectedTarget instanceof Element && e.selectedTarget.closest('#' + contentContainer)) ||
+      (e.target instanceof Element && e.target.closest('#' + contentContainer)) ||
+      ((e.composedPath()[0] as Element)?.closest('#' + contentContainer)) ||
+      deepQuerySelectorAll(`#${contentContainer}`, document.documentElement, '')[0];
+    if (!contentElement) return;
+
+    let content = contentElement.textContent;
+    if (contentElement instanceof HTMLInputElement || contentElement instanceof ZnTextarea) {
+      content = contentElement.value;
+    }
+    if (!content || content === '') return;
+
+    this._content = trim(content);
+
+    if (editorMode === 'replace') {
+      this._replaceTextAtSelection();
+    } else if (editorMode === 'insert') {
+      this._insertTextAtSelection();
+    }
+  }
+
+  private _replaceTextAtSelection() {
+    const range = this.quillElement.getSelection();
+    if (range) {
+      if (range.length === 0) {
+        this.quillElement.setText(this._content || '');
+        this.quillElement.setSelection((this._content?.length || 0), 0);
+      } else {
+        this.quillElement.deleteText(range.index, range.length);
+        this.quillElement.insertText(range.index, this._content || '');
+        this.quillElement.setSelection(range.index + (this._content.length || 0), 0);
+      }
+    } else {
+      this.quillElement.setText(this._content || '');
+      this.quillElement.setSelection((this._content?.length || 0), 0);
     }
 
-    return bindings;
+    this._closePopups();
   }
 
-  private _supplyPlaceholderDialog() {
-    const placeholderItems: HTMLElement[] = Array.prototype.slice.call(this.shadowRoot?.querySelectorAll('.ql-placeholder .ql-picker-item'));
-    placeholderItems.forEach((item) => {
-      item.textContent = item.dataset.value ?? ''
-    });
-    placeholderItems.forEach((item) => item.classList.remove('ql-selected'));
+  private _insertTextAtSelection() {
+    const range = this.quillElement.getSelection();
+    const index = range ? range.index : this._selectionRange.index;
+    this.quillElement.insertText(index, this._content || '');
+    this.quillElement.setSelection(index + (this._content.length || 0), 0);
+
+    this._closePopups();
+  }
+
+  private _closePopups() {
+    this._closeAiPanel();
+    this._closeDialog();
+  }
+
+  private _closeAiPanel() {
+    const aiModule = this.quillElement.getModule('ai') as QuillAI;
+    if (aiModule) {
+      aiModule.resetComponent();
+    }
   }
 
-  private _setupTitleAttributes(quill: Quill) {
-    const toolbar = quill.container.previousSibling as HTMLElement;
-    if (toolbar) {
-      toolbar.querySelector('button.ql-bold')?.setAttribute('title', 'Bold');
-      toolbar.querySelector('button.ql-italic')?.setAttribute('title', 'Italic');
-      toolbar.querySelector('button.ql-underline')?.setAttribute('title', 'Underline');
-      toolbar.querySelector('button.ql-strike')?.setAttribute('title', 'Strikethrough');
-      toolbar.querySelector('button.ql-undo')?.setAttribute('title', 'Undo');
-      toolbar.querySelector('button.ql-redo')?.setAttribute('title', 'Redo');
-      toolbar.querySelector('button.ql-redo')?.setAttribute('title', 'Redo');
-      toolbar.querySelector('button.ql-list[value="ordered"]')?.setAttribute('title', 'Ordered List');
-      toolbar.querySelector('button.ql-list[value="bullet"]')?.setAttribute('title', 'Bullet List');
-      toolbar.querySelector('button.ql-link')?.setAttribute('title', 'Link');
-      toolbar.querySelector('button.ql-image')?.setAttribute('title', 'Image');
-      toolbar.querySelector('button.ql-remove-formatting')?.setAttribute('title', 'Remove Formatting');
+  private _closeDialog() {
+    const dialogModule = this.quillElement.getModule('dialog') as Dialog;
+    if (dialogModule) {
+      dialogModule.close();
     }
   }
 
   render() {
     return html`
-      <div id="editor"></div>
+      <zn-toolbar id="toolbar">
+        <slot name="tools"></slot>
+      </zn-toolbar>
+      <slot name="context-items" style="display: none;"></slot>
+      <div id="editor" x-editor-id="${this.id}"></div>
       <input type="text" id="editorHtml" name="${this.name}" value="${this.value}" style="display: none;">
       <div id="action-container" class="ql-toolbar ql-snow">
         <slot name="actions"></slot>

package/src/components/editor/editor.scss

@@ -16,7 +16,7 @@
 
   display: flex;
   flex-direction: column;
-  background-color: rgb(var(--zn-body));
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
   margin: 0;
   padding: 0;
   max-height: 100%;
@@ -33,7 +33,6 @@
 
   .ql-toolbar {
     border: 0 solid rgb(var(--zn-border-color));
-    border-bottom-width: 1px;
     color: rgb(var(--zn-text-heading));
     display: flex;
     flex-wrap: wrap;
@@ -63,7 +62,7 @@
     color: rgb(var(--zn-text));
     background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
     font-size: 15px;
-    padding: var(--zn-spacing-medium);
+    padding: 0 var(--zn-spacing-medium);
 
     img {
       max-width: 40%;
@@ -92,7 +91,6 @@
   }
 
   #action-container.ql-toolbar {
-    border-top-width: 1px;
     border-bottom-width: 0;
   }
 
@@ -125,7 +123,29 @@
   color: rgb(var(--zn-text))
 }
 
-
 .ql-code-block {
   font-size: 90%;
 }
+
+/* Editor toolbar custom active states */
+:host #toolbar zn-button.ql-active .button {
+  background-color: rgba(var(--zn-primary), 0.2);
+}
+
+:host #toolbar zn-dropdown zn-menu zn-menu-item[checked] .menu-item {
+  background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
+  color: rgb(var(--zn-primary));
+}
+
+:host .ql-editor hr,
+:host .ql-editor .ql-hr {
+  border: none;
+  border-top: 1px solid rgb(var(--zn-border-color));
+  height: 0;
+  margin: var(--zn-spacing-small) 0;
+  opacity: 1;
+}
+
+#toolbar {
+  padding: 4px;
+}