import { __decorate } from "tslib";
import { LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import './nile-rte-toolbar';
import './nile-rte-toolbar-item';
import './nile-rte-select';
import './nile-rte-color';
import './nile-rte-divider';
import './nile-rte-preview';
import './nile-rte-mentions';
import './nile-rte-link';
import { closestBlock, nearestElement, rgbToHex, toggleInlineTag, setBlockTag, setAlignment, setFontFamily, setForeColor, setBackColor, toggleList, } from './utils/index';
import { styles } from './nile-rich-text-editor.css';
const DEFAULT_ICONS = {
    bold: 'format_bold',
    italic: 'format_italic',
    underline: 'format_underline',
    link: 'link_2',
    left: 'format_align_left',
    center: 'format_align_middle',
    right: 'format_align_right',
    justify: 'format_align_justify',
    ul: 'format_list_bulleted',
    ol: 'format_list_numbered',
    clear: 'format_clear'
};
const DEFAULT_IMPORTANT_PROPS = [
    'font-weight',
    'font-style',
    'text-decoration',
    'color',
    'background-color',
    'font-size',
    'font-family',
    'text-align',
    'line-height',
    'letter-spacing',
    'white-space',
    'vertical-align',
    'list-style-position',
    'padding-inline-start',
];
let NileRichTextEditor = class NileRichTextEditor extends LitElement {
    constructor() {
        super(...arguments);
        this.value = '';
        this.noStyles = false;
        this.disabled = false;
        this.singleLineEditor = false;
        this.placeholder = '';
        this.mentions = {};
        this.whitelist = [];
        this.content = '';
        this.previewEl = null;
        this.toolbarEl = null;
        this.lastRange = null;
        this.buttonMap = new Map();
        this.headingSelect = null;
        this.fontSelect = null;
        this.colorInput = null;
        this.bgColorInput = null;
        this.colorSwatchEl = null;
        this.bgSwatchEl = null;
        this.containerEl = null;
        this.linkEl = null;
        this.mentionsEl = null;
        this.onEditorClick = (e) => {
            if (this.disabled) {
                e.preventDefault();
                return;
            }
            const anchor = e.target.closest?.('a');
            if (anchor)
                e.preventDefault();
        };
        this.onEditorPaste = (e) => {
            if (this.disabled)
                e.preventDefault();
        };
        this.onEditorDrop = (e) => {
            if (this.disabled)
                e.preventDefault();
        };
        this.onEditorInput = () => {
            if (this.disabled)
                return;
            this.ensureAtLeastOneParagraph();
            this.scrubBrokenMentions();
            this.updateContent();
            this.updateToolbarState();
        };
        this.onEditorMouseup = () => {
            this.saveSelection();
            this.updateToolbarState();
        };
        this.onEditorKeyup = (e) => {
            this.saveSelection();
            if ([
                'ArrowLeft',
                'ArrowRight',
                'ArrowUp',
                'ArrowDown',
                'Home',
                'End',
            ].includes(e.key)) {
                this.updateToolbarState();
            }
        };
        this.onEditorKeydown = (e) => {
            if (this.disabled) {
                e.preventDefault();
                return;
            }
            if (this.singleLineEditor && e.key === 'Enter' && e.shiftKey) {
                e.preventDefault();
                return;
            }
            if (e.ctrlKey && e.key.toLowerCase() === 'i') {
                e.preventDefault();
                toggleInlineTag(this.editorEl, 'em');
                this.updateContent();
                this.updateToolbarState();
            }
            if (this.singleLineEditor && e.key === 'Enter') {
                e.preventDefault();
                return;
            }
            if (e.key !== 'Tab')
                return;
            e.preventDefault();
            this.focusAndRestore();
            const sel = window.getSelection();
            if (!sel || sel.rangeCount === 0)
                return;
            const range = sel.getRangeAt(0);
            if (e.shiftKey) {
                if (range.collapsed && range.startContainer.nodeType === Node.TEXT_NODE) {
                    const t = range.startContainer;
                    const off = range.startOffset;
                    const before = t.data.slice(0, off);
                    const removed = before.replace(/(\t|[ \u00a0]{2})$/, '');
                    if (removed.length !== before.length) {
                        t.data = removed + t.data.slice(off);
                        const r = document.createRange();
                        r.setStart(t, removed.length);
                        r.collapse(true);
                        sel.removeAllRanges();
                        sel.addRange(r);
                        this.updateContent();
                        this.updateToolbarState();
                    }
                }
                return;
            }
            range.deleteContents();
            const tabNode = document.createTextNode('\t');
            range.insertNode(tabNode);
            const r = document.createRange();
            r.setStartAfter(tabNode);
            r.collapse(true);
            sel.removeAllRanges();
            sel.addRange(r);
            this.updateContent();
            this.updateToolbarState();
        };
        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.updateToolbarState();
            }
        };
    }
    createRenderRoot() {
        return this;
    }
    injectCss(cssText) {
        if (this.querySelector('style[data-rte-style]'))
            return;
        const style = document.createElement('style');
        style.setAttribute('data-rte-style', 'true');
        style.textContent = cssText;
        this.insertBefore(style, this.firstChild);
    }
    connectedCallback() {
        super.connectedCallback();
        this.injectCss(styles.cssText);
        this.ensureStructure();
        if (this.placeholder && this.editorEl) {
            this.editorEl.dataset.placeholder = this.placeholder;
        }
        if (this.value && !this.editorEl.innerHTML.trim()) {
            this.editorEl.innerHTML = this.value;
        }
        this.content = this.editorEl.innerHTML;
        if (this.toolbarEl)
            this.wireAuthoredToolbar(this.toolbarEl);
        this.mentionsEl = this.querySelector('nile-rte-mentions');
        if (this.mentionsEl) {
            this.mentionsEl.attach?.(this.editorEl, this);
            this.mentionsEl.setExternalConfig?.(this.mentions);
        }
        this.wireEditor();
        document.addEventListener('selectionchange', this.onSelectionChange, {
            passive: true,
        });
        this.updateToolbarState();
        this.syncPreview();
    }
    ensureStructure() {
        this.toolbarEl = this.querySelector('nile-rte-toolbar');
        this.previewEl = this.querySelector('nile-rte-preview');
        // container for toolbar + editor
        this.containerEl = this.querySelector('.rte-container');
        if (!this.containerEl) {
            this.containerEl = document.createElement('div');
            this.containerEl.className = 'rte-container';
            this.appendChild(this.containerEl);
        }
        // ensure editor
        this.ensureEditor();
        // put toolbar + editor inside container
        if (this.toolbarEl && this.toolbarEl.parentElement !== this.containerEl) {
            this.containerEl.appendChild(this.toolbarEl);
        }
        if (this.editorEl.parentElement !== this.containerEl) {
            this.containerEl.appendChild(this.editorEl);
        }
        if (this.previewEl) {
            if (this.previewEl.parentElement !== this) {
                this.appendChild(this.previewEl);
            }
            if (this.previewEl.previousElementSibling !== this.containerEl) {
                this.insertBefore(this.previewEl, this.containerEl.nextSibling);
            }
        }
    }
    firstUpdated(_changedProperties) {
        super.firstUpdated(_changedProperties);
        if (this.editorEl) {
            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
            if (isSafari) {
                this.editorEl.classList.add('safari');
            }
        }
    }
    updateContentWithMention(mentionDetail) {
        this.updateContent();
        this.dispatchEvent(new CustomEvent('nile-change', {
            detail: {
                content: this.content,
                mention: mentionDetail,
            },
            bubbles: true,
            composed: true,
        }));
    }
    disconnectedCallback() {
        this.unwireEditor();
        document.removeEventListener('selectionchange', this.onSelectionChange);
        if (this.mentionsEl && this.mentionsEl.detach) {
            this.mentionsEl.detach();
        }
        super.disconnectedCallback();
    }
    updated(changed) {
        if (changed.has('value')) {
            if (this.editorEl && this.value !== this.editorEl.innerHTML) {
                this.editorEl.innerHTML = this.value || '<p><br></p>';
                this.content = this.editorEl.innerHTML;
                this.syncPreview();
            }
        }
        if (changed.has('singleLineEditor')) {
            if (this.editorEl) {
                this.editorEl.classList.toggle('single-line', this.singleLineEditor);
            }
            if (this.previewEl) {
                this.previewEl.classList.toggle('single-line', this.singleLineEditor);
            }
        }
        if (changed.has('disabled') && this.editorEl) {
            this.editorEl.setAttribute('contenteditable', this.disabled ? 'false' : 'true');
            this.editorEl.tabIndex = this.disabled ? -1 : 0;
            if (this.linkEl) {
                this.linkEl.disabled = this.disabled;
            }
        }
        if (changed.has('placeholder') && this.editorEl) {
            if (this.placeholder) {
                this.editorEl.dataset.placeholder = this.placeholder;
            }
            else {
                delete this.editorEl.dataset.placeholder;
            }
        }
    }
    ensureEditor() {
        this.editorEl = this.querySelector('.editor');
        if (!this.editorEl) {
            const editor = document.createElement('article');
            editor.className = 'editor';
            editor.setAttribute('contenteditable', this.disabled ? 'false' : 'true');
            editor.tabIndex = this.disabled ? -1 : 0;
            this.editorEl = editor;
        }
        if (this.placeholder) {
            this.editorEl.dataset.placeholder = this.placeholder;
        }
        if (!this.editorEl.innerHTML.trim()) {
            this.editorEl.innerHTML = '<p><br></p>';
        }
    }
    unwrapMention(span, preserveText = true) {
        const parent = span.parentNode;
        if (!parent)
            return;
        const txt = preserveText
            ? (span.textContent ?? '').replace(/\u200B/g, '')
            : '';
        const textNode = document.createTextNode(txt);
        parent.insertBefore(textNode, span);
        parent.removeChild(span);
        const r = document.createRange();
        r.setStartAfter(textNode);
        r.collapse(true);
        const sel = window.getSelection();
        sel?.removeAllRanges();
        sel?.addRange(r);
    }
    scrubBrokenMentions() {
        if (!this.editorEl)
            return;
        const mentions = this.editorEl.querySelectorAll('span.mention');
        mentions.forEach(m => {
            const span = m;
            const key = span.getAttribute('data-mention-key');
            const label = span.getAttribute('data-mention-label');
            const trigger = span.getAttribute('data-mention-trigger') || '';
            const text = (span.textContent ?? '').replace(/\u200B/g, '').trim();
            const looksValid = !!key &&
                !!label &&
                text.length > 0 &&
                text.startsWith(trigger) &&
                text.includes(label);
            if (!text || !looksValid) {
                this.unwrapMention(span, true);
                return;
            }
        });
    }
    wireEditor() {
        this.editorEl.addEventListener('click', this.onEditorClick);
        this.editorEl.addEventListener('input', this.onEditorInput);
        this.editorEl.addEventListener('mouseup', this.onEditorMouseup);
        this.editorEl.addEventListener('keyup', this.onEditorKeyup);
        this.editorEl.addEventListener('keydown', this.onEditorKeydown);
        this.editorEl.addEventListener('paste', this.onEditorPaste);
        this.editorEl.addEventListener('drop', this.onEditorDrop);
    }
    unwireEditor() {
        if (!this.editorEl)
            return;
        this.editorEl.removeEventListener('click', this.onEditorClick);
        this.editorEl.removeEventListener('input', this.onEditorInput);
        this.editorEl.removeEventListener('mouseup', this.onEditorMouseup);
        this.editorEl.removeEventListener('keyup', this.onEditorKeyup);
        this.editorEl.removeEventListener('keydown', this.onEditorKeydown);
        this.editorEl.removeEventListener('paste', this.onEditorPaste);
        this.editorEl.removeEventListener('drop', this.onEditorDrop);
    }
    wireAuthoredToolbar(tb) {
        this.buttonMap.clear();
        this.headingSelect = null;
        this.fontSelect = null;
        this.colorInput = null;
        Array.from(tb.children).forEach(child => {
            const tag = child.tagName.toLowerCase();
            if (tag === 'nile-rte-select' && child.getAttribute('type') === 'align') {
                child.disabled = this.disabled;
                child.addEventListener('change', (e) => {
                    this.focusAndRestore();
                    const alignment = e.detail;
                    setAlignment(this.editorEl, alignment);
                    this.updateContent();
                    this.updateToolbarState();
                });
                return;
            }
            if (tag === 'nile-rte-link') {
                child.editorEl = this.editorEl;
                child.disabled = this.disabled;
                this.linkEl = child;
                child.addEventListener('nile-link-changed', () => {
                    this.updateContent();
                    this.updateToolbarState();
                });
                return;
            }
            if (tag === 'nile-rte-toolbar-item') {
                let btn = child.querySelector(':scope > nile-button');
                const cmd = child.getAttribute('name') || '';
                const label = child.getAttribute('label') || cmd;
                const iconAttr = child.getAttribute('icon');
                const authoredHasContent = child.innerHTML.trim().length > 0;
                if (!btn) {
                    btn = document.createElement('nile-button');
                    btn.variant = 'tertiary';
                    btn.size = 'small';
                }
                btn.disabled = this.disabled;
                if (iconAttr) {
                    btn.innerHTML = `<nile-icon name="${iconAttr}" color="${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'}" ></nile-icon>`;
                    child.innerHTML = '';
                }
                else if (!authoredHasContent) {
                    const defaultIcon = DEFAULT_ICONS[cmd];
                    if (defaultIcon) {
                        btn.innerHTML = `<nile-icon name="${defaultIcon}" size="20" color="${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'}" ></nile-icon>`;
                    }
                    else {
                        btn.textContent = label || cmd;
                    }
                    child.innerHTML = '';
                }
                else {
                    btn.innerHTML = child.innerHTML;
                    child.innerHTML = '';
                }
                if (!btn.isConnected) {
                    if (this.disabled) {
                        child.appendChild(btn);
                    }
                    else {
                        const tooltip = document.createElement('nile-lite-tooltip');
                        tooltip.setAttribute('content', label);
                        tooltip.appendChild(btn);
                        child.appendChild(tooltip);
                    }
                }
                btn.setAttribute('aria-label', label);
                btn.addEventListener('mousedown', e => e.preventDefault());
                btn.addEventListener('click', () => this.onToolbarCommand(cmd));
                const arr = this.buttonMap.get(cmd) ?? [];
                arr.push(btn);
                this.buttonMap.set(cmd, arr);
                return;
            }
            if (tag === 'nile-rte-select') {
                const type = child.getAttribute('type') || '';
                child.addEventListener('change', (e) => {
                    this.focusAndRestore();
                    const val = e.detail;
                    if (type === 'heading') {
                        setBlockTag(this.editorEl, val);
                    }
                    else if (type === 'font') {
                        setFontFamily(this.editorEl, val);
                    }
                    this.updateContent();
                    this.updateToolbarState();
                });
                return;
            }
            if (tag === 'nile-rte-color') {
                child.addEventListener('change', (e) => {
                    this.focusAndRestore();
                    const { mode, value } = e.detail;
                    if (mode === 'backColor') {
                        setBackColor(this.editorEl, value);
                    }
                    else {
                        setForeColor(this.editorEl, value);
                    }
                    this.updateContent();
                    this.updateToolbarState();
                });
                return;
            }
        });
    }
    saveSelection() {
        const sel = window.getSelection();
        if (sel && sel.rangeCount)
            this.lastRange = sel.getRangeAt(0).cloneRange();
    }
    restoreSelection() {
        if (!this.lastRange)
            return;
        const sel = document.getSelection();
        if (!sel)
            return;
        sel.removeAllRanges();
        sel.addRange(this.lastRange);
    }
    focusAndRestore() {
        this.editorEl?.focus();
        this.restoreSelection();
    }
    getCleanContent() {
        const clone = this.editorEl.cloneNode(true);
        clone.querySelectorAll('*').forEach(el => {
            el.removeAttribute('style');
        });
        return clone.innerHTML;
    }
    insertList(type) {
        this.restoreSelection();
        if (!this.lastRange)
            return;
        const list = document.createElement(type);
        // grab the selected fragment
        const frag = this.lastRange.extractContents();
        const temp = document.createElement('div');
        temp.appendChild(frag);
        // wrap each top-level node in an <li>
        Array.from(temp.childNodes).forEach(n => {
            // skip empty whitespace text nodes
            if (n.nodeType === Node.TEXT_NODE && !n.textContent?.trim())
                return;
            const li = document.createElement('li');
            li.appendChild(n);
            list.appendChild(li);
        });
        this.lastRange.insertNode(list);
        this.afterListEdit(list);
    }
    afterListEdit(node) {
        const range = document.createRange();
        range.setStartAfter(node);
        range.collapse(true);
        const sel = window.getSelection();
        sel?.removeAllRanges();
        sel?.addRange(range);
        this.saveSelection();
        this.updateContent();
        this.updateToolbarState();
    }
    ensureAtLeastOneParagraph() {
        const el = this.editorEl;
        if (!el)
            return;
        const onlyWhitespace = (el.textContent ?? '').replace(/\u200B/g, '').trim() === '';
        if (el.childNodes.length === 0 || onlyWhitespace) {
            el.innerHTML = '<p><br></p>';
            const p = el.querySelector('p');
            if (p) {
                const range = document.createRange();
                range.setStart(p, 0);
                range.collapse(true);
                const sel = window.getSelection();
                if (sel) {
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
            return;
        }
        const hasBlock = el.querySelector('p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre');
        if (!hasBlock) {
            const p = document.createElement('p');
            while (el.firstChild)
                p.appendChild(el.firstChild);
            if (!p.hasChildNodes())
                p.appendChild(document.createElement('br'));
            el.appendChild(p);
            return;
        }
        el.querySelectorAll('p').forEach(p => {
            if ((p.textContent ?? '').replace(/\u200B/g, '') === '') {
                if (!p.innerHTML.toLowerCase().includes('<br'))
                    p.innerHTML = '<br>';
            }
        });
    }
    // ---------- Toolbar/commands ----------
    onToolbarCommand(cmd) {
        if (this.disabled)
            return;
        this.focusAndRestore();
        switch (cmd) {
            case 'bold':
                toggleInlineTag(this.editorEl, 'strong');
                break;
            case 'italic':
                toggleInlineTag(this.editorEl, 'em');
                break;
            case 'underline':
                toggleInlineTag(this.editorEl, 'u');
                break;
            case 'left':
                setAlignment(this.editorEl, 'left');
                break;
            case 'center':
                setAlignment(this.editorEl, 'center');
                break;
            case 'right':
                setAlignment(this.editorEl, 'right');
                break;
            case 'justify':
                setAlignment(this.editorEl, 'justify');
                break;
            case 'ul':
                toggleList(this.editorEl, 'ul');
                this.updateContent();
                this.updateToolbarState();
                break;
            case 'ol':
                toggleList(this.editorEl, 'ol');
                this.updateContent();
                this.updateToolbarState();
                break;
            case 'link':
                break;
            case 'clear':
                const walker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
                const toUnwrap = [];
                while (walker.nextNode()) {
                    const el = walker.currentNode;
                    el.removeAttribute('style');
                    if (['B', 'STRONG', 'I', 'EM', 'U', 'SPAN', 'FONT'].includes(el.tagName)) {
                        toUnwrap.push(el);
                    }
                }
                for (const el of toUnwrap) {
                    while (el.firstChild)
                        el.parentNode?.insertBefore(el.firstChild, el);
                    el.remove();
                }
                this.ensureAtLeastOneParagraph();
                break;
            default:
                break;
        }
        this.updateContent();
        this.updateToolbarState();
    }
    setBtnActive(cmd, active) {
        const arr = this.buttonMap.get(cmd);
        if (!arr)
            return;
        for (const btn of arr)
            btn.toggleAttribute('data-active', !!active);
    }
    updateToolbarState() {
        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))
            return;
        const startElm = nearestElement(range.startContainer) || this.editorEl;
        const comp = getComputedStyle(startElm);
        const block = closestBlock(range.startContainer, this.editorEl) || this.editorEl;
        const isBold = (() => {
            let n = startElm;
            while (n && n !== this.editorEl) {
                if (n instanceof HTMLElement) {
                    const t = n.tagName.toLowerCase();
                    if (t === 'strong' || t === 'b')
                        return true;
                    const w = getComputedStyle(n).fontWeight;
                    if (parseInt(w, 10) >= 600)
                        return true;
                }
                n = n.parentNode;
            }
            return false;
        })();
        const isItalic = (() => {
            let n = startElm;
            while (n && n !== this.editorEl) {
                if (n instanceof HTMLElement) {
                    const t = n.tagName.toLowerCase();
                    if (t === 'em' || t === 'i')
                        return true;
                    if (getComputedStyle(n).fontStyle === 'italic')
                        return true;
                }
                n = n.parentNode;
            }
            return false;
        })();
        const isUnderline = (() => {
            let n = startElm;
            while (n && n !== this.editorEl) {
                if (n instanceof HTMLElement) {
                    const tdl = getComputedStyle(n).textDecorationLine;
                    if (tdl && tdl.includes('underline'))
                        return true;
                    if (n.tagName.toLowerCase() === 'u')
                        return true;
                }
                n = n.parentNode;
            }
            return false;
        })();
        const inLink = !!startElm.closest('a');
        const align = (block.style.textAlign ||
            getComputedStyle(block).textAlign ||
            'start');
        const alignNorm = align === 'start' ? 'left' : align;
        const inLi = !!startElm.closest('li');
        const listType = inLi
            ? startElm.closest('ul,ol')?.tagName.toLowerCase() || ''
            : '';
        this.setBtnActive('bold', isBold);
        this.setBtnActive('italic', isItalic);
        this.setBtnActive('underline', isUnderline);
        this.setBtnActive('link', inLink);
        if (this.linkEl) {
            const linkBtn = this.linkEl.querySelector('nile-button');
            if (linkBtn)
                linkBtn.toggleAttribute('data-active', inLink);
        }
        this.setBtnActive('left', alignNorm === 'left' &&
            !['center', 'right', 'justify'].includes(alignNorm));
        this.setBtnActive('center', alignNorm === 'center');
        this.setBtnActive('right', alignNorm === 'right');
        this.setBtnActive('justify', alignNorm === 'justify');
        this.setBtnActive('ul', listType === 'ul');
        this.setBtnActive('ol', listType === 'ol');
        if (this.headingSelect) {
            const tag = block.tagName.toLowerCase();
            const v = ['h1', 'h2', 'h3'].includes(tag) ? tag : 'p';
            if (this.headingSelect.value !== v)
                this.headingSelect.value = v;
        }
        if (this.fontSelect) {
            const ff = (comp.fontFamily || '')
                .replace(/["']/g, '')
                .split(',')[0]
                .trim()
                .toLowerCase();
            if (ff) {
                for (const opt of Array.from(this.fontSelect.options)) {
                    if (opt.value.toLowerCase() === ff) {
                        this.fontSelect.value = opt.value;
                        break;
                    }
                }
            }
        }
        if (this.colorInput) {
            const hex = rgbToHex(comp.color);
            if (hex && this.colorInput.value.toLowerCase() !== hex.toLowerCase()) {
                this.colorInput.value = hex;
            }
            if (this.colorSwatchEl)
                this.colorSwatchEl.style.backgroundColor = this.colorInput.value;
        }
        if (this.bgColorInput) {
            const bg = getComputedStyle(startElm).backgroundColor;
            if (bg &&
                !/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(bg)) {
                const bgHex = rgbToHex(bg);
                if (bgHex &&
                    this.bgColorInput.value.toLowerCase() !== bgHex.toLowerCase()) {
                    this.bgColorInput.value = bgHex;
                }
            }
            if (this.bgSwatchEl)
                this.bgSwatchEl.style.backgroundColor = this.bgColorInput.value;
        }
    }
    syncPreview() {
        this.updateContent();
    }
    getComputedImportantProps() {
        return Array.from(new Set([
            ...DEFAULT_IMPORTANT_PROPS,
            ...(this.whitelist ?? []),
        ]));
    }
    updateContent() {
        if (!this.editorEl)
            return;
        this.ensureAtLeastOneParagraph();
        const isEmpty = (this.editorEl.textContent ?? '').trim() === '';
        this.editorEl.classList.toggle('empty', isEmpty);
        const sel = window.getSelection();
        const caretRange = sel && sel.rangeCount > 0 && this.editorEl.contains(sel.getRangeAt(0).startContainer)
            ? sel.getRangeAt(0).cloneRange()
            : null;
        const clone = this.editorEl.cloneNode(true);
        if (!this.noStyles) {
            const origWalker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
            const cloneWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
            const importantProps = this.getComputedImportantProps();
            while (origWalker.nextNode() && cloneWalker.nextNode()) {
                const origEl = origWalker.currentNode;
                const cloneEl = cloneWalker.currentNode;
                const computed = window.getComputedStyle(origEl);
                const cssText = importantProps
                    .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
                    .join(';');
                if (cssText.trim()) {
                    cloneEl.setAttribute('style', cssText);
                }
            }
        }
        else {
            clone.querySelectorAll('[style]').forEach(el => el.removeAttribute('style'));
        }
        if (caretRange && sel && this.editorEl.contains(caretRange.startContainer)) {
            sel.removeAllRanges();
            sel.addRange(caretRange);
        }
        this.content = clone.innerHTML;
        if (this.previewEl)
            this.previewEl.innerHTML = this.content;
        this.dispatchEvent(new CustomEvent('nile-change', {
            detail: { content: this.content },
            bubbles: true,
            composed: true,
        }));
    }
};
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileRichTextEditor.prototype, "value", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileRichTextEditor.prototype, "noStyles", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileRichTextEditor.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, attribute: 'singlelineeditor', reflect: true })
], NileRichTextEditor.prototype, "singleLineEditor", void 0);
__decorate([
    property({ type: String })
], NileRichTextEditor.prototype, "placeholder", void 0);
__decorate([
    property({
        attribute: 'mentions',
        reflect: true,
        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),
        },
    })
], NileRichTextEditor.prototype, "mentions", void 0);
__decorate([
    property({
        attribute: 'whitelist',
        reflect: false,
        converter: {
            fromAttribute: (value) => {
                try {
                    const parsed = JSON.parse(value);
                    return Array.isArray(parsed) ? parsed.filter(v => typeof v === 'string') : [];
                }
                catch {
                    return [];
                }
            },
        },
    })
], NileRichTextEditor.prototype, "whitelist", void 0);
__decorate([
    state()
], NileRichTextEditor.prototype, "content", void 0);
NileRichTextEditor = __decorate([
    customElement('nile-rich-text-editor')
], NileRichTextEditor);
export { NileRichTextEditor };
//# sourceMappingURL=nile-rich-text-editor.js.map