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

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

@@ -1,606 +0,0 @@
-// 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

@@ -1,14 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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