@aquera/nile-elements 0.1.67-beta-1.7 → 0.1.67-beta-1.9

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

@@ -1,684 +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 './nile-rte-link';
-
-import {
-  closestBlock, nearestElement, rgbToHex,
-  toggleInlineTag, setBlockTag, setAlignment,
-  setFontFamily, setForeColor, setBackColor, 
-} from './utils';
-
-import {styles} from './nile-rich-text-editor.css';  
-
-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: 'format_bold',
-  italic: 'format_italic',
-  underline: 'format_underline',
-  link: 'link_2',
-  left: 'format_align_left',
-  center: 'format_align_middle',
-  right: 'format_align_right',
-  justify: 'format_align_justify',
-  ul: 'format_list_bulleted',
-  ol: 'format_list_numbered',
-  clear: 'format_clear',
-};
-
-@customElement('nile-rich-text-editor')
-export class NileRichTextEditor extends LitElement {
-  protected createRenderRoot() { return this; }  
-  protected shouldUpdate() { return false; }    
-
-  /** 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;
-private bgColorInput: HTMLInputElement | null = null; 
-private colorSwatchEl: HTMLElement | null = null;   
-private bgSwatchEl: HTMLElement | null = null; 
-
-
-  // Mentions controller (child)
-  private mentionsEl: HTMLElement | null = null;
-
-  
-
-  private injectCss(cssText: string) {
-    if (this.querySelector('style[data-rte-style]')) return;
-    const style = document.createElement('style');
-    style.setAttribute('data-rte-style', 'true');
-    style.textContent = cssText;
-    this.insertBefore(style, this.firstChild);
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback();
-
-    
-    this.injectCss(styles.cssText);     
-    
-
-   
-    this.toolbarEl = this.querySelector('nile-rte-toolbar');
-    this.previewEl = this.querySelector('nile-rte-preview');
-
-   
-    this.ensureEditor();
-
- 
-    if (this.value && !this.editorEl.innerHTML.trim()) {
-      this.editorEl.innerHTML = this.value;
-    }
-    this.content = this.editorEl.innerHTML;
-
-   
-    if (this.toolbarEl) this.wireAuthoredToolbar(this.toolbarEl);
-
- 
-    this.mentionsEl = this.querySelector('nile-rte-mentions');
-    if (this.mentionsEl) {
- 
-      (this.mentionsEl as any).attach?.(this.editorEl, this as HTMLElement);
- 
-      (this.mentionsEl as any).setExternalConfig?.(this.mentions);
-    }
-
-    
-    this.wireEditor();
-
- 
-    this.updateToolbarState();
-    this.syncPreview();
-
-   
-    document.addEventListener('selectionchange', this.onSelectionChange, true);
-  }
-
-  disconnectedCallback(): void {
-    document.removeEventListener('selectionchange', this.onSelectionChange, true);
- 
-    if (this.mentionsEl && (this.mentionsEl as any).detach) {
-      (this.mentionsEl as any).detach();
-    }
-    super.disconnectedCallback();
-  }
-
- 
- 
-
-  private ensureEditor() {
-    this.editorEl = this.querySelector('.editor') as HTMLElement;
-    if (!this.editorEl) {
-      const editor = document.createElement('article');
-      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;
-    }
-    if (!this.editorEl.innerHTML.trim()) {
-      this.editorEl.innerHTML = '<p><br></p>';
-    }
-    this.ensureAtLeastOneParagraph();
-  }
-
-  private wireEditor() {
-    this.editorEl.addEventListener('input', () => { 
-      this.ensureAtLeastOneParagraph();
-      this.updateContent();
-    });
-    this.editorEl.addEventListener('mouseup', () => this.saveSelection());
-    this.editorEl.addEventListener('keyup', () => this.saveSelection());
-    this.editorEl.addEventListener('keydown', this.onEditorKeydown);   
-  }
-  
- 
-  private onEditorKeydown = (e: KeyboardEvent) => {
-    if (e.key !== 'Tab') return;
-  
-    e.preventDefault();
-    this.focusAndRestore();
-  
-    const sel = window.getSelection();
-    if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-  
-   
-    if (e.shiftKey) {
-      if (range.collapsed && range.startContainer.nodeType === Node.TEXT_NODE) {
-        const t = range.startContainer as Text;
-        const off = range.startOffset;
-        const before = t.data.slice(0, off);
-  
-      
-        const removed = before.replace(/(\t|[ \u00a0]{2})$/, '');
-        if (removed.length !== before.length) {
-          t.data = removed + t.data.slice(off);
-          const r = document.createRange();
-          r.setStart(t, removed.length);
-          r.collapse(true);
-          sel.removeAllRanges();
-          sel.addRange(r);
-          this.updateContent();
-          this.updateToolbarState();
-        }
-      }
-      return;
-    }
-  
- 
-    range.deleteContents();
-    const tabNode = document.createTextNode('\t');  
-    range.insertNode(tabNode);
-  
- 
-    const r = document.createRange();
-    r.setStartAfter(tabNode);
-    r.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(r);
-  
-    this.updateContent();
-    this.updateToolbarState();
-  };
-  
-
-  private wireAuthoredToolbar(tb: HTMLElement) {
-   
-    this.buttonMap.clear();
-    this.headingSelect = null;
-    this.fontSelect = null;
-    this.colorInput = null;
-
-   
-    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-link') {
-        (child as any).editorEl = this.editorEl;
-        child.addEventListener('link-changed', () => {
-          this.updateContent();
-          this.updateToolbarState();
-        });
-        return;
-      }
-      
-      
-
-      if (tag === 'nile-rte-toolbar-item') {
-       
-        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 (!btn) {
-          btn = document.createElement('nile-button');
-          (btn as any).variant = 'tertiary';
-          (btn as any).size = 'small';   // optional
-        }
-      
-       
-        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="20" color="black" aria-label="${label}"></nile-icon>`;
-          } else {
-            btn.textContent = label || cmd;
-          }
-          child.innerHTML = '';
-        } else {
-          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));
-      
-     
-        const arr = this.buttonMap.get(cmd) ?? [];
-        arr.push(btn);
-        this.buttonMap.set(cmd, arr);
-      
-        return; 
-      }
-      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);
-                }
-        
- 
-                this.updateContent();
-                this.updateToolbarState();
-              });
-
-            
-                return;
-             }
-     
-
-             if (tag === 'nile-rte-color') {
-              child.addEventListener('change', (e: any) => {
-                this.focusAndRestore();
-                const { mode, value } = e.detail;
-            
-                if (mode === 'backColor') {
-                  setBackColor(this.editorEl, value);
-                } else {
-                  setForeColor(this.editorEl, value);
-                }
-            
-                this.updateContent();
-                this.updateToolbarState();
-              });
-              return;
-            }
-            
-    });
-  }
-  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(); }
-
- 
-private insertList(type: 'ul' | 'ol') {
-  this.restoreSelection();
-  if (!this.lastRange) return;
-
- 
-  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':  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; }
-        }
-      }
-    }
-
-    if (this.colorInput) {
-      const hex = rgbToHex(comp.color);
-      if (hex && this.colorInput.value.toLowerCase() !== hex.toLowerCase()) {
-        this.colorInput.value = hex;
-      }
-      if (this.colorSwatchEl) this.colorSwatchEl.style.backgroundColor = this.colorInput.value;
-    }
-    
-
-    if (this.bgColorInput) {
-      const bg = getComputedStyle(startElm).backgroundColor;
-      if (bg && !/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(bg)) {
-        const bgHex = rgbToHex(bg);
-        if (bgHex && this.bgColorInput.value.toLowerCase() !== bgHex.toLowerCase()) {
-          this.bgColorInput.value = bgHex;
-        }
-      }
-      if (this.bgSwatchEl) this.bgSwatchEl.style.backgroundColor = this.bgColorInput.value;
-      }
-  }
-
-  private syncPreview() {
-    this.updateContent();
-  }
-
-  private updateContent() {
-    if (!this.editorEl) return;
-    this.ensureAtLeastOneParagraph();
-  
- 
-    const clone = this.editorEl.cloneNode(true) as HTMLElement;
-  
- 
-    const origWalker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
-    const cloneWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
-  
- 
-    const importantProps = [
-      'font-weight',
-      'font-style',
-      'text-decoration',
-      'color',
-      'background-color',
-      'font-size',
-      'font-family',
-      'text-align',
-      'line-height',
-      'letter-spacing',
-      'white-space',
-      'vertical-align'
-    ];
-  
-    while (origWalker.nextNode() && cloneWalker.nextNode()) {
-      const origEl = origWalker.currentNode as HTMLElement;
-      const cloneEl = cloneWalker.currentNode as HTMLElement;
-      const computed = window.getComputedStyle(origEl);
-  
- 
-      const cssText = importantProps
-        .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
-        .join(';');
-  
-    
-      if (cssText.trim()) {
-        cloneEl.setAttribute('style', cssText);
-      }
-    }
-  
-  
-    this.content = clone.innerHTML;
-  
- 
-    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;
-  }
-}
-