@aquera/nile-elements 0.1.67-beta-1.5 → 0.1.67-beta-1.7

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

@@ -0,0 +1,38 @@
+export function handleTabKey(e, selection, onContent, onToolbar) {
+    e.preventDefault();
+    selection.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);
+                onContent();
+                onToolbar();
+            }
+        }
+        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);
+    onContent();
+    onToolbar();
+}
+//# sourceMappingURL=keys.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keys.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/rte-utils/keys.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY,CAC1B,CAAgB,EAChB,SAA2B,EAC3B,SAAqB,EACrB,SAAqB;IAErB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,SAAS,CAAC,eAAe,EAAE,CAAC;IAE5B,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,UAAU,KAAK,CAAC;QAAE,OAAO;IACzC,MAAM,KAAK,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAEhC,IAAK,CAAS,CAAC,QAAQ,EAAE,CAAC;QACxB,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACxE,MAAM,CAAC,GAAG,KAAK,CAAC,cAAsB,CAAC;YACvC,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,CAAC;YAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YACpC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;YACzD,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,CAAC;gBACrC,CAAC,CAAC,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACrC,MAAM,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;gBACjC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;gBAC9B,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACjB,GAAG,CAAC,eAAe,EAAE,CAAC;gBAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACvC,SAAS,EAAE,CAAC;gBAAC,SAAS,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;QACD,OAAO;IACT,CAAC;IAED,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC9C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAE1B,MAAM,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACjC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjB,GAAG,CAAC,eAAe,EAAE,CAAC;IAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEvC,SAAS,EAAE,CAAC;IAAC,SAAS,EAAE,CAAC;AAC3B,CAAC","sourcesContent":["import { SelectionManager } from './selection';\n\nexport function handleTabKey(\n  e: KeyboardEvent,\n  selection: SelectionManager,\n  onContent: () => void,\n  onToolbar: () => void,\n) {\n  e.preventDefault();\n  selection.focusAndRestore();\n\n  const sel = window.getSelection();\n  if (!sel || sel.rangeCount === 0) return;\n  const range = sel.getRangeAt(0);\n\n  if ((e as any).shiftKey) {\n    if (range.collapsed && range.startContainer.nodeType === Node.TEXT_NODE) {\n      const t = range.startContainer as Text;\n      const off = range.startOffset;\n      const before = t.data.slice(0, off);\n      const removed = before.replace(/(\\t|[ \\u00a0]{2})$/, '');\n      if (removed.length !== before.length) {\n        t.data = removed + t.data.slice(off);\n        const r = document.createRange();\n        r.setStart(t, removed.length);\n        r.collapse(true);\n        sel.removeAllRanges(); sel.addRange(r);\n        onContent(); onToolbar();\n      }\n    }\n    return;\n  }\n\n  range.deleteContents();\n  const tabNode = document.createTextNode('\\t');\n  range.insertNode(tabNode);\n\n  const r = document.createRange();\n  r.setStartAfter(tabNode);\n  r.collapse(true);\n  sel.removeAllRanges(); sel.addRange(r);\n\n  onContent(); onToolbar();\n}\n"]}

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

@@ -0,0 +1,2 @@
+import { SelectionManager } from './selection';
+export declare function insertList(type: 'ul' | 'ol', selection: SelectionManager): void;

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

@@ -0,0 +1,28 @@
+export function insertList(type, selection) {
+    selection.restore();
+    if (!selection.lastRange)
+        return;
+    const list = document.createElement(type);
+    const frag = selection.lastRange.extractContents();
+    const temp = document.createElement('div');
+    temp.appendChild(frag);
+    Array.from(temp.childNodes).forEach(n => {
+        if (n.nodeType === Node.TEXT_NODE && !(n.textContent ?? '').trim())
+            return;
+        const li = document.createElement('li');
+        li.appendChild(n); // moves node
+        list.appendChild(li);
+    });
+    selection.lastRange.insertNode(list);
+    afterListEdit(selection, list);
+}
+function afterListEdit(selection, node) {
+    const range = document.createRange();
+    range.setStartAfter(node);
+    range.collapse(true);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    selection.save();
+}
+//# sourceMappingURL=lists.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lists.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/rte-utils/lists.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,UAAU,CAAC,IAAiB,EAAE,SAA2B;IACvE,SAAS,CAAC,OAAO,EAAE,CAAC;IACpB,IAAI,CAAC,SAAS,CAAC,SAAS;QAAE,OAAO;IAEjC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,eAAe,EAAE,CAAC;IACnD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEvB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QACtC,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;YAAE,OAAO;QAC3E,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa;QAChC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AACjC,CAAC;AAED,SAAS,aAAa,CAAC,SAA2B,EAAE,IAAU;IAC5D,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACrC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC1B,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrB,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;IAClC,GAAG,EAAE,eAAe,EAAE,CAAC;IACvB,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IACrB,SAAS,CAAC,IAAI,EAAE,CAAC;AACnB,CAAC","sourcesContent":["import { SelectionManager } from './selection';\n\nexport function insertList(type: 'ul' | 'ol', selection: SelectionManager) {\n  selection.restore();\n  if (!selection.lastRange) return;\n\n  const list = document.createElement(type);\n  const frag = selection.lastRange.extractContents();\n  const temp = document.createElement('div');\n  temp.appendChild(frag);\n\n  Array.from(temp.childNodes).forEach(n => {\n    if (n.nodeType === Node.TEXT_NODE && !(n.textContent ?? '').trim()) return;\n    const li = document.createElement('li');\n    li.appendChild(n); // moves node\n    list.appendChild(li);\n  });\n\n  selection.lastRange.insertNode(list);\n  afterListEdit(selection, list);\n}\n\nfunction afterListEdit(selection: SelectionManager, node: Node) {\n  const range = document.createRange();\n  range.setStartAfter(node);\n  range.collapse(true);\n  const sel = window.getSelection();\n  sel?.removeAllRanges();\n  sel?.addRange(range);\n  selection.save();\n}"]}

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

@@ -0,0 +1,17 @@
+export declare class SelectionManager {
+    private host;
+    private onChange;
+    editorEl: HTMLElement;
+    lastRange: Range | null;
+    private handler;
+    constructor(args: {
+        host: HTMLElement;
+        editorEl: HTMLElement;
+        onChange: () => void;
+    });
+    start(): void;
+    stop(): void;
+    save(): void;
+    restore(): void;
+    focusAndRestore(): void;
+}

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

@@ -0,0 +1,39 @@
+export class SelectionManager {
+    constructor(args) {
+        this.lastRange = null;
+        this.host = args.host;
+        this.editorEl = args.editorEl;
+        this.onChange = args.onChange;
+    }
+    start() {
+        this.handler = () => {
+            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.onChange();
+            }
+        };
+        document.addEventListener('selectionchange', this.handler, true);
+    }
+    stop() { if (this.handler)
+        document.removeEventListener('selectionchange', this.handler, true); }
+    save() {
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount)
+            this.lastRange = sel.getRangeAt(0).cloneRange();
+    }
+    restore() {
+        if (!this.lastRange)
+            return;
+        const sel = document.getSelection();
+        if (!sel)
+            return;
+        sel.removeAllRanges();
+        sel.addRange(this.lastRange);
+    }
+    focusAndRestore() { this.editorEl?.focus(); this.restore(); }
+}
+//# sourceMappingURL=selection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/rte-utils/selection.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,gBAAgB;IAOzB,YAAY,IAAwE;QAH7E,cAAS,GAAiB,IAAI,CAAC;QAIpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAChC,CAAC;IAED,KAAK;QACH,IAAI,CAAC,OAAO,GAAG,GAAG,EAAE;YAClB,MAAM,GAAG,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAC;YACpC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,UAAU,KAAK,CAAC;gBAAE,OAAO;YACzC,MAAM,KAAK,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YAChC,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,CAAC;gBAC1D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;gBACpC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACnE,CAAC;IAED,IAAI,KAAK,IAAI,IAAI,CAAC,OAAO;QAAE,QAAQ,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IAEjG,IAAI;QACF,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,GAAG,IAAI,GAAG,CAAC,UAAU;YAAE,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IAC7E,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,MAAM,GAAG,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAC;QAAC,IAAI,CAAC,GAAG;YAAE,OAAO;QACtD,GAAG,CAAC,eAAe,EAAE,CAAC;QAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,CAAC;IAED,eAAe,KAAK,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;CAC9D","sourcesContent":["export class SelectionManager {\n    private host: HTMLElement;\n    private onChange: () => void;\n    public editorEl: HTMLElement;\n    public lastRange: Range | null = null;\n    private handler!: () => void;\n  \n    constructor(args: { host: HTMLElement; editorEl: HTMLElement; onChange: () => void }) {\n      this.host = args.host;\n      this.editorEl = args.editorEl;\n      this.onChange = args.onChange;\n    }\n  \n    start() {\n      this.handler = () => {\n        const sel = document.getSelection();\n        if (!sel || sel.rangeCount === 0) return;\n        const range = sel.getRangeAt(0);\n        if (this.editorEl.contains(range.commonAncestorContainer)) {\n          this.lastRange = range.cloneRange();\n          this.onChange();\n        }\n      };\n      document.addEventListener('selectionchange', this.handler, true);\n    }\n  \n    stop() { if (this.handler) document.removeEventListener('selectionchange', this.handler, true); }\n  \n    save() {\n      const sel = window.getSelection();\n      if (sel && sel.rangeCount) this.lastRange = sel.getRangeAt(0).cloneRange();\n    }\n  \n    restore() {\n      if (!this.lastRange) return;\n      const sel = document.getSelection(); if (!sel) return;\n      sel.removeAllRanges(); sel.addRange(this.lastRange);\n    }\n  \n    focusAndRestore() { this.editorEl?.focus(); this.restore(); }\n  }\n  "]}

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

@@ -0,0 +1,28 @@
+export declare class ToolbarController {
+    buttonMap: Map<string, HTMLElement[]>;
+    headingSelect: HTMLSelectElement | null;
+    fontSelect: HTMLSelectElement | null;
+    colorInput: HTMLInputElement | null;
+    bgColorInput: HTMLInputElement | null;
+    colorSwatchEl: HTMLElement | null;
+    bgSwatchEl: HTMLElement | null;
+    private editorEl;
+    private onCommand;
+    private onChange;
+    private setAlignment;
+    private setBlockTag;
+    private setFontFamily;
+    private setForeColor;
+    private setBackColor;
+    constructor(args: {
+        editorEl: HTMLElement;
+        onCommand: (cmd: string) => void;
+        onChange: () => void;
+        setAlignment: (a: 'left' | 'center' | 'right' | 'justify') => void;
+        setBlockTag: (t: string) => void;
+        setFontFamily: (ff: string) => void;
+        setForeColor: (c: string) => void;
+        setBackColor: (c: string) => void;
+    });
+    wire(tb: HTMLElement): void;
+}

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

@@ -0,0 +1,161 @@
+import { DEFAULT_ICONS } from './vars';
+export class ToolbarController {
+    constructor(args) {
+        this.buttonMap = new Map();
+        this.headingSelect = null;
+        this.fontSelect = null;
+        this.colorInput = null;
+        this.bgColorInput = null;
+        this.colorSwatchEl = null;
+        this.bgSwatchEl = null;
+        this.editorEl = args.editorEl;
+        this.onCommand = args.onCommand;
+        this.onChange = args.onChange;
+        this.setAlignment = args.setAlignment;
+        this.setBlockTag = args.setBlockTag;
+        this.setFontFamily = args.setFontFamily;
+        this.setForeColor = args.setForeColor;
+        this.setBackColor = args.setBackColor;
+    }
+    wire(tb) {
+        // reset
+        this.buttonMap.clear();
+        this.headingSelect = null;
+        this.fontSelect = null;
+        this.colorInput = null;
+        this.bgColorInput = null;
+        this.colorSwatchEl = null;
+        this.bgSwatchEl = 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) => {
+                    const alignment = e.detail;
+                    this.setAlignment(alignment);
+                    this.onChange();
+                });
+                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';
+                }
+                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)
+                    child.appendChild(btn);
+                btn.setAttribute('aria-label', label);
+                btn.addEventListener('mousedown', e => e.preventDefault());
+                btn.addEventListener('click', () => this.onCommand(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) => {
+                    const val = e.detail;
+                    if (type === 'heading')
+                        this.setBlockTag(val);
+                    else if (type === 'font')
+                        this.setFontFamily(val);
+                    this.onChange();
+                });
+                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';
+                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';
+                    child.appendChild(input);
+                }
+                input.title = label;
+                input.value = value;
+                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);
+                }
+                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;
+                }
+                trigger.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    // Caller will handle selection focus before invoking controller events
+                    input.click();
+                });
+                input.addEventListener('input', () => {
+                    if (mode === 'background') {
+                        this.setBackColor(input.value);
+                        if (this.bgSwatchEl)
+                            this.bgSwatchEl.style.backgroundColor = input.value;
+                    }
+                    else {
+                        this.setForeColor(input.value);
+                        if (this.colorSwatchEl)
+                            this.colorSwatchEl.style.backgroundColor = input.value;
+                    }
+                    this.onChange();
+                });
+                trigger.addEventListener('mousedown', e => e.preventDefault());
+                input.addEventListener('mousedown', e => e.preventDefault());
+            }
+        });
+    }
+}
+//# sourceMappingURL=toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/rte-utils/toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { DEFAULT_ICONS } from './vars';\n\nexport class ToolbarController {\n  public buttonMap = new Map<string, HTMLElement[]>();\n  public headingSelect: HTMLSelectElement | null = null;\n  public fontSelect: HTMLSelectElement | null = null;\n  public colorInput: HTMLInputElement | null = null;\n  public bgColorInput: HTMLInputElement | null = null;\n  public colorSwatchEl: HTMLElement | null = null;\n  public bgSwatchEl: HTMLElement | null = null;\n\n  private editorEl: HTMLElement;\n  private onCommand: (cmd: string) => void;\n  private onChange: () => void;\n  private setAlignment: (a: 'left'|'center'|'right'|'justify') => void;\n  private setBlockTag: (t: string) => void;\n  private setFontFamily: (ff: string) => void;\n  private setForeColor: (c: string) => void;\n  private setBackColor: (c: string) => void;\n\n  constructor(args: {\n    editorEl: HTMLElement;\n    onCommand: (cmd: string) => void;\n    onChange: () => void;\n    setAlignment: (a: 'left'|'center'|'right'|'justify') => void;\n    setBlockTag: (t: string) => void;\n    setFontFamily: (ff: string) => void;\n    setForeColor: (c: string) => void;\n    setBackColor: (c: string) => void;\n  }) {\n    this.editorEl = args.editorEl;\n    this.onCommand = args.onCommand;\n    this.onChange = args.onChange;\n    this.setAlignment = args.setAlignment;\n    this.setBlockTag = args.setBlockTag;\n    this.setFontFamily = args.setFontFamily;\n    this.setForeColor = args.setForeColor;\n    this.setBackColor = args.setBackColor;\n  }\n\n  wire(tb: HTMLElement) {\n    // reset\n    this.buttonMap.clear();\n    this.headingSelect = null; this.fontSelect = null;\n    this.colorInput = null; this.bgColorInput = null;\n    this.colorSwatchEl = null; this.bgSwatchEl = null;\n\n    Array.from(tb.children).forEach(child => {\n      const tag = child.tagName.toLowerCase();\n\n      if (tag === 'nile-rte-select' && child.getAttribute('type') === 'align') {\n        child.addEventListener('change', (e: any) => {\n          const alignment = e.detail as 'left'|'center'|'right'|'justify';\n          this.setAlignment(alignment);\n          this.onChange();\n        });\n        return;\n      }\n\n      if (tag === 'nile-rte-toolbar-item') {\n        let btn = child.querySelector(':scope > nile-button') as HTMLElement | null;\n        const cmd   = child.getAttribute('name')  || '';\n        const label = child.getAttribute('label') || cmd;\n        const iconAttr = child.getAttribute('icon');\n        const authoredHasContent = child.innerHTML.trim().length > 0;\n\n        if (!btn) {\n          btn = document.createElement('nile-button');\n          (btn as any).variant = 'tertiary';\n          (btn as any).size = 'small';\n        }\n\n        if (iconAttr) {\n          btn.innerHTML = `<nile-icon name=\"${iconAttr}\" aria-label=\"${label}\"></nile-icon>`;\n          child.innerHTML = '';\n        } else if (!authoredHasContent) {\n          const defaultIcon = DEFAULT_ICONS[cmd] as string | undefined;\n          if (defaultIcon) {\n            btn.innerHTML = `<nile-icon name=\"${defaultIcon}\" size=\"20\" color=\"black\" aria-label=\"${label}\"></nile-icon>`;\n          } else {\n            btn.textContent = label || cmd;\n          }\n          child.innerHTML = '';\n        } else {\n          btn.innerHTML = child.innerHTML;\n          child.innerHTML = '';\n        }\n\n        if (!btn.isConnected) child.appendChild(btn);\n        btn.setAttribute('aria-label', label);\n        btn.addEventListener('mousedown', e => e.preventDefault());\n        btn.addEventListener('click', () => this.onCommand(cmd));\n\n        const arr = this.buttonMap.get(cmd) ?? [];\n        arr.push(btn); this.buttonMap.set(cmd, arr);\n        return;\n      }\n\n      if (tag === 'nile-rte-select') {\n        const type = child.getAttribute('type') || '';\n        child.addEventListener('change', (e: any) => {\n          const val = e.detail as string;\n          if (type === 'heading') this.setBlockTag(val as any);\n          else if (type === 'font') this.setFontFamily(val);\n          this.onChange();\n        });\n        return;\n      }\n\n      if (tag === 'nile-rte-color') {\n        const label = child.getAttribute('label') ?? 'Text color';\n        const value = child.getAttribute('value') ?? '#000000';\n        const mode  = child.getAttribute('mode')  ?? 'text';\n\n        let input = child.querySelector(':scope > input[type=\"color\"]') as HTMLInputElement | null;\n        if (!input) {\n          input = document.createElement('input');\n          input.type = 'color';\n          input.style.position = 'absolute';\n          input.style.opacity = '0';\n          input.style.pointerEvents = 'none';\n          child.appendChild(input);\n        }\n        input.title = label; input.value = value;\n\n        let trigger = child.querySelector(':scope > button.rte-color-trigger') as HTMLButtonElement | null;\n        if (!trigger) {\n          trigger = document.createElement('button');\n          trigger.type = 'button';\n          trigger.className = 'rte-color-trigger';\n          trigger.setAttribute('aria-label', label);\n          if (mode === 'background') {\n            trigger.innerHTML = `<span class=\"swatch-box\" aria-hidden=\"true\"></span>`;\n          } else {\n            trigger.innerHTML = `\n              <span class=\"glyph-stack\" aria-hidden=\"true\">\n                <span class=\"glyph\">A</span>\n                <span class=\"underline\"></span>\n              </span>`;\n          }\n          child.appendChild(trigger);\n        }\n\n        const underline = trigger.querySelector('.underline') as HTMLElement | null;\n        const square    = trigger.querySelector('.swatch-box') as HTMLElement | null;\n\n        if (mode === 'background') {\n          this.bgColorInput  = input; this.bgSwatchEl    = square;\n          if (this.bgSwatchEl) this.bgSwatchEl.style.backgroundColor = input.value;\n        } else {\n          this.colorInput    = input; this.colorSwatchEl = underline;\n          if (this.colorSwatchEl) this.colorSwatchEl.style.backgroundColor = input.value;\n        }\n\n        trigger.addEventListener('click', (e) => {\n          e.preventDefault();\n          // Caller will handle selection focus before invoking controller events\n          input!.click();\n        });\n\n        input.addEventListener('input', () => {\n          if (mode === 'background') {\n            this.setBackColor(input!.value);\n            if (this.bgSwatchEl) this.bgSwatchEl.style.backgroundColor = input!.value;\n          } else {\n            this.setForeColor(input!.value);\n            if (this.colorSwatchEl) this.colorSwatchEl.style.backgroundColor = input!.value;\n          }\n          this.onChange();\n        });\n\n        trigger.addEventListener('mousedown', e => e.preventDefault());\n        input.addEventListener('mousedown',  e => e.preventDefault());\n      }\n    });\n  }\n}\n"]}

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

@@ -0,0 +1,13 @@
+export declare function updateToolbarState(ctx: {
+    editorEl: HTMLElement;
+    buttonMap: Map<string, HTMLElement[]>;
+    headingSelect: HTMLSelectElement | null;
+    fontSelect: HTMLSelectElement | null;
+    colorInput: HTMLInputElement | null;
+    colorSwatchEl: HTMLElement | null;
+    bgColorInput: HTMLInputElement | null;
+    bgSwatchEl: HTMLElement | null;
+    nearestElement: (n: Node) => HTMLElement | null;
+    closestBlock: (n: Node, root: HTMLElement) => HTMLElement | null;
+    rgbToHex: (rgb: string) => string;
+}): void;

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

@@ -0,0 +1,119 @@
+export function updateToolbarState(ctx) {
+    const { editorEl, buttonMap, headingSelect, fontSelect, colorInput, colorSwatchEl, bgColorInput, bgSwatchEl, nearestElement, closestBlock, rgbToHex } = ctx;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0)
+        return;
+    const range = sel.getRangeAt(0);
+    if (!editorEl.contains(range.commonAncestorContainer))
+        return;
+    const startElm = nearestElement(range.startContainer) || editorEl;
+    const comp = getComputedStyle(startElm);
+    const block = closestBlock(range.startContainer, editorEl) || editorEl;
+    // Bold
+    const isBold = (() => {
+        let n = startElm;
+        while (n && n !== 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;
+    })();
+    // Italic
+    const isItalic = (() => {
+        let n = startElm;
+        while (n && n !== 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;
+    })();
+    // Underline
+    const isUnderline = (() => {
+        let n = startElm;
+        while (n && n !== 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() || '') : '';
+    const setBtnActive = (cmd, active) => {
+        const arr = buttonMap.get(cmd);
+        if (!arr)
+            return;
+        for (const btn of arr)
+            btn.toggleAttribute('data-active', !!active);
+    };
+    setBtnActive('bold', isBold);
+    setBtnActive('italic', isItalic);
+    setBtnActive('underline', isUnderline);
+    setBtnActive('link', inLink);
+    setBtnActive('left', alignNorm === 'left' && !['center', 'right', 'justify'].includes(alignNorm));
+    setBtnActive('center', alignNorm === 'center');
+    setBtnActive('right', alignNorm === 'right');
+    setBtnActive('justify', alignNorm === 'justify');
+    setBtnActive('ul', listType === 'ul');
+    setBtnActive('ol', listType === 'ol');
+    // Heading reflect
+    if (headingSelect) {
+        const tag = block.tagName.toLowerCase();
+        const v = ['h1', 'h2', 'h3'].includes(tag) ? tag : 'p';
+        if (headingSelect.value !== v)
+            headingSelect.value = v;
+    }
+    // Font reflect
+    if (fontSelect) {
+        const ff = (comp.fontFamily || '').replace(/["']/g, '').split(',')[0].trim().toLowerCase();
+        if (ff) {
+            for (const opt of Array.from(fontSelect.options)) {
+                if (opt.value.toLowerCase() === ff) {
+                    fontSelect.value = opt.value;
+                    break;
+                }
+            }
+        }
+    }
+    if (colorInput) {
+        const hex = rgbToHex(comp.color);
+        if (hex && colorInput.value.toLowerCase() !== hex.toLowerCase()) {
+            colorInput.value = hex;
+        }
+        if (colorSwatchEl)
+            colorSwatchEl.style.backgroundColor = colorInput.value;
+    }
+    if (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 && bgColorInput.value.toLowerCase() !== bgHex.toLowerCase()) {
+                bgColorInput.value = bgHex;
+            }
+        }
+        if (bgSwatchEl)
+            bgSwatchEl.style.backgroundColor = bgColorInput.value;
+    }
+}
+//# sourceMappingURL=toolbarState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarState.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/rte-utils/toolbarState.ts"],"names":[],"mappings":"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","sourcesContent":["export function updateToolbarState(ctx: {\n    editorEl: HTMLElement;\n    buttonMap: Map<string, HTMLElement[]>;\n    headingSelect: HTMLSelectElement | null;\n    fontSelect: HTMLSelectElement | null;\n    colorInput: HTMLInputElement | null;\n    colorSwatchEl: HTMLElement | null;\n    bgColorInput: HTMLInputElement | null;\n    bgSwatchEl: HTMLElement | null;\n    nearestElement: (n: Node) => HTMLElement | null;\n    closestBlock: (n: Node, root: HTMLElement) => HTMLElement | null;\n    rgbToHex: (rgb: string) => string;\n  }) {\n    const { editorEl, buttonMap, headingSelect, fontSelect, colorInput, colorSwatchEl, bgColorInput, bgSwatchEl, nearestElement, closestBlock, rgbToHex } = ctx;\n  \n    const sel = document.getSelection();\n    if (!sel || sel.rangeCount === 0) return;\n    const range = sel.getRangeAt(0);\n    if (!editorEl.contains(range.commonAncestorContainer)) return;\n  \n    const startElm = nearestElement(range.startContainer) || editorEl;\n    const comp = getComputedStyle(startElm);\n    const block = closestBlock(range.startContainer, editorEl) || editorEl;\n  \n    // Bold\n    const isBold = (() => {\n      let n: Node | null = startElm;\n      while (n && n !== editorEl) {\n        if (n instanceof HTMLElement) {\n          const t = n.tagName.toLowerCase();\n          if (t === 'strong' || t === 'b') return true;\n          const w = getComputedStyle(n).fontWeight;\n          if (parseInt(w, 10) >= 600) return true;\n        }\n        n = n.parentNode;\n      }\n      return false;\n    })();\n  \n    // Italic\n    const isItalic = (() => {\n      let n: Node | null = startElm;\n      while (n && n !== editorEl) {\n        if (n instanceof HTMLElement) {\n          const t = n.tagName.toLowerCase();\n          if (t === 'em' || t === 'i') return true;\n          if (getComputedStyle(n).fontStyle === 'italic') return true;\n        }\n        n = n.parentNode;\n      }\n      return false;\n    })();\n  \n    // Underline\n    const isUnderline = (() => {\n      let n: Node | null = startElm;\n      while (n && n !== editorEl) {\n        if (n instanceof HTMLElement) {\n          const tdl = getComputedStyle(n).textDecorationLine;\n          if (tdl && tdl.includes('underline')) return true;\n          if (n.tagName.toLowerCase() === 'u') return true;\n        }\n        n = n.parentNode;\n      }\n      return false;\n    })();\n  \n    const inLink = !!(startElm as HTMLElement).closest('a');\n  \n    const align = (block as HTMLElement).style.textAlign || getComputedStyle(block).textAlign || 'start';\n    const alignNorm = align === 'start' ? 'left' : align;\n  \n    const inLi = !!(startElm as HTMLElement).closest('li');\n    const listType = inLi ? (((startElm as HTMLElement).closest('ul,ol') as HTMLElement | null)?.tagName.toLowerCase() || '') : '';\n  \n    const setBtnActive = (cmd: string, active: boolean) => {\n      const arr = buttonMap.get(cmd); if (!arr) return;\n      for (const btn of arr) btn.toggleAttribute('data-active', !!active);\n    };\n  \n    setBtnActive('bold', isBold);\n    setBtnActive('italic', isItalic);\n    setBtnActive('underline', isUnderline);\n    setBtnActive('link', inLink);\n  \n    setBtnActive('left', alignNorm === 'left' && !['center','right','justify'].includes(alignNorm));\n    setBtnActive('center', alignNorm === 'center');\n    setBtnActive('right', alignNorm === 'right');\n    setBtnActive('justify', alignNorm === 'justify');\n  \n    setBtnActive('ul', listType === 'ul');\n    setBtnActive('ol', listType === 'ol');\n  \n    // Heading reflect\n    if (headingSelect) {\n      const tag = (block as HTMLElement).tagName.toLowerCase();\n      const v = ['h1','h2','h3'].includes(tag) ? tag : 'p';\n      if (headingSelect.value !== v) headingSelect.value = v;\n    }\n  \n    // Font reflect\n    if (fontSelect) {\n      const ff = (comp.fontFamily || '').replace(/[\"']/g, '').split(',')[0].trim().toLowerCase();\n      if (ff) {\n        for (const opt of Array.from(fontSelect.options)) {\n          if (opt.value.toLowerCase() === ff) { fontSelect.value = opt.value; break; }\n        }\n      }\n    }\n  \n    if (colorInput) {\n      const hex = rgbToHex(comp.color);\n      if (hex && colorInput.value.toLowerCase() !== hex.toLowerCase()) {\n        colorInput.value = hex;\n      }\n      if (colorSwatchEl) colorSwatchEl.style.backgroundColor = colorInput.value;\n    }\n  \n    if (bgColorInput) {\n      const bg = getComputedStyle(startElm).backgroundColor;\n      if (bg && !/transparent|rgba\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/i.test(bg)) {\n        const bgHex = rgbToHex(bg);\n        if (bgHex && bgColorInput.value.toLowerCase() !== bgHex.toLowerCase()) {\n          bgColorInput.value = bgHex;\n        }\n      }\n      if (bgSwatchEl) bgSwatchEl.style.backgroundColor = bgColorInput.value;\n    }\n  }\n  "]}

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

@@ -0,0 +1 @@
+export declare const DEFAULT_ICONS: Record<string, string>;

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

@@ -0,0 +1,14 @@
+export 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: 'nile-ul',
+    ol: 'nile-ol',
+    clear: 'error',
+};
+//# sourceMappingURL=vars.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vars.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/rte-utils/vars.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAA2B;IACjD,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,eAAe;IACvB,SAAS,EAAE,kBAAkB;IAC7B,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,qBAAqB;IAC7B,KAAK,EAAE,oBAAoB;IAC3B,OAAO,EAAE,sBAAsB;IAC/B,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export const DEFAULT_ICONS: Record<string, string> = {\n    bold: 'format_bold',\n    italic: 'format_italic',\n    underline: 'format_underline',\n    link: 'link_2',\n    left: 'format_align_left',\n    center: 'format_align_middle',\n    right: 'format_align_right',\n    justify: 'format_align_justify',\n    ul: 'nile-ul',\n    ol: 'nile-ol',\n    clear: 'error',\n  };"]}

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

@@ -0,0 +1 @@
+export declare function sanitizeContent(editorEl: HTMLElement): HTMLElement;

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

@@ -0,0 +1,40 @@
+// sanitize.ts
+export function sanitizeContent(editorEl) {
+    const clone = editorEl.cloneNode(true);
+    // Disallowed tags
+    clone.querySelectorAll('font, o\\:p, script, style').forEach(n => n.remove());
+    // Clean empty spans
+    clone.querySelectorAll('span').forEach(span => {
+        if (!span.getAttributeNames().length) {
+            while (span.firstChild)
+                span.parentNode?.insertBefore(span.firstChild, span);
+            span.remove();
+        }
+    });
+    const allowed = [
+        'font-weight', 'font-style', 'text-decoration', 'text-transform',
+        'font-size', 'line-height', 'font-family', 'color', 'background-color',
+        'text-align', 'margin-left', 'margin-right', 'margin-top', 'margin-bottom',
+        'list-style-type'
+    ];
+    // Walk over elements and embed computed styles
+    const walker = document.createTreeWalker(editorEl, NodeFilter.SHOW_ELEMENT);
+    const targetWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
+    while (walker.nextNode() && targetWalker.nextNode()) {
+        const srcEl = walker.currentNode;
+        const dstEl = targetWalker.currentNode;
+        const comp = getComputedStyle(srcEl);
+        const safe = [];
+        allowed.forEach(prop => {
+            const val = comp.getPropertyValue(prop);
+            if (val && val !== 'normal' && val !== 'initial' && val !== 'none' && val !== '0px') {
+                safe.push(`${prop}:${val}`);
+            }
+        });
+        if (safe.length) {
+            dstEl.setAttribute('style', safe.join(';'));
+        }
+    }
+    return clone;
+}
+//# sourceMappingURL=sanatize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sanatize.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/sanatize.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,MAAM,UAAU,eAAe,CAAC,QAAqB;IACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;IAEtD,kBAAkB;IAClB,KAAK,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;IAE9E,oBAAoB;IACpB,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAC5C,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YAC7E,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG;QACd,aAAa,EAAC,YAAY,EAAC,iBAAiB,EAAC,gBAAgB;QAC7D,WAAW,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,kBAAkB;QAClE,YAAY,EAAC,aAAa,EAAC,cAAc,EAAC,YAAY,EAAC,eAAe;QACtE,iBAAiB;KAClB,CAAC;IAEF,+CAA+C;IAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAC5E,MAAM,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/E,OAAO,MAAM,CAAC,QAAQ,EAAE,IAAI,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC;QACpD,MAAM,KAAK,GAAG,MAAM,CAAC,WAA0B,CAAC;QAChD,MAAM,KAAK,GAAG,YAAY,CAAC,WAA0B,CAAC;QAEtD,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACrC,MAAM,IAAI,GAAa,EAAE,CAAC;QAE1B,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACrB,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACxC,IAAI,GAAG,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,KAAK,EAAE,CAAC;gBACpF,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// sanitize.ts\nexport function sanitizeContent(editorEl: HTMLElement): HTMLElement {\n    const clone = editorEl.cloneNode(true) as HTMLElement;\n  \n    // Disallowed tags\n    clone.querySelectorAll('font, o\\\\:p, script, style').forEach(n => n.remove());\n  \n    // Clean empty spans\n    clone.querySelectorAll('span').forEach(span => {\n      if (!span.getAttributeNames().length) {\n        while (span.firstChild) span.parentNode?.insertBefore(span.firstChild, span);\n        span.remove();\n      }\n    });\n  \n    const allowed = [\n      'font-weight','font-style','text-decoration','text-transform',\n      'font-size','line-height','font-family','color','background-color',\n      'text-align','margin-left','margin-right','margin-top','margin-bottom',\n      'list-style-type'\n    ];\n  \n    // Walk over elements and embed computed styles\n    const walker = document.createTreeWalker(editorEl, NodeFilter.SHOW_ELEMENT);\n    const targetWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);\n  \n    while (walker.nextNode() && targetWalker.nextNode()) {\n      const srcEl = walker.currentNode as HTMLElement;\n      const dstEl = targetWalker.currentNode as HTMLElement;\n  \n      const comp = getComputedStyle(srcEl);\n      const safe: string[] = [];\n  \n      allowed.forEach(prop => {\n        const val = comp.getPropertyValue(prop);\n        if (val && val !== 'normal' && val !== 'initial' && val !== 'none' && val !== '0px') {\n          safe.push(`${prop}:${val}`);\n        }\n      });\n  \n      if (safe.length) {\n        dstEl.setAttribute('style', safe.join(';'));\n      }\n    }\n  \n    return clone;\n  }\n  "]}