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

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

@@ -0,0 +1,606 @@
+// nile-rich-text-editor.ts
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import './nile-rte-toolbar';
+import './nile-rte-toolbar-item';
+import './nile-rte-select';
+import './nile-rte-color';
+import './nile-rte-divider';
+import './nile-rte-preview';
+import './nile-rte-mentions';
+
+import {
+  closestBlock, nearestElement, rgbToHex,
+  toggleInlineTag, setBlockTag, setAlignment,
+  setFontFamily, setForeColor,  insertOrEditLink
+} from './utils';
+
+type MentionsConfig = Record<string, { key: string; label: string }[]>;
+
+/**
+ * Map commands → default icon names from your <nile-icon> set.
+ * Adjust values to match the real names you have.
+ */
+const DEFAULT_ICONS: Record<string, string> = {
+  bold: 'bold',
+  italic: 'itallic',
+  underline: 'underline',
+  link: 'user',
+  left: 'user',
+  center: 'user',
+  right: 'user',
+  justify: 'user',
+  ul: 'ul',
+  ol: 'ol',
+  clear: 'close',
+};
+
+@customElement('nile-rich-text-editor')
+export class NileRichTextEditor extends LitElement {
+  protected createRenderRoot() { return this; } // Light DOM
+  protected shouldUpdate() { return false; }    // Preserve authored DOM; no Lit re-render
+
+  /** Initial HTML content */
+  @property({ type: String }) value = '';
+
+  /** Optional mentions config (can also be on <nile-rte-mentions mentions="...">) */
+  @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 = {};
+
+  // ----- internal state (no Lit render) -----
+  @state() private content = '';
+  private editorEl!: HTMLElement;
+  private previewEl: HTMLElement | null = null;
+  private toolbarEl: HTMLElement | null = null;
+
+  private lastRange: Range | null = null;
+
+  // map for button active reflections
+  private buttonMap = new Map<string, HTMLElement[]>();
+  private headingSelect: HTMLSelectElement | null = null;
+  private fontSelect: HTMLSelectElement | null = null;
+  private colorInput: HTMLInputElement | null = null;
+
+  // Mentions controller (child)
+  private mentionsEl: HTMLElement | null = null;
+
+  
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // 1) Inject styles once (so authored DOM stays as-is)
+    this.injectStyles();
+    
+
+    // 2) Keep authored nodes
+    this.toolbarEl = this.querySelector('nile-rte-toolbar');
+    this.previewEl = this.querySelector('nile-rte-preview');
+
+    // 3) Ensure there is an editor element; create if missing.
+    this.ensureEditor();
+
+    // 4) Fill initial content
+    if (this.value && !this.editorEl.innerHTML.trim()) {
+      this.editorEl.innerHTML = this.value;
+    }
+    this.content = this.editorEl.innerHTML;
+
+    // 5) Wire toolbar authored children directly
+    if (this.toolbarEl) this.wireAuthoredToolbar(this.toolbarEl);
+
+    // 6) Mentions: delegate to child controller
+    this.mentionsEl = this.querySelector('nile-rte-mentions');
+    if (this.mentionsEl) {
+      // pass the editor and host for positioning
+      (this.mentionsEl as any).attach?.(this.editorEl, this as HTMLElement);
+      // pass parent-provided config so child can merge with its own attribute config
+      (this.mentionsEl as any).setExternalConfig?.(this.mentions);
+    }
+
+    // 7) Wire editor listeners (selection + input)
+    this.wireEditor();
+
+    // 8) Initial active state + preview
+    this.updateToolbarState();
+    this.syncPreview();
+
+    // 9) Global selection tracking (for toolbar state)
+    document.addEventListener('selectionchange', this.onSelectionChange, true);
+  }
+
+  disconnectedCallback(): void {
+    document.removeEventListener('selectionchange', this.onSelectionChange, true);
+    // Optionally tell mentions to cleanup
+    if (this.mentionsEl && (this.mentionsEl as any).detach) {
+      (this.mentionsEl as any).detach();
+    }
+    super.disconnectedCallback();
+  }
+
+  // ---------- DOM helpers ----------
+  private injectStyles() {
+    if (this.querySelector('style[data-rte-style]')) return;
+    const style = document.createElement('style');
+    style.setAttribute('data-rte-style', 'true');
+    style.textContent = `
+      /* Host positioning for overlays */
+      nile-rich-text-editor { position: relative; display: block; }
+
+       
+nile-rte-toolbar-item > nile-button::part(base) {
+ 
+  width:32px; height:32px; padding:0px 6px;
+}
+ 
+ 
+
+
+      .toolbar, nile-rte-toolbar {
+        display:flex; align-items:center; gap:8px; padding-top:8px; padding-left: 8px; padding-right: 8px;
+        border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;
+      }
+
+      nile-rte-toolbar-item > button, .toolbar button, nile-rte-toolbar button {
+        border:1px solid #e5e7eb; background:#fff; border-radius:6px;
+        cursor:pointer;
+      }
+
+  
+      /* Ensure clicks hit the button (not nested icon internals) */
+      nile-rte-toolbar-item > button nile-icon { pointer-events:none; }
+
+      nile-rte-toolbar-item > button.active { border-color:#2563eb; background:#eff6ff; }
+      nile-rte-select select { height:32px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }
+      nile-rte-color input[type="color"] { height:32px; width:36px; border:1px solid #e5e7eb; padding:0; border-radius:6px; background:#fff; }
+      nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }
+
+       .editor p { margin:1em 0; }
+      .editor h1 { font-size:2em  }
+      .editor h2 { font-size:1.5em  }
+      .editor h3 { font-size:1.17em  }
+      .editor h4 { font-size:1em  }
+      .editor h5 { font-size:0.83em  }
+      .editor h6 { font-size:0.67em  }
+
+      .editor { min-height:160px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none; }
+      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; }
+    `;
+    this.insertBefore(style, this.firstChild);
+  }
+
+  private ensureEditor() {
+    this.editorEl = this.querySelector('.editor') as HTMLElement;
+    if (!this.editorEl) {
+      const editor = document.createElement('div');
+      editor.className = 'editor';
+      editor.setAttribute('contenteditable','true');
+      if (this.toolbarEl?.nextSibling) {
+        this.insertBefore(editor, this.toolbarEl.nextSibling);
+      } else if (this.previewEl) {
+        this.insertBefore(editor, this.previewEl);
+      } else {
+        this.appendChild(editor);
+      }
+      this.editorEl = editor;
+    }
+    // **NEW**: seed an empty paragraph so setBlockTag() has something to swap
+    if (!this.editorEl.innerHTML.trim()) {
+      this.editorEl.innerHTML = '<p><br></p>';
+    }
+    this.ensureAtLeastOneParagraph();
+  }
+
+  private wireEditor() {
+    // Input & selection preservation
+    this.editorEl.addEventListener('input', () => { 
+      this.ensureAtLeastOneParagraph();
+      this.updateContent();
+    });
+    this.editorEl.addEventListener('mouseup', () => this.saveSelection());
+    this.editorEl.addEventListener('keyup', () => this.saveSelection()); // keep range fresh for toolbar
+  }
+
+  private wireAuthoredToolbar(tb: HTMLElement) {
+    // Clear previous map
+    this.buttonMap.clear();
+    this.headingSelect = null;
+    this.fontSelect = null;
+    this.colorInput = null;
+
+    // Process children
+    Array.from(tb.children).forEach(child => {
+      const tag = child.tagName.toLowerCase();
+
+      if (tag === 'nile-rte-select' && child.getAttribute('type') === 'align') {
+        child.addEventListener('change', (e: any) => {
+          this.focusAndRestore();
+          const alignment = e.detail as 'left'|'center'|'right'|'justify';
+          setAlignment(this.editorEl, alignment);
+          this.updateContent();
+          this.updateToolbarState();
+        });
+        return;
+      }
+  
+
+      if (tag === 'nile-rte-toolbar-item') {
+        // Look for an authored <nile-button> (so authors can override)
+        let btn = child.querySelector(':scope > nile-button') as HTMLElement | null;
+      
+        const cmd   = child.getAttribute('name')  || '';
+        const label = child.getAttribute('label') || cmd;
+        const iconAttr = child.getAttribute('icon');
+        const authoredHasContent = child.innerHTML.trim().length > 0;
+      
+        // If none, create one
+        if (!btn) {
+          btn = document.createElement('nile-button');
+          (btn as any).variant = 'tertiary';
+          (btn as any).size = 'small';   // optional
+        }
+      
+        // Fill visual content
+        if (iconAttr) {
+          btn.innerHTML = `<nile-icon name="${iconAttr}" aria-label="${label}"></nile-icon>`;
+          child.innerHTML = '';
+        } else if (!authoredHasContent) {
+          const defaultIcon = DEFAULT_ICONS[cmd];
+          if (defaultIcon) {
+            btn.innerHTML = `<nile-icon name="${defaultIcon}" size="26" aria-label="${label}"></nile-icon>`;
+          } else {
+            btn.textContent = label || cmd;
+          }
+          child.innerHTML = '';
+        } else {
+          // Author provided custom content (could be a <nile-icon> already)
+          btn.innerHTML = child.innerHTML;
+          child.innerHTML = '';
+        }
+      
+        // Mount it
+        if (!btn.isConnected) child.appendChild(btn);
+      
+        // Interactions
+        btn.setAttribute('aria-label', label);
+        btn.addEventListener('mousedown', e => e.preventDefault());
+        btn.addEventListener('click', () => this.onToolbarCommand(cmd));
+      
+        // Register for active reflection
+        const arr = this.buttonMap.get(cmd) ?? [];
+        arr.push(btn);
+        this.buttonMap.set(cmd, arr);
+      
+        return; // done with this child
+      }
+      if (tag === 'nile-rte-select') {
+             const type = child.getAttribute('type') || '';
+
+              // listen for our custom dropdown’s change event
+              child.addEventListener('change', (e: any) => {
+                // restore focus & selection
+                this.focusAndRestore();
+
+                const val = e.detail as string;
+
+                if (type === 'heading') {
+                  // apply block tag
+                  setBlockTag(this.editorEl, val as any);
+                }
+                else if (type === 'font') {
+                  setFontFamily(this.editorEl, val);
+                }
+        
+                // update the editor content & toolbar UI
+                this.updateContent();
+                this.updateToolbarState();
+              });
+
+                  // nothing else to inject into the DOM
+                return;
+             }
+     
+
+      if (tag === 'nile-rte-color') {
+        const label = child.getAttribute('label') ?? 'Text color';
+        const value = child.getAttribute('value') ?? '#000000';
+        // render internal <input type="color">
+        let input = child.querySelector(':scope > input[type="color"]') as HTMLInputElement | null;
+        if (!input) {
+          input = document.createElement('input');
+          input.type = 'color';
+          child.appendChild(input);
+        }
+        input.title = label;
+        input.value = value;
+        input.addEventListener('mousedown', e => e.preventDefault());
+        input.addEventListener('input', () => {
+          this.focusAndRestore();
+          setForeColor(this.editorEl, input!.value);
+          this.updateContent(); this.updateToolbarState();
+        });
+        this.colorInput = input;
+      }
+
+      // nile-rte-divider: no-op (purely visual)
+    });
+  }
+
+  // ---------- Selection helpers (for toolbar state only) ----------
+  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();
+      this.updateToolbarState();
+    }
+  };
+  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(); }
+
+  /*────────────────────────  LIST HELPERS  ────────────────────────*/
+private insertList(type: 'ul' | 'ol') {
+  this.restoreSelection();
+  if (!this.lastRange) return;
+
+  // build <ul>/<ol>
+  const list = document.createElement(type);
+
+  // grab the selected fragment
+  const frag  = this.lastRange.extractContents();
+  const temp  = document.createElement('div');
+  temp.appendChild(frag);
+
+  // wrap each top-level node in an <li>
+  Array.from(temp.childNodes).forEach(n => {
+    // skip empty whitespace text nodes
+    if (n.nodeType === Node.TEXT_NODE && !n.textContent?.trim()) return;
+    const li = document.createElement('li');
+    li.appendChild(n);          // moves the node!
+    list.appendChild(li);
+  });
+
+  // insert list where the selection was
+  this.lastRange.insertNode(list);
+  this.afterListEdit(list);
+}
+
+private afterListEdit(node: Node) {
+  const range = document.createRange();
+  range.setStartAfter(node);
+  range.collapse(true);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+
+  this.saveSelection();
+  this.updateContent();
+  this.updateToolbarState();
+}
+ // Keep at least one <p><br></p> and wrap stray inline/text into a <p>
+private ensureAtLeastOneParagraph() {
+  const el = this.editorEl;
+  if (!el) return;
+
+  // 1) If completely empty → seed a paragraph
+  const onlyWhitespace =
+    (el.textContent ?? '').replace(/\u200B/g, '').trim() === '';
+  if (el.childNodes.length === 0 || onlyWhitespace) {
+    el.innerHTML = '<p><br></p>';
+    return;
+  }
+
+  // 2) If no block elements exist, wrap whatever is there into a <p>
+  const hasBlock = el.querySelector('p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre');
+  if (!hasBlock) {
+    const p = document.createElement('p');
+    while (el.firstChild) p.appendChild(el.firstChild);
+    if (!p.hasChildNodes()) p.appendChild(document.createElement('br'));
+    el.appendChild(p);
+    return;
+  }
+
+  // 3) Make sure the first/only empty <p> still has a <br>
+  el.querySelectorAll('p').forEach(p => {
+    if ((p.textContent ?? '').replace(/\u200B/g, '') === '') {
+      if (!p.innerHTML.toLowerCase().includes('<br')) p.innerHTML = '<br>';
+    }
+  });
+}
+
+
+
+  // ---------- Toolbar/commands ----------
+  private onToolbarCommand(cmd: string) {
+    this.focusAndRestore();
+    switch (cmd) {
+      case 'bold': toggleInlineTag(this.editorEl, 'strong'); break;
+      case 'italic': toggleInlineTag(this.editorEl, 'em'); break;
+      case 'underline': toggleInlineTag(this.editorEl, 'u'); break;
+      case 'left': setAlignment(this.editorEl, 'left'); break;
+      case 'center': setAlignment(this.editorEl, 'center'); break;
+      case 'right': setAlignment(this.editorEl, 'right'); break;
+      case 'justify': setAlignment(this.editorEl, 'justify'); break;
+      case 'ul': this.insertList('ul'); break;
+      case 'ol': this.insertList('ol'); break;
+      case 'link': insertOrEditLink(this.editorEl); break;
+      case 'clear':
+  const walker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
+  const toUnwrap: HTMLElement[] = [];
+  while (walker.nextNode()) {
+    const el = walker.currentNode as HTMLElement;
+    el.removeAttribute('style');
+    if (['B','STRONG','I','EM','U','SPAN','FONT'].includes(el.tagName)) {
+      toUnwrap.push(el);
+    }
+  }
+  for (const el of toUnwrap) {
+    while (el.firstChild) el.parentNode?.insertBefore(el.firstChild, el);
+    el.remove();
+  }
+  this.ensureAtLeastOneParagraph();
+  break;
+
+      default: break;
+    }
+    this.updateContent(); this.updateToolbarState();
+  }
+
+  private setBtnActive(cmd: string, active: boolean) {
+    const arr = this.buttonMap.get(cmd); if (!arr) return;
+    for (const btn of arr) btn.toggleAttribute('data-active', !!active);
+  }
+
+  private updateToolbarState() {
+    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)) return;
+
+    const startElm = nearestElement(range.startContainer) || this.editorEl;
+    const comp = getComputedStyle(startElm);
+    const block = closestBlock(range.startContainer, this.editorEl) || this.editorEl;
+
+    const isBold = (() => {
+      let n: Node | null = startElm;
+      while (n && n !== this.editorEl) {
+        if (n instanceof HTMLElement) {
+          const t = n.tagName.toLowerCase();
+          if (t === 'strong' || t === 'b') return true;
+          const w = getComputedStyle(n).fontWeight;
+          if (parseInt(w, 10) >= 600) return true;
+        }
+        n = n.parentNode;
+      }
+      return false;
+    })();
+
+    const isItalic = (() => {
+      let n: Node | null = startElm;
+      while (n && n !== this.editorEl) {
+        if (n instanceof HTMLElement) {
+          const t = n.tagName.toLowerCase();
+          if (t === 'em' || t === 'i') return true;
+          if (getComputedStyle(n).fontStyle === 'italic') return true;
+        }
+        n = n.parentNode;
+      }
+      return false;
+    })();
+
+    const isUnderline = (() => {
+      let n: Node | null = startElm;
+      while (n && n !== this.editorEl) {
+        if (n instanceof HTMLElement) {
+          const tdl = getComputedStyle(n).textDecorationLine;
+          if (tdl && tdl.includes('underline')) return true;
+          if (n.tagName.toLowerCase() === 'u') return true;
+        }
+        n = n.parentNode;
+      }
+      return false;
+    })();
+
+    const inLink = !!startElm.closest('a');
+
+    const align = (block.style.textAlign || getComputedStyle(block).textAlign || 'start') as string;
+    const alignNorm = align === 'start' ? 'left' : align;
+
+    const inLi = !!startElm.closest('li');
+    const listType = inLi ? (startElm.closest('ul,ol')?.tagName.toLowerCase() || '') : '';
+
+    this.setBtnActive('bold', isBold);
+    this.setBtnActive('italic', isItalic);
+    this.setBtnActive('underline', isUnderline);
+    this.setBtnActive('link', inLink);
+
+    this.setBtnActive('left', alignNorm === 'left' && !['center','right','justify'].includes(alignNorm));
+    this.setBtnActive('center', alignNorm === 'center');
+    this.setBtnActive('right', alignNorm === 'right');
+    this.setBtnActive('justify', alignNorm === 'justify');
+
+    this.setBtnActive('ul', listType === 'ul');
+    this.setBtnActive('ol', listType === 'ol');
+
+    // Reflect heading
+    if (this.headingSelect) {
+      const tag = block.tagName.toLowerCase();
+      const v = ['h1','h2','h3'].includes(tag) ? tag : 'p';
+      if (this.headingSelect.value !== v) this.headingSelect.value = v;
+    }
+
+    // Reflect font family
+    if (this.fontSelect) {
+      const ff = (comp.fontFamily || '').replace(/["']/g, '').split(',')[0].trim().toLowerCase();
+      if (ff) {
+        for (const opt of Array.from(this.fontSelect.options)) {
+          if (opt.value.toLowerCase() === ff) { this.fontSelect.value = opt.value; break; }
+        }
+      }
+    }
+
+    // Reflect color
+    if (this.colorInput) {
+      const hex = rgbToHex(comp.color);
+      if (hex && this.colorInput.value.toLowerCase() !== hex.toLowerCase()) {
+        this.colorInput.value = hex;
+      }
+    }
+  }
+
+  private syncPreview() {
+    this.updateContent();
+  }
+
+  private updateContent() {
+    if (!this.editorEl) return;
+    this.ensureAtLeastOneParagraph();
+    this.content = this.editorEl.innerHTML;
+
+    // live preview on the authored node (kept in place)
+    if (this.previewEl) this.previewEl.innerHTML = this.content;
+
+    this.dispatchEvent(new CustomEvent('content-changed', {
+      detail: { content: this.content }, bubbles: true, composed: true
+    }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rich-text-editor': NileRichTextEditor;
+  }
+}
+

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('nile-rte-color')
+export class NileRteColor extends LitElement {
+  protected createRenderRoot() { return this; }
+  protected shouldUpdate() { return false; }
+
+  /** 'foreColor' (reserved for future: 'backColor') */
+  @property({ type: String }) type = 'foreColor';
+  @property({ type: String }) label = 'Text Color';
+  @property({ type: String }) value = '#000000';
+}
+declare global { interface HTMLElementTagNameMap { 'nile-rte-color': NileRteColor; } }

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

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

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

@@ -0,0 +1,37 @@
+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 = '';
+
+  /** 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;
+  }
+}