@aquera/nile-elements 1.0.4-beta-1.2 → 1.0.4-beta-1.4

package/src/nile-rich-text-editor/nile-rich-text-editor.ts

@@ -0,0 +1,835 @@
+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';
+
+import { styles } from './nile-rich-text-editor.css';
+
+type MentionsConfig = Record<string, { key: string; label: string }[]>;
+
+const DEFAULT_ICONS: Record<string, string> = {
+  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',
+};
+
+@customElement('nile-rich-text-editor')
+export class NileRichTextEditor extends LitElement {
+  protected createRenderRoot() {
+    return this;
+  }
+
+  @property({ type: String }) value = '';
+  @property({ type: Boolean, attribute: 'singlelineeditor' }) singleLineEditor =
+    false;
+
+  @property({
+    attribute: 'mentions',
+    converter: {
+      fromAttribute: (value: string): MentionsConfig => {
+        try {
+          const parsed = JSON.parse(value);
+          const out: MentionsConfig = {};
+          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: MentionsConfig) => JSON.stringify(v),
+    },
+  })
+  mentions: MentionsConfig = {};
+
+  @state() private content = '';
+  private editorEl!: HTMLElement;
+  private previewEl: HTMLElement | null = null;
+  private toolbarEl: HTMLElement | null = null;
+
+  private lastRange: Range | null = null;
+
+  private buttonMap = new Map<string, HTMLElement[]>();
+  private headingSelect: HTMLSelectElement | null = null;
+  private fontSelect: HTMLSelectElement | null = null;
+  private colorInput: HTMLInputElement | null = null;
+  private bgColorInput: HTMLInputElement | null = null;
+  private colorSwatchEl: HTMLElement | null = null;
+  private bgSwatchEl: HTMLElement | null = null;
+  private containerEl: HTMLElement | null = null;
+
+  private mentionsEl: HTMLElement | null = null;
+
+  private injectCss(cssText: string) {
+    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(): void {
+    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 as any).attach?.(this.editorEl, this as HTMLElement);
+      (this.mentionsEl as any).setExternalConfig?.(this.mentions);
+    }
+
+    this.wireEditor();
+    document.addEventListener('selectionchange', this.onSelectionChange, {
+      passive: true,
+    });
+    this.updateToolbarState();
+    this.syncPreview();
+  }
+
+  private 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') as HTMLElement;
+    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);
+      }
+    }
+  }
+
+  private updateContentWithMention(mentionDetail: any) {
+    this.updateContent();
+    this.dispatchEvent(
+      new CustomEvent('content-changed', {
+        detail: {
+          content: this.content,
+          mention: mentionDetail,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  disconnectedCallback(): void {
+    document.removeEventListener('selectionchange', this.onSelectionChange);
+
+    if (this.mentionsEl && (this.mentionsEl as any).detach) {
+      (this.mentionsEl as any).detach();
+    }
+    super.disconnectedCallback();
+  }
+  protected updated(changed: Map<string, any>) {
+    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);
+      }
+    }
+  }
+
+  private ensureEditor() {
+    this.editorEl = this.querySelector('.editor') as HTMLElement;
+    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>';
+    }
+  }
+
+  private unwrapMention(span: HTMLElement, 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);
+  }
+
+  private scrubBrokenMentions() {
+    if (!this.editorEl) return;
+    const mentions = this.editorEl.querySelectorAll('span.mention');
+
+    mentions.forEach(m => {
+      const span = m as HTMLElement;
+      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;
+      }
+    });
+  }
+
+  private wireEditor() {
+    this.editorEl.addEventListener('input', () => {
+      this.ensureAtLeastOneParagraph();
+      this.scrubBrokenMentions();
+      this.updateContent();
+      this.updateToolbarState();
+    });
+    this.editorEl.addEventListener('mouseup', () => {
+      this.saveSelection();
+      this.updateToolbarState();
+    });
+    this.editorEl.addEventListener('keyup', e => {
+      this.saveSelection();
+
+      if (
+        [
+          'ArrowLeft',
+          'ArrowRight',
+          'ArrowUp',
+          'ArrowDown',
+          'Home',
+          'End',
+        ].includes(e.key)
+      ) {
+        this.updateToolbarState();
+      }
+    });
+    this.editorEl.addEventListener('keydown', this.onEditorKeydown);
+  }
+
+  private onEditorKeydown = (e: KeyboardEvent) => {
+    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 as Text;
+        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();
+  };
+
+  private wireAuthoredToolbar(tb: HTMLElement) {
+    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: any) => {
+          this.focusAndRestore();
+          const alignment = e.detail as 'left' | 'center' | 'right' | 'justify';
+          setAlignment(this.editorEl, alignment);
+          this.updateContent();
+          this.updateToolbarState();
+        });
+        return;
+      }
+      if (tag === 'nile-rte-link') {
+        (child as any).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'
+        ) as HTMLElement | null;
+
+        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 as any).variant = 'tertiary';
+          (btn as any).size = 'small';
+        }
+
+        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 = '';
+        }
+
+        if (!btn.isConnected) {
+          const tooltip = document.createElement('nile-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: any) => {
+          this.focusAndRestore();
+
+          const val = e.detail as string;
+
+          if (type === 'heading') {
+            setBlockTag(this.editorEl, val as any);
+          } else if (type === 'font') {
+            setFontFamily(this.editorEl, val);
+          }
+
+          this.updateContent();
+          this.updateToolbarState();
+        });
+
+        return;
+      }
+
+      if (tag === 'nile-rte-color') {
+        child.addEventListener('change', (e: any) => {
+          this.focusAndRestore();
+          const { mode, value } = e.detail;
+
+          if (mode === 'backColor') {
+            setBackColor(this.editorEl, value);
+          } else {
+            setForeColor(this.editorEl, value);
+          }
+
+          this.updateContent();
+          this.updateToolbarState();
+        });
+        return;
+      }
+    });
+  }
+  private 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();
+    }
+  };
+  private saveSelection() {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount) this.lastRange = sel.getRangeAt(0).cloneRange();
+  }
+  private restoreSelection() {
+    if (!this.lastRange) return;
+    const sel = document.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(this.lastRange);
+  }
+  private focusAndRestore() {
+    this.editorEl?.focus();
+    this.restoreSelection();
+  }
+
+  private insertList(type: 'ul' | 'ol') {
+    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);
+  }
+
+  private afterListEdit(node: 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();
+  }
+
+  private 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>';
+      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 ----------
+  private onToolbarCommand(cmd: string) {
+    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: HTMLElement[] = [];
+        while (walker.nextNode()) {
+          const el = walker.currentNode as HTMLElement;
+          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();
+  }
+
+  private setBtnActive(cmd: string, active: boolean) {
+    const arr = this.buttonMap.get(cmd);
+    if (!arr) return;
+    for (const btn of arr) btn.toggleAttribute('data-active', !!active);
+  }
+
+  private 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: Node | null = 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: Node | null = 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: Node | null = 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') as string;
+    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');
+
+    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;
+    }
+  }
+
+  private syncPreview() {
+    this.updateContent();
+  }
+
+  private updateContent() {
+    if (!this.editorEl) return;
+    this.ensureAtLeastOneParagraph();
+
+    const clone = this.editorEl.cloneNode(true) as HTMLElement;
+
+    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',
+      'list-style-position',
+      'padding-inline-start',
+    ];
+
+    while (origWalker.nextNode() && cloneWalker.nextNode()) {
+      const origEl = origWalker.currentNode as HTMLElement;
+      const cloneEl = cloneWalker.currentNode as HTMLElement;
+      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,
+      })
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rich-text-editor': NileRichTextEditor;
+  }
+}