@aquera/nile-elements 0.1.63 → 0.1.64-beta-1.1

package/src/nile-rich-text-editor/nile-rte-mentions.ts

@@ -0,0 +1,426 @@
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import type { MentionItem } from './nile-rte-mentions-item';
+
+type MentionsConfig = Record<string, MentionItem[]>;
+
+@customElement('nile-rte-mentions')
+export class NileRteMentions extends LitElement {
+  protected createRenderRoot() { return this; }  
+
+ 
+  @property({
+    attribute: 'mentions',
+    converter: {
+      fromAttribute: (value: string): MentionsConfig => {
+        try {
+          const parsed = JSON.parse(value);
+          const out: MentionsConfig = {};
+          for (const trig of Object.keys(parsed)) {
+            const arr = parsed[trig];
+            if (Array.isArray(arr)) {
+              out[trig] = arr
+                .filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')
+                .map(i => ({ key: i.key, label: i.label }));
+            }
+          }
+          return out;
+        } catch { return {}; }
+      },
+      toAttribute: (v: MentionsConfig) => JSON.stringify(v),
+    }
+  })
+  mentions: MentionsConfig = {};
+
+  /** External config from the editor (lowest priority) */
+  @state() private externalConfig: MentionsConfig = {};
+
+  /** Config gathered from child <nile-rte-mentions-item> (highest priority) */
+  @state() private itemsConfig: MentionsConfig = {};
+
+  private get config(): MentionsConfig {
+    // Priority: external < attribute < child-items
+    return { ...this.externalConfig, ...this.mentions, ...this.itemsConfig };
+  }
+
+  // wired from editor
+  private editorEl: HTMLElement | null = null;
+  private hostEl: HTMLElement | null = null;
+
+  // dropdown & menu elements we’ll create once and reuse
+private dropdownEl: HTMLElement | null = null;   // <nile-dropdown>
+private menuEl:      HTMLElement | null = null;   // <nile-menu>
+
+
+  // selection caret
+  private lastRange: Range | null = null;
+
+  // dropdown state
+  private mentionOpen = false;
+  private mentionTrigger: string | null = null;
+  private mentionQuery = '';
+  private mentionSuggestions: MentionItem[] = [];
+  private mentionFiltered: MentionItem[] = [];
+  private mentionX = 0;
+  private mentionY = 0;
+private triggerBtn: HTMLElement | null = null;
+
+ 
+
+  // Observe child items & their attributes
+  private mo: MutationObserver | null = null;
+
+  // Public API used by <nile-rich-text-editor>
+  attach(editorEl: HTMLElement, hostEl: HTMLElement) {
+    this.editorEl = editorEl;
+    this.hostEl = hostEl;
+
+    this.injectStyles();
+    this.ensureMentionDropdown();
+    this.rebuildConfigFromChildren();
+
+    // Watch for <nile-rte-mentions-item> add/remove/attr changes
+    this.mo = new MutationObserver(() => this.rebuildConfigFromChildren());
+    this.mo.observe(this, { childList: true, subtree: true, attributes: true });
+
+    // listeners on editor
+    this.editorEl.addEventListener('input', this.onEditorInput);
+    this.editorEl.addEventListener('mouseup', this.saveSelection);
+    this.editorEl.addEventListener('keyup', this.onEditorKeyUp);
+    this.editorEl.addEventListener('keydown', this.onEditorKeyDown);
+    this.editorEl.addEventListener('scroll', this.repositionMention);
+
+    // keep range fresh
+    document.addEventListener('selectionchange', this.onSelectionChange, true);
+  }
+
+  detach() {
+    if (this.mo) { this.mo.disconnect(); this.mo = null; }
+    if (this.editorEl) {
+      this.editorEl.removeEventListener('input', this.onEditorInput);
+      this.editorEl.removeEventListener('mouseup', this.saveSelection);
+      this.editorEl.removeEventListener('keyup', this.onEditorKeyUp);
+      this.editorEl.removeEventListener('keydown', this.onEditorKeyDown);
+      this.editorEl.removeEventListener('scroll', this.repositionMention);
+    }
+    document.removeEventListener('selectionchange', this.onSelectionChange, true);
+  }
+
+  setExternalConfig(cfg: MentionsConfig) {
+    this.externalConfig = cfg || {};
+  }
+
+  disconnectedCallback(): void {
+    this.detach();
+    super.disconnectedCallback();
+  }
+
+  // ---------- gather child items ----------
+  private rebuildConfigFromChildren() {
+    const cfg: MentionsConfig = {};
+    const items = Array.from(this.querySelectorAll('nile-rte-mentions-item')) as Array<
+      HTMLElement & { mentionsCharacter?: string; mentionsData?: MentionItem[] }
+    >;
+
+    for (const item of items) {
+      // read live properties first (if Lit already upgraded), else read attributes
+      const trig =
+        (item as any).mentionsCharacter ??
+        item.getAttribute('mentionscharacter') ??
+        '';
+
+      if (!trig || typeof trig !== 'string') continue;
+
+      let data: MentionItem[] | null =
+        (item as any).mentionsData ??
+        (() => {
+          const raw = item.getAttribute('mentionsdata');
+          if (!raw) return null;
+          try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed)
+              ? parsed.filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')
+              : [];
+          } catch { return []; }
+        })();
+
+      if (!Array.isArray(data)) data = [];
+      cfg[trig] = data;
+    }
+    this.itemsConfig = cfg;
+  }
+
+  // ---------- styles ----------
+  private injectStyles() {
+    if (this.querySelector('style[data-mentions-style]')) return;
+    const style = document.createElement('style');
+    style.setAttribute('data-mentions-style', 'true');
+    style.textContent = `
+      .mention-dropdown {
+        position: absolute; z-index: 1000; list-style: none; margin: 0; padding: 4px;
+        border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
+        box-shadow: 0 4px 10px rgba(0,0,0,.08); max-height: 180px; overflow: auto; font-size: 14px;
+      }
+      .mention-dropdown li { padding: 6px 8px; cursor: pointer; border-radius: 4px; }
+      .mention-dropdown li:hover { background: #f1f5f9; }
+      .mention { background: #eef2ff; padding: 0 3px; border-radius: 3px; }
+    `;
+    this.insertBefore(style, this.firstChild);
+  }
+
+ 
+private ensureMentionDropdown() {
+  if (this.dropdownEl || !this.hostEl) return;
+
+  const dd  = document.createElement('nile-dropdown');
+  dd.style.zIndex   = '1000';
+
+  const btn = document.createElement('nile-button'); // invisible trigger
+  btn.setAttribute('slot', 'trigger');
+   btn.style.position       = 'absolute';  
+   btn.style.width          = '1px';
+   btn.style.height         = '1px';
+   btn.style.border         = '0';
+   btn.style.padding        = '0';
+   btn.style.opacity        = '0';        
+   btn.style.pointerEvents  = 'none'; 
+  dd.appendChild(btn);
+  this.triggerBtn = btn; 
+  const menu = document.createElement('nile-menu');
+  dd.appendChild(menu);
+
+  this.hostEl.appendChild(dd);
+  this.dropdownEl = dd;
+  this.menuEl     = menu;
+}
+
+  // ---------- selection helpers ----------
+  private onSelectionChange = () => {
+    if (!this.editorEl) return;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (this.editorEl.contains(range.commonAncestorContainer)) {
+      this.lastRange = range.cloneRange();
+    }
+  };
+  private saveSelection = () => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount) this.lastRange = sel.getRangeAt(0).cloneRange();
+  };
+  private restoreSelection() {
+    if (!this.lastRange) return;
+    const sel = document.getSelection(); if (!sel) return;
+    sel.removeAllRanges(); sel.addRange(this.lastRange);
+  }
+  private focusAndRestore() { this.editorEl?.focus(); this.restoreSelection(); }
+
+  private getCaretClientRect(): DOMRect | null {
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return null;
+
+    const range = sel.getRangeAt(0).cloneRange();
+    range.collapse(false);
+
+    const rects = range.getClientRects();
+    if (rects && rects.length > 0) return rects[0];
+
+    const marker = document.createElement('span');
+    marker.setAttribute('data-caret-marker', '1');
+    marker.textContent = '\u200B';
+    range.insertNode(marker);
+
+    const rect = marker.getBoundingClientRect();
+
+    const after = document.createRange();
+    after.setStartAfter(marker);
+    after.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(after);
+    marker.remove();
+
+    return rect || null;
+  }
+
+  // ---------- editor events ----------
+  private onEditorInput = () => {
+    if (this.mentionOpen) this.handleMention();
+  };
+
+  private onEditorKeyUp = (e: KeyboardEvent) => {
+    this.saveSelection();
+    const key = e.key;
+    const cfg = this.config;
+    if (!this.mentionOpen && key && cfg[key]) {
+      this.openMention(key);
+      return;
+    }
+    if (this.mentionOpen) this.handleMention();
+  };
+
+  private onEditorKeyDown = (e: KeyboardEvent) => {
+    if (!this.mentionOpen) return;
+    const key = e.key;
+    if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter') {
+      e.preventDefault();
+      if (key === 'Enter' && this.mentionFiltered.length) {
+        this.selectMention(this.mentionFiltered[0]);
+      }
+    } else if (key === 'Escape') {
+      e.preventDefault();
+      this.closeMention();
+    }
+  };
+
+  // ---------- mentions flow ----------
+  private openMention(trigger: string) {
+    this.saveSelection();
+    if (!this.editorEl || !this.dropdownEl || !this.hostEl) return;
+
+    const caretRect = this.getCaretClientRect();
+    if (!caretRect) return;
+
+    const hostRect = this.hostEl.getBoundingClientRect();
+
+    this.mentionX = caretRect.left - hostRect.left;
+    this.mentionY = caretRect.bottom - hostRect.top;
+
+    this.mentionTrigger     = trigger;
+    this.mentionSuggestions = this.config[trigger] || [];
+    this.mentionQuery       = '';
+    this.updateMentionFiltered();
+
+    this.mentionOpen = true;
+    this.renderMentionList();
+  }
+
+  private closeMention() {
+     this.mentionOpen = false;
+     this.mentionTrigger  = null;
+     this.mentionQuery    = '';
+     this.mentionFiltered = [];
+     // hide dropdown
+      this.dropdownEl?.removeAttribute('open');
+  }
+
+  private handleMention() {
+    if (!this.mentionOpen || !this.mentionTrigger) return;
+    const sel = window.getSelection(); if (!sel || !sel.anchorNode) return;
+
+    let node: Node | null = sel.anchorNode;
+    if (node.nodeType !== Node.TEXT_NODE) {
+      const c = (node as HTMLElement).childNodes?.[sel.anchorOffset] || node.firstChild;
+      if (c?.nodeType === Node.TEXT_NODE) node = c;
+    }
+    const text = (node && node.nodeType === Node.TEXT_NODE) ? (node.textContent || '') : '';
+    const idx = text.lastIndexOf(this.mentionTrigger);
+    if (idx >= 0) {
+      this.mentionQuery = text.substring(idx + 1);
+      this.updateMentionFiltered();
+      this.renderMentionList();
+    } else {
+      this.closeMention();
+    }
+  }
+
+  private updateMentionFiltered() {
+    const q = this.mentionQuery.toLowerCase();
+    this.mentionFiltered = (this.mentionSuggestions || []).filter(item =>
+      item.label.toLowerCase().startsWith(q)
+    );
+  }
+
+  private renderMentionList() {
+    if (!this.dropdownEl || !this.menuEl) return;
+  
+    if (!this.triggerBtn) return;
+    this.triggerBtn.style.position = 'absolute';
+    this.triggerBtn.style.left  = `${this.mentionX}px`;
+    this.triggerBtn.style.top   = `${this.mentionY}px`;
+    
+  
+    // clear old items
+    this.menuEl.innerHTML = '';
+  
+    if (!this.mentionOpen || !this.mentionFiltered.length) {
+      this.dropdownEl.removeAttribute('open');
+      return;
+    }
+  
+    // build menu items
+    for (const item of this.mentionFiltered) {
+      const mi = document.createElement('nile-menu-item');
+      mi.textContent = item.label;
+      mi.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        this.selectMention(item);
+      });
+      this.menuEl.appendChild(mi);
+    }
+  
+    // show dropdown
+    this.dropdownEl.setAttribute('open', '');
+  }
+  
+
+  private repositionMention = () => {
+    if (!this.mentionOpen   || !this.hostEl || !this.triggerBtn) return;
+
+    const caretRect = this.getCaretClientRect();
+    if (!caretRect) return;
+
+    const hostRect = this.hostEl.getBoundingClientRect();
+
+    this.mentionX = caretRect.left - hostRect.left;
+    this.mentionY = caretRect.bottom - hostRect.top;
+
+    this.triggerBtn.style.left = `${this.mentionX}px`;
+    this.triggerBtn.style.top  = `${this.mentionY}px`;
+  };
+
+  private selectMention(item: MentionItem) {
+    this.restoreSelection(); if (!this.lastRange || !this.mentionTrigger || !this.editorEl) return;
+
+    let node: Node = this.lastRange.startContainer;
+    let offset = this.lastRange.startOffset;
+    if (node.nodeType !== Node.TEXT_NODE) {
+      const child = node.childNodes[offset];
+      if (child?.nodeType === Node.TEXT_NODE) { node = child; offset = 0; } else return;
+    }
+    const textNode = node as Text;
+    const text = textNode.textContent || '';
+    const atIndex = text.lastIndexOf(this.mentionTrigger, offset);
+    if (atIndex < 0) return;
+
+    const endIndex = atIndex + 1 + this.mentionQuery.length;
+    const mentionRange = document.createRange();
+    mentionRange.setStart(textNode, atIndex);
+    mentionRange.setEnd(textNode, endIndex);
+    mentionRange.deleteContents();
+
+    const span = document.createElement('span');
+    span.classList.add('mention');
+    span.textContent = `${this.mentionTrigger}${item.label}`;
+    mentionRange.insertNode(span);
+
+    const spaceNode = document.createTextNode('\u00A0');
+    span.after(spaceNode);
+
+    const sel = window.getSelection();
+    const afterRange = document.createRange();
+    afterRange.setStartAfter(spaceNode); afterRange.collapse(true);
+    sel?.removeAllRanges(); sel?.addRange(afterRange);
+    this.lastRange = afterRange.cloneRange();
+
+    this.closeMention();
+
+    // bubble an input event so the editor updates preview/state
+    this.editorEl.dispatchEvent(new InputEvent('input', { bubbles: true }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rte-mentions': NileRteMentions;
+  }
+}

package/src/nile-rich-text-editor/nile-rte-preview.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('nile-rte-preview')
+export class NileRtePreview extends LitElement {
+  protected createRenderRoot() { return this; }
+  protected shouldUpdate() { return false; }
+}
+declare global { interface HTMLElementTagNameMap { 'nile-rte-preview': NileRtePreview; } }

package/src/nile-rich-text-editor/nile-rte-select.ts

@@ -0,0 +1,147 @@
+// nile-rte-select.ts
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+
+@customElement('nile-rte-select')
+export class NileRteSelect extends LitElement {
+  protected createRenderRoot() { return this; }
+
+  /** 'heading' | 'font' | 'align' */
+  @property({ type: String }) type = '';
+  /** JSON: [{ value, label?, icon? }, ...] */
+  @property({ type: String }) options = '[]';
+  /** Fallback label for trigger (e.g., "Align") */
+  @property({ type: String }) label = '';
+
+  @state() private selectedValue = '';
+
+  private mapAlignIcon(v: string) {
+    const map: Record<string,string> = {
+      left: 'align-left',
+      center: 'align-center',
+      right: 'align-right',
+      justify: 'align-justify'
+    };
+    return map[v] || 'align-left';
+  }
+
+  private get parsedOptions(): Array<{ value: string; label: string; icon?: string }> {
+    try {
+      const raw = JSON.parse(this.options);
+      return raw.map((o: any) => {
+        const value = o.value ?? o;
+        const label = o.label ?? o.value ?? o;
+        const icon  = o.icon ?? (this.type === 'align' ? this.mapAlignIcon(String(value)) : undefined);
+        return { value, label, icon };
+      });
+    } catch {
+      return [];
+    }
+  }
+
+  private ensureDefault() {
+    if (!this.selectedValue) {
+      const first = this.parsedOptions[0];
+      if (first) this.selectedValue = first.value;
+    }
+  }
+
+  private onSelect(value: string) {
+    this.selectedValue = value;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: value, bubbles: true, composed: true
+    }));
+  }
+
+ 
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.injectLocalStyles();   
+  }
+
+  private injectLocalStyles() {
+ 
+    if (this.querySelector('style[data-rte-select-style]')) return;
+
+    const style = document.createElement('style');
+    style.setAttribute('data-rte-select-style', 'true');
+    style.textContent = `
+
+  nile-menu.rte-align-menu::part(menu__items-wrapper) {
+    display: flex;
+  }
+    nile-menu.rte-align-menu,nile-menu.rte-default-menu{
+    margin-bottom: 1px;
+    }
+
+    nile-button.rte-align-trigger::part(base),nile-button.rte-default-trigger::part(base){
+     min-width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-shadow: none;
+    }
+ 
+    `;
+ 
+  this.insertBefore(style, this.firstChild);
+  }
+
+
+  render() {
+    const opts = this.parsedOptions;
+    this.ensureDefault();
+    const current = opts.find(o => o.value === this.selectedValue);
+
+    if (this.type === 'align') {
+      // ► Align: separate dropdown instance + icon-only items + icon trigger
+      const trigger = current?.icon
+        ? html`<nile-icon name="${current.icon}"></nile-icon>`
+        : (this.label || 'Align');
+
+      return html`
+        <nile-dropdown class="rte-align-dd">
+          <nile-button slot="trigger" variant="tertiary" class="rte-align-trigger">
+            ${trigger}
+          </nile-button>
+          <nile-menu class="rte-align-menu">
+            ${opts.map(o => html`
+              <nile-menu-item
+                class="rte-align-item"
+                ?active=${o.value === this.selectedValue}
+                @click=${() => this.onSelect(o.value)}>
+                <nile-icon name="${o.icon}"></nile-icon>
+              </nile-menu-item>
+            `)}
+          </nile-menu>
+        </nile-dropdown>
+      `;
+    }
+
+    // ► Everything else: default (text) dropdown
+    const triggerText = current?.label || this.label || 'Select';
+    return html`
+      <nile-dropdown class="rte-default-dd">
+        <nile-button slot="trigger" variant="tertiary" class="rte-default-trigger">
+          ${triggerText}
+        </nile-button>
+        <nile-menu class="rte-default-menu">
+          ${opts.map(o => html`
+            <nile-menu-item
+              ?active=${o.value === this.selectedValue}
+              @click=${() => this.onSelect(o.value)}>
+              ${o.label}
+            </nile-menu-item>
+          `)}
+        </nile-menu>
+      </nile-dropdown>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rte-select': NileRteSelect;
+  }
+}

package/src/nile-rich-text-editor/nile-rte-toolbar-item.ts

@@ -0,0 +1,13 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('nile-rte-toolbar-item')
+export class NileRteToolbarItem extends LitElement {
+  protected createRenderRoot() { return this; }
+  protected shouldUpdate() { return false; }
+
+  @property({ type: String }) name = '';
+  @property({ type: String }) label = '';
+
+}
+declare global { interface HTMLElementTagNameMap { 'nile-rte-toolbar-item': NileRteToolbarItem; } }

package/src/nile-rich-text-editor/nile-rte-toolbar.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('nile-rte-toolbar')
+export class NileRteToolbar extends LitElement {
+  protected createRenderRoot() { return this; }     // Light DOM
+  protected shouldUpdate() { return false; }        // inert, keep children
+}
+declare global { interface HTMLElementTagNameMap { 'nile-rte-toolbar': NileRteToolbar; } }