ngx-rich-text-pro 1.0.7 → 1.0.8

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

@@ -927,6 +927,7 @@ class NgxRichTextEditorComponent {
     imageModel = { url: '', alt: '' };
     savedSelectionRange = null;
     icons = EDITOR_ICONS;
+    pendingCollapsedFormat = null;
     activeStates = {
         bold: false,
         italic: false,
@@ -964,6 +965,9 @@ class NgxRichTextEditorComponent {
         if (initialContent) {
             this.setContent(initialContent, false);
         }
+        else if (this.editorContentRef?.nativeElement) {
+            this.editorContentRef.nativeElement.innerHTML = '<p><br></p>';
+        }
     }
     ngOnChanges(changes) {
         if (changes['config'] ||
@@ -1158,8 +1162,8 @@ class NgxRichTextEditorComponent {
         return this.computedConfig.outputFormat === 'markdown' || this.outputFormat === 'markdown';
     }
     prepareContentForEditor(value) {
-        if (!value)
-            return '';
+        if (!value || value.trim() === '')
+            return '<p><br></p>';
         if (this.isMarkdownMode()) {
             const looksLikeHtml = /^\s*<[a-z][\s\S]*>/i.test(value);
             const hasMarkdownSyntax = /(__|\*\*|(?<!\*)\*(?!\*)|^\s*-\s|^\s*\d+\.\s)/m.test(value);
@@ -1201,6 +1205,7 @@ class NgxRichTextEditorComponent {
     onEditorInput() {
         if (this.editorContentRef && this.editorContentRef.nativeElement) {
             const root = this.editorContentRef.nativeElement;
+            this.ensureBlockWrapping(root);
             if (this.highlightHashtags) {
                 const spans = root.querySelectorAll('.ngx-editor-hashtag, .post-content-hashtag');
                 let needsCleanup = false;
@@ -1254,10 +1259,45 @@ class NgxRichTextEditorComponent {
             document.execCommand('defaultParagraphSeparator', false, 'p');
         }
         catch { }
+        if (this.editorContentRef?.nativeElement) {
+            const root = this.editorContentRef.nativeElement;
+            if (!root.hasChildNodes() || root.innerHTML.trim() === '' || root.innerHTML === '<br>') {
+                root.innerHTML = '<p><br></p>';
+                const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+                if (sel) {
+                    const range = document.createRange();
+                    range.setStart(root.firstChild, 0);
+                    range.collapse(true);
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                }
+            }
+            else {
+                this.ensureBlockWrapping(root);
+            }
+        }
         this.editorFocus.emit(event);
     }
+    onContentInput(event) {
+        const pending = this.pendingCollapsedFormat;
+        this.pendingCollapsedFormat = null;
+        if (pending &&
+            (this.exclusiveInlineFormats ?? this.computedConfig.exclusiveInlineFormats)) {
+            if (!(event instanceof InputEvent) ||
+                !event.inputType ||
+                !event.inputType.startsWith('delete')) {
+                this.enforcePendingCollapsedFormat(pending);
+            }
+        }
+        this.onEditorInput();
+    }
+    onEditorMouseUp() {
+        this.pendingCollapsedFormat = null;
+        this.updateEditorState();
+    }
     onEditorBlur(event) {
         this.isFocused = false;
+        this.pendingCollapsedFormat = null;
         this.onTouched();
         if (this.highlightHashtags) {
             this.highlightHashtagsInElement();
@@ -1552,6 +1592,22 @@ class NgxRichTextEditorComponent {
         return temp.innerHTML;
     }
     onEditorKeydown(event) {
+        const navKeys = [
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+            'PageUp',
+            'PageDown',
+            'Escape',
+            'Backspace',
+            'Delete',
+        ];
+        if (navKeys.includes(event.key)) {
+            this.pendingCollapsedFormat = null;
+        }
         const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
         const modifier = isMac ? event.metaKey : event.ctrlKey;
         if (!modifier && (event.key === ' ' || event.key === 'Enter')) {
@@ -1649,87 +1705,141 @@ class NgxRichTextEditorComponent {
             this.updateEditorState();
             return;
         }
+        this.ensureBlockWrapping(root);
         const range = sel.getRangeAt(0);
-        // If selection is outside editor root, fall back to standard execution
-        if (!root.contains(range.commonAncestorContainer)) {
+        const currentRange = range;
+        if (currentRange.collapsed) {
             this.focusEditor();
-            this.commandService.execute(targetCommand);
-            this.onEditorInput();
-            this.updateEditorState();
-            return;
-        }
-        if (range.collapsed) {
-            this.focusEditor();
-            const formatAncestor = this.getFormattingAncestor(range, root);
+            const formatAncestor = this.getFormattingAncestor(currentRange, root);
             const isAncestorTarget = formatAncestor !== null && this.getFormatType(formatAncestor) === targetCommand;
             const isTargetActive = this.commandService.queryState(targetCommand) || isAncestorTarget;
             if (isTargetActive) {
                 // Toggle OFF targetCommand
+                if (this.commandService.queryState(targetCommand)) {
+                    this.commandService.execute(targetCommand);
+                }
                 if (formatAncestor) {
                     if ((formatAncestor.textContent || '').trim() === '') {
                         // Empty formatting tag (e.g. <p><b><br></b></p> after Enter): unwrap it
                         const parent = formatAncestor.parentNode;
                         if (parent) {
                             const firstChild = formatAncestor.firstChild;
+                            const nextSib = formatAncestor.nextSibling;
+                            const prevSib = formatAncestor.previousSibling;
                             while (formatAncestor.firstChild) {
                                 parent.insertBefore(formatAncestor.firstChild, formatAncestor);
                             }
                             formatAncestor.remove();
                             if (firstChild) {
-                                range.setStartBefore(firstChild);
-                                range.collapse(true);
-                                sel.removeAllRanges();
-                                sel.addRange(range);
+                                currentRange.setStartBefore(firstChild);
+                            }
+                            else if (nextSib) {
+                                currentRange.setStartBefore(nextSib);
+                            }
+                            else if (prevSib) {
+                                currentRange.setStartAfter(prevSib);
+                            }
+                            else {
+                                const br = document.createElement('br');
+                                parent.appendChild(br);
+                                currentRange.setStartBefore(br);
                             }
+                            currentRange.collapse(true);
+                            sel.removeAllRanges();
+                            sel.addRange(currentRange);
                         }
                     }
-                    else if (this.isCaretAtEndOfElement(range, formatAncestor)) {
+                    else if (this.isCaretAtEndOfElement(currentRange, formatAncestor)) {
                         // At the end of formatting tag: move caret outside after it
-                        range.setStartAfter(formatAncestor);
-                        range.collapse(true);
+                        currentRange.setStartAfter(formatAncestor);
+                        currentRange.collapse(true);
                         sel.removeAllRanges();
-                        sel.addRange(range);
+                        sel.addRange(currentRange);
                     }
-                    else if (this.isCaretAtStartOfElement(range, formatAncestor)) {
+                    else if (this.isCaretAtStartOfElement(currentRange, formatAncestor)) {
                         // At the start of formatting tag: move caret outside before it
-                        range.setStartBefore(formatAncestor);
-                        range.collapse(true);
+                        currentRange.setStartBefore(formatAncestor);
+                        currentRange.collapse(true);
                         sel.removeAllRanges();
-                        sel.addRange(range);
+                        sel.addRange(currentRange);
                     }
                 }
                 if (this.commandService.queryState(targetCommand)) {
                     this.commandService.execute(targetCommand);
                 }
+                this.pendingCollapsedFormat = 'none';
+                this.activeStates[targetCommand] = false;
             }
             else {
                 // Toggle ON targetCommand
-                if (formatAncestor && (formatAncestor.textContent || '').trim() === '') {
-                    const parent = formatAncestor.parentNode;
-                    if (parent) {
-                        const firstChild = formatAncestor.firstChild;
-                        while (formatAncestor.firstChild) {
-                            parent.insertBefore(formatAncestor.firstChild, formatAncestor);
-                        }
-                        formatAncestor.remove();
-                        if (firstChild) {
-                            range.setStartBefore(firstChild);
-                            range.collapse(true);
+                // 1. Turn off any other commands before moving or unwrapping formatAncestor
+                for (const cmd of otherCommands) {
+                    if (this.commandService.queryState(cmd)) {
+                        this.commandService.execute(cmd);
+                    }
+                }
+                if (formatAncestor) {
+                    if ((formatAncestor.textContent || '').trim() === '') {
+                        const parent = formatAncestor.parentNode;
+                        if (parent) {
+                            const firstChild = formatAncestor.firstChild;
+                            const nextSib = formatAncestor.nextSibling;
+                            const prevSib = formatAncestor.previousSibling;
+                            while (formatAncestor.firstChild) {
+                                parent.insertBefore(formatAncestor.firstChild, formatAncestor);
+                            }
+                            formatAncestor.remove();
+                            if (firstChild) {
+                                currentRange.setStartBefore(firstChild);
+                            }
+                            else if (nextSib) {
+                                currentRange.setStartBefore(nextSib);
+                            }
+                            else if (prevSib) {
+                                currentRange.setStartAfter(prevSib);
+                            }
+                            else {
+                                const br = document.createElement('br');
+                                parent.appendChild(br);
+                                currentRange.setStartBefore(br);
+                            }
+                            currentRange.collapse(true);
                             sel.removeAllRanges();
-                            sel.addRange(range);
+                            sel.addRange(currentRange);
                         }
                     }
+                    else if (this.isCaretAtEndOfElement(currentRange, formatAncestor)) {
+                        // At the end of existing formatting tag: move caret outside after it!
+                        currentRange.setStartAfter(formatAncestor);
+                        currentRange.collapse(true);
+                        sel.removeAllRanges();
+                        sel.addRange(currentRange);
+                    }
+                    else if (this.isCaretAtStartOfElement(currentRange, formatAncestor)) {
+                        // At the start of existing formatting tag: move caret outside before it!
+                        currentRange.setStartBefore(formatAncestor);
+                        currentRange.collapse(true);
+                        sel.removeAllRanges();
+                        sel.addRange(currentRange);
+                    }
                 }
+                // 2. Turn off any other commands that might be active at the new position
                 for (const cmd of otherCommands) {
                     if (this.commandService.queryState(cmd)) {
                         this.commandService.execute(cmd);
                     }
                 }
+                // 3. Turn on targetCommand
                 if (!this.commandService.queryState(targetCommand)) {
                     this.commandService.execute(targetCommand);
                 }
+                this.pendingCollapsedFormat = targetCommand;
+                this.activeStates[targetCommand] = true;
+                for (const cmd of otherCommands) {
+                    this.activeStates[cmd] = false;
+                }
             }
-            this.onEditorInput();
+            this.cdr.markForCheck();
             this.updateEditorState();
             return;
         }
@@ -1966,6 +2076,124 @@ class NgxRichTextEditorComponent {
             return 'underline';
         return null;
     }
+    getElementFormattingAncestor(node, root) {
+        const isFormatTag = (el) => ['b', 'strong', 'i', 'em', 'u', 'ins'].includes(el.tagName.toLowerCase());
+        let curr = node.nodeType === Node.ELEMENT_NODE ? node : node.parentNode;
+        while (curr && curr !== root) {
+            if (curr.nodeType === Node.ELEMENT_NODE && isFormatTag(curr)) {
+                return curr;
+            }
+            curr = curr.parentNode;
+        }
+        return null;
+    }
+    enforcePendingCollapsedFormat(pending) {
+        const root = this.editorContentRef?.nativeElement;
+        const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+        if (!root || !sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        let textNode = null;
+        let offset = 0;
+        let formatAncestor = null;
+        if (range.startContainer.nodeType === Node.TEXT_NODE) {
+            textNode = range.startContainer;
+            offset = range.startOffset;
+            formatAncestor = this.getElementFormattingAncestor(textNode, root);
+        }
+        else if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
+            const el = range.startContainer;
+            if (range.startOffset > 0 && el.childNodes.length >= range.startOffset) {
+                const prevChild = el.childNodes[range.startOffset - 1];
+                if (prevChild.nodeType === Node.TEXT_NODE) {
+                    textNode = prevChild;
+                    offset = textNode.length;
+                    formatAncestor = this.getElementFormattingAncestor(textNode, root);
+                }
+                else if (prevChild.nodeType === Node.ELEMENT_NODE) {
+                    formatAncestor = this.getElementFormattingAncestor(prevChild, root);
+                    textNode = this.getLastTextNode(prevChild);
+                    if (textNode) {
+                        offset = textNode.length;
+                    }
+                }
+            }
+        }
+        if (!textNode || offset === 0)
+            return;
+        const currentFormat = formatAncestor ? this.getFormatType(formatAncestor) : null;
+        if (pending === 'none') {
+            if (!formatAncestor)
+                return;
+            if ((formatAncestor.textContent || '').length <= 1 ||
+                (formatAncestor.textContent === textNode.textContent && textNode.length === offset && textNode.length === 1)) {
+                const parent = formatAncestor.parentNode;
+                if (parent) {
+                    while (formatAncestor.firstChild) {
+                        parent.insertBefore(formatAncestor.firstChild, formatAncestor);
+                    }
+                    formatAncestor.remove();
+                    const newRange = document.createRange();
+                    newRange.setStart(textNode, offset);
+                    newRange.collapse(true);
+                    sel.removeAllRanges();
+                    sel.addRange(newRange);
+                }
+            }
+            else if (textNode.parentNode === formatAncestor && offset > 0) {
+                const typedNode = textNode.splitText(offset - 1);
+                formatAncestor.parentNode?.insertBefore(typedNode, formatAncestor.nextSibling);
+                const newRange = document.createRange();
+                newRange.setStart(typedNode, typedNode.length);
+                newRange.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(newRange);
+            }
+            return;
+        }
+        if (currentFormat === pending)
+            return;
+        const targetTag = pending === 'bold' ? 'b' : pending === 'italic' ? 'i' : 'u';
+        if (formatAncestor) {
+            if ((formatAncestor.textContent || '').length <= 1 ||
+                (formatAncestor.textContent === textNode.textContent && textNode.length === offset && textNode.length === 1)) {
+                const newEl = document.createElement(targetTag);
+                while (formatAncestor.firstChild) {
+                    newEl.appendChild(formatAncestor.firstChild);
+                }
+                formatAncestor.parentNode?.replaceChild(newEl, formatAncestor);
+                const newRange = document.createRange();
+                newRange.setStart(textNode, offset);
+                newRange.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(newRange);
+            }
+            else if (textNode.parentNode === formatAncestor && offset > 0) {
+                const typedNode = textNode.splitText(offset - 1);
+                const newEl = document.createElement(targetTag);
+                newEl.appendChild(typedNode);
+                formatAncestor.parentNode?.insertBefore(newEl, formatAncestor.nextSibling);
+                const newRange = document.createRange();
+                newRange.setStart(typedNode, typedNode.length);
+                newRange.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(newRange);
+            }
+        }
+        else {
+            if (offset > 0 && textNode.parentNode) {
+                const typedNode = textNode.splitText(offset - 1);
+                const newEl = document.createElement(targetTag);
+                typedNode.parentNode?.insertBefore(newEl, typedNode);
+                newEl.appendChild(typedNode);
+                const newRange = document.createRange();
+                newRange.setStart(typedNode, typedNode.length);
+                newRange.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(newRange);
+            }
+        }
+    }
     splitAndFormatInsideAncestor(ancestor, range, newTag) {
         const parentNode = ancestor.parentNode;
         if (!parentNode)
@@ -2210,6 +2438,11 @@ class NgxRichTextEditorComponent {
         return textNodes;
     }
     getLeafBlocksInRange(range, root) {
+        this.ensureBlockWrapping(root);
+        const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+        const activeRange = sel && sel.rangeCount > 0 && root.contains(sel.getRangeAt(0).commonAncestorContainer)
+            ? sel.getRangeAt(0)
+            : range;
         const blockSelector = 'p, div, li, h1, h2, h3, h4, h5, h6, blockquote, pre';
         const allBlocks = Array.from(root.querySelectorAll(blockSelector));
         const leafBlocks = allBlocks.filter((block) => {
@@ -2220,7 +2453,7 @@ class NgxRichTextEditorComponent {
         }
         return leafBlocks.filter((block) => {
             try {
-                return range.intersectsNode(block);
+                return activeRange.intersectsNode(block);
             }
             catch {
                 return false;
@@ -2835,6 +3068,114 @@ class NgxRichTextEditorComponent {
             sel.addRange(range);
         }
     }
+    getSelectionCharacterOffsetsWithin(element) {
+        const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+        if (!sel || sel.rangeCount === 0)
+            return null;
+        const range = sel.getRangeAt(0);
+        if (!element.contains(range.commonAncestorContainer))
+            return null;
+        const startRange = range.cloneRange();
+        startRange.selectNodeContents(element);
+        try {
+            startRange.setEnd(range.startContainer, range.startOffset);
+            const start = startRange.toString().length;
+            const endRange = range.cloneRange();
+            endRange.selectNodeContents(element);
+            endRange.setEnd(range.endContainer, range.endOffset);
+            const end = endRange.toString().length;
+            return { start, end };
+        }
+        catch {
+            return null;
+        }
+    }
+    setSelectionCharacterOffsetsWithin(element, start, end) {
+        const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+        if (!sel)
+            return;
+        let startNode = null;
+        let startOffset = 0;
+        let endNode = null;
+        let endOffset = 0;
+        let currentOffset = 0;
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+        let node;
+        while ((node = walker.nextNode())) {
+            const textLength = node.textContent?.length || 0;
+            if (!startNode && currentOffset + textLength >= start) {
+                startNode = node;
+                startOffset = Math.max(0, Math.min(start - currentOffset, textLength));
+            }
+            if (!endNode && currentOffset + textLength >= end) {
+                endNode = node;
+                endOffset = Math.max(0, Math.min(end - currentOffset, textLength));
+                break;
+            }
+            currentOffset += textLength;
+        }
+        if (startNode && endNode) {
+            const range = document.createRange();
+            range.setStart(startNode, startOffset);
+            range.setEnd(endNode, endOffset);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+    }
+    ensureBlockWrapping(root) {
+        const blockTags = new Set([
+            'p', 'div', 'ul', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+            'blockquote', 'pre', 'hr', 'table', 'section', 'article', 'header', 'footer'
+        ]);
+        const isBlock = (node) => {
+            return (node.nodeType === Node.ELEMENT_NODE &&
+                blockTags.has(node.tagName.toLowerCase()));
+        };
+        const children = Array.from(root.childNodes);
+        if (children.length === 0 || (children.length === 1 && children[0].nodeName === 'BR')) {
+            root.innerHTML = '<p><br></p>';
+            return true;
+        }
+        const hasUnwrappedInline = children.some((child) => !isBlock(child));
+        if (!hasUnwrappedInline) {
+            return false;
+        }
+        const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+        const hasSelection = sel &&
+            sel.rangeCount > 0 &&
+            root.contains(sel.getRangeAt(0).commonAncestorContainer);
+        const selOffsets = hasSelection ? this.getSelectionCharacterOffsetsWithin(root) : null;
+        let inlineRun = [];
+        const wrapRun = () => {
+            if (inlineRun.length === 0)
+                return;
+            const p = document.createElement('p');
+            const first = inlineRun[0];
+            root.insertBefore(p, first);
+            for (const n of inlineRun) {
+                p.appendChild(n);
+            }
+            if (!p.hasChildNodes() || (p.textContent || '').trim() === '') {
+                if (!p.querySelector('br, img')) {
+                    p.appendChild(document.createElement('br'));
+                }
+            }
+            inlineRun = [];
+        };
+        for (const child of children) {
+            if (isBlock(child)) {
+                wrapRun();
+            }
+            else {
+                inlineRun.push(child);
+            }
+        }
+        wrapRun();
+        if (selOffsets) {
+            this.setSelectionCharacterOffsetsWithin(root, selOffsets.start, selOffsets.end);
+        }
+        return true;
+    }
     sanitizeHashtags(root) {
         if (!this.highlightHashtags)
             return false;
@@ -3228,19 +3569,38 @@ class NgxRichTextEditorComponent {
                         }
                     }
                     else {
-                        const formatAncestor = this.getFormattingAncestor(range, root);
-                        if (formatAncestor) {
-                            const type = this.getFormatType(formatAncestor);
-                            bold = type === 'bold';
-                            italic = type === 'italic';
-                            underline = type === 'underline';
+                        // Collapsed caret:
+                        if (this.pendingCollapsedFormat === 'none') {
+                            bold = false;
+                            italic = false;
+                            underline = false;
+                        }
+                        else if (this.pendingCollapsedFormat) {
+                            bold = this.pendingCollapsedFormat === 'bold';
+                            italic = this.pendingCollapsedFormat === 'italic';
+                            underline = this.pendingCollapsedFormat === 'underline';
                         }
-                        if (underline) {
+                        else if (underline) {
                             bold = false;
                             italic = false;
                         }
                         else if (italic) {
                             bold = false;
+                            underline = false;
+                        }
+                        else if (bold) {
+                            italic = false;
+                            underline = false;
+                        }
+                        else {
+                            // 2. If browser queryState is clean/unspecified, fallback to enclosing formatting tag
+                            const formatAncestor = this.getFormattingAncestor(range, root);
+                            if (formatAncestor) {
+                                const type = this.getFormatType(formatAncestor);
+                                bold = type === 'bold';
+                                italic = type === 'italic';
+                                underline = type === 'underline';
+                            }
                         }
                     }
                 }
@@ -3432,6 +3792,19 @@ class NgxRichTextEditorComponent {
             .replace(/>/g, '&gt;');
         // Convert any Mathematical / LinkedIn Unicode characters and combining underlines into <b>, <i>, <u> tags
         escaped = this.convertUnicodeMathFormatting(escaped);
+        // Normalize adjacent formatting delimiters when bold and italic meet without whitespace:
+        // e.g. **Hello***How* (bold close ** + italic open *) -> **Hello**\u200B*How*
+        // e.g. *Hello***How** (italic close * + bold open **) -> *Hello*\u200B**How**
+        // e.g. *Hello***Hello***Hello* -> *Hello*\u200B**Hello**\u200B*Hello*
+        let prevNorm = '';
+        let pass = 0;
+        while (prevNorm !== escaped && pass < 10) {
+            pass++;
+            prevNorm = escaped;
+            escaped = escaped
+                .replace(/(?<!\*)(\*\*[^\*\n]+?\*\*)\*(?!\*)/g, '$1\u200B*')
+                .replace(/(?<!\*)(\*[^\*\n]+?\*)\*\*(?!\*)/g, '$1\u200B**');
+        }
         // Handle any legacy / malformed combined markers like __***text***__ -> clean to single effect (underline)
         escaped = escaped.replace(/__\*\*\*(.*?)\*\*\*__/g, '<u>$1</u>');
         escaped = escaped.replace(/__\*\*(.*?)\*\*__/g, '<u>$1</u>');
@@ -3440,6 +3813,7 @@ class NgxRichTextEditorComponent {
         escaped = escaped.replace(/__([^_]+?)__/g, '<u>$1</u>');
         escaped = escaped.replace(/\*\*([^\*]+?)\*\*/g, '<b>$1</b>');
         escaped = escaped.replace(/(?<!\*)\*(?!\*)([^\*\n]+?)(?<!\*)\*(?!\*)/g, '<i>$1</i>');
+        escaped = escaped.replace(/\u200B/g, '');
         if (this.computedConfig.highlightHashtags ?? this.highlightHashtags) {
             escaped = escaped.replace(/(^|[\s>])#([a-zA-Z0-9_\u0080-\uFFFF]+)/g, '$1<span class="ngx-editor-hashtag post-content-hashtag">#$2</span>');
         }
@@ -3778,7 +4152,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: inherit;--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, inherit);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content::selection,.ngx-editor-content *::selection{color:inherit;background:#70b5f959}.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"] }] });
+        ], 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)=\"onContentInput($event)\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"onEditorMouseUp()\"\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: inherit;--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, inherit);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content::selection,.ngx-editor-content *::selection{color:inherit;background:#70b5f959}.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,
@@ -3788,7 +4162,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: inherit;--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, inherit);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content::selection,.ngx-editor-content *::selection{color:inherit;background:#70b5f959}.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"] }]
+                    ], 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)=\"onContentInput($event)\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"onEditorMouseUp()\"\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: inherit;--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, inherit);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content::selection,.ngx-editor-content *::selection{color:inherit;background:#70b5f959}.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 }]