@aquera/nile-elements 0.1.65-beta-1.0 → 0.1.66-beta-1.1

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

@@ -1,603 +0,0 @@
-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 { closestBlock, nearestElement, rgbToHex, toggleInlineTag, setBlockTag, setAlignment, setFontFamily, setForeColor, insertOrEditLink, setBackColor } from './utils';
-import { styles } from './nile-rich-text-editor.css';
-/**
- * Map commands → default icon names from your <nile-icon> set.
- * Adjust values to match the real names you have.
- */
-const DEFAULT_ICONS = {
-    bold: 'nile-bold',
-    italic: 'nile-italic',
-    underline: 'nile-underline',
-    link: 'user',
-    left: 'nile-leftalign',
-    center: 'nile-centeralign',
-    right: 'nile-rightalign',
-    justify: 'nile-justify',
-    ul: 'nile-ul',
-    ol: 'nile-ol',
-    clear: 'error',
-};
-let NileRichTextEditor = class NileRichTextEditor extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Initial HTML content */
-        this.value = '';
-        /** Optional mentions config (can also be on <nile-rte-mentions mentions="...">) */
-        this.mentions = {};
-        // ----- internal state (no Lit render) -----
-        this.content = '';
-        this.previewEl = null;
-        this.toolbarEl = null;
-        this.lastRange = null;
-        // map for button active reflections
-        this.buttonMap = new Map();
-        this.headingSelect = null;
-        this.fontSelect = null;
-        this.colorInput = null;
-        this.bgColorInput = null;
-        this.colorSwatchEl = null;
-        this.bgSwatchEl = null;
-        // Mentions controller (child)
-        this.mentionsEl = null;
-        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; }
-    shouldUpdate() { return false; }
-    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.toolbarEl = this.querySelector('nile-rte-toolbar');
-        this.previewEl = this.querySelector('nile-rte-preview');
-        this.ensureEditor();
-        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();
-        document.addEventListener('selectionchange', this.onSelectionChange, true);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('selectionchange', this.onSelectionChange, true);
-        if (this.mentionsEl && this.mentionsEl.detach) {
-            this.mentionsEl.detach();
-        }
-        super.disconnectedCallback();
-    }
-    ensureEditor() {
-        this.editorEl = this.querySelector('.editor');
-        if (!this.editorEl) {
-            const editor = document.createElement('div');
-            editor.className = 'editor';
-            editor.setAttribute('contenteditable', 'true');
-            if (this.toolbarEl?.nextSibling) {
-                this.insertBefore(editor, this.toolbarEl.nextSibling);
-            }
-            else if (this.previewEl) {
-                this.insertBefore(editor, this.previewEl);
-            }
-            else {
-                this.appendChild(editor);
-            }
-            this.editorEl = editor;
-        }
-        if (!this.editorEl.innerHTML.trim()) {
-            this.editorEl.innerHTML = '<p><br></p>';
-        }
-        this.ensureAtLeastOneParagraph();
-    }
-    wireEditor() {
-        // Input & selection preservation
-        this.editorEl.addEventListener('input', () => {
-            this.ensureAtLeastOneParagraph();
-            this.updateContent();
-        });
-        this.editorEl.addEventListener('mouseup', () => this.saveSelection());
-        this.editorEl.addEventListener('keyup', () => this.saveSelection());
-    }
-    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-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 {
-                    // Author provided custom content (could be a <nile-icon> already)
-                    btn.innerHTML = child.innerHTML;
-                    child.innerHTML = '';
-                }
-                // Mount it
-                if (!btn.isConnected)
-                    child.appendChild(btn);
-                // Interactions
-                btn.setAttribute('aria-label', label);
-                btn.addEventListener('mousedown', e => e.preventDefault());
-                btn.addEventListener('click', () => this.onToolbarCommand(cmd));
-                // Register for active reflection
-                const arr = this.buttonMap.get(cmd) ?? [];
-                arr.push(btn);
-                this.buttonMap.set(cmd, arr);
-                return; // done with this child
-            }
-            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);
-                    }
-                    // update the editor content & toolbar UI
-                    this.updateContent();
-                    this.updateToolbarState();
-                });
-                // nothing else to inject into the DOM
-                return;
-            }
-            if (tag === 'nile-rte-color') {
-                const label = child.getAttribute('label') ?? 'Text color';
-                const value = child.getAttribute('value') ?? '#000000';
-                const mode = child.getAttribute('mode') ?? 'text'; // 'text' | 'background'
-                // Create/attach the hidden color input
-                let input = child.querySelector(':scope > input[type="color"]');
-                if (!input) {
-                    input = document.createElement('input');
-                    input.type = 'color';
-                    input.style.position = 'absolute';
-                    input.style.opacity = '0';
-                    input.style.pointerEvents = 'none'; // we'll click it programmatically
-                    child.appendChild(input);
-                }
-                input.title = label;
-                input.value = value;
-                // Build a custom trigger that shows the current color
-                let trigger = child.querySelector(':scope > button.rte-color-trigger');
-                if (!trigger) {
-                    trigger = document.createElement('button');
-                    trigger.type = 'button';
-                    trigger.className = 'rte-color-trigger';
-                    trigger.setAttribute('aria-label', label);
-                    if (mode === 'background') {
-                        trigger.innerHTML = `
-                    <span class="swatch-box" aria-hidden="true"></span>
-                  `;
-                    }
-                    else {
-                        trigger.innerHTML = `
-                     <span class="glyph-stack" aria-hidden="true">
-    <span class="glyph">A</span>
-    <span class="underline"></span>
-  </span>
-                  `;
-                    }
-                    child.appendChild(trigger);
-                }
-                // Cache swatch elements to update later
-                const underline = trigger.querySelector('.underline');
-                const square = trigger.querySelector('.swatch-box');
-                if (mode === 'background') {
-                    this.bgColorInput = input;
-                    this.bgSwatchEl = square;
-                    if (this.bgSwatchEl)
-                        this.bgSwatchEl.style.backgroundColor = input.value;
-                }
-                else {
-                    this.colorInput = input;
-                    this.colorSwatchEl = underline;
-                    if (this.colorSwatchEl)
-                        this.colorSwatchEl.style.backgroundColor = input.value;
-                }
-                // Open native picker on trigger click
-                trigger.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    // Keep selection before opening the picker
-                    this.focusAndRestore();
-                    input.click();
-                });
-                // When the user picks a color, apply it + update swatch
-                input.addEventListener('input', () => {
-                    this.focusAndRestore();
-                    if (mode === 'background') {
-                        setBackColor(this.editorEl, input.value);
-                        if (this.bgSwatchEl)
-                            this.bgSwatchEl.style.backgroundColor = input.value;
-                    }
-                    else {
-                        setForeColor(this.editorEl, input.value);
-                        if (this.colorSwatchEl)
-                            this.colorSwatchEl.style.backgroundColor = input.value;
-                    }
-                    this.updateContent();
-                    this.updateToolbarState();
-                });
-                // Prevent losing selection when interacting
-                trigger.addEventListener('mousedown', e => e.preventDefault());
-                input.addEventListener('mousedown', e => e.preventDefault());
-            }
-        });
-    }
-    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(); }
-    /*────────────────────────  LIST HELPERS  ────────────────────────*/
-    insertList(type) {
-        this.restoreSelection();
-        if (!this.lastRange)
-            return;
-        // build <ul>/<ol>
-        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':
-                insertOrEditLink(this.editorEl);
-                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();
-        this.content = this.editorEl.innerHTML;
-        // live preview on the authored node (kept in place)
-        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({
-        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