@kubex/zinc 0.0.3 → 1.0.0

package/src/components/editor/modules/drag-drop-module.ts

@@ -0,0 +1,125 @@
+import Quill from 'quill';
+
+interface DragAndDropModuleOptions {
+  onDrop: (file: File, options: object) => void;
+  draggableContentTypePattern: string;
+  draggables: [];
+}
+
+const defaultOptions: DragAndDropModuleOptions = {
+  onDrop: () => {
+  },
+  draggableContentTypePattern: '^image\\/',
+  draggables: []
+};
+
+export default class DragAndDropModule {
+  private _quill: Quill;
+  private _options: DragAndDropModuleOptions;
+  private _container: any = null;
+  private _draggables: any = [];
+
+  constructor(quill: Quill, options: DragAndDropModuleOptions) {
+    this._quill = quill;
+    this._options = Object.assign({}, defaultOptions, options);
+    this._container = this._quill.addContainer('ql-editor');
+    this._draggables = this._options.draggables.map(convertDraggable);
+
+    this._quill.root.addEventListener('drop', this.handleDrop);
+  }
+
+  nullReturner = () => null;
+
+  handleDrop = (e: DragEvent) => {
+    const onDrop = this._options.onDrop;
+    // @ts-expect-error target is not a valid property, but we're using it
+    const node = e.target && e.target['ql-data'] ? e.target : this._container;
+    const files = e.dataTransfer?.files;
+    const fileInfos = filesMatching(files, this._draggables);
+
+
+    if (fileInfos.length === 0) return;
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    Promise.all(fileInfos.map(fileInfo => {
+      return Promise
+        .resolve((onDrop || this.nullReturner)(fileInfo.file, { tag: fileInfo.tag, attr: fileInfo.attr }))
+        .then((ret: any) => ({ on_drop_ret_val: ret, fileInfo }));
+    }))
+      // Map return Values of onDrop/nullReturner to file datas
+      .then(datas => Promise.all(datas.map(({ on_drop_ret_val, fileInfo }) => {
+        if (on_drop_ret_val === false) {
+          // if onDrop()  return false, it means we shouldn't do anything with the file
+          return;
+        }
+
+        const { tag, attr } = fileInfo;
+
+        let data: any;
+        if (on_drop_ret_val === null) {
+          // data = getFileDataUrl(fileInfo.file);
+        } else {
+          data = on_drop_ret_val;
+        }
+
+        return Promise.resolve(data).then(ret => ({ data: ret, tag, attr }));
+      })))
+      .then(datas => datas.forEach(fileInfo => {
+        // loop through each fileInfo and attach them to the editor
+
+        // fileInfo is undefined if onDrop returned false
+        if (fileInfo) {
+          const { data, tag, attr } = fileInfo;
+          // create an element from the given `tag` (e.g. 'img')
+          const new_element = document.createElement(tag);
+
+          // set `attr` to `data` (e.g. img.src = "data:image/png;base64..")
+          new_element.setAttribute(attr, data);
+
+          // attach the tag to the quill container
+          // TODO: maybe a better way to determine *exactly* where to append
+          // the node? Currently, we're guessing based on event.target, but
+          // that only gets us the node itself, not the position within the
+          // node (i.e., if the node is a text node, maybe it's possible to
+          // split the text node on the point where the user to dropped)
+          node.appendChild(new_element);
+        }
+      }));
+  };
+}
+
+const convertDraggable = (draggable: any) => {
+  if (draggable.content_type_pattern && draggable.tag && draggable.attr) {
+    const ret = Object.assign({}, draggable);
+    ret.content_type_regex = new RegExp(draggable.content_type_pattern);
+    delete ret.content_type_pattern;
+    return ret;
+  }
+
+  // @ts-expect-error draggable is not a valid property, but we're using it
+  e.draggable = draggable;
+};
+
+const filesMatching = (fileList: FileList | undefined, draggables: any) => {
+  const ret = [];
+  if (fileList) {
+    for (let i = 0; i < fileList.length; i++) {
+      const file: any = fileList.item(i);
+      const draggable = draggables.find((d: any) => d.content_type_regex.test(file.type));
+      draggable && ret.push({ file, tag: draggable.tag, attr: draggable.attr });
+    }
+  }
+  return ret;
+};
+
+export const getFileDataUrl = (file: any) => {
+  const reader = new FileReader();
+  return new Promise(resolve => {
+    reader.addEventListener('load', function () {
+      resolve(reader.result);
+    }, false);
+    reader.readAsDataURL(file);
+  });
+};

package/src/components/editor/modules/events/zn-command-select.ts

@@ -0,0 +1,7 @@
+export type ZnCommandSelectEvent = CustomEvent<{ item: HTMLElement }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-command-select': ZnCommandSelectEvent;
+  }
+}

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

@@ -0,0 +1,7 @@
+export type ZnEditorUpdateEvent = CustomEvent<Record<PropertyKey, never>>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-editor-update': ZnEditorUpdateEvent;
+  }
+}

package/src/components/editor/modules/events/zn-show-canned-response-dialog.ts

@@ -0,0 +1,15 @@
+export type ZnShowCannedResponseDialogEvent = CustomEvent<{
+  commands: {
+    title: string;
+    content: string;
+    command: string;
+    count: string;
+    labels?: string[];
+  }[];
+}>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-show-canned-response-dialog': ZnShowCannedResponseDialogEvent;
+  }
+}

package/src/components/editor/modules/image-resize-module/image-resize-module.ts

@@ -0,0 +1,157 @@
+import Quill, {Module} from "quill";
+
+type ImageResizeModuleOptions = {
+  overlayStyles?: Partial<CSSStyleDeclaration>;
+}
+
+class ImageResizeModule extends Module<ImageResizeModuleOptions>
+{
+
+  static DEFAULTS: ImageResizeModuleOptions = {};
+
+  private _focusedImage: HTMLImageElement | null = null;
+  private _overlay: HTMLDivElement | null = null;
+
+  constructor(quill: Quill, options: ImageResizeModuleOptions)
+  {
+    super(quill, options);
+
+    this.quill.root.addEventListener('click', this.handleClick, false);
+    this.quill.root.addEventListener('scroll', this.handleScroll, false);
+
+    (this.quill.root.parentNode as HTMLElement).style.position =
+      (this.quill.root.parentNode as HTMLElement).style.position || 'relative';
+  }
+
+  handleClick = (e: MouseEvent) =>
+  {
+    if(e.target && e.target instanceof Element && e.target.tagName && e.target.tagName.toUpperCase() === 'IMG')
+    {
+      if(this._focusedImage === e.target)
+      {
+        return; // already focused
+      }
+
+      if(this._focusedImage)
+      {
+        this.hide(); // we were just focused on another image
+      }
+
+      this.show(e.target as HTMLImageElement);
+      e.preventDefault(); // prevent drag handles appearing
+    }
+    else if(this._focusedImage)
+    {
+      this.hide(); // clicked on something else
+    }
+  };
+
+  handleScroll = () =>
+  {
+    if(this._focusedImage)
+    {
+      this.hide(); // hide the overlay if the user scrolls as it is no longer in the right place
+    }
+  };
+
+  show = (image: HTMLImageElement) =>
+  {
+    this._focusedImage = image;
+    this.showOverlay();
+  };
+
+  hide = () =>
+  {
+    this.hideOverlay();
+    this._focusedImage = null;
+  };
+
+  showOverlay = () =>
+  {
+    if(this._overlay)
+    {
+      this.hideOverlay(); // cleanup
+    }
+
+    this.quill.setSelection(null); // remove text selection
+
+    this.setUserSelect('none'); // prevent spurious text selection
+
+    // listen for the image being deleted or moved
+    document.addEventListener('keyup', this.checkImage, true);
+    this.quill.root.addEventListener('input', this.checkImage, true);
+
+    // Create and add the overlay
+    this._overlay = document.createElement('div');
+    Object.assign(this._overlay.style, this.options.overlayStyles);
+
+    this.quill?.root?.parentNode?.appendChild(this._overlay);
+    this.repositionElements();
+  };
+
+  hideOverlay = () =>
+  {
+    if(!this._overlay)
+    {
+      return;
+    }
+
+    // Remove the overlay
+    this._overlay?.parentNode?.removeChild(this._overlay);
+    this._overlay = null;
+
+    // stop listening for image deletion or movement
+    document.removeEventListener('keyup', this.checkImage);
+    this.quill.root.removeEventListener('input', this.checkImage);
+
+    this.setUserSelect(''); // reset user-select
+  };
+
+  repositionElements = () =>
+  {
+    if(!this._overlay || !this._focusedImage)
+    {
+      return; // nothing to do
+    }
+
+    const parent = this.quill.root.parentNode as HTMLElement;
+    const imgRect = this._focusedImage.getBoundingClientRect();
+    const containerRect = parent.getBoundingClientRect();
+
+    Object.assign(this._overlay.style, {
+      left: `${imgRect.left - containerRect.left - 1 + parent.scrollLeft}px`,
+      top: `${imgRect.top - containerRect.top - 1 + parent.scrollTop}px`,
+      width: `${imgRect.width}px`,
+      height: `${imgRect.height}px`
+    });
+  };
+
+  setUserSelect = (value: string) =>
+  {
+    [
+      'userSelect',
+      'mozUserSelect',
+      'webkitUserSelect',
+      'msUserSelect'
+    ].forEach((prop: any) =>
+    {
+      // set on contenteditable element and <html>
+      this.quill.root.style[prop] = value;
+      document.documentElement.style[prop] = value;
+    });
+  };
+
+  checkImage = (e: KeyboardEvent) =>
+  {
+    if(this._focusedImage)
+    {
+      if(e.keyCode == 46 || e.keyCode == 8)
+      {
+        // @ts-expect-error Quill might not be defined on the window
+        (window.Quill || Quill).find(this._focusedImage).deleteAt(0);
+      }
+    }
+  };
+}
+
+export default ImageResizeModule;

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

@@ -0,0 +1,149 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type TemplateResult, unsafeCSS} from "lit";
+import {property, query, state} from "lit/decorators.js";
+import {watch} from "../../../../internal/watch";
+import ZincElement from "../../../../internal/zinc-element";
+import type {CannedResponse} from "../../editor.component";
+import type ZnMenu from "../../../menu";
+
+import styles from './menu-module.scss';
+
+export default class MenuModuleComponent extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @state() private hasFocus = false;
+
+  @query('zn-menu') menuEl!: ZnMenu;
+
+  @query('.menu-module__content') commandList!: HTMLElement;
+
+  @query('.menu-module') menuModule!: HTMLElement;
+
+  @property({type: Array}) commands: CannedResponse[] = [];
+  @property({type: Boolean, reflect: true}) open = false;
+
+  private closeWatcher: CloseWatcher | null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('zn-menu-ready', this.focus);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('zn-menu-ready', this.focus);
+  }
+
+  focus() {
+    // Focus the first menu item if available, otherwise fallback to menuEl
+    const firstItem = this.menuEl?.getAllItems?.()[0];
+    if (firstItem) {
+      firstItem.focus();
+    } else {
+      this.menuEl?.focus();
+    }
+  }
+
+  show() {
+    this.open = true;
+    this.emit('zn-show');
+    this.focus();
+  }
+
+  hide() {
+    this.open = false;
+    this.emit('zn-close');
+    this.blur();
+  }
+
+  @watch('open', {waitUntilFirstUpdate: true})
+  handleOpenChange() {
+    if (this.open) {
+      this.addOpenListeners();
+      this.menuEl.style.display = 'block';
+      setTimeout(() => this.focus(), 0);
+    } else {
+      this.menuEl.style.display = 'none';
+      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.hide();
+  }
+
+  private showDialog = () => {
+    this.hide();
+    this.emit('zn-show-canned-response-dialog', {detail: {commands: this.commands}});
+  }
+
+  private handleClick = (event: MouseEvent) => {
+    const target = event.target as HTMLElement | null;
+
+    if (!target) return;
+
+    const item = target.hasAttribute('data-command')
+      ? target
+      : target.closest('[data-command]') as HTMLElement | null;
+
+    if (item) {
+      this.emit('zn-command-select', {detail: {item}});
+      this.emit('zn-editor-update');
+    }
+  }
+
+  private _createCommand(command: CannedResponse): TemplateResult {
+    return html`
+      <zn-menu-item data-command="${command.title}" @click="${this.handleClick}">
+        <div class="command__wrapper">
+          <div class="command__command">
+            ${'/' + (command.command ? command.command :
+              command.title.toLowerCase().replace(' ', '-'))}
+          </div>
+          <div class="command__title">
+            ${command.title}
+          </div>
+        </div>
+      </zn-menu-item>`
+  }
+
+  render() {
+    return html`
+      <zn-menu class="${classMap({
+        'menu-module': true,
+        'menu-module--has-focus': this.hasFocus,
+        'menu-module--has-results': this.commands.length > 0,
+        'menu-module--open': this.open,
+      })}">
+        ${this.commands.sort((a, b) => parseInt(b.count) - parseInt(a.count))
+          .slice(0, 3)
+          .map(command => this._createCommand(command))}
+        <zn-menu-item @click="${this.showDialog}">View All</zn-menu-item>
+      </zn-menu>
+    `;
+  }
+
+}
+
+MenuModuleComponent.define('zn-menu-module');

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

@@ -0,0 +1,17 @@
+.menu-module {
+  display: none;
+
+  &--open {
+    display: block;
+    z-index: var(--zn-z-index-dialog);
+  }
+}
+
+.command {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: var(--zn-spacing-2x-small);
+  }
+}

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

@@ -0,0 +1,203 @@
+import './menu-module.component';
+import {html} from "lit";
+import {litToHTML} from "../../../../utilities/lit-to-html";
+import {type ZnCommandSelectEvent} from "../events/zn-command-select";
+import Quill, {Delta} from 'quill';
+import type {CannedResponse} from "../../editor.component";
+import type ZnMenuModule from './menu-module.component';
+
+interface MenuModuleOptions {
+  cannedResponses: CannedResponse[];
+  cannedResponsesUri: string;
+}
+
+export let menuOpen: boolean = false;
+
+class MenuModule {
+  private _quill: Quill;
+  private _menu: ZnMenuModule;
+  private readonly _cannedResponsesUri: string = '';
+  private _commands: CannedResponse[] = [];
+
+  constructor(quill: Quill, options: MenuModuleOptions) {
+    this._quill = quill;
+    this._cannedResponsesUri = options.cannedResponsesUri?.trim() || '';
+    this._commands = options.cannedResponses || [];
+
+    if (this._commands.length > 0 || this._cannedResponsesUri) {
+      this.initMenu();
+      this.attachEvents();
+    }
+  }
+
+  private initMenu() {
+    this._menu = this.createMenu()!;
+    this._quill.container.ownerDocument.body.appendChild(this._menu);
+    this.updateMenuPosition();
+    this.addCommands();
+  }
+
+  private attachEvents() {
+    this._quill.on(Quill.events.TEXT_CHANGE, this.onTextChange);
+    document.addEventListener('zn-command-select', this.onCommandSelect);
+    document.addEventListener('click', this.onDocumentClick);
+    this._menu.addEventListener('zn-show', () => setTimeout(() => this.updateMenuPosition(), 1));
+  }
+
+  private detachEvents() {
+    document.removeEventListener('zn-command-select', this.onCommandSelect);
+    document.removeEventListener('click', this.onDocumentClick);
+    this._menu.removeEventListener('zn-show', () => setTimeout(() => this.updateMenuPosition(), 1));
+  }
+
+  private onTextChange = async (_: Delta, _oldDelta: Delta, source: string) => {
+    if (source === Quill.sources.USER) {
+      // if the user has typed a forward slash, we will show the menu until they type
+      // a space or a new line. The menu will contain a list of commands that the user
+      // can select from.
+      const text = this._quill.getText();
+      const index = this._quill.getSelection()?.index ?? 0;
+      const char = index === 0 ? text.charAt(0) : text.charAt(index - 1); // Last input char
+      const openCharacter = '/';
+
+      // If the openCharacter is the first character in the editor, and menu isn't open, open it.
+      if (index === 0 && char === openCharacter && !menuOpen) {
+        await this._openMenu();
+      } else if (char === openCharacter && text.charAt(index - 2) === ' ' && !menuOpen) {
+        await this._openMenu();
+      }
+
+      // if the user has typed a space or a new line, we will close the menu if the menu
+      // is open
+      if (menuOpen && (char === ' ' || char === '\n')) {
+        this._closeMenu();
+      }
+
+      if (menuOpen) {
+        this.updateMenuPosition();
+      }
+
+      // if the user clicks away from the menu, we will close the menu
+      document.addEventListener('click', (e) => {
+        if (menuOpen && e.target !== this._menu) {
+          this._closeMenu();
+        }
+      });
+    }
+  }
+
+  private onCommandSelect = (e: Event) => {
+    const event = e as ZnCommandSelectEvent;
+    const commandTitle = event.detail.item.getAttribute('data-command');
+    if (!commandTitle) return;
+    const command = this._commands.find(cmd => cmd.title === commandTitle);
+    if (command) {
+      this.triggerCommand(command);
+    }
+  };
+
+  private onDocumentClick = (e: MouseEvent) => {
+    if (menuOpen && e.target !== this._menu) {
+      this._closeMenu();
+    }
+  };
+
+  private updateMenuPosition(menu: ZnMenuModule = this._menu) {
+    const editorBounds = this._quill.container.getBoundingClientRect();
+
+    // Get the current cursor position
+    const range = this._quill.getSelection();
+    if (range) {
+      const cursorBounds = this._quill.getBounds(range.index);
+
+      if (cursorBounds) {
+        // Position the menu to the right of the cursor
+        const maxHeight = 275;
+        const top = editorBounds.top + cursorBounds.top;
+        const left = editorBounds.left + cursorBounds.right + 10; // Add offset to the right
+        const windowHeight = window.innerHeight;
+        const hasRoom = windowHeight - top > maxHeight; // Check if there's enough room for the menu
+
+        if (hasRoom) {
+          menu.style.top = `${top}px`;
+        } else {
+          menu.style.top = `${top - maxHeight}px`;
+        }
+
+        menu.style.position = 'absolute';
+        menu.style.left = `${left}px`;
+        menu.style.maxHeight = `${maxHeight}px`;
+      }
+    }
+  }
+
+  private async _openMenu() {
+    menuOpen = true;
+    this.attachEvents();
+    if (this._cannedResponsesUri) {
+      await this.fetchCannedResponses();
+    }
+
+    if (this._commands.length > 0) {
+      this._menu.show();
+      this._menu.focus();
+    }
+  }
+
+  private _closeMenu() {
+    menuOpen = false;
+    this.detachEvents();
+    this._menu.hide();
+  }
+
+  private createMenu() {
+    const menu = html`
+      <zn-menu-module anchor=${this._quill.container}></zn-menu-module>`
+
+    return litToHTML<ZnMenuModule>(menu);
+  }
+
+  private addCommands() {
+    this._menu.setAttribute('commands', JSON.stringify(this._commands));
+  }
+
+  private triggerCommand(command: CannedResponse) {
+    this._closeMenu();
+    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();
+    }
+  }
+
+  private async fetchCannedResponses() {
+    try {
+      const response = await fetch(this._cannedResponsesUri);
+      this._commands = await response.json() as CannedResponse[];
+      if (this._menu) {
+        this.addCommands();
+      }
+    } catch (error) {
+      console.error('Error fetching canned responses', error);
+    }
+  }
+}
+
+export default MenuModule;