@aquera/nile-elements 0.1.67-beta-2.4 → 0.1.67-beta-2.5

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

@@ -1,223 +0,0 @@
-// nile-rte-select.ts
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-
-type HeadingTag = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-type GenericOption = { value: string; label?: string; icon?: string };
-type HeadingOption = { value: HeadingTag; label?: string; icon?: string };
-type NormalizedOption = { value: string; label: string; icon?: string };
-
-const HEADING_ALLOWLIST: ReadonlySet<HeadingTag> = new Set([
-  'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
-]);
-
-function isHeadingTag(v: string): v is HeadingTag {
-  return HEADING_ALLOWLIST.has(v as HeadingTag);
-}
-
-@customElement('nile-rte-select')
-export class NileRteSelect extends LitElement {
-  protected createRenderRoot() { return this; }
-
-  /** 'heading' | 'font' | 'align' */
-  @property({ type: String }) type = '';
-
-  /** JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated) */
-  @property({ type: String }) options = '[]';
-
-  /** Programmatic options (preferred for TS safety). */
-  @property({ attribute: false })
-  optionsObj?: Array<GenericOption | HeadingOption>;
-
-  /** Fallback label for trigger (e.g., "Align") */
-  @property({ type: String }) label = '';
-
-  @state() private selectedValue = '';
-
-  private mapAlignIcon(v: string) {
-    const map: Record<string,string> = {
-      left: 'format_align_left',
-      center: 'format_align_middle',
-      right: 'format_align_right',
-      justify: 'format_align_justify'
-    };
-    return map[v] || 'format_align_left';
-  }
-  private get parsedOptions(): NormalizedOption[] {
-    const source: unknown = this.optionsObj ?? this.options;
-  
-    let rawArray: any[] = (() => {
-      if (Array.isArray(source)) return source;
-      try { return JSON.parse(String(source)); } catch { return []; }
-    })();
-  
-   
-    if (this.type === 'align' && rawArray.length === 0) {
-      rawArray = [
-        { value: 'left', label: 'Align Left' },
-        { value: 'center', label: 'Align Center' },
-        { value: 'right', label: 'Align Right' },
-        { value: 'justify', label: 'Justify' }
-      ];
-    }
-  
-    let items: NormalizedOption[] = rawArray.map((o: any) => {
-      const value: string = o?.value ?? o;
-      const label: string = o?.label ?? o?.value ?? o;
-      const icon: string | undefined =
-        o?.icon ?? (this.type === 'align' ? this.mapAlignIcon(String(value)) : undefined);
-      return { value, label, icon };
-    });
-  
- 
-    if (this.type === 'heading') {
-      const before = items.length;
-      items = items.filter(i => isHeadingTag(i.value));
-      if (items.length !== before) {
-       
-      }
-      if (this.selectedValue && !isHeadingTag(this.selectedValue)) {
-        this.selectedValue = '';
-      }
-    }
-  
-    return items;
-  }
-  
-
-  private ensureDefault() {
-    if (!this.selectedValue) {
-      const first = this.parsedOptions[0];
-      if (first) this.selectedValue = first.value;
-    }
-  }
-
-  private onSelect(value: string) {
-    if (this.type === 'heading' && !isHeadingTag(value)) {
-      console.warn(`[nile-rte-select] Ignoring invalid heading value: ${value}`);
-      return;
-    }
-    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-top: 0px;
-      }
-      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;
-      }
-  nile-button.rte-align-trigger::part(base) {
-
-  border: none;
-}
-
- 
-    `;
-    this.insertBefore(style, this.firstChild);
-  }
-
-  render() {
-    const opts = this.parsedOptions;
-    this.ensureDefault();
-    const current = opts.find(o => o.value === this.selectedValue);
-
-    // ► Align: icon-only items + icon trigger
-    if (this.type === 'align') {
-      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-tooltip hoist content="${o.label}">
-                  <nile-icon name="${o.icon}"></nile-icon>
-                </nile-tooltip>
-              </nile-menu-item>
-            `)}
-          </nile-menu>
-        </nile-dropdown>
-      `;
-    }
-
-    if (this.type === 'font') {
-      const triggerText = current?.label || this.label || 'Font';
-      return html`
-        <nile-dropdown class="rte-default-dd">
-          <nile-button
-            slot="trigger"
-            variant="tertiary"
-            class="rte-default-trigger"
-            style="font-family: ${current?.value || 'inherit'}">
-            ${triggerText} <nile-icon name="arrowdown"></nile-icon>
-          </nile-button>
-          <nile-menu class="rte-default-menu">
-            ${opts.map(o => html`
-              <nile-menu-item
-                style="font-family: ${o.value}"
-                ?active=${o.value === this.selectedValue}
-                @click=${() => this.onSelect(o.value)}>
-                ${o.label}
-              </nile-menu-item>
-            `)}
-          </nile-menu>
-        </nile-dropdown>
-      `;
-    }
-
-    // ► Default (e.g., heading): text items; heading values are validated already
-    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-icon name="arrowdown"></nile-icon>
-        </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

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

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

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

@@ -1,446 +0,0 @@
-// src/nile-rich-text-editor/utils.ts
-export function closestBlock(node: Node | null, root: HTMLElement): HTMLElement | null {
-    while (node && node !== root) {
-      if (node instanceof HTMLElement) {
-        const display = getComputedStyle(node).display;
-        if (node.tagName.match(/^(P|DIV|H1|H2|H3|H4|H5|H6|LI)$/) || display === 'block' || display === 'list-item') {
-          return node;
-        }
-      }
-      node = node?.parentNode || null;
-    }
-    return root;
-  }
-  
-  export function nearestElement(n: Node | null): HTMLElement | null {
-    while (n && !(n instanceof HTMLElement)) n = n.parentNode as Node | null;
-    return n as HTMLElement | null;
-  }
-  
-  export function rgbToHex(rgb: string): string {
-    const m = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
-    if (!m) return '#000000';
-    const r = Number(m[1]).toString(16).padStart(2,'0');
-    const g = Number(m[2]).toString(16).padStart(2,'0');
-    const b = Number(m[3]).toString(16).padStart(2,'0');
-    return `#${r}${g}${b}`;
-  }
-  
-  export function unwrap(node: HTMLElement) {
-    const p = node.parentNode; if (!p) return;
-    while (node.firstChild) p.insertBefore(node.firstChild, node);
-    p.removeChild(node);
-  }
-  
-  export function surroundInline(range: Range, tag: string, attrs?: Record<string,string>) {
-    const wrap = document.createElement(tag);
-    if (attrs) Object.entries(attrs).forEach(([k,v]) => wrap.setAttribute(k, v));
-    try { range.surroundContents(wrap); }
-    catch {
-      const frag = range.extractContents();
-      wrap.appendChild(frag);
-      range.insertNode(wrap);
-    }
-  }
-  
-  export function toggleInlineTag(
-    root: HTMLElement,
-    tag: 'strong' | 'em' | 'u' | 'span',
-    attrs?: Record<string, string>
-  ) {
-    const sel = document.getSelection();
-    if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-  
-   
-    const aliases: Record<string, string[]> = {
-      strong: ['strong', 'b'],
-      em: ['em', 'i'],
-      u: ['u'],
-      span: ['span'],
-    };
-    const candidates = aliases[tag] ?? [tag];
-  
-    if (range.collapsed) {
-      const elm = document.createElement(tag);
-      if (attrs) Object.entries(attrs).forEach(([k, v]) => elm.setAttribute(k, v));
-      elm.appendChild(document.createTextNode('\u200b'));
-      range.insertNode(elm);
-  
-      // put caret inside new element
-      const r = document.createRange();
-      r.setStart(elm.firstChild!, 1);
-      r.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(r);
-      return;
-    }
-  
- 
-    let n: Node | null = range.startContainer;
-    let target: HTMLElement | null = null;
-    while (n && n !== root) {
-      if (n instanceof HTMLElement && candidates.includes(n.tagName.toLowerCase())) {
-        target = n;
-        break;
-      }
-      n = n.parentNode;
-    }
-  
-    if (target) {
- 
-      unwrap(target);
-    } else {
-   
-      surroundInline(range, tag, attrs);
-    }
-  }
-  
-  export function setBlockTag(root: HTMLElement, tag: 'p'|'h1'|'h2'|'h3') {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    const block = closestBlock(range.startContainer, root); if (!block) return;
-    if (block.tagName.toLowerCase() === tag) return;
-    const nb = document.createElement(tag);
-    while (block.firstChild) nb.appendChild(block.firstChild);
-    block.replaceWith(nb);
-    const r = document.createRange(); r.selectNodeContents(nb); r.collapse(true);
-    sel.removeAllRanges(); sel.addRange(r);
-  }
-  
-  export function setAlignment(root: HTMLElement, align: 'left'|'center'|'right'|'justify') {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    const block = closestBlock(range.startContainer, root); if (!block) return;
-    block.style.textAlign = align === 'justify' ? 'justify' : align;
-  }
-  
-  export function setFontFamily(root: HTMLElement, family: string) {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    if (range.collapsed) {
-      const span = document.createElement('span');
-      span.style.fontFamily = family;
-      span.appendChild(document.createTextNode('\u200b'));
-      range.insertNode(span);
-      const r = document.createRange(); r.setStart(span.firstChild!, 1); r.collapse(true);
-      sel.removeAllRanges(); sel.addRange(r);
-      return;
-    }
-    surroundInline(range, 'span', { style: `font-family:${family}` });
-  }
-
- 
-function enclosingStyledSpan(
-  editor: HTMLElement,
-  node: Node | null,
-  dataAttr: 'data-rte-color' | 'data-rte-bg'
-): HTMLSpanElement | null {
-  while (node && node !== editor) {
-    if (node instanceof HTMLSpanElement && node.hasAttribute(dataAttr)) {
-      return node;
-    }
-    node = node.parentNode;
-  }
-  return null;
-}
-
- 
-function applyInlineStyle(
-  editor: HTMLElement,
-  cssProp: 'color' | 'backgroundColor',
-  value: string,
-  dataAttr: 'data-rte-color' | 'data-rte-bg'
-) {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return;
-  const r0 = sel.getRangeAt(0);
-  if (!editor.contains(r0.commonAncestorContainer)) return;
-
-  const range = r0.cloneRange();
-
-   
-  if (range.collapsed) {
-    const enclosing = enclosingStyledSpan(editor, range.startContainer, dataAttr);
-    if (enclosing) {
-      (enclosing.style as any)[cssProp] = value;
-      mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
-      return;
-    }
-
-    const s = document.createElement('span');
-    s.setAttribute(dataAttr, '1');
-    (s.style as any)[cssProp] = value;
-    s.appendChild(document.createTextNode('\u200B'));  
-    range.insertNode(s);
-
-  
-    const caret = document.createRange();
-    caret.setStart(s.firstChild!, 1);
-    caret.collapse(true);
-    sel.removeAllRanges(); sel.addRange(caret);
-
-    mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
-    return;
-  }
-
- 
-  const leftEdge = enclosingStyledSpan(editor, range.startContainer, dataAttr);
-  const rightEdge = enclosingStyledSpan(editor, range.endContainer, dataAttr);
-  if (leftEdge && leftEdge === rightEdge) {
-   
-    if (rangeCoversWholeNode(range, leftEdge)) {
-      (leftEdge.style as any)[cssProp] = value;
-    } else {
-     
-      const mid = splitAndRecolorWithinSpan(
-        leftEdge,
-        range,
-        dataAttr,
-        cssProp,
-        value
-      );
-  
- 
-      const sel = window.getSelection();
-      const r = document.createRange();
-      r.selectNodeContents(mid);
-      sel?.removeAllRanges();
-      sel?.addRange(r);
-    }
-    mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
-    return;
-  }
-
-  
-  const commonEl = (() => {
-    let n: Node | null = range.commonAncestorContainer;
-    while (n && !(n instanceof HTMLElement)) n = n.parentNode;
-    return n as HTMLElement | null;
-  })();
-
-  const walker = document.createTreeWalker(
-    commonEl || editor,
-    NodeFilter.SHOW_TEXT,
-    {
-      acceptNode: (n) => {
-        if (!n.nodeValue || !n.nodeValue.trim()) return NodeFilter.FILTER_REJECT;
-        const nodeRange = document.createRange();
-        nodeRange.selectNodeContents(n);
-        const intersects =
-          range.compareBoundaryPoints(Range.END_TO_START, nodeRange) < 0 &&
-          range.compareBoundaryPoints(Range.START_TO_END, nodeRange) > 0;
-        return intersects ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-      }
-    }
-  );
-
-  const toProcess: Text[] = [];
-  let t: Node | null;
-  while ((t = walker.nextNode())) toProcess.push(t as Text);
-
-  toProcess.forEach((text) => {
-    
-    let start = 0, end = text.length;
-    if (text === range.startContainer) start = range.startOffset;
-    if (text === range.endContainer)   end   = range.endOffset;
-    if (start > 0) text = text.splitText(start);
-    if (end   < text.length) text.splitText(end);
-
-    // If this slice already sits in a styled span → update it, don’t nest.
-    const existing = enclosingStyledSpan(editor, text, dataAttr);
-    if (existing) {
-      (existing.style as any)[cssProp] = value;
-      return;
-    }
-
-    // Create a new, single-purpose span
-    const span = document.createElement('span');
-    span.setAttribute(dataAttr, '1');
-    (span.style as any)[cssProp] = value;
-    const parent = text.parentElement!;
-    parent.replaceChild(span, text);
-    span.appendChild(text);
-  });
-
-  mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
-
-  // restore selection
-  sel.removeAllRanges(); sel.addRange(range);
-}
-
- // Is the range covering the entire node's contents?
-function rangeCoversWholeNode(range: Range, node: Node): boolean {
-  const all = document.createRange();
-  all.selectNodeContents(node);
-  return (
-    range.compareBoundaryPoints(Range.START_TO_START, all) <= 0 &&
-    range.compareBoundaryPoints(Range.END_TO_END, all) >= 0
-  );
-}
-
-function hasRangeContent(r: Range): boolean {
-  if (r.collapsed) return false;
-  const text = r.cloneContents().textContent || '';
-  return text.length > 0;
-}
-
-// Split one styled span into [left][middle][right]; recolor only middle
-function splitAndRecolorWithinSpan(
-  span: HTMLSpanElement,
-  range: Range,
-  dataAttr: 'data-rte-color' | 'data-rte-bg',
-  cssProp: 'color' | 'backgroundColor',
-  newValue: string
-): HTMLSpanElement {
-  const oldValue = (span.style as any)[cssProp];
-
-  const left = document.createRange();
-  left.setStart(span, 0);
-  left.setEnd(range.startContainer, range.startOffset);
-
-  const right = document.createRange();
-  right.setStart(range.endContainer, range.endOffset);
-  right.setEnd(span, span.childNodes.length);
-
-  // Build replacement fragment
-  const frag = document.createDocumentFragment();
-
-  // helper to make a styled clone shell
-  const makeShell = (val: string) => {
-    const s = document.createElement('span');
-    s.setAttribute(dataAttr, '1');
-    (s.style as any)[cssProp] = val;
-    return s;
-  };
-
-  if (hasRangeContent(left)) {
-    const sLeft = makeShell(oldValue);
-    sLeft.appendChild(left.cloneContents());
-    frag.appendChild(sLeft);
-  }
-
-  const mid = makeShell(newValue);
-  mid.appendChild(range.cloneContents());
-  frag.appendChild(mid);
-
-  if (hasRangeContent(right)) {
-    const sRight = makeShell(oldValue);
-    sRight.appendChild(right.cloneContents());
-    frag.appendChild(sRight);
-  }
-
-  // Replace original span
-  span.replaceWith(frag);
-  return mid; // return the middle span so caller can restore selection
-}
-
-
-function mergeAdjacentStyledSpans(
-  root: HTMLElement,
-  dataAttr: 'data-rte-color' | 'data-rte-bg',
-  cssProp: 'color' | 'backgroundColor'
-) {
-  const spans = Array.from(root.querySelectorAll<HTMLSpanElement>(`span[${dataAttr}]`));
-
-  const valOf = (el: HTMLElement) => (el.style as any)[cssProp];
-
-  spans.forEach((s) => {
- 
-    const nested = Array.from(s.querySelectorAll<HTMLSpanElement>(`span[${dataAttr}]`));
-    nested.forEach((child) => {
-      if (valOf(child) === valOf(s)) {
-        while (child.firstChild) s.insertBefore(child.firstChild, child);
-        child.remove();
-      }
-    });
-
-    
-    const prev = s.previousSibling;
-    if (prev instanceof HTMLSpanElement &&
-        prev.hasAttribute(dataAttr) &&
-        valOf(prev) === valOf(s)) {
-      while (s.firstChild) prev.appendChild(s.firstChild);
-      s.remove();
-      return; // s is gone, next checks not needed
-    }
-
-    // 3) Merge with next sibling if identical
-    const next = s.nextSibling;
-    if (next instanceof HTMLSpanElement &&
-        next.hasAttribute(dataAttr) &&
-        valOf(next) === valOf(s)) {
-      while (next.firstChild) s.appendChild(next.firstChild);
-      next.remove();
-    }
-  });
-}
-
-
-export function setForeColor(editor: HTMLElement, hex: string) {
-  applyInlineStyle(editor, 'color', hex, 'data-rte-color');
-}
-export function setBackColor(editor: HTMLElement, hex: string) {
-  applyInlineStyle(editor, 'backgroundColor', hex, 'data-rte-bg');
-}
-
-
-  export function toggleList(root: HTMLElement, kind: 'ul'|'ol') {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    const block = closestBlock(range.startContainer, root); if (!block) return;
-  
-    let li = block.closest('li');
-    if (li) {
-      const list = li.closest('ul,ol') as HTMLElement | null;
-      if (!list) return;
-      if (list.tagName.toLowerCase() === kind) {
-        const parent = list.parentElement!;
-        const frag = document.createDocumentFragment();
-        for (const child of Array.from(list.children)) {
-          if (child.tagName.toLowerCase() === 'li') {
-            const p = document.createElement('p');
-            while (child.firstChild) p.appendChild(child.firstChild);
-            frag.appendChild(p);
-          }
-        }
-        parent.replaceChild(frag, list);
-      } else {
-        const newList = document.createElement(kind);
-        while (list.firstChild) newList.appendChild(list.firstChild);
-        list.replaceWith(newList);
-      }
-      return;
-    }
-  
-    const list = document.createElement(kind);
-    const item = document.createElement('li'); list.appendChild(item);
-    while (block.firstChild) item.appendChild(block.firstChild);
-    block.replaceWith(list);
-  }
-  
-  export function insertOrEditLink(root: HTMLElement, href?: string) {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-  
-    let n: Node | null = range.startContainer;
-    let a: HTMLAnchorElement | null = null;
-    while (n && n !== root) { if (n instanceof HTMLAnchorElement) { a = n; break; } n = n.parentNode; }
-  
-    const url = href ?? (typeof window !== 'undefined' ? window.prompt('Enter URL', a?.href || 'https://') || '' : '');
-    if (!url) return;
-  
-    if (a) { a.href = url; return; }
-  
-    if (range.collapsed) {
-      const link = document.createElement('a'); link.href = url; link.textContent = url; range.insertNode(link);
-      const r = document.createRange(); r.setStartAfter(link); r.collapse(true);
-      sel.removeAllRanges(); sel.addRange(r);
-      return;
-    }
-  
-    const link = document.createElement('a'); link.href = url;
-    try { range.surroundContents(link); }
-    catch { const frag = range.extractContents(); link.appendChild(frag); range.insertNode(link); }
-  }
-