ngx-rich-text-pro 1.0.4 → 1.0.5

package/fesm2022/ngx-rich-text-pro.mjs

@@ -955,6 +955,12 @@ class NgxRichTextEditorComponent {
         this.mergeConfig();
         this.updateStats();
     }
+    ngAfterViewInit() {
+        try {
+            document.execCommand('defaultParagraphSeparator', false, 'p');
+        }
+        catch { }
+    }
     ngOnChanges(changes) {
         if (changes['config'] ||
             changes['tools'] ||
@@ -1207,6 +1213,14 @@ class NgxRichTextEditorComponent {
                     this.setCaretCharacterOffsetWithin(root, offset);
                 }
             }
+            if (this.exclusiveInlineFormats ?? this.computedConfig.exclusiveInlineFormats) {
+                const hasNested = root.querySelector('u b, u strong, u i, u em, b u, b ins, b i, b em, i u, i ins, i b, i strong') !== null;
+                if (hasNested) {
+                    const offset = this.getCaretCharacterOffsetWithin(root);
+                    this.sanitizeExclusiveFormatting(root);
+                    this.setCaretCharacterOffsetWithin(root, offset);
+                }
+            }
             const isMarkdown = this.isMarkdownMode();
             const html = root.innerHTML;
             const markdown = this.htmlToMarkdown(root);
@@ -1220,6 +1234,12 @@ class NgxRichTextEditorComponent {
             this.updateEditorState();
             this.cdr.markForCheck();
             const emittedValue = isMarkdown ? markdown : html;
+            console.log('[NgxRichTextEditor] onEditorInput:', {
+                innerHTML: root.innerHTML,
+                output: emittedValue,
+                escaped: JSON.stringify(emittedValue),
+                length: emittedValue.length,
+            });
             this.onChange(emittedValue);
             this.valueChange.emit(emittedValue);
             this.markdownChange.emit(markdown);
@@ -1232,6 +1252,10 @@ class NgxRichTextEditorComponent {
     }
     onEditorFocus(event) {
         this.isFocused = true;
+        try {
+            document.execCommand('defaultParagraphSeparator', false, 'p');
+        }
+        catch { }
         this.editorFocus.emit(event);
     }
     onEditorBlur(event) {
@@ -1618,22 +1642,563 @@ class NgxRichTextEditorComponent {
     toggleExclusiveInlineFormat(targetCommand, otherCommands) {
         if (this.disabled || this.readonly || this.isSourceView)
             return;
-        this.focusEditor();
-        const isTargetActive = this.commandService.queryState(targetCommand);
-        if (isTargetActive) {
+        const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+        const root = this.editorContentRef?.nativeElement;
+        if (!sel || sel.rangeCount === 0 || !root) {
+            this.focusEditor();
             this.commandService.execute(targetCommand);
+            this.onEditorInput();
+            this.updateEditorState();
+            return;
         }
-        else {
-            for (const cmd of otherCommands) {
-                if (this.commandService.queryState(cmd)) {
-                    this.commandService.execute(cmd);
+        const range = sel.getRangeAt(0);
+        // If selection is outside editor root, fall back to standard execution
+        if (!root.contains(range.commonAncestorContainer)) {
+            this.focusEditor();
+            this.commandService.execute(targetCommand);
+            this.onEditorInput();
+            this.updateEditorState();
+            return;
+        }
+        if (range.collapsed) {
+            this.focusEditor();
+            const isTargetActive = this.commandService.queryState(targetCommand);
+            if (isTargetActive) {
+                this.commandService.execute(targetCommand);
+            }
+            else {
+                for (const cmd of otherCommands) {
+                    if (this.commandService.queryState(cmd)) {
+                        this.commandService.execute(cmd);
+                    }
                 }
+                this.commandService.execute(targetCommand);
+            }
+            this.onEditorInput();
+            this.updateEditorState();
+            return;
+        }
+        // Range has selected text:
+        this.normalizeRangeBoundaries(range);
+        const tagMap = {
+            bold: 'b',
+            italic: 'i',
+            underline: 'u',
+        };
+        const formatAncestor = this.getFormattingAncestor(range, root);
+        if (formatAncestor) {
+            const ancestorFormat = this.getFormatType(formatAncestor);
+            const isSameFormat = ancestorFormat === targetCommand;
+            if (isSameFormat) {
+                // Toggle off (deselect) target format from selection inside ancestor
+                this.splitAndFormatInsideAncestor(formatAncestor, range, null);
+            }
+            else {
+                // Apply target format exclusively to selection, replacing ancestor format
+                const targetTag = tagMap[targetCommand] || 'b';
+                this.splitAndFormatInsideAncestor(formatAncestor, range, targetTag);
+            }
+        }
+        else {
+            const isTargetActive = this.commandService.queryState(targetCommand);
+            if (isTargetActive) {
+                // Toggle off target format from selection
+                this.removeFormatFromRange(range, targetCommand);
+            }
+            else {
+                // Apply target format exclusively to selection, stripping any conflicting formats
+                this.applyExclusiveFormatToRange(range, targetCommand);
             }
-            this.commandService.execute(targetCommand);
         }
+        this.sanitizeExclusiveFormatting(root);
+        this.cleanupEmptyFormattingElements(root);
+        this.mergeAdjacentFormattingElements(root);
         this.onEditorInput();
         this.updateEditorState();
     }
+    normalizeRangeBoundaries(range) {
+        // If startContainer is an element, drill down to the actual text node
+        if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
+            const el = range.startContainer;
+            if (el.childNodes.length > 0) {
+                if (range.startOffset < el.childNodes.length) {
+                    let node = el.childNodes[range.startOffset];
+                    while (node.nodeType === Node.ELEMENT_NODE && node.firstChild) {
+                        node = node.firstChild;
+                    }
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        range.setStart(node, 0);
+                    }
+                }
+                else {
+                    let node = el.childNodes[el.childNodes.length - 1];
+                    while (node.nodeType === Node.ELEMENT_NODE && node.lastChild) {
+                        node = node.lastChild;
+                    }
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        range.setStart(node, node.textContent?.length || 0);
+                    }
+                }
+            }
+        }
+        // If endContainer is an element, drill down to the actual text node
+        if (range.endContainer.nodeType === Node.ELEMENT_NODE) {
+            const el = range.endContainer;
+            if (el.childNodes.length > 0) {
+                if (range.endOffset > 0) {
+                    let node = el.childNodes[Math.min(range.endOffset - 1, el.childNodes.length - 1)];
+                    while (node.nodeType === Node.ELEMENT_NODE && node.lastChild) {
+                        node = node.lastChild;
+                    }
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        range.setEnd(node, node.textContent?.length || 0);
+                    }
+                }
+                else {
+                    let node = el.childNodes[0];
+                    while (node.nodeType === Node.ELEMENT_NODE && node.firstChild) {
+                        node = node.firstChild;
+                    }
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        range.setEnd(node, 0);
+                    }
+                }
+            }
+        }
+    }
+    getFormattingAncestor(range, root) {
+        const isFormatTag = (el) => ['b', 'strong', 'i', 'em', 'u', 'ins'].includes(el.tagName.toLowerCase());
+        let node = range.commonAncestorContainer;
+        while (node && node !== root) {
+            if (node.nodeType === Node.ELEMENT_NODE && isFormatTag(node)) {
+                return node;
+            }
+            node = node.parentNode;
+        }
+        let startAnc = null;
+        let sNode = range.startContainer;
+        while (sNode && sNode !== root) {
+            if (sNode.nodeType === Node.ELEMENT_NODE && isFormatTag(sNode)) {
+                startAnc = sNode;
+                break;
+            }
+            sNode = sNode.parentNode;
+        }
+        let endAnc = null;
+        let eNode = range.endContainer;
+        while (eNode && eNode !== root) {
+            if (eNode.nodeType === Node.ELEMENT_NODE && isFormatTag(eNode)) {
+                endAnc = eNode;
+                break;
+            }
+            eNode = eNode.parentNode;
+        }
+        if (startAnc && endAnc && startAnc === endAnc) {
+            return startAnc;
+        }
+        return null;
+    }
+    getFormatType(el) {
+        const tag = el.tagName.toLowerCase();
+        if (tag === 'b' || tag === 'strong')
+            return 'bold';
+        if (tag === 'i' || tag === 'em')
+            return 'italic';
+        if (tag === 'u' || tag === 'ins')
+            return 'underline';
+        return null;
+    }
+    splitAndFormatInsideAncestor(ancestor, range, newTag) {
+        const parentNode = ancestor.parentNode;
+        if (!parentNode)
+            return;
+        this.normalizeRangeBoundaries(range);
+        if (range.startContainer === range.endContainer &&
+            range.startContainer.nodeType === Node.TEXT_NODE) {
+            const textNode = range.startContainer;
+            const startOffset = range.startOffset;
+            const endOffset = range.endOffset;
+            // 1. Split after selection
+            const afterText = textNode.splitText(endOffset);
+            // 2. Split before selection
+            const selectedText = startOffset > 0 ? textNode.splitText(startOffset) : textNode;
+            // Collect all siblings after selectedText inside ancestor
+            const afterNodes = [];
+            let sibling = selectedText.nextSibling;
+            while (sibling) {
+                afterNodes.push(sibling);
+                sibling = sibling.nextSibling;
+            }
+            // Move afterNodes into a clone of ancestor
+            const cloneAfter = ancestor.cloneNode(false);
+            for (const node of afterNodes) {
+                cloneAfter.appendChild(node);
+            }
+            let middleNode;
+            if (newTag) {
+                const wrapper = document.createElement(newTag);
+                wrapper.appendChild(selectedText);
+                middleNode = wrapper;
+            }
+            else {
+                middleNode = selectedText;
+            }
+            parentNode.insertBefore(middleNode, ancestor.nextSibling);
+            if (cloneAfter.hasChildNodes() &&
+                (cloneAfter.textContent !== '' || cloneAfter.querySelector('img, br'))) {
+                parentNode.insertBefore(cloneAfter, middleNode.nextSibling);
+            }
+            if (!ancestor.hasChildNodes() ||
+                (ancestor.textContent === '' && !ancestor.querySelector('img, br'))) {
+                ancestor.remove();
+            }
+            const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+            if (sel) {
+                sel.removeAllRanges();
+                const newRange = document.createRange();
+                if (middleNode.nodeType === Node.ELEMENT_NODE && middleNode.firstChild) {
+                    newRange.setStart(middleNode.firstChild, 0);
+                    newRange.setEnd(middleNode.lastChild, middleNode.lastChild.textContent?.length || 0);
+                }
+                else if (middleNode.nodeType === Node.TEXT_NODE) {
+                    newRange.setStart(middleNode, 0);
+                    newRange.setEnd(middleNode, middleNode.textContent?.length || 0);
+                }
+                else {
+                    newRange.selectNodeContents(middleNode);
+                }
+                sel.addRange(newRange);
+            }
+            return;
+        }
+        // General multi-node fallback within ancestor:
+        const fragment = range.extractContents();
+        const formatEls = Array.from(fragment.querySelectorAll('b, strong, i, em, u, ins'));
+        for (const el of formatEls) {
+            while (el.firstChild) {
+                el.parentNode?.insertBefore(el.firstChild, el);
+            }
+            el.remove();
+        }
+        const styledEls = Array.from(fragment.querySelectorAll('*'));
+        for (const el of styledEls) {
+            if (el.style) {
+                el.style.fontWeight = '';
+                el.style.fontStyle = '';
+                el.style.textDecoration = '';
+            }
+        }
+        const cloneAfter = ancestor.cloneNode(false);
+        const tailRange = document.createRange();
+        tailRange.selectNodeContents(ancestor);
+        tailRange.setStart(range.startContainer, range.startOffset);
+        const tailFragment = tailRange.extractContents();
+        cloneAfter.appendChild(tailFragment);
+        const insertionRef = ancestor.nextSibling;
+        let selectedNodes = [];
+        if (newTag) {
+            const wrapper = document.createElement(newTag);
+            wrapper.appendChild(fragment);
+            parentNode.insertBefore(wrapper, insertionRef);
+            selectedNodes = [wrapper];
+        }
+        else {
+            const nodes = Array.from(fragment.childNodes);
+            for (const node of nodes) {
+                parentNode.insertBefore(node, insertionRef);
+            }
+            selectedNodes = nodes;
+        }
+        if (cloneAfter.hasChildNodes() &&
+            (cloneAfter.textContent !== '' || cloneAfter.querySelector('img, br'))) {
+            parentNode.insertBefore(cloneAfter, insertionRef);
+        }
+        if (!ancestor.hasChildNodes() ||
+            (ancestor.textContent === '' && !ancestor.querySelector('img, br'))) {
+            ancestor.remove();
+        }
+        const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+        if (sel && selectedNodes.length > 0) {
+            sel.removeAllRanges();
+            const newRange = document.createRange();
+            const first = selectedNodes[0];
+            const last = selectedNodes[selectedNodes.length - 1];
+            if (first.nodeType === Node.ELEMENT_NODE && first.firstChild) {
+                newRange.setStart(first.firstChild, 0);
+            }
+            else if (first.nodeType === Node.TEXT_NODE) {
+                newRange.setStart(first, 0);
+            }
+            else {
+                newRange.setStartBefore(first);
+            }
+            if (last.nodeType === Node.ELEMENT_NODE && last.lastChild) {
+                newRange.setEnd(last.lastChild, last.lastChild.textContent?.length || 0);
+            }
+            else if (last.nodeType === Node.TEXT_NODE) {
+                newRange.setEnd(last, last.textContent?.length || 0);
+            }
+            else {
+                newRange.setEndAfter(last);
+            }
+            sel.addRange(newRange);
+        }
+    }
+    mergeAdjacentFormattingElements(container) {
+        const formatTags = ['b', 'strong', 'i', 'em', 'u', 'ins'];
+        for (const tag of formatTags) {
+            const els = Array.from(container.querySelectorAll(tag));
+            for (const el of els) {
+                if (!el.parentNode)
+                    continue;
+                let next = el.nextSibling;
+                while (next &&
+                    next.nodeType === Node.ELEMENT_NODE &&
+                    next.tagName.toLowerCase() === tag) {
+                    const nextEl = next;
+                    while (nextEl.firstChild) {
+                        el.appendChild(nextEl.firstChild);
+                    }
+                    const toRemove = nextEl;
+                    next = nextEl.nextSibling;
+                    toRemove.remove();
+                }
+            }
+        }
+    }
+    applyExclusiveFormatToRange(range, targetCommand) {
+        const root = this.editorContentRef?.nativeElement;
+        if (root) {
+            this.expandRangeToEnclosingFormat(range, root);
+        }
+        const tagMap = {
+            bold: 'b',
+            italic: 'i',
+            underline: 'u',
+        };
+        const targetTag = tagMap[targetCommand] || 'b';
+        // Extract selected content, cleanly splitting any partially-selected elements at boundaries
+        const fragment = range.extractContents();
+        // Remove any formatting tags within the fragment
+        const formatEls = Array.from(fragment.querySelectorAll('b, strong, i, em, u, ins'));
+        for (const el of formatEls) {
+            while (el.firstChild) {
+                el.parentNode?.insertBefore(el.firstChild, el);
+            }
+            el.remove();
+        }
+        // Clear conflicting inline styles within the fragment
+        const styledEls = Array.from(fragment.querySelectorAll('*'));
+        for (const el of styledEls) {
+            if (el.style) {
+                el.style.fontWeight = '';
+                el.style.fontStyle = '';
+                el.style.textDecoration = '';
+            }
+        }
+        // Check if the fragment contains block elements
+        const blockSelector = 'p, div, li, h1, h2, h3, h4, h5, h6, blockquote, pre';
+        const blockEls = Array.from(fragment.querySelectorAll(blockSelector));
+        if (blockEls.length > 0) {
+            for (const block of blockEls) {
+                if (block.childNodes.length > 0) {
+                    const wrapper = document.createElement(targetTag);
+                    while (block.firstChild) {
+                        wrapper.appendChild(block.firstChild);
+                    }
+                    block.appendChild(wrapper);
+                }
+            }
+            range.insertNode(fragment);
+        }
+        else {
+            const wrapper = document.createElement(targetTag);
+            wrapper.appendChild(fragment);
+            range.insertNode(wrapper);
+            // Restore selection to the newly formatted wrapper
+            const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+            if (sel) {
+                sel.removeAllRanges();
+                const newRange = document.createRange();
+                newRange.selectNodeContents(wrapper);
+                sel.addRange(newRange);
+            }
+        }
+    }
+    removeFormatFromRange(range, targetCommand) {
+        const root = this.editorContentRef?.nativeElement;
+        if (root) {
+            this.expandRangeToEnclosingFormat(range, root);
+        }
+        const formatTags = {
+            bold: ['b', 'strong'],
+            italic: ['i', 'em'],
+            underline: ['u', 'ins'],
+        };
+        const tagsToRemove = formatTags[targetCommand] || [];
+        const fragment = range.extractContents();
+        const selector = tagsToRemove.join(', ');
+        if (selector) {
+            const matchedEls = Array.from(fragment.querySelectorAll(selector));
+            for (const el of matchedEls) {
+                while (el.firstChild) {
+                    el.parentNode?.insertBefore(el.firstChild, el);
+                }
+                el.remove();
+            }
+        }
+        const styledEls = Array.from(fragment.querySelectorAll('*'));
+        for (const el of styledEls) {
+            if (el.style) {
+                if (targetCommand === 'bold')
+                    el.style.fontWeight = '';
+                if (targetCommand === 'italic')
+                    el.style.fontStyle = '';
+                if (targetCommand === 'underline')
+                    el.style.textDecoration = '';
+            }
+        }
+        range.insertNode(fragment);
+    }
+    expandRangeToEnclosingFormat(range, root) {
+        const isFormattingTag = (el) => {
+            const tag = el.tagName.toLowerCase();
+            return ['b', 'strong', 'i', 'em', 'u', 'ins'].includes(tag);
+        };
+        let startNode = range.startContainer;
+        while (startNode && startNode !== root) {
+            if (startNode.nodeType === Node.ELEMENT_NODE && isFormattingTag(startNode)) {
+                if (range.startOffset === 0) {
+                    range.setStartBefore(startNode);
+                }
+                break;
+            }
+            if (startNode.previousSibling)
+                break;
+            startNode = startNode.parentNode;
+        }
+        let endNode = range.endContainer;
+        while (endNode && endNode !== root) {
+            if (endNode.nodeType === Node.ELEMENT_NODE && isFormattingTag(endNode)) {
+                const len = endNode.childNodes.length;
+                if (range.endOffset >= len) {
+                    range.setEndAfter(endNode);
+                }
+                break;
+            }
+            if (endNode.nextSibling)
+                break;
+            endNode = endNode.parentNode;
+        }
+    }
+    sanitizeExclusiveFormatting(container) {
+        // 1. Unwrap redundant same-tag nesting (e.g. <b><b>text</b></b> -> <b>text</b>)
+        const boldEls = container.querySelectorAll('b, strong');
+        boldEls.forEach((b) => {
+            const innerBolds = b.querySelectorAll('b, strong');
+            innerBolds.forEach((inner) => {
+                while (inner.firstChild) {
+                    inner.parentNode?.insertBefore(inner.firstChild, inner);
+                }
+                inner.remove();
+            });
+        });
+        const italicEls = container.querySelectorAll('i, em');
+        italicEls.forEach((i) => {
+            const innerItalics = i.querySelectorAll('i, em');
+            innerItalics.forEach((inner) => {
+                while (inner.firstChild) {
+                    inner.parentNode?.insertBefore(inner.firstChild, inner);
+                }
+                inner.remove();
+            });
+        });
+        const underEls = container.querySelectorAll('u, ins');
+        underEls.forEach((u) => {
+            const innerUnders = u.querySelectorAll('u, ins');
+            innerUnders.forEach((inner) => {
+                while (inner.firstChild) {
+                    inner.parentNode?.insertBefore(inner.firstChild, inner);
+                }
+                inner.remove();
+            });
+        });
+        // 2. Split any parent formatting tag around any different inner formatting tags
+        let passes = 0;
+        while (passes < 5) {
+            passes++;
+            let hasNested = false;
+            // If <u> contains <b> or <i>: split <u> around <b>, <strong>, <i>, <em>
+            const uWithOthers = Array.from(container.querySelectorAll('u, ins')).filter((el) => el.querySelector('b, strong, i, em') !== null);
+            for (const parent of uWithOthers) {
+                if (parent.parentNode) {
+                    hasNested = true;
+                    this.splitAroundInnerTags(parent, ['b', 'strong', 'i', 'em']);
+                }
+            }
+            // If <b> contains <u> or <i>: split <b> around <u>, <ins>, <i>, <em>
+            const bWithOthers = Array.from(container.querySelectorAll('b, strong')).filter((el) => el.querySelector('u, ins, i, em') !== null);
+            for (const parent of bWithOthers) {
+                if (parent.parentNode) {
+                    hasNested = true;
+                    this.splitAroundInnerTags(parent, ['u', 'ins', 'i', 'em']);
+                }
+            }
+            // If <i> contains <u> or <b>: split <i> around <u>, <ins>, <b>, <strong>
+            const iWithOthers = Array.from(container.querySelectorAll('i, em')).filter((el) => el.querySelector('u, ins, b, strong') !== null);
+            for (const parent of iWithOthers) {
+                if (parent.parentNode) {
+                    hasNested = true;
+                    this.splitAroundInnerTags(parent, ['u', 'ins', 'b', 'strong']);
+                }
+            }
+            if (!hasNested)
+                break;
+        }
+        this.cleanupEmptyFormattingElements(container);
+    }
+    splitAroundInnerTags(parent, innerTagNames) {
+        const parentTag = parent.tagName.toLowerCase();
+        const children = Array.from(parent.childNodes);
+        const parentNode = parent.parentNode;
+        if (!parentNode)
+            return;
+        let currentGroup = [];
+        const flushGroup = () => {
+            if (currentGroup.length === 0)
+                return;
+            const clone = document.createElement(parentTag);
+            if (parent.style.cssText)
+                clone.style.cssText = parent.style.cssText;
+            if (parent.className)
+                clone.className = parent.className;
+            for (const node of currentGroup) {
+                clone.appendChild(node);
+            }
+            parentNode.insertBefore(clone, parent);
+            currentGroup = [];
+        };
+        for (const child of children) {
+            if (child.nodeType === Node.ELEMENT_NODE &&
+                innerTagNames.includes(child.tagName.toLowerCase())) {
+                flushGroup();
+                parentNode.insertBefore(child, parent);
+            }
+            else {
+                currentGroup.push(child);
+            }
+        }
+        flushGroup();
+        parent.remove();
+    }
+    cleanupEmptyFormattingElements(container) {
+        const els = container.querySelectorAll('b, strong, i, em, u, ins');
+        els.forEach((el) => {
+            if (!el.hasChildNodes() || (el.textContent === '' && !el.querySelector('img, br'))) {
+                el.remove();
+            }
+        });
+    }
     strike() {
         this.exec('strikeThrough');
     }
@@ -1740,8 +2305,18 @@ class NgxRichTextEditorComponent {
     setFontFamily(font) {
         if (this.disabled || this.readonly || this.isSourceView || !font)
             return;
-        this.focusEditor();
-        this.commandService.setFontName(font);
+        const selection = typeof window !== 'undefined' ? window.getSelection() : null;
+        const hasSelection = selection && !selection.isCollapsed && (selection.toString()?.length ?? 0) > 0;
+        if (hasSelection) {
+            this.focusEditor();
+            this.commandService.setFontName(font);
+        }
+        else {
+            this.fontFamily = font;
+            if (this.editorContentRef?.nativeElement) {
+                this.editorContentRef.nativeElement.style.fontFamily = font;
+            }
+        }
         this.onEditorInput();
         this.updateEditorState();
     }
@@ -1751,8 +2326,18 @@ class NgxRichTextEditorComponent {
     setFontSize(size) {
         if (this.disabled || this.readonly || this.isSourceView || !size)
             return;
-        this.focusEditor();
-        this.commandService.setFontSize(String(size));
+        const selection = typeof window !== 'undefined' ? window.getSelection() : null;
+        const hasSelection = selection && !selection.isCollapsed && (selection.toString()?.length ?? 0) > 0;
+        if (hasSelection) {
+            this.focusEditor();
+            this.commandService.setFontSize(String(size));
+        }
+        else {
+            this.fontSize = String(size);
+            if (this.editorContentRef?.nativeElement) {
+                this.editorContentRef.nativeElement.style.fontSize = String(size);
+            }
+        }
         this.onEditorInput();
         this.updateEditorState();
     }
@@ -2199,12 +2784,36 @@ class NgxRichTextEditorComponent {
         let italic = this.commandService.queryState('italic');
         let underline = this.commandService.queryState('underline');
         if (this.exclusiveInlineFormats ?? this.computedConfig.exclusiveInlineFormats) {
-            if (underline) {
-                bold = false;
-                italic = false;
+            const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+            const root = this.editorContentRef?.nativeElement;
+            let formatAncestor = null;
+            if (sel && sel.rangeCount > 0 && root) {
+                const range = sel.getRangeAt(0);
+                if (root.contains(range.commonAncestorContainer)) {
+                    formatAncestor = this.getFormattingAncestor(range, root);
+                }
             }
-            else if (bold) {
-                italic = false;
+            if (formatAncestor) {
+                const type = this.getFormatType(formatAncestor);
+                bold = type === 'bold';
+                italic = type === 'italic';
+                underline = type === 'underline';
+            }
+            else {
+                if (sel && sel.rangeCount > 0 && !sel.getRangeAt(0).collapsed) {
+                    bold = false;
+                    italic = false;
+                    underline = false;
+                }
+                else {
+                    if (underline) {
+                        bold = false;
+                        italic = false;
+                    }
+                    else if (bold) {
+                        italic = false;
+                    }
+                }
             }
         }
         this.activeStates = {
@@ -2239,14 +2848,32 @@ class NgxRichTextEditorComponent {
         const el = element || this.editorContentRef?.nativeElement;
         if (!el)
             return '';
-        return this.serializeChildren(el).replace(/\n+$/g, '');
+        const md = this.serializeChildren(el, el).replace(/\n$/, '');
+        console.log('[NgxRichTextEditor] htmlToMarkdown result:', {
+            innerHTML: el.innerHTML,
+            markdown: md,
+            escaped: JSON.stringify(md),
+            length: md.length,
+        });
+        return md;
     }
-    serializeChildren(element) {
+    isBlockElement(node, editorRoot) {
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return false;
+        const el = node;
+        const tag = el.tagName.toLowerCase();
+        const blockTags = [
+            'p', 'div', 'ul', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+            'blockquote', 'pre', 'section', 'article', 'header', 'footer', 'hr'
+        ];
+        return blockTags.includes(tag);
+    }
+    serializeChildren(element, editorRoot) {
         let output = '';
+        const root = editorRoot || (element === this.editorContentRef?.nativeElement ? element : this.editorContentRef?.nativeElement);
         for (const node of Array.from(element.childNodes)) {
-            const serialized = this.serializeNode(node);
-            const isBlock = node.nodeType === Node.ELEMENT_NODE &&
-                ['p', 'div', 'ul', 'ol', 'h1', 'h2', 'h3', 'h4', 'blockquote', 'pre'].includes(node.tagName.toLowerCase());
+            const serialized = this.serializeNode(node, root);
+            const isBlock = this.isBlockElement(node, root);
             if (isBlock && output.length > 0 && !output.endsWith('\n')) {
                 output += '\n';
             }
@@ -2254,30 +2881,36 @@ class NgxRichTextEditorComponent {
         }
         return output;
     }
-    serializeNode(node) {
+    serializeNode(node, editorRoot) {
         if (node.nodeType === Node.TEXT_NODE) {
-            const text = node.textContent ?? '';
-            return /^[\n\r\t ]+$/.test(text) && /[\n\r\t]/.test(text) ? '' : text;
+            const text = (node.textContent ?? '').replace(/\r\n?/g, '\n');
+            if (editorRoot && node.parentElement) {
+                const hasBlockSiblings = Array.from(node.parentElement.childNodes).some((sibling) => sibling !== node && this.isBlockElement(sibling, editorRoot));
+                if (hasBlockSiblings && /^[\n\r\t ]+$/.test(text)) {
+                    return '';
+                }
+            }
+            return text;
         }
         if (node.nodeType !== Node.ELEMENT_NODE) {
             return '';
         }
         const element = node;
         const tag = element.tagName.toLowerCase();
-        const children = this.serializeChildren(element);
+        const children = this.serializeChildren(element, editorRoot);
         // Hashtag span: extract raw hashtag text (#tag)
         if (element.classList.contains('ngx-editor-hashtag') || element.classList.contains('post-content-hashtag')) {
             return element.textContent?.trim() || '';
         }
         // Exclusive single effect precedence: Underline > Bold > Italic
         if (this.isUnderlineElement(element)) {
-            return this.hasVisibleText(element) ? this.wrapMarkdown(children, '__') : '';
+            return this.wrapMarkdown(children, '__');
         }
         if (this.isBoldElement(element)) {
-            return this.hasVisibleText(element) ? this.wrapMarkdown(children, '**') : '';
+            return this.wrapMarkdown(children, '**');
         }
         if (this.isItalicElement(element)) {
-            return this.hasVisibleText(element) ? this.wrapMarkdown(children, '*') : '';
+            return this.wrapMarkdown(children, '*');
         }
         if (tag === 'br') {
             return '\n';
@@ -2293,12 +2926,27 @@ class NgxRichTextEditorComponent {
         if (tag === 'li') {
             return children;
         }
-        if (tag === 'p' || tag === 'div') {
+        if (tag === 'p' || tag === 'div' || this.isBlockElement(element, editorRoot)) {
             return children.endsWith('\n') ? children : `${children}\n`;
         }
         return children;
     }
     wrapMarkdown(text, marker) {
+        if (!text)
+            return '';
+        // If text contains newlines, wrap each line individually so markdown formatting
+        // does not span across paragraph/line breaks (which breaks markdown line parsers)
+        if (text.includes('\n')) {
+            return text
+                .split('\n')
+                .map((line) => this.wrapMarkdownSingleLine(line, marker))
+                .join('\n');
+        }
+        return this.wrapMarkdownSingleLine(text, marker);
+    }
+    wrapMarkdownSingleLine(text, marker) {
+        if (!text)
+            return '';
         let clean = text;
         // Mutually exclusive formatting: strip conflicting markers so only ONE effect is applied
         if (marker === '__') {
@@ -2688,6 +3336,10 @@ class NgxRichTextEditorComponent {
     focusEditor() {
         if (this.editorContentRef && this.editorContentRef.nativeElement) {
             this.editorContentRef.nativeElement.focus();
+            try {
+                document.execCommand('defaultParagraphSeparator', false, 'p');
+            }
+            catch { }
         }
     }
     onDocumentClick(event) {
@@ -2702,7 +3354,7 @@ class NgxRichTextEditorComponent {
                 useExisting: forwardRef(() => NgxRichTextEditorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "editorContentRef", first: true, predicate: ["editorContent"], descendants: true }, { propertyName: "sourceTextareaRef", first: true, predicate: ["sourceTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ngx-editor-container\"\n  [ngClass]=\"customClass\"\n  [class.is-focused]=\"isFocused\"\n  [class.is-disabled]=\"disabled\"\n  [style.min-height]=\"computedConfig.minHeight\"\n  [style.max-height]=\"computedConfig.maxHeight\"\n  [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n  [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n  [ngStyle]=\"parsedEditorStyle\"\n>\n  <!-- Toolbar -->\n  @if (computedConfig.showToolbar && !readonly) {\n    <!-- Array-configured Toolbar (if tools input is provided) -->\n    @if (computedConfig.tools && computedConfig.tools.length > 0) {\n      <ngx-editor-toolbar\n        [editor]=\"this\"\n        [tools]=\"computedConfig.tools\"\n        [fontFamilies]=\"resolvedFontFamilies\"\n      ></ngx-editor-toolbar>\n    } @else {\n      <!-- Default Full Toolbar -->\n      <div class=\"ngx-editor-toolbar\" role=\"toolbar\" aria-label=\"Editor Toolbar\">\n        <!-- History -->\n        @if (computedConfig.toolbar?.history) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Undo (Ctrl+Z)\"\n              aria-label=\"Undo\"\n              (mousedown)=\"$event.preventDefault(); undo()\"\n            >\n              <ngx-editor-icon name=\"undo\"></ngx-editor-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Redo (Ctrl+Y)\"\n              aria-label=\"Redo\"\n              (mousedown)=\"$event.preventDefault(); redo()\"\n            >\n              <ngx-editor-icon name=\"redo\"></ngx-editor-icon>\n            </button>\n          </div>\n        }\n\n        <!-- Format Block -->\n        @if (computedConfig.toolbar?.format) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Paragraph Format\"\n              aria-label=\"Paragraph Format\"\n              [value]=\"activeBlockTag\"\n              (change)=\"onFormatBlockChange($event)\"\n            >\n              <option value=\"p\">Normal text</option>\n              <option value=\"h1\">Heading 1</option>\n              <option value=\"h2\">Heading 2</option>\n              <option value=\"h3\">Heading 3</option>\n              <option value=\"h4\">Heading 4</option>\n              <option value=\"blockquote\">Quote</option>\n              <option value=\"pre\">Code Block</option>\n            </select>\n          </div>\n        }\n\n        <!-- Font Family -->\n        @if (computedConfig.toolbar?.fontName) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Family\"\n              aria-label=\"Font Family\"\n              (change)=\"onFontNameChange($event)\"\n            >\n              <option value=\"\">Font</option>\n              @for (font of resolvedFontFamilies; track font.value) {\n                <option [value]=\"font.value\">{{ font.label }}</option>\n              }\n            </select>\n          </div>\n        }\n\n        <!-- Font Size -->\n        @if (computedConfig.toolbar?.fontSize) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Size\"\n              aria-label=\"Font Size\"\n              (change)=\"onFontSizeChange($event)\"\n            >\n              <option value=\"\">Size</option>\n              <option value=\"1\">Small (10pt)</option>\n              <option value=\"3\">Normal (12pt)</option>\n              <option value=\"5\">Large (18pt)</option>\n              <option value=\"7\">Huge (36pt)</option>\n            </select>\n          </div>\n        }\n\n        <!-- Inline Styles: Bold, Italic, Underline, Strike, Sub, Sup, Code -->\n        @if (computedConfig.toolbar?.inline) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.inline?.bold !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.bold\"\n                title=\"Bold (Ctrl+B)\"\n                aria-label=\"Bold\"\n                (mousedown)=\"$event.preventDefault(); bold()\"\n              >\n                <ngx-editor-icon name=\"bold\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.italic !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.italic\"\n                title=\"Italic (Ctrl+I)\"\n                aria-label=\"Italic\"\n                (mousedown)=\"$event.preventDefault(); italic()\"\n              >\n                <ngx-editor-icon name=\"italic\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.underline !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.underline\"\n                title=\"Underline (Ctrl+U)\"\n                aria-label=\"Underline\"\n                (mousedown)=\"$event.preventDefault(); underline()\"\n              >\n                <ngx-editor-icon name=\"underline\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.strikeThrough !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.strikeThrough\"\n                title=\"Strikethrough\"\n                aria-label=\"Strikethrough\"\n                (mousedown)=\"$event.preventDefault(); strike()\"\n              >\n                <ngx-editor-icon name=\"strike\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.subscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.subscript\"\n                title=\"Subscript\"\n                aria-label=\"Subscript\"\n                (mousedown)=\"$event.preventDefault(); subscript()\"\n              >\n                <ngx-editor-icon name=\"subscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.superscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.superscript\"\n                title=\"Superscript\"\n                aria-label=\"Superscript\"\n                (mousedown)=\"$event.preventDefault(); superscript()\"\n              >\n                <ngx-editor-icon name=\"superscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.code !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Inline Code\"\n                aria-label=\"Inline Code\"\n                (mousedown)=\"$event.preventDefault(); wrapSelectionWithCode()\"\n              >\n                <ngx-editor-icon name=\"code\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Colors -->\n        @if (computedConfig.toolbar?.color) {\n          <div class=\"ngx-editor-toolbar-group\" style=\"position: relative;\">\n            @if (computedConfig.toolbar?.color?.textColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Text Color\"\n                aria-label=\"Text Color\"\n                (click)=\"toggleColorPicker('text')\"\n              >\n                <ngx-editor-icon name=\"textColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedTextColor\"\n              ></div>\n            }\n\n            @if (computedConfig.toolbar?.color?.backgroundColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Highlight Color\"\n                aria-label=\"Highlight Color\"\n                (click)=\"toggleColorPicker('background')\"\n              >\n                <ngx-editor-icon name=\"bgColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedBgColor\"\n              ></div>\n            }\n\n            <!-- Color Popover -->\n            @if (activeColorPicker) {\n              <div class=\"ngx-color-popover\" (mousedown)=\"$event.stopPropagation()\">\n                <div class=\"color-grid\">\n                  @for (color of computedConfig.colorPalette; track color) {\n                    <button\n                      type=\"button\"\n                      class=\"color-swatch\"\n                      [style.background-color]=\"color\"\n                      (click)=\"applyColor(color)\"\n                    ></button>\n                  }\n                </div>\n                <div class=\"custom-color-picker\">\n                  <input\n                    type=\"color\"\n                    (change)=\"onCustomColorChange($event)\"\n                  />\n                  <span>Custom color</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Alignment -->\n        @if (computedConfig.toolbar?.alignment) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.alignment?.left !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyLeft\"\n                title=\"Align Left\"\n                aria-label=\"Align Left\"\n                (mousedown)=\"$event.preventDefault(); alignLeft()\"\n              >\n                <ngx-editor-icon name=\"alignLeft\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.center !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyCenter\"\n                title=\"Align Center\"\n                aria-label=\"Align Center\"\n                (mousedown)=\"$event.preventDefault(); alignCenter()\"\n              >\n                <ngx-editor-icon name=\"alignCenter\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.right !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyRight\"\n                title=\"Align Right\"\n                aria-label=\"Align Right\"\n                (mousedown)=\"$event.preventDefault(); alignRight()\"\n              >\n                <ngx-editor-icon name=\"alignRight\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.justify !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyFull\"\n                title=\"Justify\"\n                aria-label=\"Justify\"\n                (mousedown)=\"$event.preventDefault(); alignJustify()\"\n              >\n                <ngx-editor-icon name=\"alignJustify\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Lists & Indentation -->\n        @if (computedConfig.toolbar?.list) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.list?.unordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertUnorderedList\"\n                title=\"Bullet List\"\n                aria-label=\"Bullet List\"\n                (mousedown)=\"$event.preventDefault(); insertUnorderedList()\"\n              >\n                <ngx-editor-icon name=\"unorderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.ordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertOrderedList\"\n                title=\"Numbered List\"\n                aria-label=\"Numbered List\"\n                (mousedown)=\"$event.preventDefault(); insertOrderedList()\"\n              >\n                <ngx-editor-icon name=\"orderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.indent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Increase Indent\"\n                aria-label=\"Increase Indent\"\n                (mousedown)=\"$event.preventDefault(); indent()\"\n              >\n                <ngx-editor-icon name=\"indent\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.outdent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Decrease Indent\"\n                aria-label=\"Decrease Indent\"\n                (mousedown)=\"$event.preventDefault(); outdent()\"\n              >\n                <ngx-editor-icon name=\"outdent\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Insert Options -->\n        @if (computedConfig.toolbar?.insert) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.insert?.link !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.link\"\n                title=\"Insert Link (Ctrl+K)\"\n                aria-label=\"Insert Link\"\n                (click)=\"openLinkModal()\"\n              >\n                <ngx-editor-icon name=\"link\"></ngx-editor-icon>\n              </button>\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Remove Link\"\n                aria-label=\"Remove Link\"\n                (mousedown)=\"$event.preventDefault(); unlink()\"\n              >\n                <ngx-editor-icon name=\"unlink\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.image !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Insert Image\"\n                aria-label=\"Insert Image\"\n                (click)=\"openImageModal()\"\n              >\n                <ngx-editor-icon name=\"image\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.horizontalRule !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Horizontal Line\"\n                aria-label=\"Horizontal Line\"\n                (mousedown)=\"$event.preventDefault(); insertHorizontalRule()\"\n              >\n                <ngx-editor-icon name=\"horizontalRule\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Extra Actions -->\n        @if (computedConfig.toolbar?.extra) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.extra?.clearFormat !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Clear Formatting\"\n                aria-label=\"Clear Formatting\"\n                (mousedown)=\"$event.preventDefault(); clearFormatting()\"\n              >\n                <ngx-editor-icon name=\"clearFormat\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.extra?.sourceView !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"isSourceView\"\n                title=\"View HTML Source\"\n                aria-label=\"View HTML Source\"\n                (click)=\"toggleSourceView()\"\n              >\n                <ngx-editor-icon name=\"sourceView\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- Editor Content Area -->\n  <div class=\"ngx-editor-content-wrapper\">\n    <!-- Visual contenteditable -->\n    <div\n      #editorContent\n      class=\"ngx-editor-content\"\n      [style.display]=\"isSourceView ? 'none' : 'block'\"\n      [style.height]=\"computedConfig.height\"\n      [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n      [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n      [ngStyle]=\"parsedContentStyle\"\n      [attr.contenteditable]=\"!disabled && !readonly\"\n      [attr.spellcheck]=\"computedConfig.spellcheck\"\n      [attr.data-placeholder]=\"computedConfig.placeholder\"\n      [attr.data-empty]=\"isEmpty\"\n      (input)=\"onEditorInput()\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"updateEditorState()\"\n      (paste)=\"onEditorPaste($event)\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0 0 1em}.ngx-editor-content b,.ngx-editor-content strong{font-weight:700!important}.ngx-editor-content i,.ngx-editor-content em{font-style:italic!important}.ngx-editor-content u,.ngx-editor-content .publish-editor-underline{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:.12em}.ngx-editor-content h1{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.25}.ngx-editor-content h2{font-size:1.6em;font-weight:600;margin:.75em 0;line-height:1.3}.ngx-editor-content h3{font-size:1.3em;font-weight:600;margin:.83em 0}.ngx-editor-content h4{font-size:1.1em;font-weight:600;margin:1em 0}.ngx-editor-content ul,.ngx-editor-content ol{margin:0 0 1em 1.5em;padding:0}.ngx-editor-content li{margin-bottom:.25em}.ngx-editor-content blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--ngx-editor-border-focus);background-color:#f8fafc;color:var(--ngx-editor-muted);font-style:italic}.ngx-editor-content pre{background-color:#1e293b;color:#f8fafc;padding:12px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;margin:1em 0}.ngx-editor-content code{background-color:#f1f5f9;color:#e11d48;padding:2px 5px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9em}.ngx-editor-content a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ngx-editor-content .ngx-editor-hashtag,.ngx-editor-content .post-content-hashtag{color:var(--ngx-editor-hashtag-color, #0069FF)!important;font-weight:500;display:inline;cursor:text}.ngx-editor-content hr{border:none;border-top:1px solid var(--ngx-editor-border);margin:1.5em 0}.ngx-editor-content img{max-width:100%;height:auto;border-radius:4px}.ngx-editor-content[data-empty=true]:before{content:attr(data-placeholder);position:absolute;color:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-content:has(ol,ul,li,table,img,hr,blockquote,pre):before{display:none!important;content:none!important}.ngx-editor-source{width:100%;flex:1;min-height:200px;padding:16px;border:none;outline:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.5;background-color:#0f172a;color:#38bdf8;resize:vertical;box-sizing:border-box}.ngx-editor-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--ngx-editor-toolbar-bg);border-top:1px solid var(--ngx-editor-border);font-size:12px;color:var(--ngx-editor-muted)}.ngx-editor-statusbar .statusbar-left,.ngx-editor-statusbar .statusbar-right{display:flex;align-items:center;gap:12px}.ngx-editor-statusbar .status-tag{background-color:#e2e8f0;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:10px}.ngx-editor-statusbar .status-badge{background-color:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:500;font-size:11px}.ngx-editor-modal-backdrop{position:absolute;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease-out}.ngx-editor-modal{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.ngx-editor-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ngx-editor-modal .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-editor-text)}.ngx-editor-modal .modal-body{display:flex;flex-direction:column;gap:12px}.ngx-editor-modal .form-group{display:flex;flex-direction:column;gap:4px}.ngx-editor-modal .form-group label{font-size:13px;font-weight:500;color:var(--ngx-editor-text)}.ngx-editor-modal .form-group input[type=text],.ngx-editor-modal .form-group input[type=url]{padding:8px 12px;border:1px solid var(--ngx-editor-border);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s ease}.ngx-editor-modal .form-group input[type=text]:focus,.ngx-editor-modal .form-group input[type=url]:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-modal .form-group .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ngx-editor-text);-webkit-user-select:none;user-select:none}.ngx-editor-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.ngx-editor-modal .modal-footer button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.ngx-editor-modal .modal-footer .btn-secondary{background:#f1f5f9;border:1px solid var(--ngx-editor-border);color:var(--ngx-editor-text)}.ngx-editor-modal .modal-footer .btn-secondary:hover{background:#e2e8f0}.ngx-editor-modal .modal-footer .btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}.ngx-editor-modal .modal-footer .btn-primary:hover{background:#1d4ed8}.ngx-editor-modal .modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgxEditorIconComponent, selector: "ngx-editor-icon", inputs: ["name"] }, { kind: "component", type: NgxEditorToolbarComponent, selector: "ngx-editor-toolbar", inputs: ["editor", "tools", "fontFamilies"], outputs: ["actionTriggered"] }] });
+        ], viewQueries: [{ propertyName: "editorContentRef", first: true, predicate: ["editorContent"], descendants: true }, { propertyName: "sourceTextareaRef", first: true, predicate: ["sourceTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ngx-editor-container\"\n  [ngClass]=\"customClass\"\n  [class.is-focused]=\"isFocused\"\n  [class.is-disabled]=\"disabled\"\n  [style.min-height]=\"computedConfig.minHeight\"\n  [style.max-height]=\"computedConfig.maxHeight\"\n  [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n  [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n  [ngStyle]=\"parsedEditorStyle\"\n>\n  <!-- Toolbar -->\n  @if (computedConfig.showToolbar && !readonly) {\n    <!-- Array-configured Toolbar (if tools input is provided) -->\n    @if (computedConfig.tools && computedConfig.tools.length > 0) {\n      <ngx-editor-toolbar\n        [editor]=\"this\"\n        [tools]=\"computedConfig.tools\"\n        [fontFamilies]=\"resolvedFontFamilies\"\n      ></ngx-editor-toolbar>\n    } @else {\n      <!-- Default Full Toolbar -->\n      <div class=\"ngx-editor-toolbar\" role=\"toolbar\" aria-label=\"Editor Toolbar\">\n        <!-- History -->\n        @if (computedConfig.toolbar?.history) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Undo (Ctrl+Z)\"\n              aria-label=\"Undo\"\n              (mousedown)=\"$event.preventDefault(); undo()\"\n            >\n              <ngx-editor-icon name=\"undo\"></ngx-editor-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Redo (Ctrl+Y)\"\n              aria-label=\"Redo\"\n              (mousedown)=\"$event.preventDefault(); redo()\"\n            >\n              <ngx-editor-icon name=\"redo\"></ngx-editor-icon>\n            </button>\n          </div>\n        }\n\n        <!-- Format Block -->\n        @if (computedConfig.toolbar?.format) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Paragraph Format\"\n              aria-label=\"Paragraph Format\"\n              [value]=\"activeBlockTag\"\n              (change)=\"onFormatBlockChange($event)\"\n            >\n              <option value=\"p\">Normal text</option>\n              <option value=\"h1\">Heading 1</option>\n              <option value=\"h2\">Heading 2</option>\n              <option value=\"h3\">Heading 3</option>\n              <option value=\"h4\">Heading 4</option>\n              <option value=\"blockquote\">Quote</option>\n              <option value=\"pre\">Code Block</option>\n            </select>\n          </div>\n        }\n\n        <!-- Font Family -->\n        @if (computedConfig.toolbar?.fontName) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Family\"\n              aria-label=\"Font Family\"\n              (change)=\"onFontNameChange($event)\"\n            >\n              <option value=\"\">Font</option>\n              @for (font of resolvedFontFamilies; track font.value) {\n                <option [value]=\"font.value\">{{ font.label }}</option>\n              }\n            </select>\n          </div>\n        }\n\n        <!-- Font Size -->\n        @if (computedConfig.toolbar?.fontSize) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Size\"\n              aria-label=\"Font Size\"\n              (change)=\"onFontSizeChange($event)\"\n            >\n              <option value=\"\">Size</option>\n              <option value=\"1\">Small (10pt)</option>\n              <option value=\"3\">Normal (12pt)</option>\n              <option value=\"5\">Large (18pt)</option>\n              <option value=\"7\">Huge (36pt)</option>\n            </select>\n          </div>\n        }\n\n        <!-- Inline Styles: Bold, Italic, Underline, Strike, Sub, Sup, Code -->\n        @if (computedConfig.toolbar?.inline) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.inline?.bold !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.bold\"\n                title=\"Bold (Ctrl+B)\"\n                aria-label=\"Bold\"\n                (mousedown)=\"$event.preventDefault(); bold()\"\n              >\n                <ngx-editor-icon name=\"bold\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.italic !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.italic\"\n                title=\"Italic (Ctrl+I)\"\n                aria-label=\"Italic\"\n                (mousedown)=\"$event.preventDefault(); italic()\"\n              >\n                <ngx-editor-icon name=\"italic\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.underline !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.underline\"\n                title=\"Underline (Ctrl+U)\"\n                aria-label=\"Underline\"\n                (mousedown)=\"$event.preventDefault(); underline()\"\n              >\n                <ngx-editor-icon name=\"underline\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.strikeThrough !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.strikeThrough\"\n                title=\"Strikethrough\"\n                aria-label=\"Strikethrough\"\n                (mousedown)=\"$event.preventDefault(); strike()\"\n              >\n                <ngx-editor-icon name=\"strike\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.subscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.subscript\"\n                title=\"Subscript\"\n                aria-label=\"Subscript\"\n                (mousedown)=\"$event.preventDefault(); subscript()\"\n              >\n                <ngx-editor-icon name=\"subscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.superscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.superscript\"\n                title=\"Superscript\"\n                aria-label=\"Superscript\"\n                (mousedown)=\"$event.preventDefault(); superscript()\"\n              >\n                <ngx-editor-icon name=\"superscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.code !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Inline Code\"\n                aria-label=\"Inline Code\"\n                (mousedown)=\"$event.preventDefault(); wrapSelectionWithCode()\"\n              >\n                <ngx-editor-icon name=\"code\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Colors -->\n        @if (computedConfig.toolbar?.color) {\n          <div class=\"ngx-editor-toolbar-group\" style=\"position: relative;\">\n            @if (computedConfig.toolbar?.color?.textColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Text Color\"\n                aria-label=\"Text Color\"\n                (click)=\"toggleColorPicker('text')\"\n              >\n                <ngx-editor-icon name=\"textColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedTextColor\"\n              ></div>\n            }\n\n            @if (computedConfig.toolbar?.color?.backgroundColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Highlight Color\"\n                aria-label=\"Highlight Color\"\n                (click)=\"toggleColorPicker('background')\"\n              >\n                <ngx-editor-icon name=\"bgColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedBgColor\"\n              ></div>\n            }\n\n            <!-- Color Popover -->\n            @if (activeColorPicker) {\n              <div class=\"ngx-color-popover\" (mousedown)=\"$event.stopPropagation()\">\n                <div class=\"color-grid\">\n                  @for (color of computedConfig.colorPalette; track color) {\n                    <button\n                      type=\"button\"\n                      class=\"color-swatch\"\n                      [style.background-color]=\"color\"\n                      (click)=\"applyColor(color)\"\n                    ></button>\n                  }\n                </div>\n                <div class=\"custom-color-picker\">\n                  <input\n                    type=\"color\"\n                    (change)=\"onCustomColorChange($event)\"\n                  />\n                  <span>Custom color</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Alignment -->\n        @if (computedConfig.toolbar?.alignment) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.alignment?.left !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyLeft\"\n                title=\"Align Left\"\n                aria-label=\"Align Left\"\n                (mousedown)=\"$event.preventDefault(); alignLeft()\"\n              >\n                <ngx-editor-icon name=\"alignLeft\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.center !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyCenter\"\n                title=\"Align Center\"\n                aria-label=\"Align Center\"\n                (mousedown)=\"$event.preventDefault(); alignCenter()\"\n              >\n                <ngx-editor-icon name=\"alignCenter\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.right !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyRight\"\n                title=\"Align Right\"\n                aria-label=\"Align Right\"\n                (mousedown)=\"$event.preventDefault(); alignRight()\"\n              >\n                <ngx-editor-icon name=\"alignRight\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.justify !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyFull\"\n                title=\"Justify\"\n                aria-label=\"Justify\"\n                (mousedown)=\"$event.preventDefault(); alignJustify()\"\n              >\n                <ngx-editor-icon name=\"alignJustify\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Lists & Indentation -->\n        @if (computedConfig.toolbar?.list) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.list?.unordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertUnorderedList\"\n                title=\"Bullet List\"\n                aria-label=\"Bullet List\"\n                (mousedown)=\"$event.preventDefault(); insertUnorderedList()\"\n              >\n                <ngx-editor-icon name=\"unorderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.ordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertOrderedList\"\n                title=\"Numbered List\"\n                aria-label=\"Numbered List\"\n                (mousedown)=\"$event.preventDefault(); insertOrderedList()\"\n              >\n                <ngx-editor-icon name=\"orderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.indent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Increase Indent\"\n                aria-label=\"Increase Indent\"\n                (mousedown)=\"$event.preventDefault(); indent()\"\n              >\n                <ngx-editor-icon name=\"indent\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.outdent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Decrease Indent\"\n                aria-label=\"Decrease Indent\"\n                (mousedown)=\"$event.preventDefault(); outdent()\"\n              >\n                <ngx-editor-icon name=\"outdent\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Insert Options -->\n        @if (computedConfig.toolbar?.insert) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.insert?.link !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.link\"\n                title=\"Insert Link (Ctrl+K)\"\n                aria-label=\"Insert Link\"\n                (click)=\"openLinkModal()\"\n              >\n                <ngx-editor-icon name=\"link\"></ngx-editor-icon>\n              </button>\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Remove Link\"\n                aria-label=\"Remove Link\"\n                (mousedown)=\"$event.preventDefault(); unlink()\"\n              >\n                <ngx-editor-icon name=\"unlink\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.image !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Insert Image\"\n                aria-label=\"Insert Image\"\n                (click)=\"openImageModal()\"\n              >\n                <ngx-editor-icon name=\"image\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.horizontalRule !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Horizontal Line\"\n                aria-label=\"Horizontal Line\"\n                (mousedown)=\"$event.preventDefault(); insertHorizontalRule()\"\n              >\n                <ngx-editor-icon name=\"horizontalRule\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Extra Actions -->\n        @if (computedConfig.toolbar?.extra) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.extra?.clearFormat !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Clear Formatting\"\n                aria-label=\"Clear Formatting\"\n                (mousedown)=\"$event.preventDefault(); clearFormatting()\"\n              >\n                <ngx-editor-icon name=\"clearFormat\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.extra?.sourceView !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"isSourceView\"\n                title=\"View HTML Source\"\n                aria-label=\"View HTML Source\"\n                (click)=\"toggleSourceView()\"\n              >\n                <ngx-editor-icon name=\"sourceView\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- Editor Content Area -->\n  <div class=\"ngx-editor-content-wrapper\">\n    <!-- Visual contenteditable -->\n    <div\n      #editorContent\n      class=\"ngx-editor-content\"\n      [style.display]=\"isSourceView ? 'none' : 'block'\"\n      [style.height]=\"computedConfig.height\"\n      [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n      [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n      [ngStyle]=\"parsedContentStyle\"\n      [attr.contenteditable]=\"!disabled && !readonly\"\n      [attr.spellcheck]=\"computedConfig.spellcheck\"\n      [attr.data-placeholder]=\"computedConfig.placeholder\"\n      [attr.data-empty]=\"isEmpty\"\n      (input)=\"onEditorInput()\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"updateEditorState()\"\n      (paste)=\"onEditorPaste($event)\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0;min-height:1.65em}.ngx-editor-content b,.ngx-editor-content strong{font-weight:700!important}.ngx-editor-content i,.ngx-editor-content em{font-style:italic!important}.ngx-editor-content u,.ngx-editor-content .publish-editor-underline{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:.12em}.ngx-editor-content h1{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.25}.ngx-editor-content h2{font-size:1.6em;font-weight:600;margin:.75em 0;line-height:1.3}.ngx-editor-content h3{font-size:1.3em;font-weight:600;margin:.83em 0}.ngx-editor-content h4{font-size:1.1em;font-weight:600;margin:1em 0}.ngx-editor-content ul,.ngx-editor-content ol{margin:0 0 1em 1.5em;padding:0}.ngx-editor-content li{margin-bottom:.25em}.ngx-editor-content blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--ngx-editor-border-focus);background-color:#f8fafc;color:var(--ngx-editor-muted);font-style:italic}.ngx-editor-content pre{background-color:#1e293b;color:#f8fafc;padding:12px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;margin:1em 0}.ngx-editor-content code{background-color:#f1f5f9;color:#e11d48;padding:2px 5px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9em}.ngx-editor-content a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ngx-editor-content .ngx-editor-hashtag,.ngx-editor-content .post-content-hashtag{color:var(--ngx-editor-hashtag-color, #0069FF)!important;font-weight:500;display:inline;cursor:text}.ngx-editor-content hr{border:none;border-top:1px solid var(--ngx-editor-border);margin:1.5em 0}.ngx-editor-content img{max-width:100%;height:auto;border-radius:4px}.ngx-editor-content[data-empty=true]:before{content:attr(data-placeholder);position:absolute;color:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-content:has(ol,ul,li,table,img,hr,blockquote,pre):before{display:none!important;content:none!important}.ngx-editor-source{width:100%;flex:1;min-height:200px;padding:16px;border:none;outline:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.5;background-color:#0f172a;color:#38bdf8;resize:vertical;box-sizing:border-box}.ngx-editor-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--ngx-editor-toolbar-bg);border-top:1px solid var(--ngx-editor-border);font-size:12px;color:var(--ngx-editor-muted)}.ngx-editor-statusbar .statusbar-left,.ngx-editor-statusbar .statusbar-right{display:flex;align-items:center;gap:12px}.ngx-editor-statusbar .status-tag{background-color:#e2e8f0;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:10px}.ngx-editor-statusbar .status-badge{background-color:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:500;font-size:11px}.ngx-editor-modal-backdrop{position:absolute;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease-out}.ngx-editor-modal{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.ngx-editor-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ngx-editor-modal .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-editor-text)}.ngx-editor-modal .modal-body{display:flex;flex-direction:column;gap:12px}.ngx-editor-modal .form-group{display:flex;flex-direction:column;gap:4px}.ngx-editor-modal .form-group label{font-size:13px;font-weight:500;color:var(--ngx-editor-text)}.ngx-editor-modal .form-group input[type=text],.ngx-editor-modal .form-group input[type=url]{padding:8px 12px;border:1px solid var(--ngx-editor-border);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s ease}.ngx-editor-modal .form-group input[type=text]:focus,.ngx-editor-modal .form-group input[type=url]:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-modal .form-group .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ngx-editor-text);-webkit-user-select:none;user-select:none}.ngx-editor-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.ngx-editor-modal .modal-footer button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.ngx-editor-modal .modal-footer .btn-secondary{background:#f1f5f9;border:1px solid var(--ngx-editor-border);color:var(--ngx-editor-text)}.ngx-editor-modal .modal-footer .btn-secondary:hover{background:#e2e8f0}.ngx-editor-modal .modal-footer .btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}.ngx-editor-modal .modal-footer .btn-primary:hover{background:#1d4ed8}.ngx-editor-modal .modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgxEditorIconComponent, selector: "ngx-editor-icon", inputs: ["name"] }, { kind: "component", type: NgxEditorToolbarComponent, selector: "ngx-editor-toolbar", inputs: ["editor", "tools", "fontFamilies"], outputs: ["actionTriggered"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NgxRichTextEditorComponent, decorators: [{
             type: Component,
@@ -2712,7 +3364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                             useExisting: forwardRef(() => NgxRichTextEditorComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ngx-editor-container\"\n  [ngClass]=\"customClass\"\n  [class.is-focused]=\"isFocused\"\n  [class.is-disabled]=\"disabled\"\n  [style.min-height]=\"computedConfig.minHeight\"\n  [style.max-height]=\"computedConfig.maxHeight\"\n  [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n  [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n  [ngStyle]=\"parsedEditorStyle\"\n>\n  <!-- Toolbar -->\n  @if (computedConfig.showToolbar && !readonly) {\n    <!-- Array-configured Toolbar (if tools input is provided) -->\n    @if (computedConfig.tools && computedConfig.tools.length > 0) {\n      <ngx-editor-toolbar\n        [editor]=\"this\"\n        [tools]=\"computedConfig.tools\"\n        [fontFamilies]=\"resolvedFontFamilies\"\n      ></ngx-editor-toolbar>\n    } @else {\n      <!-- Default Full Toolbar -->\n      <div class=\"ngx-editor-toolbar\" role=\"toolbar\" aria-label=\"Editor Toolbar\">\n        <!-- History -->\n        @if (computedConfig.toolbar?.history) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Undo (Ctrl+Z)\"\n              aria-label=\"Undo\"\n              (mousedown)=\"$event.preventDefault(); undo()\"\n            >\n              <ngx-editor-icon name=\"undo\"></ngx-editor-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Redo (Ctrl+Y)\"\n              aria-label=\"Redo\"\n              (mousedown)=\"$event.preventDefault(); redo()\"\n            >\n              <ngx-editor-icon name=\"redo\"></ngx-editor-icon>\n            </button>\n          </div>\n        }\n\n        <!-- Format Block -->\n        @if (computedConfig.toolbar?.format) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Paragraph Format\"\n              aria-label=\"Paragraph Format\"\n              [value]=\"activeBlockTag\"\n              (change)=\"onFormatBlockChange($event)\"\n            >\n              <option value=\"p\">Normal text</option>\n              <option value=\"h1\">Heading 1</option>\n              <option value=\"h2\">Heading 2</option>\n              <option value=\"h3\">Heading 3</option>\n              <option value=\"h4\">Heading 4</option>\n              <option value=\"blockquote\">Quote</option>\n              <option value=\"pre\">Code Block</option>\n            </select>\n          </div>\n        }\n\n        <!-- Font Family -->\n        @if (computedConfig.toolbar?.fontName) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Family\"\n              aria-label=\"Font Family\"\n              (change)=\"onFontNameChange($event)\"\n            >\n              <option value=\"\">Font</option>\n              @for (font of resolvedFontFamilies; track font.value) {\n                <option [value]=\"font.value\">{{ font.label }}</option>\n              }\n            </select>\n          </div>\n        }\n\n        <!-- Font Size -->\n        @if (computedConfig.toolbar?.fontSize) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Size\"\n              aria-label=\"Font Size\"\n              (change)=\"onFontSizeChange($event)\"\n            >\n              <option value=\"\">Size</option>\n              <option value=\"1\">Small (10pt)</option>\n              <option value=\"3\">Normal (12pt)</option>\n              <option value=\"5\">Large (18pt)</option>\n              <option value=\"7\">Huge (36pt)</option>\n            </select>\n          </div>\n        }\n\n        <!-- Inline Styles: Bold, Italic, Underline, Strike, Sub, Sup, Code -->\n        @if (computedConfig.toolbar?.inline) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.inline?.bold !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.bold\"\n                title=\"Bold (Ctrl+B)\"\n                aria-label=\"Bold\"\n                (mousedown)=\"$event.preventDefault(); bold()\"\n              >\n                <ngx-editor-icon name=\"bold\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.italic !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.italic\"\n                title=\"Italic (Ctrl+I)\"\n                aria-label=\"Italic\"\n                (mousedown)=\"$event.preventDefault(); italic()\"\n              >\n                <ngx-editor-icon name=\"italic\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.underline !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.underline\"\n                title=\"Underline (Ctrl+U)\"\n                aria-label=\"Underline\"\n                (mousedown)=\"$event.preventDefault(); underline()\"\n              >\n                <ngx-editor-icon name=\"underline\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.strikeThrough !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.strikeThrough\"\n                title=\"Strikethrough\"\n                aria-label=\"Strikethrough\"\n                (mousedown)=\"$event.preventDefault(); strike()\"\n              >\n                <ngx-editor-icon name=\"strike\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.subscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.subscript\"\n                title=\"Subscript\"\n                aria-label=\"Subscript\"\n                (mousedown)=\"$event.preventDefault(); subscript()\"\n              >\n                <ngx-editor-icon name=\"subscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.superscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.superscript\"\n                title=\"Superscript\"\n                aria-label=\"Superscript\"\n                (mousedown)=\"$event.preventDefault(); superscript()\"\n              >\n                <ngx-editor-icon name=\"superscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.code !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Inline Code\"\n                aria-label=\"Inline Code\"\n                (mousedown)=\"$event.preventDefault(); wrapSelectionWithCode()\"\n              >\n                <ngx-editor-icon name=\"code\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Colors -->\n        @if (computedConfig.toolbar?.color) {\n          <div class=\"ngx-editor-toolbar-group\" style=\"position: relative;\">\n            @if (computedConfig.toolbar?.color?.textColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Text Color\"\n                aria-label=\"Text Color\"\n                (click)=\"toggleColorPicker('text')\"\n              >\n                <ngx-editor-icon name=\"textColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedTextColor\"\n              ></div>\n            }\n\n            @if (computedConfig.toolbar?.color?.backgroundColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Highlight Color\"\n                aria-label=\"Highlight Color\"\n                (click)=\"toggleColorPicker('background')\"\n              >\n                <ngx-editor-icon name=\"bgColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedBgColor\"\n              ></div>\n            }\n\n            <!-- Color Popover -->\n            @if (activeColorPicker) {\n              <div class=\"ngx-color-popover\" (mousedown)=\"$event.stopPropagation()\">\n                <div class=\"color-grid\">\n                  @for (color of computedConfig.colorPalette; track color) {\n                    <button\n                      type=\"button\"\n                      class=\"color-swatch\"\n                      [style.background-color]=\"color\"\n                      (click)=\"applyColor(color)\"\n                    ></button>\n                  }\n                </div>\n                <div class=\"custom-color-picker\">\n                  <input\n                    type=\"color\"\n                    (change)=\"onCustomColorChange($event)\"\n                  />\n                  <span>Custom color</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Alignment -->\n        @if (computedConfig.toolbar?.alignment) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.alignment?.left !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyLeft\"\n                title=\"Align Left\"\n                aria-label=\"Align Left\"\n                (mousedown)=\"$event.preventDefault(); alignLeft()\"\n              >\n                <ngx-editor-icon name=\"alignLeft\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.center !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyCenter\"\n                title=\"Align Center\"\n                aria-label=\"Align Center\"\n                (mousedown)=\"$event.preventDefault(); alignCenter()\"\n              >\n                <ngx-editor-icon name=\"alignCenter\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.right !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyRight\"\n                title=\"Align Right\"\n                aria-label=\"Align Right\"\n                (mousedown)=\"$event.preventDefault(); alignRight()\"\n              >\n                <ngx-editor-icon name=\"alignRight\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.justify !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyFull\"\n                title=\"Justify\"\n                aria-label=\"Justify\"\n                (mousedown)=\"$event.preventDefault(); alignJustify()\"\n              >\n                <ngx-editor-icon name=\"alignJustify\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Lists & Indentation -->\n        @if (computedConfig.toolbar?.list) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.list?.unordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertUnorderedList\"\n                title=\"Bullet List\"\n                aria-label=\"Bullet List\"\n                (mousedown)=\"$event.preventDefault(); insertUnorderedList()\"\n              >\n                <ngx-editor-icon name=\"unorderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.ordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertOrderedList\"\n                title=\"Numbered List\"\n                aria-label=\"Numbered List\"\n                (mousedown)=\"$event.preventDefault(); insertOrderedList()\"\n              >\n                <ngx-editor-icon name=\"orderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.indent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Increase Indent\"\n                aria-label=\"Increase Indent\"\n                (mousedown)=\"$event.preventDefault(); indent()\"\n              >\n                <ngx-editor-icon name=\"indent\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.outdent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Decrease Indent\"\n                aria-label=\"Decrease Indent\"\n                (mousedown)=\"$event.preventDefault(); outdent()\"\n              >\n                <ngx-editor-icon name=\"outdent\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Insert Options -->\n        @if (computedConfig.toolbar?.insert) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.insert?.link !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.link\"\n                title=\"Insert Link (Ctrl+K)\"\n                aria-label=\"Insert Link\"\n                (click)=\"openLinkModal()\"\n              >\n                <ngx-editor-icon name=\"link\"></ngx-editor-icon>\n              </button>\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Remove Link\"\n                aria-label=\"Remove Link\"\n                (mousedown)=\"$event.preventDefault(); unlink()\"\n              >\n                <ngx-editor-icon name=\"unlink\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.image !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Insert Image\"\n                aria-label=\"Insert Image\"\n                (click)=\"openImageModal()\"\n              >\n                <ngx-editor-icon name=\"image\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.horizontalRule !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Horizontal Line\"\n                aria-label=\"Horizontal Line\"\n                (mousedown)=\"$event.preventDefault(); insertHorizontalRule()\"\n              >\n                <ngx-editor-icon name=\"horizontalRule\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Extra Actions -->\n        @if (computedConfig.toolbar?.extra) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.extra?.clearFormat !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Clear Formatting\"\n                aria-label=\"Clear Formatting\"\n                (mousedown)=\"$event.preventDefault(); clearFormatting()\"\n              >\n                <ngx-editor-icon name=\"clearFormat\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.extra?.sourceView !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"isSourceView\"\n                title=\"View HTML Source\"\n                aria-label=\"View HTML Source\"\n                (click)=\"toggleSourceView()\"\n              >\n                <ngx-editor-icon name=\"sourceView\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- Editor Content Area -->\n  <div class=\"ngx-editor-content-wrapper\">\n    <!-- Visual contenteditable -->\n    <div\n      #editorContent\n      class=\"ngx-editor-content\"\n      [style.display]=\"isSourceView ? 'none' : 'block'\"\n      [style.height]=\"computedConfig.height\"\n      [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n      [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n      [ngStyle]=\"parsedContentStyle\"\n      [attr.contenteditable]=\"!disabled && !readonly\"\n      [attr.spellcheck]=\"computedConfig.spellcheck\"\n      [attr.data-placeholder]=\"computedConfig.placeholder\"\n      [attr.data-empty]=\"isEmpty\"\n      (input)=\"onEditorInput()\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"updateEditorState()\"\n      (paste)=\"onEditorPaste($event)\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0 0 1em}.ngx-editor-content b,.ngx-editor-content strong{font-weight:700!important}.ngx-editor-content i,.ngx-editor-content em{font-style:italic!important}.ngx-editor-content u,.ngx-editor-content .publish-editor-underline{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:.12em}.ngx-editor-content h1{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.25}.ngx-editor-content h2{font-size:1.6em;font-weight:600;margin:.75em 0;line-height:1.3}.ngx-editor-content h3{font-size:1.3em;font-weight:600;margin:.83em 0}.ngx-editor-content h4{font-size:1.1em;font-weight:600;margin:1em 0}.ngx-editor-content ul,.ngx-editor-content ol{margin:0 0 1em 1.5em;padding:0}.ngx-editor-content li{margin-bottom:.25em}.ngx-editor-content blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--ngx-editor-border-focus);background-color:#f8fafc;color:var(--ngx-editor-muted);font-style:italic}.ngx-editor-content pre{background-color:#1e293b;color:#f8fafc;padding:12px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;margin:1em 0}.ngx-editor-content code{background-color:#f1f5f9;color:#e11d48;padding:2px 5px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9em}.ngx-editor-content a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ngx-editor-content .ngx-editor-hashtag,.ngx-editor-content .post-content-hashtag{color:var(--ngx-editor-hashtag-color, #0069FF)!important;font-weight:500;display:inline;cursor:text}.ngx-editor-content hr{border:none;border-top:1px solid var(--ngx-editor-border);margin:1.5em 0}.ngx-editor-content img{max-width:100%;height:auto;border-radius:4px}.ngx-editor-content[data-empty=true]:before{content:attr(data-placeholder);position:absolute;color:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-content:has(ol,ul,li,table,img,hr,blockquote,pre):before{display:none!important;content:none!important}.ngx-editor-source{width:100%;flex:1;min-height:200px;padding:16px;border:none;outline:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.5;background-color:#0f172a;color:#38bdf8;resize:vertical;box-sizing:border-box}.ngx-editor-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--ngx-editor-toolbar-bg);border-top:1px solid var(--ngx-editor-border);font-size:12px;color:var(--ngx-editor-muted)}.ngx-editor-statusbar .statusbar-left,.ngx-editor-statusbar .statusbar-right{display:flex;align-items:center;gap:12px}.ngx-editor-statusbar .status-tag{background-color:#e2e8f0;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:10px}.ngx-editor-statusbar .status-badge{background-color:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:500;font-size:11px}.ngx-editor-modal-backdrop{position:absolute;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease-out}.ngx-editor-modal{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.ngx-editor-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ngx-editor-modal .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-editor-text)}.ngx-editor-modal .modal-body{display:flex;flex-direction:column;gap:12px}.ngx-editor-modal .form-group{display:flex;flex-direction:column;gap:4px}.ngx-editor-modal .form-group label{font-size:13px;font-weight:500;color:var(--ngx-editor-text)}.ngx-editor-modal .form-group input[type=text],.ngx-editor-modal .form-group input[type=url]{padding:8px 12px;border:1px solid var(--ngx-editor-border);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s ease}.ngx-editor-modal .form-group input[type=text]:focus,.ngx-editor-modal .form-group input[type=url]:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-modal .form-group .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ngx-editor-text);-webkit-user-select:none;user-select:none}.ngx-editor-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.ngx-editor-modal .modal-footer button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.ngx-editor-modal .modal-footer .btn-secondary{background:#f1f5f9;border:1px solid var(--ngx-editor-border);color:var(--ngx-editor-text)}.ngx-editor-modal .modal-footer .btn-secondary:hover{background:#e2e8f0}.ngx-editor-modal .modal-footer .btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}.ngx-editor-modal .modal-footer .btn-primary:hover{background:#1d4ed8}.ngx-editor-modal .modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], template: "<div\n  class=\"ngx-editor-container\"\n  [ngClass]=\"customClass\"\n  [class.is-focused]=\"isFocused\"\n  [class.is-disabled]=\"disabled\"\n  [style.min-height]=\"computedConfig.minHeight\"\n  [style.max-height]=\"computedConfig.maxHeight\"\n  [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n  [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n  [ngStyle]=\"parsedEditorStyle\"\n>\n  <!-- Toolbar -->\n  @if (computedConfig.showToolbar && !readonly) {\n    <!-- Array-configured Toolbar (if tools input is provided) -->\n    @if (computedConfig.tools && computedConfig.tools.length > 0) {\n      <ngx-editor-toolbar\n        [editor]=\"this\"\n        [tools]=\"computedConfig.tools\"\n        [fontFamilies]=\"resolvedFontFamilies\"\n      ></ngx-editor-toolbar>\n    } @else {\n      <!-- Default Full Toolbar -->\n      <div class=\"ngx-editor-toolbar\" role=\"toolbar\" aria-label=\"Editor Toolbar\">\n        <!-- History -->\n        @if (computedConfig.toolbar?.history) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Undo (Ctrl+Z)\"\n              aria-label=\"Undo\"\n              (mousedown)=\"$event.preventDefault(); undo()\"\n            >\n              <ngx-editor-icon name=\"undo\"></ngx-editor-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Redo (Ctrl+Y)\"\n              aria-label=\"Redo\"\n              (mousedown)=\"$event.preventDefault(); redo()\"\n            >\n              <ngx-editor-icon name=\"redo\"></ngx-editor-icon>\n            </button>\n          </div>\n        }\n\n        <!-- Format Block -->\n        @if (computedConfig.toolbar?.format) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Paragraph Format\"\n              aria-label=\"Paragraph Format\"\n              [value]=\"activeBlockTag\"\n              (change)=\"onFormatBlockChange($event)\"\n            >\n              <option value=\"p\">Normal text</option>\n              <option value=\"h1\">Heading 1</option>\n              <option value=\"h2\">Heading 2</option>\n              <option value=\"h3\">Heading 3</option>\n              <option value=\"h4\">Heading 4</option>\n              <option value=\"blockquote\">Quote</option>\n              <option value=\"pre\">Code Block</option>\n            </select>\n          </div>\n        }\n\n        <!-- Font Family -->\n        @if (computedConfig.toolbar?.fontName) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Family\"\n              aria-label=\"Font Family\"\n              (change)=\"onFontNameChange($event)\"\n            >\n              <option value=\"\">Font</option>\n              @for (font of resolvedFontFamilies; track font.value) {\n                <option [value]=\"font.value\">{{ font.label }}</option>\n              }\n            </select>\n          </div>\n        }\n\n        <!-- Font Size -->\n        @if (computedConfig.toolbar?.fontSize) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Size\"\n              aria-label=\"Font Size\"\n              (change)=\"onFontSizeChange($event)\"\n            >\n              <option value=\"\">Size</option>\n              <option value=\"1\">Small (10pt)</option>\n              <option value=\"3\">Normal (12pt)</option>\n              <option value=\"5\">Large (18pt)</option>\n              <option value=\"7\">Huge (36pt)</option>\n            </select>\n          </div>\n        }\n\n        <!-- Inline Styles: Bold, Italic, Underline, Strike, Sub, Sup, Code -->\n        @if (computedConfig.toolbar?.inline) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.inline?.bold !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.bold\"\n                title=\"Bold (Ctrl+B)\"\n                aria-label=\"Bold\"\n                (mousedown)=\"$event.preventDefault(); bold()\"\n              >\n                <ngx-editor-icon name=\"bold\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.italic !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.italic\"\n                title=\"Italic (Ctrl+I)\"\n                aria-label=\"Italic\"\n                (mousedown)=\"$event.preventDefault(); italic()\"\n              >\n                <ngx-editor-icon name=\"italic\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.underline !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.underline\"\n                title=\"Underline (Ctrl+U)\"\n                aria-label=\"Underline\"\n                (mousedown)=\"$event.preventDefault(); underline()\"\n              >\n                <ngx-editor-icon name=\"underline\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.strikeThrough !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.strikeThrough\"\n                title=\"Strikethrough\"\n                aria-label=\"Strikethrough\"\n                (mousedown)=\"$event.preventDefault(); strike()\"\n              >\n                <ngx-editor-icon name=\"strike\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.subscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.subscript\"\n                title=\"Subscript\"\n                aria-label=\"Subscript\"\n                (mousedown)=\"$event.preventDefault(); subscript()\"\n              >\n                <ngx-editor-icon name=\"subscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.superscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.superscript\"\n                title=\"Superscript\"\n                aria-label=\"Superscript\"\n                (mousedown)=\"$event.preventDefault(); superscript()\"\n              >\n                <ngx-editor-icon name=\"superscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.code !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Inline Code\"\n                aria-label=\"Inline Code\"\n                (mousedown)=\"$event.preventDefault(); wrapSelectionWithCode()\"\n              >\n                <ngx-editor-icon name=\"code\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Colors -->\n        @if (computedConfig.toolbar?.color) {\n          <div class=\"ngx-editor-toolbar-group\" style=\"position: relative;\">\n            @if (computedConfig.toolbar?.color?.textColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Text Color\"\n                aria-label=\"Text Color\"\n                (click)=\"toggleColorPicker('text')\"\n              >\n                <ngx-editor-icon name=\"textColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedTextColor\"\n              ></div>\n            }\n\n            @if (computedConfig.toolbar?.color?.backgroundColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Highlight Color\"\n                aria-label=\"Highlight Color\"\n                (click)=\"toggleColorPicker('background')\"\n              >\n                <ngx-editor-icon name=\"bgColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedBgColor\"\n              ></div>\n            }\n\n            <!-- Color Popover -->\n            @if (activeColorPicker) {\n              <div class=\"ngx-color-popover\" (mousedown)=\"$event.stopPropagation()\">\n                <div class=\"color-grid\">\n                  @for (color of computedConfig.colorPalette; track color) {\n                    <button\n                      type=\"button\"\n                      class=\"color-swatch\"\n                      [style.background-color]=\"color\"\n                      (click)=\"applyColor(color)\"\n                    ></button>\n                  }\n                </div>\n                <div class=\"custom-color-picker\">\n                  <input\n                    type=\"color\"\n                    (change)=\"onCustomColorChange($event)\"\n                  />\n                  <span>Custom color</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Alignment -->\n        @if (computedConfig.toolbar?.alignment) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.alignment?.left !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyLeft\"\n                title=\"Align Left\"\n                aria-label=\"Align Left\"\n                (mousedown)=\"$event.preventDefault(); alignLeft()\"\n              >\n                <ngx-editor-icon name=\"alignLeft\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.center !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyCenter\"\n                title=\"Align Center\"\n                aria-label=\"Align Center\"\n                (mousedown)=\"$event.preventDefault(); alignCenter()\"\n              >\n                <ngx-editor-icon name=\"alignCenter\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.right !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyRight\"\n                title=\"Align Right\"\n                aria-label=\"Align Right\"\n                (mousedown)=\"$event.preventDefault(); alignRight()\"\n              >\n                <ngx-editor-icon name=\"alignRight\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.justify !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyFull\"\n                title=\"Justify\"\n                aria-label=\"Justify\"\n                (mousedown)=\"$event.preventDefault(); alignJustify()\"\n              >\n                <ngx-editor-icon name=\"alignJustify\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Lists & Indentation -->\n        @if (computedConfig.toolbar?.list) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.list?.unordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertUnorderedList\"\n                title=\"Bullet List\"\n                aria-label=\"Bullet List\"\n                (mousedown)=\"$event.preventDefault(); insertUnorderedList()\"\n              >\n                <ngx-editor-icon name=\"unorderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.ordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertOrderedList\"\n                title=\"Numbered List\"\n                aria-label=\"Numbered List\"\n                (mousedown)=\"$event.preventDefault(); insertOrderedList()\"\n              >\n                <ngx-editor-icon name=\"orderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.indent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Increase Indent\"\n                aria-label=\"Increase Indent\"\n                (mousedown)=\"$event.preventDefault(); indent()\"\n              >\n                <ngx-editor-icon name=\"indent\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.outdent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Decrease Indent\"\n                aria-label=\"Decrease Indent\"\n                (mousedown)=\"$event.preventDefault(); outdent()\"\n              >\n                <ngx-editor-icon name=\"outdent\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Insert Options -->\n        @if (computedConfig.toolbar?.insert) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.insert?.link !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.link\"\n                title=\"Insert Link (Ctrl+K)\"\n                aria-label=\"Insert Link\"\n                (click)=\"openLinkModal()\"\n              >\n                <ngx-editor-icon name=\"link\"></ngx-editor-icon>\n              </button>\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Remove Link\"\n                aria-label=\"Remove Link\"\n                (mousedown)=\"$event.preventDefault(); unlink()\"\n              >\n                <ngx-editor-icon name=\"unlink\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.image !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Insert Image\"\n                aria-label=\"Insert Image\"\n                (click)=\"openImageModal()\"\n              >\n                <ngx-editor-icon name=\"image\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.horizontalRule !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Horizontal Line\"\n                aria-label=\"Horizontal Line\"\n                (mousedown)=\"$event.preventDefault(); insertHorizontalRule()\"\n              >\n                <ngx-editor-icon name=\"horizontalRule\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Extra Actions -->\n        @if (computedConfig.toolbar?.extra) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.extra?.clearFormat !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Clear Formatting\"\n                aria-label=\"Clear Formatting\"\n                (mousedown)=\"$event.preventDefault(); clearFormatting()\"\n              >\n                <ngx-editor-icon name=\"clearFormat\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.extra?.sourceView !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"isSourceView\"\n                title=\"View HTML Source\"\n                aria-label=\"View HTML Source\"\n                (click)=\"toggleSourceView()\"\n              >\n                <ngx-editor-icon name=\"sourceView\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- Editor Content Area -->\n  <div class=\"ngx-editor-content-wrapper\">\n    <!-- Visual contenteditable -->\n    <div\n      #editorContent\n      class=\"ngx-editor-content\"\n      [style.display]=\"isSourceView ? 'none' : 'block'\"\n      [style.height]=\"computedConfig.height\"\n      [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n      [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n      [ngStyle]=\"parsedContentStyle\"\n      [attr.contenteditable]=\"!disabled && !readonly\"\n      [attr.spellcheck]=\"computedConfig.spellcheck\"\n      [attr.data-placeholder]=\"computedConfig.placeholder\"\n      [attr.data-empty]=\"isEmpty\"\n      (input)=\"onEditorInput()\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"updateEditorState()\"\n      (paste)=\"onEditorPaste($event)\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0;min-height:1.65em}.ngx-editor-content b,.ngx-editor-content strong{font-weight:700!important}.ngx-editor-content i,.ngx-editor-content em{font-style:italic!important}.ngx-editor-content u,.ngx-editor-content .publish-editor-underline{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:.12em}.ngx-editor-content h1{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.25}.ngx-editor-content h2{font-size:1.6em;font-weight:600;margin:.75em 0;line-height:1.3}.ngx-editor-content h3{font-size:1.3em;font-weight:600;margin:.83em 0}.ngx-editor-content h4{font-size:1.1em;font-weight:600;margin:1em 0}.ngx-editor-content ul,.ngx-editor-content ol{margin:0 0 1em 1.5em;padding:0}.ngx-editor-content li{margin-bottom:.25em}.ngx-editor-content blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--ngx-editor-border-focus);background-color:#f8fafc;color:var(--ngx-editor-muted);font-style:italic}.ngx-editor-content pre{background-color:#1e293b;color:#f8fafc;padding:12px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;margin:1em 0}.ngx-editor-content code{background-color:#f1f5f9;color:#e11d48;padding:2px 5px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9em}.ngx-editor-content a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ngx-editor-content .ngx-editor-hashtag,.ngx-editor-content .post-content-hashtag{color:var(--ngx-editor-hashtag-color, #0069FF)!important;font-weight:500;display:inline;cursor:text}.ngx-editor-content hr{border:none;border-top:1px solid var(--ngx-editor-border);margin:1.5em 0}.ngx-editor-content img{max-width:100%;height:auto;border-radius:4px}.ngx-editor-content[data-empty=true]:before{content:attr(data-placeholder);position:absolute;color:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-content:has(ol,ul,li,table,img,hr,blockquote,pre):before{display:none!important;content:none!important}.ngx-editor-source{width:100%;flex:1;min-height:200px;padding:16px;border:none;outline:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.5;background-color:#0f172a;color:#38bdf8;resize:vertical;box-sizing:border-box}.ngx-editor-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--ngx-editor-toolbar-bg);border-top:1px solid var(--ngx-editor-border);font-size:12px;color:var(--ngx-editor-muted)}.ngx-editor-statusbar .statusbar-left,.ngx-editor-statusbar .statusbar-right{display:flex;align-items:center;gap:12px}.ngx-editor-statusbar .status-tag{background-color:#e2e8f0;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:10px}.ngx-editor-statusbar .status-badge{background-color:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:500;font-size:11px}.ngx-editor-modal-backdrop{position:absolute;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease-out}.ngx-editor-modal{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.ngx-editor-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ngx-editor-modal .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-editor-text)}.ngx-editor-modal .modal-body{display:flex;flex-direction:column;gap:12px}.ngx-editor-modal .form-group{display:flex;flex-direction:column;gap:4px}.ngx-editor-modal .form-group label{font-size:13px;font-weight:500;color:var(--ngx-editor-text)}.ngx-editor-modal .form-group input[type=text],.ngx-editor-modal .form-group input[type=url]{padding:8px 12px;border:1px solid var(--ngx-editor-border);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s ease}.ngx-editor-modal .form-group input[type=text]:focus,.ngx-editor-modal .form-group input[type=url]:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-modal .form-group .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ngx-editor-text);-webkit-user-select:none;user-select:none}.ngx-editor-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.ngx-editor-modal .modal-footer button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.ngx-editor-modal .modal-footer .btn-secondary{background:#f1f5f9;border:1px solid var(--ngx-editor-border);color:var(--ngx-editor-text)}.ngx-editor-modal .modal-footer .btn-secondary:hover{background:#e2e8f0}.ngx-editor-modal .modal-footer .btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}.ngx-editor-modal .modal-footer .btn-primary:hover{background:#1d4ed8}.ngx-editor-modal .modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: EditorCommandService }, { type: i2.DomSanitizer }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { editorContentRef: [{
                 type: ViewChild,
                 args: ['editorContent', { static: false }]