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

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

@@ -0,0 +1,28 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let NileRteColor = class NileRteColor extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** 'foreColor' (reserved for future: 'backColor') */
+        this.type = 'foreColor';
+        this.label = 'Text Color';
+        this.value = '#000000';
+    }
+    createRenderRoot() { return this; }
+    shouldUpdate() { return false; }
+};
+__decorate([
+    property({ type: String })
+], NileRteColor.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NileRteColor.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], NileRteColor.prototype, "value", void 0);
+NileRteColor = __decorate([
+    customElement('nile-rte-color')
+], NileRteColor);
+export { NileRteColor };
+//# sourceMappingURL=nile-rte-color.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-rte-color.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rte-color.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAIL,qDAAqD;QACzB,SAAI,GAAG,WAAW,CAAC;QACnB,UAAK,GAAG,YAAY,CAAC;QACrB,UAAK,GAAG,SAAS,CAAC;IAChD,CAAC;IAPW,gBAAgB,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC;IACnC,YAAY,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;CAM3C,CAAA;AAH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAPnC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAQxB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('nile-rte-color')\nexport class NileRteColor extends LitElement {\n  protected createRenderRoot() { return this; }\n  protected shouldUpdate() { return false; }\n\n  /** 'foreColor' (reserved for future: 'backColor') */\n  @property({ type: String }) type = 'foreColor';\n  @property({ type: String }) label = 'Text Color';\n  @property({ type: String }) value = '#000000';\n}\ndeclare global { interface HTMLElementTagNameMap { 'nile-rte-color': NileRteColor; } }\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-rte-divider.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rte-divider.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-divider')\nexport class NileRteDivider extends LitElement {\n  protected createRenderRoot() { return this; }\n  protected shouldUpdate() { return false; }\n}\ndeclare global { interface HTMLElementTagNameMap { 'nile-rte-divider': NileRteDivider; } }\n"]}

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export type MentionItem = {
+    key: string;
+    label: string;
+};
+export declare class NileRteMentionsItem extends LitElement {
+    protected createRenderRoot(): this;
+    /** Single-character trigger, e.g., '@' or '#' */
+    mentionsCharacter: string;
+    mentionsColor: string;
+    /** JSON array of { key, label } */
+    mentionsData: MentionItem[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-rte-mentions-item': NileRteMentionsItem;
+    }
+}

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

@@ -0,0 +1,47 @@
+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
+        /** JSON array of { key, label } */
+        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: '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;QAElC,mCAAmC;QAgBnC,iBAAY,GAAkB,EAAE,CAAC;IACnC,CAAC;IA3BW,gBAAgB,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY;CA2B3D,CAAA;AAvBC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;8DACd;AAI/B;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;0DACd;AAkB3B;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;AA3BtB,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA4B/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  /** JSON array of { key, label } */\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,57 @@
+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;
+    mentions: MentionsConfig;
+    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 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,437 @@
+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 = {};
+        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.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' || 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 colors = {}; // NEW
+        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') ??
+                '';
+            if (!Array.isArray(data))
+                data = [];
+            cfg[trig] = data;
+            if (color)
+                colors[trig] = String(color); // record color if provided
+        }
+        this.itemsConfig = cfg;
+        this.itemsColors = colors; // NEW
+    }
+    // ---------- 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);
+    }
+    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');
+        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}`;
+        const bg = this.getTriggerColor(this.mentionTrigger);
+        if (bg) {
+            span.style.backgroundColor = bg;
+            // Optional: if you prefer colored text instead of bg
+            // span.style.color = 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 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([
+    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, "itemsColors", void 0);
+NileRteMentions = __decorate([
+    customElement('nile-rte-mentions')
+], NileRteMentions);
+export { NileRteMentions };
+//# sourceMappingURL=nile-rte-mentions.js.map