@kubex/zinc 1.0.3 → 1.0.5

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

@@ -0,0 +1,106 @@
+import {init, Picker} from 'emoji-mart';
+import data from '@emoji-mart/data';
+import Quill from 'quill';
+import type ToolbarComponent from "../toolbar/toolbar.component";
+
+export interface EmojiResult {
+  native?: string;
+  skins?: { native?: string }[];
+  id?: string;
+  shortcodes?: string;
+}
+
+class Emoji {
+  private readonly _quill: Quill;
+  private _mo: MutationObserver | null = null;
+
+  constructor(quill: Quill) {
+    this._quill = quill;
+    try {
+      void init({data});
+    } catch {
+      // no-op if already initialised
+    }
+    this.initPicker();
+
+    const host = this.getHostEditor();
+    if (host) {
+      this._mo = new MutationObserver(() => this.initPicker());
+      this._mo.observe(host, {attributes: true, attributeFilter: ['t']});
+    }
+  }
+
+  private getHostEditor(): HTMLElement | null {
+    const root = this._quill.container?.getRootNode?.() as ShadowRoot | null;
+    return (root && (root as ShadowRoot).host) as HTMLElement | null;
+  }
+
+  private async getToolbarEmojiContainer(): 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?.('.emoji-picker') as HTMLElement | null;
+      return container ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  private getTheme(): 'light' | 'dark' {
+    const host: any = this.getHostEditor();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    const t = host?.t ?? host?.getAttribute?.('t');
+    return t === 'dark' ? 'dark' : 'light';
+  }
+
+  public initPicker() {
+    this.getToolbarEmojiContainer().then((container) => {
+      if (!container) return;
+
+      container.innerHTML = '';
+
+      // eslint-disable-next-line no-new
+      new Picker({
+        parent: container,
+        data: data as Record<string, unknown>,
+        previewPosition: 'none',
+        skinTonePosition: 'none',
+        theme: this.getTheme(),
+        set: 'native',
+        icons: 'solid',
+        onEmojiSelect: (emoji: EmojiResult) => this.onEmojiSelect(emoji)
+      });
+    });
+  }
+
+  private onEmojiSelect(emoji: EmojiResult | null) {
+    const text: string = (emoji?.native) ?? (emoji?.skins?.[0]?.native) ?? '';
+    if (!text || !this._quill) return;
+
+    const range = this._quill.getSelection(true);
+    if (range) {
+      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);
+      this._quill.insertText(index, text, Quill.sources.USER);
+      this._quill.setSelection(index + text.length, 0, Quill.sources.USER);
+    }
+
+    this.getToolbarEmojiContainer().then((container) => {
+      if (!container) return;
+
+      const root = container.getRootNode() as ShadowRoot;
+      const host = root.host as HTMLElement | undefined;
+      const dialog = host?.closest?.('zn-dialog') as { hide?: () => void } | null;
+      dialog?.hide?.();
+    });
+  }
+}
+
+export default Emoji;

package/src/components/editor/modules/emoji/headless/headless-emoji.component.ts

@@ -0,0 +1,122 @@
+import {html, unsafeCSS} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import ZincElement from '../../../../../internal/zinc-element';
+import type {CSSResultGroup, PropertyValues} from 'lit';
+
+import styles from './headless-emoji.scss';
+
+export interface ResultItem {
+  emojiChar: string;
+  label: string;
+}
+
+export default class HeadlessEmojiComponent extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Boolean, reflect: true}) open = false;
+  @property({type: String}) query = '';
+  @property({type: Array}) results: ResultItem[] = [];
+
+  @state() private _activeIndex = -1;
+
+  show() {
+    this.open = true;
+  }
+
+  hide() {
+    this.open = false;
+    this._activeIndex = -1;
+  }
+
+  setPosition(left: number, top: number) {
+    this.style.left = `${Math.max(0, left)}px`;
+    this.style.top = `${top}px`;
+  }
+
+  setActiveIndex(index: number) {
+    const len = this.results?.length ?? 0;
+    if (!len) {
+      this._activeIndex = -1;
+      return;
+    }
+
+    if (index < 0) {
+      index = len - 1;
+    }
+    if (index >= len) {
+      index = 0;
+    }
+    this._activeIndex = index;
+    this.requestUpdate();
+
+    requestAnimationFrame(() => {
+      const items = Array.from(this.renderRoot.querySelectorAll<HTMLButtonElement>('[data-emoji-item]'));
+      const active = items[this._activeIndex];
+      active?.scrollIntoView?.({block: 'nearest'});
+    });
+  }
+
+  getActiveIndex() {
+    return this._activeIndex;
+  }
+
+  private onMouseEnterItem = (e: MouseEvent) => {
+    const target = e.currentTarget as HTMLElement | null;
+    if (!target) return;
+
+    const idx = parseInt(target.dataset.index || '-1', 10);
+    if (!Number.isNaN(idx)) {
+      this.setActiveIndex(idx);
+    }
+  }
+
+  private onClickItem = (e: MouseEvent) => {
+    const target = e.currentTarget as HTMLElement | null;
+    if (!target) return;
+
+    const idx = parseInt(target.dataset.index || '-1', 10);
+    if (Number.isNaN(idx)) return;
+
+    const item = this.results?.[idx];
+    if (!item) return;
+
+    this.dispatchEvent(new CustomEvent('zn-emoji-select', {
+      bubbles: true,
+      composed: true,
+      detail: {emojiChar: item.emojiChar, label: item.label}
+    }));
+  }
+
+  protected willUpdate(changed: PropertyValues) {
+    if (changed.has('results')) {
+      // Reset active index when results change
+      this._activeIndex = this.results?.length ? 0 : -1;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="header">${this.query ? `Emoji: ${this.query}` : 'Emoji'}</div>
+      ${Array.isArray(this.results) && this.results.length > 0 ? (
+        this.results.slice(0, 20).map((res, i) => html`
+          <button
+            type="button"
+            class="item"
+            role="option"
+            aria-selected="${String(i === this._activeIndex)}"
+            data-emoji-item
+            data-index="${i}"
+            @mouseenter="${this.onMouseEnterItem}"
+            @click="${this.onClickItem}"
+          >
+            <span class="emoji">${res.emojiChar}</span>
+            <span class="label">${res.label}</span>
+          </button>
+        `)
+      ) : html`
+        <div class="empty">${this.query ? 'No results' : 'Type something'}</div>`}
+    `;
+  }
+}
+
+HeadlessEmojiComponent.define('zn-headless-emoji');

package/src/components/editor/modules/emoji/headless/headless-emoji.scss

@@ -0,0 +1,52 @@
+: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: 180px;
+}
+
+: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: 6px 8px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.item[aria-selected="true"] {
+  background: var(--zn-input-background-color-hover);
+}
+
+.emoji {
+  font-size: var(--zn-font-size-medium);
+}
+
+.label {
+  opacity: 0.7;
+}
+
+.empty {
+  padding: 8px;
+  opacity: 0.7;
+}

package/src/components/editor/modules/emoji/headless/headless-emoji.ts

@@ -0,0 +1,223 @@
+import './headless-emoji.component';
+import {html} from 'lit';
+import {init, SearchIndex} from 'emoji-mart';
+import {litToHTML} from '../../../../../utilities/lit-to-html';
+import data from '@emoji-mart/data';
+import Quill from 'quill';
+import type {EmojiResult} from "../emoji";
+import type {ResultItem} from './headless-emoji.component';
+import type HeadlessEmojiComponent from './headless-emoji.component';
+
+class HeadlessEmoji {
+  private _quill: Quill;
+  private _component!: HeadlessEmojiComponent;
+  private _startIndex = -1;
+  private _keydownHandler = (e: KeyboardEvent) => this.onKeydown(e);
+  private _docClickHandler = (e: MouseEvent) => this.onDocumentClick(e);
+
+  constructor(quill: Quill) {
+    this._quill = quill;
+    // Initialize emoji-mart index once
+    try {
+      void init({data});
+    } catch {
+      // no-op
+    }
+
+    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-emoji-select', (e: Event) => this.onEmojiSelect(e as CustomEvent));
+    this._quill.on('editor-change', () => this.positionComponent());
+    this._quill.focus();
+  }
+
+  private createComponent() {
+    const tpl = html`
+      <zn-headless-emoji></zn-headless-emoji>`;
+    return litToHTML<HeadlessEmojiComponent>(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 async updateFromEditor() {
+    const info = this.getEmojiQuery();
+    if (!info) {
+      this.hide();
+      return;
+    }
+
+    const {start, emojiQuery} = info;
+    this._startIndex = start;
+
+    try {
+      const results = await SearchIndex.search(emojiQuery) as EmojiResult[];
+      const mapped: ResultItem[] = (Array.isArray(results) ? results : []).slice(0, 20).map((e) => ({
+        emojiChar: (e?.skins?.[0]?.native) || e?.native || '',
+        label: (e?.id || e?.shortcodes || '') || ''
+      })).filter(it => !!it.emojiChar);
+
+      this._component.results = mapped;
+      this._component.query = emojiQuery;
+      if (mapped.length > 0) {
+        this.show();
+        this.positionComponent();
+      } else {
+        this.show();
+        this.positionComponent();
+      }
+    } catch {
+      this._component.results = [];
+      this._component.query = emojiQuery;
+      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 = editorBounds.left + Math.max(0, bounds.left);
+    const top = editorBounds.top + bounds.bottom + 4;
+    this._component.setPosition(left, top);
+  }
+
+  private getEmojiQuery(): { start: number; emojiQuery: string } | null {
+    try {
+      const sel = this._quill.getSelection();
+      if (!sel) return null;
+
+      const cursor = sel.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 emojiQuery = uptoCursor.substring(cIndex + 1);
+      if (/[\s\n]/.test(emojiQuery)) return null; // stop at whitespace
+
+      // Do not trigger for URLs like http://
+      if (/^\/\//.test(uptoCursor.substring(Math.max(0, cIndex - 5), cIndex + 1))) return null;
+      return {start: cursor - emojiQuery.length - 1, emojiQuery};
+    } 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 || [];
+      const item = (typeof idx === 'number' && idx >= 0 && idx < results.length) ? results[idx] : undefined;
+      if (item) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.replaceAtQuery(item.emojiChar);
+      }
+    }
+  }
+
+  private onEmojiSelect(e: CustomEvent) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+    const emojiChar: string = e.detail?.emojiChar || '';
+    if (!emojiChar) return;
+    this.replaceAtQuery(emojiChar);
+  }
+
+  private replaceAtQuery(emojiChar: string) {
+    try {
+      const sel = this._quill.getSelection();
+      if (!sel || this._startIndex < 0) return;
+
+      const insertIndex = this._startIndex;
+      const length = sel.index - insertIndex;
+      if (length < 0) return;
+
+      // Remove ':' and the query
+      this._quill.deleteText(insertIndex, length, Quill.sources.USER);
+
+      const insertText = `${emojiChar} `;
+      this._quill.insertText(insertIndex, insertText, Quill.sources.USER);
+
+      const cursorPos = insertIndex + insertText.length;
+      setTimeout(() => this._quill.setSelection(cursorPos, 0, Quill.sources.SILENT), 0);
+      this._quill.focus();
+      this.hide();
+    } catch {
+      // no-op
+    }
+  }
+
+  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 HeadlessEmoji;

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

@@ -1,18 +1,18 @@
 import Quill, {Module} from "quill";
 
-type ImageResizeModuleOptions = {
+interface ImageResizeOptions {
   overlayStyles?: Partial<CSSStyleDeclaration>;
 }
 
-class ImageResizeModule extends Module<ImageResizeModuleOptions>
+class ImageResize extends Module<ImageResizeOptions>
 {
 
-  static DEFAULTS: ImageResizeModuleOptions = {};
+  static DEFAULTS: ImageResizeOptions = {};
 
   private _focusedImage: HTMLImageElement | null = null;
   private _overlay: HTMLDivElement | null = null;
 
-  constructor(quill: Quill, options: ImageResizeModuleOptions)
+  constructor(quill: Quill, options: ImageResizeOptions)
   {
     super(quill, options);
 
@@ -154,4 +154,4 @@ class ImageResizeModule extends Module<ImageResizeModuleOptions>
   };
 }
 
-export default ImageResizeModule;
+export default ImageResize;

package/src/components/editor/modules/{time-tracking-module.ts → time-tracking/time-tracking.ts}

@@ -1,17 +1,17 @@
-import Quill from 'quill';
+import type Quill from 'quill';
 
-type TimeTrackingModuleOptions = {
+interface TimeTrackingOptions {
   startTimeInput?: HTMLInputElement;
   openTimeInput?: HTMLInputElement;
 }
 
-export default class TimeTrackingModule {
+export default class TimeTracking {
   private _quill: Quill;
-  private _options: TimeTrackingModuleOptions;
+  private _options: TimeTrackingOptions;
   private _startTime: number;
   private _openTime: number;
 
-  constructor(quill: Quill, options: TimeTrackingModuleOptions) {
+  constructor(quill: Quill, options: TimeTrackingOptions) {
     this._quill = quill;
     this._options = options;
 

package/src/components/editor/modules/toolbar/tool/index.ts

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

package/src/components/editor/modules/toolbar/tool/tool.component.ts

@@ -0,0 +1,30 @@
+import {type CSSResultGroup, html, unsafeCSS} from "lit";
+import {property} from "lit/decorators.js";
+import ZincElement from "../../../../../internal/zinc-element";
+
+import styles from './tool.scss';
+
+export default class ZnEditorTool extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() uri: string;
+  @property() label: string;
+  @property() key: string;
+  @property() icon: string;
+  @property() handler: string = 'dialog';
+
+  render() {
+    return html`
+      <zn-button class="tool-action"
+                 color="transparent"
+                 icon="${this.icon}"
+                 icon-size="18"
+                 data-format="${this.handler}"
+                 data-format-type="${this.uri}"
+                 data-toolbar-key="${this.key}"
+                 aria-label="${this.label}"></zn-button>
+      <div class="${this.handler}"></div>`
+  }
+}
+
+ZnEditorTool.define('zn-editor-tool');

package/src/components/editor/modules/toolbar/tool/tool.scss

@@ -0,0 +1,5 @@
+.tool-action {
+  width: 28px;
+  height: 28px;
+  margin: 3px 2px;
+}