@kubex/zinc 1.0.4 → 1.0.5

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

@@ -0,0 +1,49 @@
+:host {
+  position: absolute;
+  z-index: var(--zn-z-index-editor-action);
+  display: none;
+  background: var(--zn-panel-background-color);
+  border: 1px solid var(--zn-border-color);
+  border-radius: 8px;
+  box-shadow: var(--zn-shadow-medium);
+  padding: 6px;
+  max-height: 220px;
+  overflow-y: auto;
+  min-width: 360px;
+}
+
+:host([open]) {
+  display: block;
+}
+
+.header {
+  padding: 4px 6px;
+  font-size: var(--zn-font-size-x-small);
+  opacity: 0.6;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+
+  &[aria-selected="true"],
+  &:hover {
+    background: var(--zn-input-background-color-hover);
+  }
+}
+
+.label {
+  opacity: 0.7;
+}
+
+.empty {
+  padding: 8px;
+  opacity: 0.7;
+}

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

@@ -0,0 +1,296 @@
+import './context-menu-component';
+import {html} from "lit";
+import {litToHTML} from "../../../../utilities/lit-to-html";
+import {type ResultItem} from "./context-menu-component";
+import Quill, {Delta} from "quill";
+import ZnEditorQuickAction from "./quick-action";
+import type ContextMenuComponent from "./context-menu-component";
+import type Toolbar from "../toolbar/toolbar";
+
+class ContextMenu {
+  private _quill: Quill;
+  private readonly _toolbarModule: Toolbar;
+  private _component: ContextMenuComponent;
+  private _startIndex = -1;
+  private _keydownHandler = (e: KeyboardEvent) => this.onKeydown(e);
+  private _docClickHandler = (e: MouseEvent) => this.onDocumentClick(e);
+
+  constructor(quill: Quill) {
+    this._quill = quill;
+    this._toolbarModule = quill.getModule('toolbar') as Toolbar;
+
+    this.initComponent();
+    this.attachEvents();
+  }
+
+  private initComponent() {
+    this._component = this.createComponent()!;
+    this._quill.container.ownerDocument.body.appendChild(this._component);
+  }
+
+  private attachEvents() {
+    this._quill.on(Quill.events.TEXT_CHANGE, () => this.updateFromEditor());
+    this._quill.on(Quill.events.EDITOR_CHANGE, () => this.updateFromEditor());
+    this._quill.root.addEventListener('keydown', this._keydownHandler);
+    this._component.addEventListener('zn-format-select', (e: Event) => this.onToolbarSelect(e as CustomEvent<ResultItem>));
+    this._quill.on('editor-change', () => this.positionComponent());
+    this._quill.focus();
+  }
+
+  private createComponent() {
+    const tpl = html`
+      <zn-context-menu></zn-context-menu>`;
+    return litToHTML<ContextMenuComponent>(tpl);
+  }
+
+  private onDocumentClick(e: MouseEvent) {
+    const target = e.composedPath ? e.composedPath()[0] as Node : (e.target as Node);
+    if (!target) return;
+
+    if (!this._component.contains(target) && !this._quill.root.contains(target)) {
+      this.hide();
+    }
+  }
+
+  private updateFromEditor() {
+    const info = this.getToolbarQuery();
+    if (!info) {
+      this.hide();
+      return;
+    }
+
+    const {start, formatQuery} = info;
+    this._startIndex = start;
+
+    try {
+      const q = formatQuery.toLowerCase();
+      this._component.results = this._getOptions().filter(it => !q || it.label.toLowerCase().includes(q) || it?.format?.toLowerCase().includes(q));
+    } catch {
+      this._component.results = [];
+    }
+
+    this._component.query = formatQuery;
+    this.show();
+    this.positionComponent();
+  }
+
+  private positionComponent() {
+    if (!this._component || !this._component.open) return;
+
+    const range = this._quill.getSelection();
+    if (!range) return;
+
+    const bounds = this._quill.getBounds(range.index);
+    if (!bounds) return;
+
+    const editorBounds = this._quill.container.getBoundingClientRect();
+    const left = Math.max(0, editorBounds.left + bounds.left);
+    const top = editorBounds.top + bounds.bottom + 4;
+    this._component.setPosition(left, top);
+  }
+
+  private getToolbarQuery(): { start: number; formatQuery: string } | null {
+    try {
+      const range = this._quill.getSelection();
+      if (!range) return null;
+
+      const cursor = range.index;
+      const characterLimit = 50;
+      const textBefore = this._quill.getText(Math.max(0, cursor - characterLimit), Math.min(characterLimit, cursor));
+      const offset = cursor - Math.max(0, cursor - characterLimit);
+      const uptoCursor = textBefore.slice(0, offset);
+      const cIndex = uptoCursor.lastIndexOf('/');
+      if (cIndex === -1) return null;
+
+      const prev = cIndex > 0 ? uptoCursor[cIndex - 1] : ' ';
+      if (prev && /[^\s\n]/.test(prev)) return null; // must start at word boundary
+
+      const formatQuery = uptoCursor.substring(cIndex + 1);
+      if (/[\s\n]/.test(formatQuery)) return null; // stop at whitespace
+
+      return {start: cursor - formatQuery.length - 1, formatQuery};
+    } catch {
+      return null;
+    }
+  }
+
+  private onKeydown(e: KeyboardEvent) {
+    if (!this._component?.open) return;
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      this.hide();
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      e.stopPropagation();
+      const next = (this._component.getActiveIndex?.() ?? -1) + 1;
+      this._component.setActiveIndex?.(next);
+      return;
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      e.stopPropagation();
+      const prev = (this._component.getActiveIndex?.() ?? 0) - 1;
+      this._component.setActiveIndex?.(prev);
+      return;
+    }
+
+    if (e.key === 'Enter') {
+      const idx = this._component.getActiveIndex?.();
+      const results = (this._component.results as ResultItem[]) || [];
+      const item = (typeof idx === 'number' && idx >= 0 && idx < results.length) ? results[idx] : undefined;
+      if (item?.format === 'toolbar' && item?.key) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._clickToolbarItem(item.key);
+        return;
+      }
+      if (item?.format) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._applySelectedFormat(item.format, item.value);
+      }
+    }
+  }
+
+  private onToolbarSelect(e: CustomEvent<ResultItem>) {
+    const key: string | undefined = e.detail?.key as (string | undefined);
+    if (key) {
+      this._clickToolbarItem(key);
+      return;
+    }
+
+    const format: string = e.detail?.format || '';
+    const value: string | boolean | undefined = e.detail?.value as (string | boolean | undefined);
+    if (!format) return;
+
+    this._applySelectedFormat(format, value);
+  }
+
+  private _clickToolbarItem(key: string) {
+    this.deleteLastIndex();
+    this._toolbarModule.trigger?.(key);
+    this.hide();
+  }
+
+  private _applySelectedFormat(key: string, value?: string | boolean) {
+    this.deleteLastIndex();
+
+    if (key === 'insert' && typeof value === 'string') {
+      const range = this._quill.getSelection();
+      if (range) {
+        let insertIndex = range.index - 1;
+        this._quill.deleteText(insertIndex, 1, Quill.sources.USER);
+
+        const prevChar = this._quill.getText(insertIndex - 1, 1);
+        if (prevChar !== ' ' && insertIndex > 0) {
+          this._quill.insertText(insertIndex, ' ', Quill.sources.USER);
+          insertIndex += 1;
+        }
+
+        const contentDelta = this._quill.clipboard.convert({html: value});
+        this._quill.updateContents(
+          new Delta().retain(insertIndex).concat(contentDelta),
+          Quill.sources.USER
+        );
+
+        setTimeout(() => this._quill.setSelection(insertIndex + contentDelta.length(), 0, Quill.sources.SILENT), 0);
+      }
+      this._quill.focus();
+      this.hide();
+      return;
+    }
+
+    this._toolbarModule.callFormat(key, value);
+    this._quill.focus();
+    this.hide();
+  }
+
+  private deleteLastIndex() {
+    const sel = this._quill.getSelection();
+    if (sel && this._startIndex >= 0) {
+      const insertIndex = this._startIndex;
+      const length = sel.index - insertIndex;
+      if (length >= 0) {
+        this._quill.deleteText(insertIndex, length, Quill.sources.USER);
+        this._quill.setSelection(insertIndex, 0, Quill.sources.SILENT);
+      }
+    }
+  }
+
+  private _getOptions(): ResultItem[] {
+    const options: ResultItem[] = [];
+
+    // 1) Quick Actions
+    const root = this._quill.container.getRootNode() as ShadowRoot;
+    if (root?.host) {
+      const slot = root.querySelector('slot[name="context-items"]') as HTMLSlotElement | null;
+      const assigned = slot ? slot.assignedElements({flatten: true}) : [];
+      assigned.forEach((quickAction: Element) => {
+        if (!(quickAction instanceof ZnEditorQuickAction)) return;
+
+        const {label, content, uri, icon, key} = quickAction;
+
+        if (label && icon) {
+          if (key) {
+            options.push({icon, label, format: 'toolbar', key: key});
+          } else if (uri) {
+            options.push({icon, label, format: 'dialog', value: uri});
+          } else if (content) {
+            options.push({icon, label, format: 'insert', value: content});
+          }
+        }
+      });
+    }
+
+    // 2) Built-in Actions
+    options.push(
+      {icon: 'format_bold', label: 'Bold', format: 'bold'},
+      {icon: 'format_italic', label: 'Italic', format: 'italic'},
+      {icon: 'format_underlined', label: 'Underline', format: 'underline'},
+      {icon: 'strikethrough_s', label: 'Strikethrough', format: 'strike'},
+      {icon: 'format_quote', label: 'Blockquote', format: 'blockquote'},
+      {icon: 'code', label: 'Inline Code', format: 'code'},
+      {icon: 'code_blocks', label: 'Code Block', format: 'code-block'},
+      {icon: 'format_h1', label: 'Heading 1', format: 'header', value: '1'},
+      {icon: 'format_h2', label: 'Heading 2', format: 'header', value: '2'},
+      {icon: 'match_case', label: 'Normal Text', format: 'header', value: ''},
+      {icon: 'format_list_bulleted', label: 'Bulleted List', format: 'list', value: 'bullet'},
+      {icon: 'format_list_numbered', label: 'Numbered List', format: 'list', value: 'ordered'},
+      {icon: 'checklist', label: 'Checklist', format: 'list', value: 'checked'},
+      {icon: 'link', label: 'Link', format: 'link', value: true},
+      {icon: 'horizontal_rule', label: 'Divider', format: 'divider'},
+      {icon: 'attachment', label: 'Attachment', format: 'attachment'},
+      {icon: 'image', label: 'Image', format: 'image'},
+      {icon: 'video_camera_back', label: 'Video', format: 'video'},
+      {icon: 'calendar_today', label: 'Date', format: 'date'},
+      {icon: 'format_clear', label: 'Clear Formatting', format: 'clean'}
+    );
+
+    return options;
+  }
+
+  private show() {
+    if (!this._component.open) {
+      this._component.show();
+      this._quill.container.ownerDocument.addEventListener('click', this._docClickHandler);
+    }
+  }
+
+  private hide() {
+    this._component.hide();
+    this._startIndex = -1;
+    this._quill.container.ownerDocument.removeEventListener('click', this._docClickHandler);
+  }
+
+  public isOpen() {
+    return this._component?.open;
+  }
+}
+
+export default ContextMenu;

package/src/components/editor/modules/context-menu/quick-action/index.ts

@@ -0,0 +1,12 @@
+import ZnEditorQuickAction from './quick-action.component';
+
+export * from './quick-action.component';
+export default ZnEditorQuickAction;
+
+ZnEditorQuickAction.define('zn-editor-quick-action');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-editor-quick-action': ZnEditorQuickAction;
+  }
+}

package/src/components/editor/modules/context-menu/quick-action/quick-action.component.ts

@@ -0,0 +1,18 @@
+import {html} from "lit";
+import {property} from "lit/decorators.js";
+import ZincElement from "../../../../../internal/zinc-element";
+
+export default class ZnEditorQuickAction extends ZincElement {
+  @property() uri: string;
+  @property() label: string;
+  @property() content: string;
+  @property() key: string;
+  @property() icon: string;
+
+  render() {
+    return html`
+      <div style="display: none;"></div>`
+  }
+}
+
+ZnEditorQuickAction.define('zn-editor-quick-action');

package/src/components/editor/modules/date-picker/date-picker.ts

@@ -0,0 +1,77 @@
+import AirDatepicker from "air-datepicker";
+import Quill from "quill";
+import type ToolbarComponent from "../toolbar/toolbar.component";
+
+class DatePicker {
+  private readonly _quill: Quill;
+
+  constructor(quill: Quill) {
+    this._quill = quill;
+
+    this._initPicker();
+  }
+
+  private _initPicker() {
+    this.getToolbarDateContainer().then((container) => {
+      if (!container) return;
+
+      container.innerHTML = '';
+
+      // eslint-disable-next-line no-new
+      new AirDatepicker(container, {
+        inline: true,
+        locale: {
+          days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+          daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+          daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+          months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          today: 'Today',
+          clear: 'Clear',
+          dateFormat: 'MM/dd/yyyy',
+          timeFormat: 'hh:ii aa',
+          firstDay: 0
+        },
+        onSelect: ({formattedDate}) => this._onDateSelect(formattedDate)
+      });
+    });
+  }
+
+  private async getToolbarDateContainer(): Promise<HTMLElement | null> {
+    try {
+      const root = this._quill.container?.getRootNode?.() as ShadowRoot | null;
+      if (!root) return null;
+
+      const toolbar = root.getElementById?.('toolbar') as ToolbarComponent | null;
+      await toolbar?.updateComplete;
+
+      const shadow = toolbar?.shadowRoot as ShadowRoot | undefined;
+      const container = shadow?.querySelector?.('.date-picker') as HTMLElement | null;
+      return container ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  private _onDateSelect(formattedDate: string | string[]) {
+    try {
+      if (!formattedDate || !this._quill) return;
+
+      const range = this._quill.getSelection(true);
+      if (range) {
+        const text = Array.isArray(formattedDate) ? formattedDate.join(', ') : formattedDate;
+        this._quill.insertText(range.index, text, Quill.sources.USER);
+        this._quill.setSelection(range.index + text.length, 0, Quill.sources.USER);
+      } else {
+        const index = Math.max(0, this._quill.getLength() - 1);
+        const text = Array.isArray(formattedDate) ? formattedDate.join(', ') : formattedDate;
+        this._quill.insertText(index, text, Quill.sources.USER);
+        this._quill.setSelection(index + text.length, 0, Quill.sources.USER);
+      }
+    } catch (e) {
+      // no-op
+    }
+  }
+}
+
+export default DatePicker;

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

@@ -0,0 +1,115 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from "lit";
+import {property, query, state} from "lit/decorators.js";
+import {watch} from "../../../../internal/watch";
+import ZincElement from "../../../../internal/zinc-element";
+
+import styles from './dialog.scss';
+
+export default class DialogComponent extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @state() private hasFocus = false;
+
+  @query('dialog') dialogEl!: HTMLDialogElement;
+
+  @property({type: Boolean, reflect: true}) open = false;
+  @property() uri = '';
+
+  private closeWatcher: CloseWatcher | null;
+  private _editorId: string;
+  set editorId(value: string) {
+    this._editorId = value;
+    this.requestUpdate();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    this.dialogEl.addEventListener("close", () => {
+      this.open = false;
+    });
+  }
+
+  setContent(content: string) {
+    if (this.dialogEl) {
+      this.dialogEl.querySelector('.editor-dialog__content')!.innerHTML = content;
+    }
+  }
+
+  @watch('open', {waitUntilFirstUpdate: true})
+  handleOpenChange() {
+    if (this.open) {
+      this.addOpenListeners();
+    } 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 _getLoadingState() {
+    return html`
+      <div class="loading-wrapper">
+        <zn-skeleton height="55px"></zn-skeleton>
+        <zn-skeleton height="55px"></zn-skeleton>
+        <zn-skeleton height="55px"></zn-skeleton>
+        <zn-skeleton height="55px"></zn-skeleton>
+      </div>`;
+  }
+
+  // Defaults loading skeletons before content is fetched
+  render() {
+    return html`
+      <dialog closedby="any"
+              open="${this.open || nothing}"
+              class="${classMap({
+                'editor-dialog': true,
+                'editor-dialog--has-focus': this.hasFocus,
+              })}"
+              context-data=${JSON.stringify({'editor-id': this._editorId})}>
+        <zn-button
+          class="editor-dialog__close"
+          icon="close"
+          icon-size="24"
+          type="button"
+          color="transparent"
+          size="content"
+          @click="${() => this.dialogEl.close()}"
+        ></zn-button>
+        <div class="editor-dialog__content">
+          ${this._getLoadingState()}
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+DialogComponent.define('zn-editor-dialog');

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

@@ -0,0 +1,43 @@
+@use "../../../../wc";
+
+:host {
+  @include wc.scrollbars;
+  display: block;
+  position: absolute;
+  overflow: hidden;
+}
+
+::backdrop {
+  background-color: rgba(128, 128, 128, 0.6);
+}
+
+.editor-dialog {
+  background-color: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius-large);
+  width: 100%;
+  max-width: 975px;
+  max-height: 650px;
+  padding: 0;
+
+  .loading-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 1rem;
+    gap: 10px;
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: var(--zn-spacing-small);
+    z-index: 10001;
+  }
+
+  &__content {
+    overflow: auto;
+    box-sizing: border-box;
+  }
+}

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

@@ -0,0 +1,46 @@
+import {html} from "lit";
+import {litToHTML} from "../../../../utilities/lit-to-html";
+import type DialogComponent from "./dialog.component";
+import type Quill from "quill";
+
+class Dialog {
+  private readonly _quill: Quill;
+  private readonly _editorId: string;
+  private readonly _document: Document;
+  private _component!: DialogComponent;
+
+  constructor(quill: Quill, options: { editorId: string }) {
+    this._quill = quill;
+    this._editorId = options.editorId;
+    this._document = this._quill.container.ownerDocument;
+    this._initDialog();
+  }
+
+  private _initDialog() {
+    const existing = this._document.querySelector<DialogComponent>('zn-editor-dialog');
+    if (existing) {
+      this._component = existing;
+    } else {
+      this._component = this.createComponent()!;
+      this._document.body.appendChild(this._component);
+    }
+
+    this._component.editorId = this._editorId;
+  }
+
+  private createComponent() {
+    const tpl = html`
+      <zn-editor-dialog></zn-editor-dialog>`;
+    return litToHTML<DialogComponent>(tpl);
+  }
+
+  public isOpen() {
+    return this._component.dialogEl.open;
+  }
+
+  public close() {
+    this._component.dialogEl.close();
+  }
+}
+
+export default Dialog;

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

@@ -1,25 +1,25 @@
-import Quill from 'quill';
+import type Quill from 'quill';
 
-interface DragAndDropModuleOptions {
+interface DragAndDropOptions {
   onDrop: (file: File, options: object) => void;
   draggableContentTypePattern: string;
   draggables: [];
 }
 
-const defaultOptions: DragAndDropModuleOptions = {
+const defaultOptions: DragAndDropOptions = {
   onDrop: () => {
   },
   draggableContentTypePattern: '^image\\/',
   draggables: []
 };
 
-export default class DragAndDropModule {
+export default class DragAndDrop {
   private _quill: Quill;
-  private _options: DragAndDropModuleOptions;
+  private _options: DragAndDropOptions;
   private _container: any = null;
   private _draggables: any = [];
 
-  constructor(quill: Quill, options: DragAndDropModuleOptions) {
+  constructor(quill: Quill, options: DragAndDropOptions) {
     this._quill = quill;
     this._options = Object.assign({}, defaultOptions, options);
     this._container = this._quill.addContainer('ql-editor');