@kubex/zinc 0.0.3 → 1.0.0

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

@@ -0,0 +1,195 @@
+import Quill from 'quill';
+import Toolbar from "quill/modules/toolbar";
+
+type AttachmentModuleOptions = {
+  upload: (file: File) => Promise<{ path: any, url: any, filename: any }>;
+  onFileUploaded?: (node: HTMLElement, {url}: { url: string }) => void;
+  attachmentInput?: HTMLInputElement;
+}
+
+const generateId = () => {
+  const name = 'attachment';
+  const id = new Date().getTime();
+  return `${name}_${id}`;
+};
+
+export default class AttachmentModule {
+  private _quill: Quill;
+  private _options: AttachmentModuleOptions;
+
+  private _fileHolder: HTMLInputElement | null;
+
+  constructor(quill: Quill, options: AttachmentModuleOptions) {
+    this._quill = quill;
+    this._options = options;
+
+    if (typeof (this._options.upload) !== "function") {
+      console.warn("[Quill Attachment Module] No upload function provided");
+    }
+
+    (this._quill
+      .getModule('toolbar') as Toolbar)
+      .addHandler('attachment', this._selectLocalImage.bind(this));
+
+    this._createAttachmentContainer();
+  }
+
+  private _selectLocalImage() {
+    this._fileHolder = document.createElement('input');
+    this._fileHolder.setAttribute('type', 'file');
+    this._fileHolder.setAttribute('accept', '*/*');
+    this._fileHolder.onchange = this._fileChanged.bind(this);
+    this._fileHolder.click();
+  }
+
+  private _fileChanged() {
+    if (!this._fileHolder || !this._fileHolder.files || this._fileHolder.files.length < 0) {
+      return;
+    }
+
+    const file = this._fileHolder.files[0];
+    const attachmentId = generateId();
+    const fileReader = new FileReader();
+
+    fileReader.addEventListener('load', () => {
+      const base64Content = fileReader.result as string;
+      this._insertAttachment({dataUrl: base64Content, file, id: attachmentId});
+    }, false);
+
+    if (file) {
+      fileReader.readAsDataURL(file);
+    }
+
+    this._options.upload(file).then(({path, url}) => {
+      this._uploadAttachment(file, url);
+      this._updateAttachment(attachmentId, url, path);
+    }).catch(err => {
+      console.warn(err.message);
+    });
+  }
+
+  private _attachmentContainer = document.createElement('div');
+
+  private _createAttachmentContainer() {
+    const attachmentContainer = this._attachmentContainer;
+    attachmentContainer.id = 'attachment-container';
+    attachmentContainer.style.display = 'flex';
+    attachmentContainer.style.flexWrap = 'wrap';
+    attachmentContainer.style.gap = '10px';
+    attachmentContainer.style.position = 'absolute';
+    attachmentContainer.style.bottom = '0';
+    attachmentContainer.style.left = '0';
+    attachmentContainer.style.right = '0';
+    attachmentContainer.style.padding = '10px';
+
+    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 _updateAttachment(id: string, url: string, filename: string) {
+    const element = this._quill.container.querySelector(`#${id}`) as HTMLAnchorElement;
+    if (element) {
+      element.setAttribute('href', url);
+      let attachmentName = element.querySelector('.attachment-name');
+      if (attachmentName) {
+        if (filename) {
+          attachmentName.textContent = filename;
+        } else {
+          attachmentName.textContent = 'Error uploading file';
+        }
+      }
+
+      if (typeof this._options.onFileUploaded === 'function') {
+        this._options.onFileUploaded(element, {url});
+      }
+
+
+      // add the url to the hidden input
+      const attachments = this._options.attachmentInput;
+      if (attachments && filename) {
+        // value should be an array of attachment names
+        const value = attachments.value;
+        const data = value ? JSON.parse(value) : [];
+        data.push(filename);
+        attachments.value = JSON.stringify(data);
+      }
+    }
+  }
+
+  private _createAttachment(dataUrl: string, file: File, id: string) {
+    const attachment = document.createElement('a');
+    attachment.setAttribute('href', dataUrl);
+    attachment.setAttribute('id', id);
+    attachment.setAttribute('download', file.name);
+    attachment.style.padding = '10px';
+    attachment.style.backgroundColor = 'white';
+    attachment.style.border = '1px solid #ccc';
+    attachment.style.borderRadius = '5px';
+    attachment.style.display = 'flex';
+    attachment.style.alignItems = 'center';
+    attachment.style.gap = '5px';
+
+    const p = document.createElement('p');
+    p.classList.add('attachment-name');
+    p.textContent = 'Uploading...';
+
+    attachment.appendChild(p);
+
+    // add a remove button
+    const removeButton = document.createElement('button');
+    removeButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg"  width="14" height="14" viewBox="0 0 30 30"><path d="M7 4a.995.995 0 0 0-.707.293l-2 2a.999.999 0 0 0 0 1.414L11.586 15l-7.293 7.293a.999.999 0 0 0 0 1.414l2 2a.999.999 0 0 0 1.414 0L15 18.414l7.293 7.293a.999.999 0 0 0 1.414 0l2-2a.999.999 0 0 0 0-1.414L18.414 15l7.293-7.293a.999.999 0 0 0 0-1.414l-2-2a.999.999 0 0 0-1.414 0L15 11.586 7.707 4.293A.996.996 0 0 0 7 4z"/></svg>';
+    removeButton.onclick = (e) => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this._removeAttachment(id);
+    };
+
+    attachment.appendChild(removeButton);
+    return attachment;
+  }
+
+  private _removeAttachment(id: string) {
+    const attachment = this._quill.container.querySelector(`#${id}`);
+    if (attachment) {
+      attachment.remove();
+    }
+
+    // remove the attachment from the hidden input
+    const attachments = this._options.attachmentInput;
+    if (attachments) {
+      // value should be an array of attachment names
+      const value = attachments.value;
+      let attachmentName = attachment?.querySelector('.attachment-name');
+      const data = value ? JSON.parse(value) : [];
+      const index = data.indexOf(attachmentName ? attachmentName.textContent : '');
+      if (index > -1) {
+        data.splice(index, 1);
+        attachments.value = JSON.stringify(data);
+      }
+    }
+  }
+
+  private _uploadAttachment(file: File, url: string) {
+    const xhr = new XMLHttpRequest();
+
+    xhr.open('PUT', url, true);
+    xhr.setRequestHeader('Content-Type', file.type);
+
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        console.log(`[Quill Attachment Module] File uploaded successfully to ${url}`);
+      } else {
+        console.error(`[Quill Attachment Module] Failed to upload file. Status: ${xhr.status}`);
+      }
+    };
+
+    xhr.onerror = () => {
+      console.error(`[Quill Attachment Module] Error occurred while uploading file.`);
+    };
+
+    xhr.send(file);
+  }
+}

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

@@ -0,0 +1,289 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, nothing, type PropertyValues, type TemplateResult, unsafeCSS} from "lit";
+import {property, query, state} from "lit/decorators.js";
+import {repeat} from "lit/directives/repeat.js";
+import {watch} from "../../../../internal/watch";
+import ZincElement from "../../../../internal/zinc-element";
+import type {CannedResponse} from "../../editor.component";
+import type {ZnInputEvent} from "../../../../events/zn-input";
+import type ZnInput from "../../../input";
+
+import styles from './dialog-module.scss';
+
+export default class DialogModuleComponent extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @state() private hasFocus = false;
+  @state() private isSearching = false;
+
+  @query('dialog') dialogEl!: HTMLDialogElement;
+
+  @query('zn-input#search-input') searchInput!: ZnInput;
+  @query('.dialog-module__content') commandList!: HTMLElement;
+
+  @query('.dialog-module') dialogModule!: HTMLElement;
+
+  @property({type: Array}) allCommands: CannedResponse[] = [];
+  @property({type: Array, reflect: true}) commands: CannedResponse[] = [];
+  @property({type: Boolean, reflect: true}) open = false;
+
+  private closeWatcher: CloseWatcher | null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    this.dialogEl.addEventListener("close", () => {
+      this.open = false;
+    });
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+
+      // Simulate a click to support @click handlers on menu items that also work with the keyboard
+      item?.click();
+    }
+
+    // Move the selection when pressing down or up
+    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+
+      if (!activeItem) {
+        this.setCurrentItem(items[0]);
+        items[0].focus();
+        return;
+      }
+
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (event.key === 'ArrowDown') {
+          index++;
+        } else if (event.key === 'ArrowUp') {
+          index--;
+        } else if (event.key === 'Home') {
+          index = 0;
+        } else if (event.key === 'End') {
+          index = items.length - 1;
+        }
+
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+
+  getAllItems() {
+    if (!this.commandList) {
+      return [];
+    }
+
+    return [...this.commandList.children].filter((el: HTMLElement) => {
+      return el.getAttribute('data-command') !== null;
+    }) as HTMLElement[];
+  }
+
+  getCurrentItem() {
+    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
+  }
+
+  setCurrentItem(item: HTMLElement) {
+    const items = this.getAllItems();
+
+    // Update tab indexes
+    items.forEach(i => {
+      i.setAttribute('tabindex', i === item ? '0' : '-1');
+    });
+  }
+
+  focus() {
+    this.searchInput.focus();
+  }
+
+  @watch('open', {waitUntilFirstUpdate: true})
+  handleOpenChange() {
+    if (this.open) {
+      this.addOpenListeners();
+      setTimeout(() => this.focus(), 0);
+    } else {
+      this.removeOpenListeners();
+    }
+  }
+
+  private addOpenListeners() {
+    if ('CloseWatcher' in window) {
+      this.closeWatcher?.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => this.requestClose('keyboard');
+    }
+  }
+
+  private removeOpenListeners() {
+    this.closeWatcher?.destroy();
+  }
+
+  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
+    const znRequestClose = this.emit('zn-request-close', {
+      cancelable: true,
+      detail: {source}
+    });
+
+    if (znRequestClose.defaultPrevented) {
+      return;
+    }
+
+    this.dialogEl.close();
+  }
+
+  private handleClick = (event: MouseEvent) => {
+    const item = (event.target as HTMLElement).closest('.command__wrapper');
+    if (!item) return;
+    this.emit('zn-command-select', {detail: {item: item as HTMLElement}});
+    this.emit('zn-editor-update');
+  }
+
+  private _createCommand(command: CannedResponse): TemplateResult {
+    const labels: string[] = [];
+    if (command.labels) {
+      command.labels.forEach((label: string) => {
+        if (label.includes(',')) {
+          labels.push(...label.split(',').map((l: string) => l.trim()));
+        } else {
+          labels.push(label);
+        }
+      });
+    }
+
+    return html`
+      <div data-command="${command.title}" class="command__wrapper" @click="${this.handleClick}">
+        <div class="command__left">
+          <div class="command__command">
+            ${'/' + (command.command ? command.command :
+              command.title.toLowerCase().replace(' ', '-'))}
+          </div>
+          <div class="command__labels">
+            ${repeat(labels, (label: string) => html`
+              <zn-chip class="command__labels__label" size="small"># ${label}</zn-label>
+            `)}
+          </div>
+        </div>
+        <div class="command__right">
+          <div class="command__title">
+            ${command.title}
+          </div>
+          <div class="command__snippet">
+            ${command.content.length > 50 ? command.content.substring(0, 50) + '...' : command.content}
+          </div>
+        </div>
+      </div>`
+  }
+
+  private isFuzzyMatch(target: string, search: string): boolean {
+    let tIdx = 0;
+    let sIdx = 0;
+    target = target.toLowerCase();
+    search = search.toLowerCase();
+    while (tIdx < target.length && sIdx < search.length) {
+      if (target[tIdx] === search[sIdx]) sIdx++;
+      tIdx++;
+    }
+    return sIdx === search.length;
+  }
+
+  handleSearch(event: ZnInputEvent) {
+    const target = event.target as HTMLInputElement | HTMLSelectElement;
+    const searchValue = target.value.trim().toLowerCase();
+    this.isSearching = !!searchValue;
+    if (!searchValue) {
+      this.commands = [...this.allCommands];
+      return;
+    }
+    this.commands = this.allCommands.filter(command =>
+      this.isFuzzyMatch(command.title, searchValue) ||
+      this.isFuzzyMatch(command.content, searchValue) ||
+      (command.labels && command.labels.some(label => this.isFuzzyMatch(label, searchValue)))
+    );
+  }
+
+  render() {
+    const visibleCommands = this.isSearching
+      ? this.commands
+      : this.commands.sort((a, b) => parseInt(b.count) - parseInt(a.count))
+        .slice(0, 5);
+    return html`
+      <dialog closedby="any"
+              open="${this.open || nothing}"
+              class="${classMap({
+                'dialog-module': true,
+                'dialog-module--has-focus': this.hasFocus,
+                'dialog-module--has-results': visibleCommands.length > 0,
+              })}">
+
+        <div class="dialog-module__header">
+          <div class="dialog-module__header--caption">
+            Canned Responses
+          </div>
+
+          <div class="dialog-module__header--search">
+            <zn-input id="search-input"
+                      type="search"
+                      placeholder="Search..."
+                      class="search-input"
+                      autocomplete="off"
+                      autocorrect="off"
+                      @zn-input="${this.handleSearch}">
+              <zn-icon src="search" slot="prefix"></zn-icon>
+            </zn-input>
+          </div>
+        </div>
+
+        <div class="dialog-module__body">
+          <div class="dialog-module__content">
+            ${repeat(visibleCommands, (command: CannedResponse) => this._createCommand(command))}
+          </div>
+
+          <slot></slot>
+        </div>
+
+        <div class="dialog-module__footer">
+          <div>
+            Showing ${visibleCommands.length} of ${this.allCommands.length} responses
+          </div>
+          <zn-button class="dialog-module__close-button"
+                     size="medium"
+                     color="secondary"
+                     @click="${() => this.requestClose('close-button')}">
+            Close
+          </zn-button>
+        </div>
+
+      </dialog>
+    `;
+  }
+
+}
+
+DialogModuleComponent.define('zn-dialog-module');

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

@@ -0,0 +1,115 @@
+@use "../../../../wc";
+
+:host {
+  @include wc.scrollbars;
+  display: block;
+  position: absolute;
+}
+
+::backdrop {
+  background-color: rgba(128, 128, 128, 0.6);
+}
+
+dialog[open] {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: var(--zn-spacing-medium);
+}
+
+.dialog-module {
+  background-color: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  overflow: auto;
+  padding: var(--zn-spacing-medium) 0;
+  border-radius: var(--zn-border-radius-medium);
+  height: 100%;
+  width: 100%;
+  max-width: 975px;
+  max-height: 650px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--zn-spacing-large);
+    padding-inline: var(--zn-spacing-medium);
+
+    &--caption {
+      font-weight: var(--zn-font-weight-bold);
+      font-size: var(--zn-font-size-large);
+      color: rgba(var(--zn-text-panel-title), 100%);
+    }
+
+    &--search {
+      flex-grow: 1;
+    }
+  }
+
+  &__content {
+    overflow: auto;
+    max-height: 500px;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--zn-spacing-small);
+    padding: 0 var(--zn-spacing-medium) var(--zn-spacing-medium);
+  }
+
+  .command {
+    &__wrapper {
+      padding: var(--zn-spacing-medium) var(--zn-spacing-x-large);
+      cursor: pointer;
+      border-bottom: 1px solid rgb(var(--zn-border-color));
+      display: flex;
+      align-items: center;
+      gap: var(--zn-spacing-medium);
+
+      &:hover {
+        background-color: rgba(var(--zn-primary), 0.05);
+      }
+
+      &:focus-visible {
+        outline: none;
+        background-color: var(--zn-input-background-color-focus);
+        border-color: var(--zn-input-border-color-focus);
+        box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+      }
+    }
+
+    &__left {
+      width: 50%;
+      flex-basis: 50%;
+    }
+
+    &__command {
+      font-size: var(--zn-font-size-small);
+      color: rgb(var(--zn-text-heading));
+    }
+
+    &__labels {
+      display: flex;
+      gap: var(--zn-spacing-small);
+      flex-wrap: wrap;
+      padding-top: var(--zn-spacing-small);
+      font-size: var(--zn-font-size-small);
+    }
+
+    &__right {
+      width: 50%;
+      flex-basis: 50%;
+    }
+
+    &__title {
+      font-size: var(--zn-font-size-small);
+      font-weight: 500;
+    }
+
+    &__snippet {
+      margin-top: var(--zn-spacing-small);
+      font-size: var(--zn-font-size-small);
+      color: rgb(var(--zn-text));
+    }
+  }
+}

package/src/components/editor/modules/dialog-module/dialog-module.ts

@@ -0,0 +1,99 @@
+import './dialog-module.component';
+import {Delta} from 'quill';
+import {html} from "lit";
+import {litToHTML} from "../../../../utilities/lit-to-html";
+import type {CannedResponse} from "../../editor.component";
+import type {ZnCommandSelectEvent} from "../events/zn-command-select";
+import type Quill from 'quill';
+import type ZnDialogModule from './dialog-module.component';
+
+class DialogModule {
+  private _quill: Quill;
+  private _dialog: ZnDialogModule;
+  private _commands: CannedResponse[] = [];
+
+  constructor(quill: Quill) {
+    this._quill = quill;
+    this.initDialog();
+
+    document.addEventListener('zn-show-canned-response-dialog', () => {
+      this._open();
+    });
+  }
+
+  public setCommands(commands: CannedResponse[]) {
+    this._commands = commands;
+    this.addCommands();
+  }
+
+  private _open() {
+    this._dialog.dialogEl.showModal();
+    this.attachEvents();
+  }
+
+  private _close() {
+    this._dialog.dialogEl.close();
+    this.detachEvents();
+  }
+
+  private initDialog() {
+    this._dialog = this.createDialog()!;
+    this._quill.container.ownerDocument.body.appendChild(this._dialog);
+    this.addCommands();
+  }
+
+  private attachEvents() {
+    document.addEventListener('zn-command-select', this.onCommandSelect);
+  }
+
+  private detachEvents() {
+    document.removeEventListener('zn-command-select', this.onCommandSelect);
+  }
+
+  private onCommandSelect = (e: ZnCommandSelectEvent) => {
+    const item = e.detail.item;
+    const command = item.getAttribute('data-command');
+    if (command) {
+      this.triggerCommand(this._commands.find((c) => c.title === command)!);
+    }
+  };
+
+  private createDialog() {
+    const dialog = html`
+      <zn-dialog-module anchor=${this._quill.container}></zn-dialog-module>`
+
+    return litToHTML<ZnDialogModule>(dialog);
+  }
+
+  private addCommands() {
+    this._dialog.setAttribute('commands', JSON.stringify(this._commands));
+  }
+
+  private triggerCommand(command: CannedResponse) {
+    this._close();
+    this._quill.focus();
+
+    const range = this._quill.getSelection();
+    if (range) {
+      let insertIndex = range.index - 1;
+      this._quill.deleteText(insertIndex, 1, 'user');
+
+      const prevChar = this._quill.getText(insertIndex - 1, 1);
+      if (prevChar !== ' ' && insertIndex > 0) {
+        this._quill.insertText(insertIndex, ' ', 'user');
+        insertIndex += 1;
+      }
+
+      const contentDelta = this._quill.clipboard.convert({html: command?.content});
+      this._quill.updateContents(
+        new Delta().retain(insertIndex).concat(contentDelta),
+        'user'
+      );
+
+      setTimeout(() => this._quill.setSelection(insertIndex + contentDelta.length(), 0, 'silent'), 0);
+      this._quill.focus();
+    }
+  }
+}
+
+export default DialogModule;