@kubex/zinc 1.0.4 → 1.0.6

package/src/components/editor/modules/ai/index.ts

@@ -0,0 +1,281 @@
+import {html} from "lit";
+import {litToHTML} from "../../../../utilities/lit-to-html";
+import AIPanelComponent from './panel/ai-panel.component';
+import AITooltipComponent from "./tooltip/ai-tooltip.component";
+import Quill from "quill";
+import ZnTextarea from "../../../textarea";
+import type {Range} from "quill";
+
+class QuillAI {
+  private _quill: Quill;
+  private readonly _path: string = '';
+  private _component!: AITooltipComponent | AIPanelComponent;
+  private _selectedText: string = '';
+  private _prompt: string = '';
+  private _aiResponseContent: string = '';
+
+  constructor(quill: Quill, options: { path: string }) {
+    this._quill = quill;
+    this._path = options.path;
+
+    this._initComponent();
+    this._attachEvents();
+  }
+
+  private _initComponent() {
+    this._component = this._createTooltipComponent()!;
+    this._component.addEventListener('click', (e: Event) => this._replaceTooltip(e));
+    this._quill.container.ownerDocument.body.appendChild(this._component);
+  }
+
+  private _attachEvents() {
+    this._quill.on(Quill.events.SELECTION_CHANGE, (range) => this._updateFromEditor(range));
+  }
+
+  private _latestContent(panel: HTMLElement | null | undefined): string {
+    if (panel === null || panel === undefined) {
+      panel = this._component.shadowRoot?.querySelector('.ai-panel');
+    }
+    if (panel) {
+      const ele = panel.querySelector('[name="editor-response-text"]')
+      if (ele instanceof HTMLInputElement || ele instanceof ZnTextarea) {
+        return ele.value;
+      }
+    }
+    return this._aiResponseContent
+  }
+
+  async processAIRequest() {
+    const quotedSelectedText = this._selectedText ? this._selectedText : this._quill.getText();
+    const panel: HTMLElement | null | undefined = this._component.shadowRoot?.querySelector('.ai-panel');
+
+    const response = await fetch(this._path, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-kx-fetch-style': 'zn-editor',
+        'x-kx-editor-id': this._quill?.container?.getAttribute('x-editor-id') || '',
+      },
+      body: JSON.stringify({text: quotedSelectedText, prompt: this._prompt})
+    });
+
+    if (response.ok) {
+      const result: unknown = await response.text();
+      if (panel) {
+        panel.style.width = '500px';
+        panel.innerHTML = result as string;
+
+        this._aiResponseContent = this._latestContent(panel);
+      }
+    } else {
+      const result: unknown = await response.json();
+
+      if (typeof result === 'string') {
+        const range = this._quill.getSelection();
+        if (range) {
+          this._quill.deleteText(range.index, range.length);
+          this._quill.insertText(range.index, result);
+          this._quill.setSelection(range.index + result.length, 0);
+        }
+      }
+    }
+  }
+
+  private _createTooltipComponent() {
+    const tpl = html`
+      <zn-ai-tooltip></zn-ai-tooltip>`;
+    return litToHTML<AITooltipComponent>(tpl);
+  }
+
+  private _createPanelComponent() {
+    const tpl = html`
+      <zn-ai-panel></zn-ai-panel>`;
+    return litToHTML<AIPanelComponent>(tpl);
+  }
+
+  private _replaceTooltip(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this._component.remove();
+
+    const panel = this._createPanelComponent();
+    if (!panel) return;
+
+    this._component = panel;
+    this._component.requestUpdate();
+
+    // Attach panel button triggers
+    this._attachPanelEvents(panel);
+
+    // TODO: Finish overlay to prevent clicking away
+    /*    // Create and append the overlay
+        const overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.backgroundColor = 'none';
+        overlay.style.zIndex = '10000';
+
+        // Append the overlay and panel to the body
+        this._quill.container.ownerDocument.body.appendChild(overlay);
+
+        this._component.style.zIndex = '10001';*/
+
+    this._quill.container.ownerDocument.body.appendChild(this._component);
+    this._show();
+    this._positionComponent();
+  }
+
+  private _onDocumentClick(e: MouseEvent) {
+    const path = e.composedPath ? e.composedPath() : [e.target as Node];
+    const isInsideComponent = path.includes(this._component) || path.includes(this._component.shadowRoot!);
+    const isInsideQuillRoot = this._quill.root.contains(path[0] as Node);
+
+    const isInsideAIPanel = path.some((node) => {
+      if (node instanceof HTMLElement) {
+        return node.tagName === 'ZN-AI-PANEL';
+      }
+      return false;
+    });
+
+    // If this._aiResponseContent is not empty, it means user is interacting with the panel
+    if (this._latestContent(null)) {
+      if (!isInsideAIPanel) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        return;
+      }
+    }
+
+    if (!isInsideComponent && !isInsideQuillRoot && !isInsideAIPanel) {
+      this.resetComponent();
+    }
+  }
+
+  private _updateFromEditor(range: Range) {
+    // Update if component isn't AI panel
+    if (this._component instanceof AIPanelComponent) return;
+
+    // Display 'refine' option for selections longer than 25 characters
+    if (range?.length > 25) {
+      // Keep selected text in memory to be passed to AI later
+      this._selectedText = this._quill.getText(range.index, range.length);
+
+      this._show();
+      this._positionComponent();
+    } else {
+      this.resetComponent();
+    }
+  }
+
+  private _positionComponent() {
+    if (!this._component || !this._component.open) return;
+
+    const range = this._quill.getSelection();
+    if (!range) return;
+
+    if (this._component instanceof AITooltipComponent) {
+      const editorBounds = this._quill.container.getBoundingClientRect();
+      const endIndex = range.index + range.length;
+      const bounds = this._quill.getBounds(endIndex);
+      if (!bounds) return;
+
+      const left = editorBounds.left + bounds.left - 10; // Slight offset to the left
+      const top = editorBounds.top + bounds.bottom + 4;
+
+      this._component.style.left = `${Math.max(0, left)}px`;
+      this._component.style.top = `${top}px`;
+
+      return;
+    }
+
+    const positionPanel = () => {
+      const editorBounds = this._quill.container.getBoundingClientRect();
+      let bounds;
+      if (range.length === this._quill.getLength() - 1) {
+        bounds = this._quill.getBounds(range.index, range.length);
+      } else {
+        const endIndex = range.index + range.length;
+        bounds = this._quill.getBounds(endIndex);
+      }
+      if (!bounds) return;
+
+      const right = editorBounds.left + bounds.right; // Align right side
+      const bottom = editorBounds.top + bounds.top - 8; // Position above the selection
+
+      if (right > window.innerWidth) {
+        this._setPanelPosition(window.innerWidth - 10, bottom);
+        return;
+      }
+
+      this._setPanelPosition(right, bottom);
+    };
+
+    // Defer positioning to ensure the panel is fully rendered
+    requestAnimationFrame(positionPanel);
+  }
+
+  private _setPanelPosition(right: number, bottom: number) {
+    this._component.style.right = `${Math.max(0, window.innerWidth - right)}px`;
+    this._component.style.bottom = `${Math.max(0, window.innerHeight - bottom)}px`;
+  }
+
+  public resetComponent() {
+    this._hide();
+    this._component.remove();
+    this._initComponent();
+  }
+
+  private _show() {
+    if (!this._component.open) {
+      this._component.show();
+      this._quill.container.ownerDocument.addEventListener('click', (e: MouseEvent) => this._onDocumentClick(e));
+      this._quill.container.ownerDocument.addEventListener('keydown', this._onEscapeKey);
+    }
+  }
+
+  private _hide() {
+    this._component.hide();
+    this._quill.container.ownerDocument.removeEventListener('click', (e: MouseEvent) => this._onDocumentClick(e));
+    this._quill.container.ownerDocument.removeEventListener('keydown', this._onEscapeKey);
+  }
+
+  private _onEscapeKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this._hide();
+      this._component.remove();
+      this._initComponent();
+    }
+  }
+
+  private _attachPanelEvents(panel: AIPanelComponent) {
+    panel.refine = this._enterCustomPrompt.bind(this);
+    panel.refineBuiltIn = this._clickPreDefinedEvent.bind(this);
+  }
+
+  private _clickPreDefinedEvent(e: Event) {
+    if (e instanceof PointerEvent) {
+      const target = e.target as HTMLElement;
+      this._prompt = target.getAttribute('data-ai-option') || '';
+      if (this._prompt === "") {
+        for (const targetElement of e.composedPath()) {
+          if (!(targetElement instanceof HTMLElement)) continue;
+          this._prompt = targetElement.getAttribute('data-ai-option') || ''
+          if (this._prompt) break;
+        }
+      }
+      this.processAIRequest().then(r => r);
+    }
+  }
+
+  private _enterCustomPrompt(prompt: string) {
+    this._prompt = prompt;
+    this.processAIRequest().then(r => r);
+  }
+}
+
+export default QuillAI;

package/src/components/editor/modules/ai/panel/ai-panel.component.ts

@@ -0,0 +1,102 @@
+import {html, unsafeCSS} from "lit";
+import {property, query} from "lit/decorators.js";
+import ZincElement from "../../../../../internal/zinc-element";
+import type {CSSResultGroup} from "lit";
+
+import styles from './ai-panel.scss';
+
+export default class AIPanelComponent extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @query('.prompt') promptInput!: HTMLTextAreaElement;
+
+  @property({type: Boolean, reflect: true}) open = false;
+  @property({type: Function}) refine?: (prompt: string) => void;
+  @property({type: Function}) refineBuiltIn?: (e: Event) => void;
+
+  public show() {
+    this.open = true;
+  }
+
+  public hide() {
+    this.open = false;
+  }
+
+  private handleTriggerKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+
+      const prompt = this.promptInput.value.trim() || '';
+
+      if (this.refine && prompt) {
+        this.refine(prompt);
+
+        this.promptInput.value = '';
+        this.promptInput.blur();
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <zn-panel class="ai-panel" flush cosmic>
+        <div class="ai-panel__actions">
+          <zn-textarea name="prompt"
+                       class="prompt"
+                       inputmode="text"
+                       rows="1"
+                       resize="auto"
+                       size="small"
+                       placeholder="Enter custom prompt"
+                       @keydown=${this.handleTriggerKeyDown}></zn-textarea>
+          <button
+            type="button"
+            class="item"
+            role="option"
+            aria-selected="false"
+            data-ai-option="improve"
+            @click=${this.refineBuiltIn}
+          >
+            <zn-icon src="article" size="16"></zn-icon>
+            <span class="label">Improve writing</span>
+          </button>
+          <button
+            type="button"
+            class="item"
+            role="option"
+            aria-selected="false"
+            data-ai-option="shorten"
+            @click=${this.refineBuiltIn}
+          >
+            <zn-icon src="compress" size="16"></zn-icon>
+            <span class="label">Shorten text</span>
+          </button>
+          <button
+            type="button"
+            class="item"
+            role="option"
+            aria-selected="false"
+            data-ai-option="expand"
+            @click=${this.refineBuiltIn}
+          >
+            <zn-icon src="expand" size="16"></zn-icon>
+            <span class="label">Expand text</span>
+          </button>
+
+          <button
+            type="button"
+            class="item"
+            role="option"
+            aria-selected="false"
+            data-ai-option="spelling"
+            @click=${this.refineBuiltIn}
+          >
+            <zn-icon src="spellcheck" size="16"></zn-icon>
+            <span class="label">Fix spelling / grammar</span>
+          </button>
+        </div>
+      </zn-panel>`;
+  }
+}
+
+AIPanelComponent.define('zn-ai-panel');

package/src/components/editor/modules/ai/panel/ai-panel.scss

@@ -0,0 +1,83 @@
+@use "../../../../../wc";
+
+:host {
+  position: absolute;
+  z-index: var(--zn-z-index-editor-action);
+  display: none;
+  border-radius: var(--zn-border-radius-circle);
+  font-size: var(--zn-font-size-small);
+  --zn-blur: 2px;
+}
+
+:host([open]) {
+  display: block;
+}
+
+.ai-panel {
+  display: flex;
+  flex-grow: 1;
+  max-width: 100%;
+  position: relative;
+  min-width: 240px;
+  width: 240px;
+  transition: width 0.8s ease, height 0.8s ease;
+
+  &::part(base) {
+    margin-bottom: 0;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .prompt {
+    padding: 8px;
+    --zn-input-border-color: var(--zn-input-border-color);
+    --zn-input-border-color-hover: var(--zn-input-border-color-hover);
+    --zn-input-text-color: var(--zn-input-text-color);
+    --zn-input-placeholder-color: var(--zn-input-placeholder-color);
+    --zn-input-border-radius: var(--zn-border-radius-medium);
+    --zn-input-padding: 8px 12px;
+    --zn-input-font-size: 14px;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 60%;
+      margin: 4px auto;
+      border-bottom: 1px solid rgba(var(--zn-border-color), 0.4);
+    }
+
+    &::part(textarea) {
+      border-radius: var(--zn-border-radius-medium);
+    }
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    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/ai/tooltip/ai-tooltip.component.ts

@@ -0,0 +1,30 @@
+import {html, unsafeCSS} from "lit";
+import {property} from "lit/decorators.js";
+import ZincElement from "../../../../../internal/zinc-element";
+import type {CSSResultGroup} from "lit";
+
+import styles from './ai-tooltip.scss';
+
+export default class AITooltipComponent extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Boolean, reflect: true}) open = false;
+
+  public show() {
+    this.open = true;
+  }
+
+  public hide() {
+    this.open = false;
+  }
+
+  render() {
+    return html`
+      <button type="button" class="ai-tooltip">
+        <zn-icon src="stylus" size="18"></zn-icon>
+        <span class="label">Refine</span>
+      </button>`;
+  }
+}
+
+AITooltipComponent.define('zn-ai-tooltip');

package/src/components/editor/modules/ai/tooltip/ai-tooltip.scss

@@ -0,0 +1,28 @@
+:host {
+  position: absolute;
+  z-index: var(--zn-z-index-editor-action);
+  display: none;
+  font-size: var(--zn-font-size-small);
+}
+
+:host([open]) {
+  display: block;
+}
+
+.ai-tooltip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 8px 10px;
+  cursor: pointer;
+  background: var(--zn-panel-background-color);
+  border: 1px solid var(--zn-border-color);
+  border-radius: var(--zn-border-radius-large);
+  box-shadow: var(--zn-shadow-small);
+
+  &[aria-selected="true"],
+  &:hover {
+    background: var(--zn-input-background-color-hover);
+  }
+}

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

@@ -1,7 +1,7 @@
-import Quill from 'quill';
-import Toolbar from "quill/modules/toolbar";
+import type Quill from 'quill';
+import type Toolbar from "../toolbar/toolbar";
 
-type AttachmentModuleOptions = {
+interface AttachmentOptions {
   upload: (file: File) => Promise<{ path: any, url: any, filename: any }>;
   onFileUploaded?: (node: HTMLElement, {url}: { url: string }) => void;
   attachmentInput?: HTMLInputElement;
@@ -13,13 +13,13 @@ const generateId = () => {
   return `${name}_${id}`;
 };
 
-export default class AttachmentModule {
+export default class Attachment {
   private _quill: Quill;
-  private _options: AttachmentModuleOptions;
+  private _options: AttachmentOptions;
 
   private _fileHolder: HTMLInputElement | null;
 
-  constructor(quill: Quill, options: AttachmentModuleOptions) {
+  constructor(quill: Quill, options: AttachmentOptions) {
     this._quill = quill;
     this._options = options;
 
@@ -43,7 +43,7 @@ export default class AttachmentModule {
   }
 
   private _fileChanged() {
-    if (!this._fileHolder || !this._fileHolder.files || this._fileHolder.files.length < 0) {
+    if (!this._fileHolder?.files || this._fileHolder.files.length < 0) {
       return;
     }
 

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

@@ -0,0 +1,115 @@
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import ZincElement from "../../../../internal/zinc-element";
+
+import styles from './context-menu.scss';
+
+export interface ResultItem {
+  icon: string;
+  label: string;
+  format?: string;
+  key?: string;
+  value?: string | boolean;
+}
+
+export default class ContextMenuComponent 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;
+
+  public show() {
+    this.open = true;
+  }
+
+  public 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-toolbar-option]'));
+      const active = items[this._activeIndex];
+      active?.scrollIntoView?.({block: 'nearest'});
+    });
+  }
+
+  getActiveIndex() {
+    return this._activeIndex;
+  }
+
+  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;
+
+    this.setActiveIndex(idx);
+
+    const item = this.results?.[idx];
+    if (!item) return;
+
+    this.dispatchEvent(new CustomEvent('zn-format-select', {
+      bubbles: true,
+      composed: true,
+      detail: {icon: item.icon, label: item.label, format: item.format, value: item.value, key: item.key}
+    }));
+  }
+
+  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 ? `Search: ${this.query}` : 'Options'}</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-toolbar-option
+            data-index="${i}"
+            @click="${this._onClickItem}"
+          >
+            <zn-icon src="${res.icon}" size="16"></zn-icon>
+            <span class="label">${res.label}</span>
+          </button>
+        `)
+      ) : html`
+        <div class="empty">${this.query ? 'No results' : 'Type something'}</div>`}
+    `;
+  }
+}
+
+ContextMenuComponent.define('zn-context-menu');