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

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

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

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

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

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