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

package/dist/src/nile-rich-text-editor/nile-rte-mentions.js

@@ -0,0 +1,400 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let NileRteMentions = class NileRteMentions extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mentions = {};
+        /** External config from the editor (lowest priority) */
+        this.externalConfig = {};
+        /** Config gathered from child <nile-rte-mentions-item> (highest priority) */
+        this.itemsConfig = {};
+        // wired from editor
+        this.editorEl = null;
+        this.hostEl = null;
+        // dropdown & menu elements we’ll create once and reuse
+        this.dropdownEl = null; // <nile-dropdown>
+        this.menuEl = null; // <nile-menu>
+        // selection caret
+        this.lastRange = null;
+        // dropdown state
+        this.mentionOpen = false;
+        this.mentionTrigger = null;
+        this.mentionQuery = '';
+        this.mentionSuggestions = [];
+        this.mentionFiltered = [];
+        this.mentionX = 0;
+        this.mentionY = 0;
+        this.triggerBtn = null;
+        // Observe child items & their attributes
+        this.mo = null;
+        // ---------- selection helpers ----------
+        this.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.saveSelection = () => {
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount)
+                this.lastRange = sel.getRangeAt(0).cloneRange();
+        };
+        // ---------- editor events ----------
+        this.onEditorInput = () => {
+            if (this.mentionOpen)
+                this.handleMention();
+        };
+        this.onEditorKeyUp = (e) => {
+            this.saveSelection();
+            const key = e.key;
+            const cfg = this.config;
+            if (!this.mentionOpen && key && cfg[key]) {
+                this.openMention(key);
+                return;
+            }
+            if (this.mentionOpen)
+                this.handleMention();
+        };
+        this.onEditorKeyDown = (e) => {
+            if (!this.mentionOpen)
+                return;
+            const key = e.key;
+            if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter') {
+                e.preventDefault();
+                if (key === 'Enter' && this.mentionFiltered.length) {
+                    this.selectMention(this.mentionFiltered[0]);
+                }
+            }
+            else if (key === 'Escape') {
+                e.preventDefault();
+                this.closeMention();
+            }
+        };
+        this.repositionMention = () => {
+            if (!this.mentionOpen || !this.hostEl || !this.triggerBtn)
+                return;
+            const caretRect = this.getCaretClientRect();
+            if (!caretRect)
+                return;
+            const hostRect = this.hostEl.getBoundingClientRect();
+            this.mentionX = caretRect.left - hostRect.left;
+            this.mentionY = caretRect.bottom - hostRect.top;
+            this.triggerBtn.style.left = `${this.mentionX}px`;
+            this.triggerBtn.style.top = `${this.mentionY}px`;
+        };
+    }
+    createRenderRoot() { return this; }
+    get config() {
+        // Priority: external < attribute < child-items
+        return { ...this.externalConfig, ...this.mentions, ...this.itemsConfig };
+    }
+    // Public API used by <nile-rich-text-editor>
+    attach(editorEl, hostEl) {
+        this.editorEl = editorEl;
+        this.hostEl = hostEl;
+        this.injectStyles();
+        this.ensureMentionDropdown();
+        this.rebuildConfigFromChildren();
+        // Watch for <nile-rte-mentions-item> add/remove/attr changes
+        this.mo = new MutationObserver(() => this.rebuildConfigFromChildren());
+        this.mo.observe(this, { childList: true, subtree: true, attributes: true });
+        // listeners on editor
+        this.editorEl.addEventListener('input', this.onEditorInput);
+        this.editorEl.addEventListener('mouseup', this.saveSelection);
+        this.editorEl.addEventListener('keyup', this.onEditorKeyUp);
+        this.editorEl.addEventListener('keydown', this.onEditorKeyDown);
+        this.editorEl.addEventListener('scroll', this.repositionMention);
+        // keep range fresh
+        document.addEventListener('selectionchange', this.onSelectionChange, true);
+    }
+    detach() {
+        if (this.mo) {
+            this.mo.disconnect();
+            this.mo = null;
+        }
+        if (this.editorEl) {
+            this.editorEl.removeEventListener('input', this.onEditorInput);
+            this.editorEl.removeEventListener('mouseup', this.saveSelection);
+            this.editorEl.removeEventListener('keyup', this.onEditorKeyUp);
+            this.editorEl.removeEventListener('keydown', this.onEditorKeyDown);
+            this.editorEl.removeEventListener('scroll', this.repositionMention);
+        }
+        document.removeEventListener('selectionchange', this.onSelectionChange, true);
+    }
+    setExternalConfig(cfg) {
+        this.externalConfig = cfg || {};
+    }
+    disconnectedCallback() {
+        this.detach();
+        super.disconnectedCallback();
+    }
+    // ---------- gather child items ----------
+    rebuildConfigFromChildren() {
+        const cfg = {};
+        const items = Array.from(this.querySelectorAll('nile-rte-mentions-item'));
+        for (const item of items) {
+            // read live properties first (if Lit already upgraded), else read attributes
+            const trig = item.mentionsCharacter ??
+                item.getAttribute('mentionscharacter') ??
+                '';
+            if (!trig || typeof trig !== 'string')
+                continue;
+            let data = item.mentionsData ??
+                (() => {
+                    const raw = item.getAttribute('mentionsdata');
+                    if (!raw)
+                        return null;
+                    try {
+                        const parsed = JSON.parse(raw);
+                        return Array.isArray(parsed)
+                            ? parsed.filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')
+                            : [];
+                    }
+                    catch {
+                        return [];
+                    }
+                })();
+            if (!Array.isArray(data))
+                data = [];
+            cfg[trig] = data;
+        }
+        this.itemsConfig = cfg;
+    }
+    // ---------- styles ----------
+    injectStyles() {
+        if (this.querySelector('style[data-mentions-style]'))
+            return;
+        const style = document.createElement('style');
+        style.setAttribute('data-mentions-style', 'true');
+        style.textContent = `
+      .mention-dropdown {
+        position: absolute; z-index: 1000; list-style: none; margin: 0; padding: 4px;
+        border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
+        box-shadow: 0 4px 10px rgba(0,0,0,.08); max-height: 180px; overflow: auto; font-size: 14px;
+      }
+      .mention-dropdown li { padding: 6px 8px; cursor: pointer; border-radius: 4px; }
+      .mention-dropdown li:hover { background: #f1f5f9; }
+      .mention { background: #eef2ff; padding: 0 3px; border-radius: 3px; }
+    `;
+        this.insertBefore(style, this.firstChild);
+    }
+    ensureMentionDropdown() {
+        if (this.dropdownEl || !this.hostEl)
+            return;
+        const dd = document.createElement('nile-dropdown');
+        dd.style.zIndex = '1000';
+        const btn = document.createElement('nile-button'); // invisible trigger
+        btn.setAttribute('slot', 'trigger');
+        btn.style.position = 'absolute';
+        btn.style.width = '1px';
+        btn.style.height = '1px';
+        btn.style.border = '0';
+        btn.style.padding = '0';
+        btn.style.opacity = '0';
+        btn.style.pointerEvents = 'none';
+        dd.appendChild(btn);
+        this.triggerBtn = btn;
+        const menu = document.createElement('nile-menu');
+        dd.appendChild(menu);
+        this.hostEl.appendChild(dd);
+        this.dropdownEl = dd;
+        this.menuEl = menu;
+    }
+    restoreSelection() {
+        if (!this.lastRange)
+            return;
+        const sel = document.getSelection();
+        if (!sel)
+            return;
+        sel.removeAllRanges();
+        sel.addRange(this.lastRange);
+    }
+    focusAndRestore() { this.editorEl?.focus(); this.restoreSelection(); }
+    getCaretClientRect() {
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return null;
+        const range = sel.getRangeAt(0).cloneRange();
+        range.collapse(false);
+        const rects = range.getClientRects();
+        if (rects && rects.length > 0)
+            return rects[0];
+        const marker = document.createElement('span');
+        marker.setAttribute('data-caret-marker', '1');
+        marker.textContent = '\u200B';
+        range.insertNode(marker);
+        const rect = marker.getBoundingClientRect();
+        const after = document.createRange();
+        after.setStartAfter(marker);
+        after.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(after);
+        marker.remove();
+        return rect || null;
+    }
+    // ---------- mentions flow ----------
+    openMention(trigger) {
+        this.saveSelection();
+        if (!this.editorEl || !this.dropdownEl || !this.hostEl)
+            return;
+        const caretRect = this.getCaretClientRect();
+        if (!caretRect)
+            return;
+        const hostRect = this.hostEl.getBoundingClientRect();
+        this.mentionX = caretRect.left - hostRect.left;
+        this.mentionY = caretRect.bottom - hostRect.top;
+        this.mentionTrigger = trigger;
+        this.mentionSuggestions = this.config[trigger] || [];
+        this.mentionQuery = '';
+        this.updateMentionFiltered();
+        this.mentionOpen = true;
+        this.renderMentionList();
+    }
+    closeMention() {
+        this.mentionOpen = false;
+        this.mentionTrigger = null;
+        this.mentionQuery = '';
+        this.mentionFiltered = [];
+        // hide dropdown
+        this.dropdownEl?.removeAttribute('open');
+    }
+    handleMention() {
+        if (!this.mentionOpen || !this.mentionTrigger)
+            return;
+        const sel = window.getSelection();
+        if (!sel || !sel.anchorNode)
+            return;
+        let node = sel.anchorNode;
+        if (node.nodeType !== Node.TEXT_NODE) {
+            const c = node.childNodes?.[sel.anchorOffset] || node.firstChild;
+            if (c?.nodeType === Node.TEXT_NODE)
+                node = c;
+        }
+        const text = (node && node.nodeType === Node.TEXT_NODE) ? (node.textContent || '') : '';
+        const idx = text.lastIndexOf(this.mentionTrigger);
+        if (idx >= 0) {
+            this.mentionQuery = text.substring(idx + 1);
+            this.updateMentionFiltered();
+            this.renderMentionList();
+        }
+        else {
+            this.closeMention();
+        }
+    }
+    updateMentionFiltered() {
+        const q = this.mentionQuery.toLowerCase();
+        this.mentionFiltered = (this.mentionSuggestions || []).filter(item => item.label.toLowerCase().startsWith(q));
+    }
+    renderMentionList() {
+        if (!this.dropdownEl || !this.menuEl)
+            return;
+        if (!this.triggerBtn)
+            return;
+        this.triggerBtn.style.position = 'absolute';
+        this.triggerBtn.style.left = `${this.mentionX}px`;
+        this.triggerBtn.style.top = `${this.mentionY}px`;
+        // clear old items
+        this.menuEl.innerHTML = '';
+        if (!this.mentionOpen || !this.mentionFiltered.length) {
+            this.dropdownEl.removeAttribute('open');
+            return;
+        }
+        // build menu items
+        for (const item of this.mentionFiltered) {
+            const mi = document.createElement('nile-menu-item');
+            mi.textContent = item.label;
+            mi.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                this.selectMention(item);
+            });
+            this.menuEl.appendChild(mi);
+        }
+        // show dropdown
+        this.dropdownEl.setAttribute('open', '');
+    }
+    selectMention(item) {
+        this.restoreSelection();
+        if (!this.lastRange || !this.mentionTrigger || !this.editorEl)
+            return;
+        let node = this.lastRange.startContainer;
+        let offset = this.lastRange.startOffset;
+        if (node.nodeType !== Node.TEXT_NODE) {
+            const child = node.childNodes[offset];
+            if (child?.nodeType === Node.TEXT_NODE) {
+                node = child;
+                offset = 0;
+            }
+            else
+                return;
+        }
+        const textNode = node;
+        const text = textNode.textContent || '';
+        const atIndex = text.lastIndexOf(this.mentionTrigger, offset);
+        if (atIndex < 0)
+            return;
+        const endIndex = atIndex + 1 + this.mentionQuery.length;
+        const mentionRange = document.createRange();
+        mentionRange.setStart(textNode, atIndex);
+        mentionRange.setEnd(textNode, endIndex);
+        mentionRange.deleteContents();
+        const span = document.createElement('span');
+        span.classList.add('mention');
+        span.textContent = `${this.mentionTrigger}${item.label}`;
+        mentionRange.insertNode(span);
+        const spaceNode = document.createTextNode('\u00A0');
+        span.after(spaceNode);
+        const sel = window.getSelection();
+        const afterRange = document.createRange();
+        afterRange.setStartAfter(spaceNode);
+        afterRange.collapse(true);
+        sel?.removeAllRanges();
+        sel?.addRange(afterRange);
+        this.lastRange = afterRange.cloneRange();
+        this.closeMention();
+        // bubble an input event so the editor updates preview/state
+        this.editorEl.dispatchEvent(new InputEvent('input', { bubbles: true }));
+    }
+};
+__decorate([
+    property({
+        attribute: 'mentions',
+        converter: {
+            fromAttribute: (value) => {
+                try {
+                    const parsed = JSON.parse(value);
+                    const out = {};
+                    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) => JSON.stringify(v),
+        }
+    })
+], NileRteMentions.prototype, "mentions", void 0);
+__decorate([
+    state()
+], NileRteMentions.prototype, "externalConfig", void 0);
+__decorate([
+    state()
+], NileRteMentions.prototype, "itemsConfig", void 0);
+NileRteMentions = __decorate([
+    customElement('nile-rte-mentions')
+], NileRteMentions);
+export { NileRteMentions };
+//# sourceMappingURL=nile-rte-mentions.js.map

package/dist/src/nile-rich-text-editor/nile-rte-mentions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-rte-mentions.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rte-mentions.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { MentionItem } from './nile-rte-mentions-item';\n\ntype MentionsConfig = Record<string, MentionItem[]>;\n\n@customElement('nile-rte-mentions')\nexport class NileRteMentions extends LitElement {\n  protected createRenderRoot() { return this; }  \n\n \n  @property({\n    attribute: 'mentions',\n    converter: {\n      fromAttribute: (value: string): MentionsConfig => {\n        try {\n          const parsed = JSON.parse(value);\n          const out: MentionsConfig = {};\n          for (const trig of Object.keys(parsed)) {\n            const arr = parsed[trig];\n            if (Array.isArray(arr)) {\n              out[trig] = arr\n                .filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')\n                .map(i => ({ key: i.key, label: i.label }));\n            }\n          }\n          return out;\n        } catch { return {}; }\n      },\n      toAttribute: (v: MentionsConfig) => JSON.stringify(v),\n    }\n  })\n  mentions: MentionsConfig = {};\n\n  /** External config from the editor (lowest priority) */\n  @state() private externalConfig: MentionsConfig = {};\n\n  /** Config gathered from child <nile-rte-mentions-item> (highest priority) */\n  @state() private itemsConfig: MentionsConfig = {};\n\n  private get config(): MentionsConfig {\n    // Priority: external < attribute < child-items\n    return { ...this.externalConfig, ...this.mentions, ...this.itemsConfig };\n  }\n\n  // wired from editor\n  private editorEl: HTMLElement | null = null;\n  private hostEl: HTMLElement | null = null;\n\n  // dropdown & menu elements we’ll create once and reuse\nprivate dropdownEl: HTMLElement | null = null;   // <nile-dropdown>\nprivate menuEl:      HTMLElement | null = null;   // <nile-menu>\n\n\n  // selection caret\n  private lastRange: Range | null = null;\n\n  // dropdown state\n  private mentionOpen = false;\n  private mentionTrigger: string | null = null;\n  private mentionQuery = '';\n  private mentionSuggestions: MentionItem[] = [];\n  private mentionFiltered: MentionItem[] = [];\n  private mentionX = 0;\n  private mentionY = 0;\nprivate triggerBtn: HTMLElement | null = null;\n\n \n\n  // Observe child items & their attributes\n  private mo: MutationObserver | null = null;\n\n  // Public API used by <nile-rich-text-editor>\n  attach(editorEl: HTMLElement, hostEl: HTMLElement) {\n    this.editorEl = editorEl;\n    this.hostEl = hostEl;\n\n    this.injectStyles();\n    this.ensureMentionDropdown();\n    this.rebuildConfigFromChildren();\n\n    // Watch for <nile-rte-mentions-item> add/remove/attr changes\n    this.mo = new MutationObserver(() => this.rebuildConfigFromChildren());\n    this.mo.observe(this, { childList: true, subtree: true, attributes: true });\n\n    // listeners on editor\n    this.editorEl.addEventListener('input', this.onEditorInput);\n    this.editorEl.addEventListener('mouseup', this.saveSelection);\n    this.editorEl.addEventListener('keyup', this.onEditorKeyUp);\n    this.editorEl.addEventListener('keydown', this.onEditorKeyDown);\n    this.editorEl.addEventListener('scroll', this.repositionMention);\n\n    // keep range fresh\n    document.addEventListener('selectionchange', this.onSelectionChange, true);\n  }\n\n  detach() {\n    if (this.mo) { this.mo.disconnect(); this.mo = null; }\n    if (this.editorEl) {\n      this.editorEl.removeEventListener('input', this.onEditorInput);\n      this.editorEl.removeEventListener('mouseup', this.saveSelection);\n      this.editorEl.removeEventListener('keyup', this.onEditorKeyUp);\n      this.editorEl.removeEventListener('keydown', this.onEditorKeyDown);\n      this.editorEl.removeEventListener('scroll', this.repositionMention);\n    }\n    document.removeEventListener('selectionchange', this.onSelectionChange, true);\n  }\n\n  setExternalConfig(cfg: MentionsConfig) {\n    this.externalConfig = cfg || {};\n  }\n\n  disconnectedCallback(): void {\n    this.detach();\n    super.disconnectedCallback();\n  }\n\n  // ---------- gather child items ----------\n  private rebuildConfigFromChildren() {\n    const cfg: MentionsConfig = {};\n    const items = Array.from(this.querySelectorAll('nile-rte-mentions-item')) as Array<\n      HTMLElement & { mentionsCharacter?: string; mentionsData?: MentionItem[] }\n    >;\n\n    for (const item of items) {\n      // read live properties first (if Lit already upgraded), else read attributes\n      const trig =\n        (item as any).mentionsCharacter ??\n        item.getAttribute('mentionscharacter') ??\n        '';\n\n      if (!trig || typeof trig !== 'string') continue;\n\n      let data: MentionItem[] | null =\n        (item as any).mentionsData ??\n        (() => {\n          const raw = item.getAttribute('mentionsdata');\n          if (!raw) return null;\n          try {\n            const parsed = JSON.parse(raw);\n            return Array.isArray(parsed)\n              ? parsed.filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')\n              : [];\n          } catch { return []; }\n        })();\n\n      if (!Array.isArray(data)) data = [];\n      cfg[trig] = data;\n    }\n    this.itemsConfig = cfg;\n  }\n\n  // ---------- styles ----------\n  private injectStyles() {\n    if (this.querySelector('style[data-mentions-style]')) return;\n    const style = document.createElement('style');\n    style.setAttribute('data-mentions-style', 'true');\n    style.textContent = `\n      .mention-dropdown {\n        position: absolute; z-index: 1000; list-style: none; margin: 0; padding: 4px;\n        border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;\n        box-shadow: 0 4px 10px rgba(0,0,0,.08); max-height: 180px; overflow: auto; font-size: 14px;\n      }\n      .mention-dropdown li { padding: 6px 8px; cursor: pointer; border-radius: 4px; }\n      .mention-dropdown li:hover { background: #f1f5f9; }\n      .mention { background: #eef2ff; padding: 0 3px; border-radius: 3px; }\n    `;\n    this.insertBefore(style, this.firstChild);\n  }\n\n \nprivate ensureMentionDropdown() {\n  if (this.dropdownEl || !this.hostEl) return;\n\n  const dd  = document.createElement('nile-dropdown');\n  dd.style.zIndex   = '1000';\n\n  const btn = document.createElement('nile-button'); // invisible trigger\n  btn.setAttribute('slot', 'trigger');\n   btn.style.position       = 'absolute';  \n   btn.style.width          = '1px';\n   btn.style.height         = '1px';\n   btn.style.border         = '0';\n   btn.style.padding        = '0';\n   btn.style.opacity        = '0';        \n   btn.style.pointerEvents  = 'none'; \n  dd.appendChild(btn);\n  this.triggerBtn = btn; \n  const menu = document.createElement('nile-menu');\n  dd.appendChild(menu);\n\n  this.hostEl.appendChild(dd);\n  this.dropdownEl = dd;\n  this.menuEl     = menu;\n}\n\n  // ---------- selection helpers ----------\n  private onSelectionChange = () => {\n    if (!this.editorEl) return;\n    const sel = document.getSelection();\n    if (!sel || sel.rangeCount === 0) return;\n    const range = sel.getRangeAt(0);\n    if (this.editorEl.contains(range.commonAncestorContainer)) {\n      this.lastRange = range.cloneRange();\n    }\n  };\n  private saveSelection = () => {\n    const sel = window.getSelection();\n    if (sel && sel.rangeCount) this.lastRange = sel.getRangeAt(0).cloneRange();\n  };\n  private restoreSelection() {\n    if (!this.lastRange) return;\n    const sel = document.getSelection(); if (!sel) return;\n    sel.removeAllRanges(); sel.addRange(this.lastRange);\n  }\n  private focusAndRestore() { this.editorEl?.focus(); this.restoreSelection(); }\n\n  private getCaretClientRect(): DOMRect | null {\n    const sel = document.getSelection();\n    if (!sel || sel.rangeCount === 0) return null;\n\n    const range = sel.getRangeAt(0).cloneRange();\n    range.collapse(false);\n\n    const rects = range.getClientRects();\n    if (rects && rects.length > 0) return rects[0];\n\n    const marker = document.createElement('span');\n    marker.setAttribute('data-caret-marker', '1');\n    marker.textContent = '\\u200B';\n    range.insertNode(marker);\n\n    const rect = marker.getBoundingClientRect();\n\n    const after = document.createRange();\n    after.setStartAfter(marker);\n    after.collapse(true);\n    sel.removeAllRanges();\n    sel.addRange(after);\n    marker.remove();\n\n    return rect || null;\n  }\n\n  // ---------- editor events ----------\n  private onEditorInput = () => {\n    if (this.mentionOpen) this.handleMention();\n  };\n\n  private onEditorKeyUp = (e: KeyboardEvent) => {\n    this.saveSelection();\n    const key = e.key;\n    const cfg = this.config;\n    if (!this.mentionOpen && key && cfg[key]) {\n      this.openMention(key);\n      return;\n    }\n    if (this.mentionOpen) this.handleMention();\n  };\n\n  private onEditorKeyDown = (e: KeyboardEvent) => {\n    if (!this.mentionOpen) return;\n    const key = e.key;\n    if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter') {\n      e.preventDefault();\n      if (key === 'Enter' && this.mentionFiltered.length) {\n        this.selectMention(this.mentionFiltered[0]);\n      }\n    } else if (key === 'Escape') {\n      e.preventDefault();\n      this.closeMention();\n    }\n  };\n\n  // ---------- mentions flow ----------\n  private openMention(trigger: string) {\n    this.saveSelection();\n    if (!this.editorEl || !this.dropdownEl || !this.hostEl) return;\n\n    const caretRect = this.getCaretClientRect();\n    if (!caretRect) return;\n\n    const hostRect = this.hostEl.getBoundingClientRect();\n\n    this.mentionX = caretRect.left - hostRect.left;\n    this.mentionY = caretRect.bottom - hostRect.top;\n\n    this.mentionTrigger     = trigger;\n    this.mentionSuggestions = this.config[trigger] || [];\n    this.mentionQuery       = '';\n    this.updateMentionFiltered();\n\n    this.mentionOpen = true;\n    this.renderMentionList();\n  }\n\n  private closeMention() {\n     this.mentionOpen = false;\n     this.mentionTrigger  = null;\n     this.mentionQuery    = '';\n     this.mentionFiltered = [];\n     // hide dropdown\n      this.dropdownEl?.removeAttribute('open');\n  }\n\n  private handleMention() {\n    if (!this.mentionOpen || !this.mentionTrigger) return;\n    const sel = window.getSelection(); if (!sel || !sel.anchorNode) return;\n\n    let node: Node | null = sel.anchorNode;\n    if (node.nodeType !== Node.TEXT_NODE) {\n      const c = (node as HTMLElement).childNodes?.[sel.anchorOffset] || node.firstChild;\n      if (c?.nodeType === Node.TEXT_NODE) node = c;\n    }\n    const text = (node && node.nodeType === Node.TEXT_NODE) ? (node.textContent || '') : '';\n    const idx = text.lastIndexOf(this.mentionTrigger);\n    if (idx >= 0) {\n      this.mentionQuery = text.substring(idx + 1);\n      this.updateMentionFiltered();\n      this.renderMentionList();\n    } else {\n      this.closeMention();\n    }\n  }\n\n  private updateMentionFiltered() {\n    const q = this.mentionQuery.toLowerCase();\n    this.mentionFiltered = (this.mentionSuggestions || []).filter(item =>\n      item.label.toLowerCase().startsWith(q)\n    );\n  }\n\n  private renderMentionList() {\n    if (!this.dropdownEl || !this.menuEl) return;\n  \n    if (!this.triggerBtn) return;\n    this.triggerBtn.style.position = 'absolute';\n    this.triggerBtn.style.left  = `${this.mentionX}px`;\n    this.triggerBtn.style.top   = `${this.mentionY}px`;\n    \n  \n    // clear old items\n    this.menuEl.innerHTML = '';\n  \n    if (!this.mentionOpen || !this.mentionFiltered.length) {\n      this.dropdownEl.removeAttribute('open');\n      return;\n    }\n  \n    // build menu items\n    for (const item of this.mentionFiltered) {\n      const mi = document.createElement('nile-menu-item');\n      mi.textContent = item.label;\n      mi.addEventListener('mousedown', (e) => {\n        e.preventDefault();\n        this.selectMention(item);\n      });\n      this.menuEl.appendChild(mi);\n    }\n  \n    // show dropdown\n    this.dropdownEl.setAttribute('open', '');\n  }\n  \n\n  private repositionMention = () => {\n    if (!this.mentionOpen   || !this.hostEl || !this.triggerBtn) return;\n\n    const caretRect = this.getCaretClientRect();\n    if (!caretRect) return;\n\n    const hostRect = this.hostEl.getBoundingClientRect();\n\n    this.mentionX = caretRect.left - hostRect.left;\n    this.mentionY = caretRect.bottom - hostRect.top;\n\n    this.triggerBtn.style.left = `${this.mentionX}px`;\n    this.triggerBtn.style.top  = `${this.mentionY}px`;\n  };\n\n  private selectMention(item: MentionItem) {\n    this.restoreSelection(); if (!this.lastRange || !this.mentionTrigger || !this.editorEl) return;\n\n    let node: Node = this.lastRange.startContainer;\n    let offset = this.lastRange.startOffset;\n    if (node.nodeType !== Node.TEXT_NODE) {\n      const child = node.childNodes[offset];\n      if (child?.nodeType === Node.TEXT_NODE) { node = child; offset = 0; } else return;\n    }\n    const textNode = node as Text;\n    const text = textNode.textContent || '';\n    const atIndex = text.lastIndexOf(this.mentionTrigger, offset);\n    if (atIndex < 0) return;\n\n    const endIndex = atIndex + 1 + this.mentionQuery.length;\n    const mentionRange = document.createRange();\n    mentionRange.setStart(textNode, atIndex);\n    mentionRange.setEnd(textNode, endIndex);\n    mentionRange.deleteContents();\n\n    const span = document.createElement('span');\n    span.classList.add('mention');\n    span.textContent = `${this.mentionTrigger}${item.label}`;\n    mentionRange.insertNode(span);\n\n    const spaceNode = document.createTextNode('\\u00A0');\n    span.after(spaceNode);\n\n    const sel = window.getSelection();\n    const afterRange = document.createRange();\n    afterRange.setStartAfter(spaceNode); afterRange.collapse(true);\n    sel?.removeAllRanges(); sel?.addRange(afterRange);\n    this.lastRange = afterRange.cloneRange();\n\n    this.closeMention();\n\n    // bubble an input event so the editor updates preview/state\n    this.editorEl.dispatchEvent(new InputEvent('input', { bubbles: true }));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-rte-mentions': NileRteMentions;\n  }\n}\n"]}

package/dist/src/nile-rich-text-editor/nile-rte-preview.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export declare class NileRtePreview extends LitElement {
+    protected createRenderRoot(): this;
+    protected shouldUpdate(): boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-rte-preview': NileRtePreview;
+    }
+}

package/dist/src/nile-rich-text-editor/nile-rte-preview.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let NileRtePreview = class NileRtePreview extends LitElement {
+    createRenderRoot() { return this; }
+    shouldUpdate() { return false; }
+};
+NileRtePreview = __decorate([
+    customElement('nile-rte-preview')
+], NileRtePreview);
+export { NileRtePreview };
+//# sourceMappingURL=nile-rte-preview.js.map

package/dist/src/nile-rich-text-editor/nile-rte-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-rte-preview.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rte-preview.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAClC,gBAAgB,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC;IACnC,YAAY,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;CAC3C,CAAA;AAHY,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAG1B","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('nile-rte-preview')\nexport class NileRtePreview extends LitElement {\n  protected createRenderRoot() { return this; }\n  protected shouldUpdate() { return false; }\n}\ndeclare global { interface HTMLElementTagNameMap { 'nile-rte-preview': NileRtePreview; } }\n"]}

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

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export declare class NileRteSelect extends LitElement {
+    protected createRenderRoot(): this;
+    /** 'heading' | 'font' | 'align' */
+    type: string;
+    /** JSON: [{ value, label?, icon? }, ...] */
+    options: string;
+    /** Fallback label for trigger (e.g., "Align") */
+    label: string;
+    private selectedValue;
+    private mapAlignIcon;
+    private get parsedOptions();
+    private ensureDefault;
+    private onSelect;
+    connectedCallback(): void;
+    private injectLocalStyles;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-rte-select': NileRteSelect;
+    }
+}

package/dist/src/nile-rich-text-editor/nile-rte-select.js

@@ -0,0 +1,144 @@
+import { __decorate } from "tslib";
+// nile-rte-select.ts
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let NileRteSelect = class NileRteSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** 'heading' | 'font' | 'align' */
+        this.type = '';
+        /** JSON: [{ value, label?, icon? }, ...] */
+        this.options = '[]';
+        /** Fallback label for trigger (e.g., "Align") */
+        this.label = '';
+        this.selectedValue = '';
+    }
+    createRenderRoot() { return this; }
+    mapAlignIcon(v) {
+        const map = {
+            left: 'align-left',
+            center: 'align-center',
+            right: 'align-right',
+            justify: 'align-justify'
+        };
+        return map[v] || 'align-left';
+    }
+    get parsedOptions() {
+        try {
+            const raw = JSON.parse(this.options);
+            return raw.map((o) => {
+                const value = o.value ?? o;
+                const label = o.label ?? o.value ?? o;
+                const icon = o.icon ?? (this.type === 'align' ? this.mapAlignIcon(String(value)) : undefined);
+                return { value, label, icon };
+            });
+        }
+        catch {
+            return [];
+        }
+    }
+    ensureDefault() {
+        if (!this.selectedValue) {
+            const first = this.parsedOptions[0];
+            if (first)
+                this.selectedValue = first.value;
+        }
+    }
+    onSelect(value) {
+        this.selectedValue = value;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: value, bubbles: true, composed: true
+        }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.injectLocalStyles();
+    }
+    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-bottom: 1px;
+    }
+
+    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;
+    }
+ 
+    `;
+        this.insertBefore(style, this.firstChild);
+    }
+    render() {
+        const opts = this.parsedOptions;
+        this.ensureDefault();
+        const current = opts.find(o => o.value === this.selectedValue);
+        if (this.type === 'align') {
+            // ► Align: separate dropdown instance + icon-only items + icon trigger
+            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-icon name="${o.icon}"></nile-icon>
+              </nile-menu-item>
+            `)}
+          </nile-menu>
+        </nile-dropdown>
+      `;
+        }
+        // ► Everything else: default (text) dropdown
+        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-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>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileRteSelect.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NileRteSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], NileRteSelect.prototype, "label", void 0);
+__decorate([
+    state()
+], NileRteSelect.prototype, "selectedValue", void 0);
+NileRteSelect = __decorate([
+    customElement('nile-rte-select')
+], NileRteSelect);
+export { NileRteSelect };
+//# sourceMappingURL=nile-rte-select.js.map