@aquera/nile-elements 0.1.64 → 0.1.65-beta-1.0

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

@@ -0,0 +1,42 @@
+// nile-rte-mentions-item.ts
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type MentionItem = { key: string; label: string };
+
+@customElement('nile-rte-mentions-item')
+export class NileRteMentionsItem extends LitElement {
+  protected createRenderRoot() { return this; } // Light DOM
+
+  /** Single-character trigger, e.g., '@' or '#' */
+  @property({ attribute: 'mentionscharacter' })
+  mentionsCharacter: string = '';
+
+ 
+  @property({ attribute: 'mentionscolor' })
+  mentionsColor: string = ''; // NEW
+
+  /** JSON array of { key, label } */
+  @property({
+    attribute: 'mentionsdata',
+    converter: {
+      fromAttribute: (value: string | null): MentionItem[] => {
+        if (!value) return [];
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed)
+            ? parsed.filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')
+            : [];
+        } catch { return []; }
+      },
+      toAttribute: (v: MentionItem[]) => JSON.stringify(v ?? []),
+    }
+  })
+  mentionsData: MentionItem[] = [];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rte-mentions-item': NileRteMentionsItem;
+  }
+}

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

@@ -0,0 +1,465 @@
+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 = {};
+
+  @property({
+    attribute: 'mentioncolors',
+    converter: {
+      fromAttribute: (value: string): Record<string,string> => {
+        try { const o = JSON.parse(value); return (o && typeof o === 'object') ? o : {}; }
+        catch { return {}; }
+      },
+      toAttribute: (v: Record<string,string>) => JSON.stringify(v ?? {})
+    }
+  })
+  mentionColors: Record<string, string> = {}; // NEW
+
+  /** 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 = {};
+
+  @state() private itemsColors: Record<string,string> = {}; // NEW
+
+  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;
+
+ 
+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 colors: Record<string,string> = {}; // NEW
+
+    const items = Array.from(this.querySelectorAll('nile-rte-mentions-item')) as Array<
+      HTMLElement & { mentionsCharacter?: string; mentionsData?: MentionItem[]; mentionsColor?: string }
+    >;
+
+    for (const item of items) {
+      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 []; }
+        })();
+
+      const color =
+        (item as any).mentionsColor ??
+        item.getAttribute('mentionscolor') ??
+        '';
+
+      if (!Array.isArray(data)) data = [];
+      cfg[trig] = data;
+      if (color) colors[trig] = String(color); // record color if provided
+    }
+
+    this.itemsConfig = cfg;
+    this.itemsColors = colors; // NEW
+  }
+  // ---------- 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; }
+   nile-menu.mentions-menu::part(menu__items-wrapper){
+   max-height: 260px;
+   }
+
+    `;
+    this.insertBefore(style, this.firstChild);
+  }
+
+  private getTriggerColor(trigger: string): string | undefined {
+    // Priority: child item color > attribute JSON color
+    return this.itemsColors[trigger] ?? this.mentionColors[trigger];
+  }
+
+ 
+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');
+  menu.classList.add('mentions-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}`;
+    const bg = this.getTriggerColor(this.mentionTrigger);
+    if (bg) {
+      span.style.backgroundColor = bg;
+      // Optional: if you prefer colored text instead of bg
+      // span.style.color = bg;
+    }
+
+    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; } }