@kubex/zinc 1.0.4 → 1.0.6

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

@@ -1,115 +0,0 @@
-@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

@@ -1,99 +0,0 @@
-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;

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

@@ -1,15 +0,0 @@
-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/menu-module/menu-module.component.ts

@@ -1,149 +0,0 @@
-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

@@ -1,17 +0,0 @@
-.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

@@ -1,203 +0,0 @@
-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;