@aquera/nile-elements 0.1.55-beta-1 → 0.1.55-patch-3

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

@@ -0,0 +1,693 @@
+import { __decorate } from "tslib";
+// nile-rich-text-editor.ts
+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, } from './utils';
+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',
+};
+let NileRichTextEditor = class NileRichTextEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        // protected shouldUpdate() { return false; }    
+        this.value = '';
+        this.singleLineEditor = false;
+        this.mentions = {};
+        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.mentionsEl = null;
+        this.onEditorKeydown = (e) => {
+            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.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();
+        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);
+        }
+        // 👉 move preview OUTSIDE container, right after it
+        if (this.previewEl) {
+            if (this.previewEl.parentElement !== this) {
+                this.appendChild(this.previewEl);
+            }
+            // ensure preview is placed AFTER container
+            if (this.previewEl.previousElementSibling !== this.containerEl) {
+                this.insertBefore(this.previewEl, this.containerEl.nextSibling);
+            }
+        }
+    }
+    updateContentWithMention(mentionDetail) {
+        this.updateContent();
+        this.dispatchEvent(new CustomEvent('content-changed', {
+            detail: {
+                content: this.content,
+                mention: mentionDetail
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    disconnectedCallback() {
+        document.removeEventListener('selectionchange', this.onSelectionChange, true);
+        if (this.mentionsEl && this.mentionsEl.detach) {
+            this.mentionsEl.detach();
+        }
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        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);
+            }
+        }
+    }
+    ensureEditor() {
+        this.editorEl = this.querySelector('.editor');
+        if (!this.editorEl) {
+            const editor = document.createElement('article');
+            editor.className = 'editor';
+            editor.setAttribute('contenteditable', 'true');
+            this.editorEl = editor;
+        }
+        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('input', () => {
+            this.ensureAtLeastOneParagraph();
+            this.scrubBrokenMentions();
+            this.updateContent();
+        });
+        this.editorEl.addEventListener('mouseup', () => this.saveSelection());
+        this.editorEl.addEventListener('keyup', () => this.saveSelection());
+        this.editorEl.addEventListener('keydown', this.onEditorKeydown);
+    }
+    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.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.addEventListener('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'; // optional
+                }
+                if (iconAttr) {
+                    btn.innerHTML = `<nile-icon name="${iconAttr}" aria-label="${label}"></nile-icon>`;
+                    child.innerHTML = '';
+                }
+                else if (!authoredHasContent) {
+                    const defaultIcon = DEFAULT_ICONS[cmd];
+                    if (defaultIcon) {
+                        btn.innerHTML = `<nile-icon name="${defaultIcon}" size="20" color="black" aria-label="${label}"></nile-icon>`;
+                    }
+                    else {
+                        btn.textContent = label || cmd;
+                    }
+                    child.innerHTML = '';
+                }
+                else {
+                    btn.innerHTML = child.innerHTML;
+                    child.innerHTML = '';
+                }
+                // Mount button inside tooltip
+                if (!btn.isConnected) {
+                    const tooltip = document.createElement('nile-tooltip');
+                    tooltip.setAttribute('content', label);
+                    tooltip.appendChild(btn);
+                    child.appendChild(tooltip);
+                }
+                // Interactions
+                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') || '';
+                // listen for our custom dropdown’s change event
+                child.addEventListener('change', (e) => {
+                    // restore focus & selection
+                    this.focusAndRestore();
+                    const val = e.detail;
+                    if (type === 'heading') {
+                        // apply block tag
+                        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(); }
+    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); // moves the node!
+            list.appendChild(li);
+        });
+        // insert list where the selection was
+        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();
+    }
+    // Keep at least one <p><br></p> and wrap stray inline/text into a <p>
+    ensureAtLeastOneParagraph() {
+        const el = this.editorEl;
+        if (!el)
+            return;
+        // 1) If completely empty → seed a paragraph
+        const onlyWhitespace = (el.textContent ?? '').replace(/\u200B/g, '').trim() === '';
+        if (el.childNodes.length === 0 || onlyWhitespace) {
+            el.innerHTML = '<p><br></p>';
+            return;
+        }
+        // 2) If no block elements exist, wrap whatever is there into a <p>
+        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;
+        }
+        // 3) Make sure the first/only empty <p> still has a <br>
+        el.querySelectorAll('p').forEach(p => {
+            if ((p.textContent ?? '').replace(/\u200B/g, '') === '') {
+                if (!p.innerHTML.toLowerCase().includes('<br'))
+                    p.innerHTML = '<br>';
+            }
+        });
+    }
+    // ---------- Toolbar/commands ----------
+    onToolbarCommand(cmd) {
+        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':
+                this.insertList('ul');
+                break;
+            case 'ol':
+                this.insertList('ol');
+                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);
+        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');
+        // Reflect heading
+        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;
+        }
+        // Reflect font family
+        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();
+    }
+    updateContent() {
+        if (!this.editorEl)
+            return;
+        this.ensureAtLeastOneParagraph();
+        const clone = this.editorEl.cloneNode(true);
+        const origWalker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
+        const cloneWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
+        const importantProps = [
+            'font-weight',
+            'font-style',
+            'text-decoration',
+            'color',
+            'background-color',
+            'font-size',
+            'font-family',
+            'text-align',
+            'line-height',
+            'letter-spacing',
+            'white-space',
+            'vertical-align'
+        ];
+        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);
+            }
+        }
+        this.content = clone.innerHTML;
+        if (this.previewEl)
+            this.previewEl.innerHTML = this.content;
+        this.dispatchEvent(new CustomEvent('content-changed', {
+            detail: { content: this.content },
+            bubbles: true,
+            composed: true
+        }));
+    }
+};
+__decorate([
+    property({ type: String })
+], NileRichTextEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'singlelineeditor' })
+], NileRichTextEditor.prototype, "singleLineEditor", 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),
+        }
+    })
+], NileRichTextEditor.prototype, "mentions", 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