@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

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

@@ -0,0 +1,54 @@
+import { __decorate } from "tslib";
+// nile-rte-mentions-item.ts
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let NileRteMentionsItem = class NileRteMentionsItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Single-character trigger, e.g., '@' or '#' */
+        this.mentionsCharacter = '';
+        this.mentionsColor = ''; // NEW
+        this.mentionsPrefix = '';
+        this.mentionsSuffix = '';
+        this.mentionsData = [];
+    }
+    createRenderRoot() { return this; } // Light DOM
+};
+__decorate([
+    property({ attribute: 'mentionscharacter' })
+], NileRteMentionsItem.prototype, "mentionsCharacter", void 0);
+__decorate([
+    property({ attribute: 'mentionscolor' })
+], NileRteMentionsItem.prototype, "mentionsColor", void 0);
+__decorate([
+    property({ attribute: 'mentionsprefix' })
+], NileRteMentionsItem.prototype, "mentionsPrefix", void 0);
+__decorate([
+    property({ attribute: 'mentionssuffix' })
+], NileRteMentionsItem.prototype, "mentionsSuffix", void 0);
+__decorate([
+    property({
+        attribute: 'mentionsdata',
+        converter: {
+            fromAttribute: (value) => {
+                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) => JSON.stringify(v ?? []),
+        }
+    })
+], NileRteMentionsItem.prototype, "mentionsData", void 0);
+NileRteMentionsItem = __decorate([
+    customElement('nile-rte-mentions-item')
+], NileRteMentionsItem);
+export { NileRteMentionsItem };
+//# sourceMappingURL=nile-rte-mentions-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-rte-mentions-item.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rte-mentions-item.ts"],"names":[],"mappings":";AAAA,4BAA4B;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKrD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAGL,iDAAiD;QAEjD,sBAAiB,GAAW,EAAE,CAAC;QAI/B,kBAAa,GAAW,EAAE,CAAC,CAAC,MAAM;QAGQ,mBAAc,GAAW,EAAE,CAAC;QAC5B,mBAAc,GAAW,EAAE,CAAC;QAkBtE,iBAAY,GAAkB,EAAE,CAAC;IACnC,CAAC;IA/BW,gBAAgB,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY;CA+B3D,CAAA;AA3BC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;8DACd;AAI/B;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;0DACd;AAGe;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;2DAA8B;AAC5B;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;2DAA8B;AAkBtE;IAfC,QAAQ,CAAC;QACR,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE;YACT,aAAa,EAAE,CAAC,KAAoB,EAAiB,EAAE;gBACrD,IAAI,CAAC,KAAK;oBAAE,OAAO,EAAE,CAAC;gBACtB,IAAI,CAAC;oBACH,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBACjC,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;wBAC1B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC;wBACnF,CAAC,CAAC,EAAE,CAAC;gBACT,CAAC;gBAAC,MAAM,CAAC;oBAAC,OAAO,EAAE,CAAC;gBAAC,CAAC;YACxB,CAAC;YACD,WAAW,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC;SAC3D;KACF,CAAC;yDAC+B;AA/BtB,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAgC/B","sourcesContent":["// nile-rte-mentions-item.ts\nimport { LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport type MentionItem = { key: string; label: string };\n\n@customElement('nile-rte-mentions-item')\nexport class NileRteMentionsItem extends LitElement {\n  protected createRenderRoot() { return this; } // Light DOM\n\n  /** Single-character trigger, e.g., '@' or '#' */\n  @property({ attribute: 'mentionscharacter' })\n  mentionsCharacter: string = '';\n\n \n  @property({ attribute: 'mentionscolor' })\n  mentionsColor: string = ''; // NEW\n \n\n@property({ attribute: 'mentionsprefix' })  mentionsPrefix: string = '';\n@property({ attribute: 'mentionssuffix' })  mentionsSuffix: string = '';\n\n\n  @property({\n    attribute: 'mentionsdata',\n    converter: {\n      fromAttribute: (value: string | null): MentionItem[] => {\n        if (!value) return [];\n        try {\n          const parsed = JSON.parse(value);\n          return Array.isArray(parsed)\n            ? parsed.filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')\n            : [];\n        } catch { return []; }\n      },\n      toAttribute: (v: MentionItem[]) => JSON.stringify(v ?? []),\n    }\n  })\n  mentionsData: MentionItem[] = [];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-rte-mentions-item': NileRteMentionsItem;\n  }\n}\n"]}

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

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+import type { MentionItem } from './nile-rte-mentions-item';
+type MentionsConfig = Record<string, MentionItem[]>;
+export declare class NileRteMentions extends LitElement {
+    protected createRenderRoot(): this;
+    displayFormat: boolean;
+    mentions: MentionsConfig;
+    mentionFormat: Record<string, {
+        prefix?: string;
+        suffix?: string;
+    }>;
+    private itemsFormats;
+    private getTriggerFormat;
+    private formatLabel;
+    mentionColors: Record<string, string>;
+    /** External config from the editor (lowest priority) */
+    private externalConfig;
+    /** Config gathered from child <nile-rte-mentions-item> (highest priority) */
+    private itemsConfig;
+    private mentionActiveIndex;
+    private itemsColors;
+    private get config();
+    private editorEl;
+    private hostEl;
+    private dropdownEl;
+    private menuEl;
+    private lastRange;
+    private mentionOpen;
+    private mentionTrigger;
+    private mentionQuery;
+    private mentionSuggestions;
+    private mentionFiltered;
+    private mentionX;
+    private mentionY;
+    private triggerBtn;
+    private mo;
+    attach(editorEl: HTMLElement, hostEl: HTMLElement): void;
+    detach(): void;
+    setExternalConfig(cfg: MentionsConfig): void;
+    disconnectedCallback(): void;
+    private rebuildConfigFromChildren;
+    private injectStyles;
+    private getTriggerColor;
+    private ensureMentionDropdown;
+    private onSelectionChange;
+    private saveSelection;
+    private restoreSelection;
+    private focusAndRestore;
+    private getCaretClientRect;
+    private onEditorInput;
+    private onEditorKeyUp;
+    private onEditorKeyDown;
+    private openMention;
+    private closeMention;
+    private handleMention;
+    private updateMentionFiltered;
+    private renderMentionList;
+    private repositionMention;
+    private selectMention;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-rte-mentions': NileRteMentions;
+    }
+}
+export {};

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

@@ -0,0 +1,552 @@
+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.displayFormat = false;
+        this.mentions = {};
+        // nile-rte-mentions.ts (inside class)
+        this.mentionFormat = {};
+        this.itemsFormats = {};
+        this.mentionColors = {}; // NEW
+        /** External config from the editor (lowest priority) */
+        this.externalConfig = {};
+        /** Config gathered from child <nile-rte-mentions-item> (highest priority) */
+        this.itemsConfig = {};
+        this.mentionActiveIndex = -1;
+        this.itemsColors = {}; // NEW
+        // wired from editor
+        this.editorEl = null;
+        this.hostEl = null;
+        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') {
+                e.preventDefault();
+                if (!this.mentionFiltered.length)
+                    return;
+                if (key === 'ArrowDown') {
+                    this.mentionActiveIndex = (this.mentionActiveIndex + 1) % this.mentionFiltered.length;
+                }
+                else {
+                    this.mentionActiveIndex =
+                        (this.mentionActiveIndex - 1 + this.mentionFiltered.length) % this.mentionFiltered.length;
+                }
+                this.renderMentionList();
+            }
+            else if (key === 'Enter') {
+                if (this.mentionActiveIndex >= 0 && this.mentionFiltered[this.mentionActiveIndex]) {
+                    e.preventDefault();
+                    this.selectMention(this.mentionFiltered[this.mentionActiveIndex]);
+                }
+            }
+            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; }
+    getTriggerFormat(trigger) {
+        const fromItems = this.itemsFormats[trigger] || {};
+        const fromAttr = this.mentionFormat[trigger] || {};
+        return {
+            prefix: (fromItems.prefix ?? fromAttr.prefix ?? ''),
+            suffix: (fromItems.suffix ?? fromAttr.suffix ?? ''),
+        };
+    }
+    formatLabel(trigger, rawLabel) {
+        const { prefix, suffix } = this.getTriggerFormat(trigger);
+        return `${prefix ?? ''}${rawLabel}${suffix ?? ''}`;
+    }
+    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 colors = {};
+        const formats = {};
+        const items = Array.from(this.querySelectorAll('nile-rte-mentions-item'));
+        for (const item of items) {
+            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 [];
+                    }
+                })();
+            const color = item.mentionsColor ??
+                item.getAttribute('mentionscolor') ??
+                '';
+            const prefix = item.mentionsPrefix ??
+                item.getAttribute('mentionsprefix') ?? '';
+            const suffix = item.mentionsSuffix ??
+                item.getAttribute('mentionssuffix') ?? '';
+            if (!Array.isArray(data))
+                data = [];
+            cfg[trig] = data;
+            if (color)
+                colors[trig] = String(color);
+            if (prefix || suffix)
+                formats[trig] = { prefix, suffix };
+        }
+        this.itemsConfig = cfg;
+        this.itemsColors = colors;
+        this.itemsFormats = formats;
+    }
+    // ---------- 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; }
+   nile-menu.mentions-menu::part(menu__items-wrapper){
+   max-height: 260px;
+   overflow-y: auto;
+   }
+   .mentions-menu nile-menu-item.active {
+  background: #dbeafe;   /* highlight */
+  outline: none;
+}
+
+
+    `;
+        this.insertBefore(style, this.firstChild);
+    }
+    getTriggerColor(trigger) {
+        // Priority: child item color > attribute JSON color
+        return this.itemsColors[trigger] ?? this.mentionColors[trigger];
+    }
+    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');
+        menu.classList.add('mentions-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;
+    }
+    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.mentionActiveIndex = this.mentionFiltered.length ? 0 : -1; // ✅ first item active
+        this.mentionOpen = true;
+        this.renderMentionList();
+        this.dispatchEvent(new CustomEvent('mention-opened', {
+            detail: { trigger, suggestions: this.mentionSuggestions },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    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.left = `${this.mentionX}px`;
+        this.triggerBtn.style.top = `${this.mentionY}px`;
+        this.menuEl.innerHTML = '';
+        if (!this.mentionOpen || !this.mentionFiltered.length) {
+            this.dropdownEl.removeAttribute('open');
+            return;
+        }
+        this.mentionFiltered.forEach((item, idx) => {
+            const mi = document.createElement('nile-menu-item');
+            mi.textContent = item.label;
+            // accessibility
+            mi.setAttribute('role', 'option');
+            if (idx === this.mentionActiveIndex) {
+                mi.classList.add('active');
+                mi.setAttribute('aria-selected', 'true');
+            }
+            else {
+                mi.classList.remove('active');
+                mi.removeAttribute('aria-selected');
+            }
+            // mouse hover updates active index
+            mi.addEventListener('mouseenter', () => {
+                this.mentionActiveIndex = idx;
+                this.renderMentionList();
+            });
+            mi.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                this.selectMention(item);
+            });
+            this.menuEl?.appendChild(mi);
+        });
+        this.dropdownEl.setAttribute('open', '');
+    }
+    selectMention(item) {
+        this.restoreSelection();
+        if (!this.lastRange || !this.mentionTrigger || !this.editorEl)
+            return;
+        const trigger = this.mentionTrigger;
+        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');
+        const fmt = this.getTriggerFormat(this.mentionTrigger);
+        if (this.displayFormat) {
+            span.textContent = `${fmt.prefix ?? ''}${item.label}${fmt.suffix ?? ''}`;
+        }
+        else {
+            span.textContent = `${this.mentionTrigger}${item.label}`;
+            if (fmt.prefix)
+                span.setAttribute('data-mention-prefix', fmt.prefix);
+            if (fmt.suffix)
+                span.setAttribute('data-mention-suffix', fmt.suffix);
+        }
+        span.setAttribute('data-mention-key', item.key);
+        span.setAttribute('data-mention-label', item.label);
+        span.setAttribute('data-mention-trigger', this.mentionTrigger);
+        // apply color if configured
+        const bg = this.getTriggerColor(this.mentionTrigger);
+        if (bg)
+            span.style.backgroundColor = bg;
+        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 selection with prefix/suffix included
+        this.dispatchEvent(new CustomEvent('mention-selected', {
+            detail: {
+                trigger,
+                key: item.key,
+                label: item.label,
+                prefix: fmt.prefix ?? '',
+                suffix: fmt.suffix ?? ''
+            },
+            bubbles: true,
+            composed: true
+        }));
+        // bubble normal input for editor sync
+        this.editorEl.dispatchEvent(new InputEvent('input', { bubbles: true }));
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'displayformat' })
+], NileRteMentions.prototype, "displayFormat", void 0);
+__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([
+    property({
+        attribute: 'mentionformat',
+        converter: {
+            fromAttribute: (v) => {
+                try {
+                    const o = JSON.parse(v);
+                    return (o && typeof o === 'object') ? o : {};
+                }
+                catch {
+                    return {};
+                }
+            },
+            toAttribute: (v) => JSON.stringify(v ?? {}),
+        }
+    })
+], NileRteMentions.prototype, "mentionFormat", void 0);
+__decorate([
+    state()
+], NileRteMentions.prototype, "itemsFormats", void 0);
+__decorate([
+    property({
+        attribute: 'mentioncolors',
+        converter: {
+            fromAttribute: (value) => {
+                try {
+                    const o = JSON.parse(value);
+                    return (o && typeof o === 'object') ? o : {};
+                }
+                catch {
+                    return {};
+                }
+            },
+            toAttribute: (v) => JSON.stringify(v ?? {})
+        }
+    })
+], NileRteMentions.prototype, "mentionColors", void 0);
+__decorate([
+    state()
+], NileRteMentions.prototype, "externalConfig", void 0);
+__decorate([
+    state()
+], NileRteMentions.prototype, "itemsConfig", void 0);
+__decorate([
+    state()
+], NileRteMentions.prototype, "mentionActiveIndex", void 0);
+__decorate([
+    state()
+], NileRteMentions.prototype, "itemsColors", void 0);
+NileRteMentions = __decorate([
+    customElement('nile-rte-mentions')
+], NileRteMentions);
+export { NileRteMentions };
+//# sourceMappingURL=nile-rte-mentions.js.map