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

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

@@ -1,189 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-
-@customElement('nile-rte-color')
-export class NileRteColor extends LitElement {
-  protected createRenderRoot() { return this; }
-
-  /** Whether this is text color or background color */
-  @property({ type: String }) mode: 'foreColor' | 'backColor' = 'foreColor';
-  @property({ type: String }) label = 'Text Color';
-  @property({ type: String }) value = '#000000';
-
-  /** Default palette, user can override via property or attribute */
-  @property({ type: Array })
-  palette: string[] = [
-    '#000000','#444444','#666666','#999999','#cccccc','#eeeeee','#ffffff',
-    '#d32f2f','#f44336','#ff9800','#ffeb3b','#4caf50','#2196f3','#3f51b5','#9c27b0',
-    '#03a9f4','#00bcd4','#009688','#8bc34a','#cddc39','#ffc107','#ff5722'
-  ];
-
-  @state() private recentColors: string[] = [];
-  private inputEl!: HTMLInputElement;
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    // Inject styles once
-    this.injectCss(`
-      nile-button.rte-color-trigger::part(base){
-        width:32px; height:32px; padding:0px 6px;
-      }
-
-      .glyph-stack { display:grid; align-items:center; justify-items:center; line-height:1; }
-      .glyph { font-size:14px; margin-bottom:2px; }
-      .underline { width:18px; height:3px; border-radius:2px; }
-      .swatch-box { width:18px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,0.35); }
-
-      nile-popover::part(popover) {
-        min-width: 225px;
-        height: 250px;
-        padding: 0px;
-        gap: 0px;
-      }
-
-      .swatch-dropdown {
-        height: 245px;
-        width: 275px;
-        padding: 12px;
-        background: #fff;
-        border-radius: 8px;
-        box-sizing: border-box;
-        overflow-y: auto;
-      }
-
-      .section { margin-bottom: 12px; }
-      .title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color:#111; }
-
-      .swatches {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, 24px);
-        gap: 8px;
-      }
-
-      .swatch {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        border: 1px solid rgba(0,0,0,0.25);
-        cursor: pointer;
-        position: relative;
-        background-clip: content-box;
-      }
-
-      .swatch.add {
-        display:flex;
-        align-items:center;
-        justify-content:center;
-        font-weight:bold;
-        font-size:16px;
-        background:#fff;
-      }
-
-      .checkmark {
-        position: absolute;
-        top: 50%; left: 50%;
-        transform: translate(-50%,-50%);
-        font-size: 13px;
-        color: white;
-        text-shadow: 0 0 2px rgba(0,0,0,0.6);
-      }
-    `);
-
-    // hidden native color input
-    this.inputEl = document.createElement('input');
-    this.inputEl.type = 'color';
-    this.inputEl.style.position = 'absolute';
-    this.inputEl.style.opacity = '0';
-    this.inputEl.style.pointerEvents = 'none';
-    this.inputEl.value = this.value;
-    this.appendChild(this.inputEl);
-
-    this.inputEl.addEventListener('input', () => this.setColor(this.inputEl.value));
-  }
-
-  private injectCss(cssText: string) {
-    if (this.querySelector('style[data-rte-color-style]')) return;
-    const style = document.createElement('style');
-    style.setAttribute('data-rte-color-style', 'true');
-    style.textContent = cssText;
-    this.insertBefore(style, this.firstChild);
-  }
-
-  private setColor(color: string) {
-    this.value = color;
-    this.recentColors = [color, ...this.recentColors.filter(c => c !== color)].slice(0, 8);
-
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: { mode: this.mode, value: color },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  private pickCustom = () => this.inputEl.click();
-
-  render() {
-    return html`
-      <nile-popover placement="bottom-start" distance="6" .arrow=${false}>
-        <nile-button
-          slot="anchor"
-          variant="ghost"
-          aria-label=${this.label}
-          class="rte-color-trigger"
-        >
-          ${this.mode === 'backColor'
-            ? html`<span class="swatch-box" style="background:${this.value}"></span>`
-            : html`
-                <span class="glyph-stack">
-                  <span class="glyph">A</span>
-                  <span class="underline" style="background:${this.value}"></span>
-                </span>
-              `}
-        </nile-button>
-
-        <div part="base" class="swatch-dropdown">
-          <div class="section">
-            <div class="title">Default</div>
-            <div class="swatches">
-              ${this.palette.map(c => html`
-                <button class="swatch" style="background:${c}"
-                  @click=${() => this.setColor(c)}
-                  title=${c}>
-                  ${this.value === c ? html`<span class="checkmark">✓</span>` : ''}
-                </button>
-              `)}
-            </div>
-          </div>
-
-          ${this.recentColors.length > 0 ? html`
-            <div class="section">
-              <div class="title">Recently Used</div>
-              <div class="swatches">
-                ${this.recentColors.map(c => html`
-                  <button class="swatch" style="background:${c}"
-                    @click=${() => this.setColor(c)}
-                    title=${c}></button>
-                `)}
-              </div>
-            </div>
-          ` : ''}
-
-          <div class="section">
-            <div class="title">Custom</div>
-            <div class="swatches">
-              <button class="swatch add" @click=${this.pickCustom}>+</button>
-              <nile-icon name="eyedropper"></nile-icon>
-            </div>
-          </div>
-        </div>
-      </nile-popover>
-    `;
-  }
-}
-
-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-link.ts

@@ -1,161 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-
-@customElement('nile-rte-link')
-export class NileRteLink extends LitElement {
-  protected createRenderRoot() { return this; }
-
-  @property({ attribute: false }) editorEl!: HTMLElement;
-  @property({ type: String }) placeholder = 'https://';
-
-  @state() private linkValue = '';
-  private selectionRange: Range | null = null;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.injectCss(`
-      nile-rte-link nile-button.rte-link-trigger::part(base) {
-        width: 32px;
-        height: 32px;
-        padding: 0;
-        border: none;
-        border-radius: 6px;
-      }
-      .link-popup {
-        display: flex;
-        gap: 6px;
-        padding: 6px 8px;
-        align-items: center;
-        background: white;
-      }
-      .link-input {
-        flex: 1;
-        padding: 6px 8px;
-        font-size: 14px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-        nile-popover.rte-link-popover::part(popover) {
-        min-width: 250px;
-        height: 44px;
-        padding: 0px;
-        gap: 0px;
-      }
-    `);
-  }
-
-  private injectCss(cssText: string) {
-    if (this.querySelector('style[data-rte-link-style]')) return;
-    const style = document.createElement('style');
-    style.setAttribute('data-rte-link-style', 'true');
-    style.textContent = cssText;
-    this.insertBefore(style, this.firstChild);
-  }
-
-  private onOpen() {
-    if (!this.editorEl) return;
-    const sel = document.getSelection();
-    if (!sel || sel.rangeCount === 0) return;
-
-    this.selectionRange = sel.getRangeAt(0).cloneRange();
-
-    // Pre-fill with existing href if selection inside <a>
-    let n: Node | null = sel.anchorNode;
-    let a: HTMLAnchorElement | null = null;
-    while (n && n !== this.editorEl) {
-      if (n instanceof HTMLAnchorElement) { a = n; break; }
-      n = n.parentNode;
-    }
-    this.linkValue = a?.href || '';
-
-    setTimeout(() => {
-      this.querySelector<HTMLInputElement>('.link-input')?.focus();
-    }, 0);
-  }
-
-  private onApply() {
-    if (!this.editorEl || !this.selectionRange) return;
-    const url = this.linkValue.trim();
-    if (!url) return;
-
-    const sel = document.getSelection();
-    if (!sel) return;
-    sel.removeAllRanges();
-    sel.addRange(this.selectionRange);
-
-    // Check for existing <a>
-    let n: Node | null = this.selectionRange.startContainer;
-    let a: HTMLAnchorElement | null = null;
-    while (n && n !== this.editorEl) {
-      if (n instanceof HTMLAnchorElement) { a = n; break; }
-      n = n.parentNode;
-    }
-
-    if (a) {
-      a.href = url;
-    } else {
-      const link = document.createElement('a');
-      link.href = url;
-      if (this.selectionRange.collapsed) {
-        link.textContent = url;
-        this.selectionRange.insertNode(link);
-      } else {
-        try {
-          this.selectionRange.surroundContents(link);
-        } catch {
-          const frag = this.selectionRange.extractContents();
-          link.appendChild(frag);
-          this.selectionRange.insertNode(link);
-        }
-      }
-    }
-
-    this.emit(url);
-
-    // Close the popover by toggling `open`
-    const pop = this.querySelector('nile-popover');
-    if (pop) (pop as any).isShow = false;
-  }
-
-  private emit(href: string) {
-    this.dispatchEvent(new CustomEvent('link-changed', {
-      detail: { href },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  render() {
-    return html`
-      <nile-popover placement="bottom-start"  class="rte-link-popover" distance="10" .arrow=${false}>
-        <nile-button class="rte-link-trigger" slot="anchor" variant="tertiary" size="small" @click=${() => this.onOpen()}>
-          <nile-icon name="link_2" aria-label="Insert/Edit Link"></nile-icon>
-        </nile-button>
-
-        <div class="link-popup">
-          <input
-            class="link-input"
-            type="text"
-            placeholder="Type or paste link here"
-            .value=${this.linkValue}
-            @input=${(e: any) => this.linkValue = e.target.value}
-            @keydown=${(e: KeyboardEvent) => {
-              if (e.key === 'Enter') this.onApply();
-              if (e.key === 'Escape') {
-                const pop = this.querySelector('nile-popover');
-                if (pop) (pop as any).isShow = false;
-              }
-            }}
-          />
-          <nile-button @click=${() => this.onApply()}>Apply</nile-button>
-        </div>
-      </nile-popover>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-rte-link': NileRteLink;
-  }
-}

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

@@ -1,46 +0,0 @@
-// 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
- 
-
-@property({ attribute: 'mentionsprefix' })  mentionsPrefix: string = '';
-@property({ attribute: 'mentionssuffix' })  mentionsSuffix: string = '';
-
-
-  @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;
-  }
-}