ngx-rich-text-pro 1.0.6 → 1.0.7

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

@@ -1660,17 +1660,74 @@ class NgxRichTextEditorComponent {
         }
         if (range.collapsed) {
             this.focusEditor();
-            const isTargetActive = this.commandService.queryState(targetCommand);
+            const formatAncestor = this.getFormattingAncestor(range, root);
+            const isAncestorTarget = formatAncestor !== null && this.getFormatType(formatAncestor) === targetCommand;
+            const isTargetActive = this.commandService.queryState(targetCommand) || isAncestorTarget;
             if (isTargetActive) {
-                this.commandService.execute(targetCommand);
+                // Toggle OFF 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;
+                            while (formatAncestor.firstChild) {
+                                parent.insertBefore(formatAncestor.firstChild, formatAncestor);
+                            }
+                            formatAncestor.remove();
+                            if (firstChild) {
+                                range.setStartBefore(firstChild);
+                                range.collapse(true);
+                                sel.removeAllRanges();
+                                sel.addRange(range);
+                            }
+                        }
+                    }
+                    else if (this.isCaretAtEndOfElement(range, formatAncestor)) {
+                        // At the end of formatting tag: move caret outside after it
+                        range.setStartAfter(formatAncestor);
+                        range.collapse(true);
+                        sel.removeAllRanges();
+                        sel.addRange(range);
+                    }
+                    else if (this.isCaretAtStartOfElement(range, formatAncestor)) {
+                        // At the start of formatting tag: move caret outside before it
+                        range.setStartBefore(formatAncestor);
+                        range.collapse(true);
+                        sel.removeAllRanges();
+                        sel.addRange(range);
+                    }
+                }
+                if (this.commandService.queryState(targetCommand)) {
+                    this.commandService.execute(targetCommand);
+                }
             }
             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);
+                            sel.removeAllRanges();
+                            sel.addRange(range);
+                        }
+                    }
+                }
                 for (const cmd of otherCommands) {
                     if (this.commandService.queryState(cmd)) {
                         this.commandService.execute(cmd);
                     }
                 }
-                this.commandService.execute(targetCommand);
+                if (!this.commandService.queryState(targetCommand)) {
+                    this.commandService.execute(targetCommand);
+                }
             }
             this.onEditorInput();
             this.updateEditorState();
@@ -1735,6 +1792,28 @@ class NgxRichTextEditorComponent {
         }
         return null;
     }
+    isCaretAtEndOfElement(range, el) {
+        try {
+            const endRange = document.createRange();
+            endRange.selectNodeContents(el);
+            endRange.collapse(false);
+            return range.compareBoundaryPoints(Range.START_TO_START, endRange) === 0;
+        }
+        catch {
+            return false;
+        }
+    }
+    isCaretAtStartOfElement(range, el) {
+        try {
+            const startRange = document.createRange();
+            startRange.selectNodeContents(el);
+            startRange.collapse(true);
+            return range.compareBoundaryPoints(Range.START_TO_START, startRange) === 0;
+        }
+        catch {
+            return false;
+        }
+    }
     normalizeRangeBoundaries(range, root) {
         if (range.collapsed)
             return;
@@ -1892,6 +1971,61 @@ class NgxRichTextEditorComponent {
         if (!parentNode)
             return;
         this.normalizeRangeBoundaries(range);
+        // If the entire ancestor is selected, simply unwrap or re-tag it!
+        const startRange = document.createRange();
+        startRange.setStart(range.startContainer, range.startOffset);
+        startRange.collapse(true);
+        const endRange = document.createRange();
+        endRange.setEnd(range.endContainer, range.endOffset);
+        endRange.collapse(false);
+        const coversAll = this.isCaretAtStartOfElement(startRange, ancestor) &&
+            this.isCaretAtEndOfElement(endRange, ancestor);
+        if (coversAll) {
+            if (newTag) {
+                const wrapper = document.createElement(newTag);
+                while (ancestor.firstChild) {
+                    wrapper.appendChild(ancestor.firstChild);
+                }
+                parentNode.replaceChild(wrapper, ancestor);
+                const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+                if (sel) {
+                    sel.removeAllRanges();
+                    const newRange = document.createRange();
+                    newRange.selectNodeContents(wrapper);
+                    sel.addRange(newRange);
+                }
+            }
+            else {
+                const nodes = [];
+                while (ancestor.firstChild) {
+                    const child = ancestor.firstChild;
+                    parentNode.insertBefore(child, ancestor);
+                    nodes.push(child);
+                }
+                ancestor.remove();
+                const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+                if (sel && nodes.length > 0) {
+                    sel.removeAllRanges();
+                    const newRange = document.createRange();
+                    const first = nodes[0];
+                    const last = nodes[nodes.length - 1];
+                    if (first.nodeType === Node.TEXT_NODE) {
+                        newRange.setStart(first, 0);
+                    }
+                    else {
+                        newRange.setStartBefore(first);
+                    }
+                    if (last.nodeType === Node.TEXT_NODE) {
+                        newRange.setEnd(last, last.textContent?.length || 0);
+                    }
+                    else {
+                        newRange.setEndAfter(last);
+                    }
+                    sel.addRange(newRange);
+                }
+            }
+            return;
+        }
         if (range.startContainer === range.endContainer &&
             range.startContainer.nodeType === Node.TEXT_NODE) {
             const textNode = range.startContainer;
@@ -1951,6 +2085,14 @@ class NgxRichTextEditorComponent {
             return;
         }
         // General multi-node fallback within ancestor:
+        // 1. Extract tail from range.end to end of ancestor into cloneAfter FIRST
+        const cloneAfter = ancestor.cloneNode(false);
+        const tailRange = document.createRange();
+        tailRange.selectNodeContents(ancestor);
+        tailRange.setStart(range.endContainer, range.endOffset);
+        const tailFragment = tailRange.extractContents();
+        cloneAfter.appendChild(tailFragment);
+        // 2. Now extract middle from range.start to range.end into fragment
         const fragment = range.extractContents();
         const formatEls = Array.from(fragment.querySelectorAll('b, strong, i, em, u, ins'));
         for (const el of formatEls) {
@@ -1967,12 +2109,6 @@ class NgxRichTextEditorComponent {
                 el.style.textDecoration = '';
             }
         }
-        const cloneAfter = ancestor.cloneNode(false);
-        const tailRange = document.createRange();
-        tailRange.selectNodeContents(ancestor);
-        tailRange.setStart(range.startContainer, range.startOffset);
-        const tailFragment = tailRange.extractContents();
-        cloneAfter.appendChild(tailFragment);
         const insertionRef = ancestor.nextSibling;
         let selectedNodes = [];
         if (newTag) {
@@ -2100,17 +2236,26 @@ class NgxRichTextEditorComponent {
         if (textNodes.length > 0) {
             const isTargetTag = (el) => {
                 const tag = el.tagName.toLowerCase();
-                if (targetCommand === 'bold')
-                    return tag === 'b' || tag === 'strong';
-                if (targetCommand === 'italic')
-                    return tag === 'i' || tag === 'em';
-                if (targetCommand === 'underline')
-                    return tag === 'u' || tag === 'ins';
+                const fontWeight = (el.style?.fontWeight || '').toLowerCase();
+                const fontStyle = (el.style?.fontStyle || '').toLowerCase();
+                const textDecoration = (el.style?.textDecoration || '').toLowerCase();
+                if (targetCommand === 'bold') {
+                    return (tag === 'b' ||
+                        tag === 'strong' ||
+                        fontWeight === 'bold' ||
+                        parseInt(fontWeight, 10) >= 600);
+                }
+                if (targetCommand === 'italic') {
+                    return tag === 'i' || tag === 'em' || fontStyle === 'italic';
+                }
+                if (targetCommand === 'underline') {
+                    return tag === 'u' || tag === 'ins' || textDecoration.includes('underline');
+                }
                 return false;
             };
             const nonEmptyTextNodes = textNodes.filter((t) => (t.textContent || '').trim().length > 0);
             if (nonEmptyTextNodes.length > 0) {
-                const allFormatted = nonEmptyTextNodes.every((node) => {
+                return nonEmptyTextNodes.every((node) => {
                     let cur = node.parentNode;
                     while (cur && cur !== root) {
                         if (cur.nodeType === Node.ELEMENT_NODE && isTargetTag(cur)) {
@@ -2120,9 +2265,6 @@ class NgxRichTextEditorComponent {
                     }
                     return false;
                 });
-                if (allFormatted) {
-                    return true;
-                }
             }
         }
         return this.commandService.queryState(targetCommand);
@@ -2135,28 +2277,26 @@ class NgxRichTextEditorComponent {
         if (leafBlocks.length > 1) {
             let firstWrapper = null;
             let lastWrapper = null;
-            for (const block of leafBlocks) {
+            for (let i = 0; i < leafBlocks.length; i++) {
+                const block = leafBlocks[i];
                 const text = block.textContent || '';
                 if (text.trim() === '') {
                     continue;
                 }
+                const isFirst = i === 0;
+                const isLast = i === leafBlocks.length - 1;
                 const subRange = document.createRange();
-                if (block.contains(range.startContainer)) {
+                if (isFirst && block.contains(range.startContainer)) {
                     subRange.setStart(range.startContainer, range.startOffset);
                 }
                 else {
-                    const firstText = this.getFirstTextNode(block) || block;
-                    subRange.setStart(firstText, 0);
+                    subRange.setStart(block, 0);
                 }
-                if (block.contains(range.endContainer)) {
+                if (isLast && block.contains(range.endContainer)) {
                     subRange.setEnd(range.endContainer, range.endOffset);
                 }
                 else {
-                    const lastText = this.getLastTextNode(block) || block;
-                    const len = lastText.nodeType === Node.TEXT_NODE
-                        ? lastText.textContent?.length || 0
-                        : lastText.childNodes.length;
-                    subRange.setEnd(lastText, len);
+                    subRange.setEnd(block, block.childNodes.length);
                 }
                 if (!subRange.collapsed) {
                     const wrapper = this.applyExclusiveFormatToSingleRange(subRange, targetCommand);
@@ -2231,28 +2371,26 @@ class NgxRichTextEditorComponent {
         if (leafBlocks.length > 1) {
             let firstBlock = null;
             let lastBlock = null;
-            for (const block of leafBlocks) {
+            for (let i = 0; i < leafBlocks.length; i++) {
+                const block = leafBlocks[i];
                 const text = block.textContent || '';
                 if (text.trim() === '') {
                     continue;
                 }
+                const isFirst = i === 0;
+                const isLast = i === leafBlocks.length - 1;
                 const subRange = document.createRange();
-                if (block.contains(range.startContainer)) {
+                if (isFirst && block.contains(range.startContainer)) {
                     subRange.setStart(range.startContainer, range.startOffset);
                 }
                 else {
-                    const firstText = this.getFirstTextNode(block) || block;
-                    subRange.setStart(firstText, 0);
+                    subRange.setStart(block, 0);
                 }
-                if (block.contains(range.endContainer)) {
+                if (isLast && block.contains(range.endContainer)) {
                     subRange.setEnd(range.endContainer, range.endOffset);
                 }
                 else {
-                    const lastText = this.getLastTextNode(block) || block;
-                    const len = lastText.nodeType === Node.TEXT_NODE
-                        ? lastText.textContent?.length || 0
-                        : lastText.childNodes.length;
-                    subRange.setEnd(lastText, len);
+                    subRange.setEnd(block, block.childNodes.length);
                 }
                 if (!subRange.collapsed) {
                     this.removeFormatFromSingleRange(subRange, targetCommand);
@@ -2329,30 +2467,31 @@ class NgxRichTextEditorComponent {
             const tag = el.tagName.toLowerCase();
             return ['b', 'strong', 'i', 'em', 'u', 'ins'].includes(tag);
         };
-        let startNode = range.startContainer;
-        while (startNode && startNode !== root) {
-            if (startNode.nodeType === Node.ELEMENT_NODE && isFormattingTag(startNode)) {
-                if (range.startOffset === 0) {
-                    range.setStartBefore(startNode);
+        let sNode = range.startContainer;
+        while (sNode && sNode !== root) {
+            if (sNode.nodeType === Node.ELEMENT_NODE && isFormattingTag(sNode)) {
+                const sRange = document.createRange();
+                sRange.setStart(range.startContainer, range.startOffset);
+                sRange.collapse(true);
+                if (this.isCaretAtStartOfElement(sRange, sNode)) {
+                    range.setStartBefore(sNode);
                 }
                 break;
             }
-            if (startNode.previousSibling)
-                break;
-            startNode = startNode.parentNode;
+            sNode = sNode.parentNode;
         }
-        let endNode = range.endContainer;
-        while (endNode && endNode !== root) {
-            if (endNode.nodeType === Node.ELEMENT_NODE && isFormattingTag(endNode)) {
-                const len = endNode.childNodes.length;
-                if (range.endOffset >= len) {
-                    range.setEndAfter(endNode);
+        let eNode = range.endContainer;
+        while (eNode && eNode !== root) {
+            if (eNode.nodeType === Node.ELEMENT_NODE && isFormattingTag(eNode)) {
+                const eRange = document.createRange();
+                eRange.setEnd(range.endContainer, range.endOffset);
+                eRange.collapse(false);
+                if (this.isCaretAtEndOfElement(eRange, eNode)) {
+                    range.setEndAfter(eNode);
                 }
                 break;
             }
-            if (endNode.nextSibling)
-                break;
-            endNode = endNode.parentNode;
+            eNode = eNode.parentNode;
         }
     }
     sanitizeExclusiveFormatting(container) {
@@ -3071,32 +3210,38 @@ class NgxRichTextEditorComponent {
         if (this.exclusiveInlineFormats ?? this.computedConfig.exclusiveInlineFormats) {
             const sel = typeof window !== 'undefined' ? window.getSelection() : null;
             const root = this.editorContentRef?.nativeElement;
-            let formatAncestor = null;
             if (sel && sel.rangeCount > 0 && root) {
                 const range = sel.getRangeAt(0);
                 if (root.contains(range.commonAncestorContainer)) {
-                    formatAncestor = this.getFormattingAncestor(range, root);
-                }
-            }
-            if (formatAncestor) {
-                const type = this.getFormatType(formatAncestor);
-                bold = type === 'bold';
-                italic = type === 'italic';
-                underline = type === 'underline';
-            }
-            else {
-                if (sel && sel.rangeCount > 0 && !sel.getRangeAt(0).collapsed) {
-                    bold = false;
-                    italic = false;
-                    underline = false;
-                }
-                else {
-                    if (underline) {
-                        bold = false;
-                        italic = false;
+                    if (!range.collapsed) {
+                        const formatAncestor = this.getFormattingAncestor(range, root);
+                        if (formatAncestor) {
+                            const type = this.getFormatType(formatAncestor);
+                            bold = type === 'bold';
+                            italic = type === 'italic';
+                            underline = type === 'underline';
+                        }
+                        else {
+                            bold = this.isFormatActiveOnRange(range, 'bold', root);
+                            italic = !bold && this.isFormatActiveOnRange(range, 'italic', root);
+                            underline = !bold && !italic && this.isFormatActiveOnRange(range, 'underline', root);
+                        }
                     }
-                    else if (bold) {
-                        italic = false;
+                    else {
+                        const formatAncestor = this.getFormattingAncestor(range, root);
+                        if (formatAncestor) {
+                            const type = this.getFormatType(formatAncestor);
+                            bold = type === 'bold';
+                            italic = type === 'italic';
+                            underline = type === 'underline';
+                        }
+                        if (underline) {
+                            bold = false;
+                            italic = false;
+                        }
+                        else if (italic) {
+                            bold = false;
+                        }
                     }
                 }
             }
@@ -3633,7 +3778,7 @@ class NgxRichTextEditorComponent {
                 useExisting: forwardRef(() => NgxRichTextEditorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "editorContentRef", first: true, predicate: ["editorContent"], descendants: true }, { propertyName: "sourceTextareaRef", first: true, predicate: ["sourceTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ngx-editor-container\"\n  [ngClass]=\"customClass\"\n  [class.is-focused]=\"isFocused\"\n  [class.is-disabled]=\"disabled\"\n  [style.min-height]=\"computedConfig.minHeight\"\n  [style.max-height]=\"computedConfig.maxHeight\"\n  [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n  [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n  [ngStyle]=\"parsedEditorStyle\"\n>\n  <!-- Toolbar -->\n  @if (computedConfig.showToolbar && !readonly) {\n    <!-- Array-configured Toolbar (if tools input is provided) -->\n    @if (computedConfig.tools && computedConfig.tools.length > 0) {\n      <ngx-editor-toolbar\n        [editor]=\"this\"\n        [tools]=\"computedConfig.tools\"\n        [fontFamilies]=\"resolvedFontFamilies\"\n      ></ngx-editor-toolbar>\n    } @else {\n      <!-- Default Full Toolbar -->\n      <div class=\"ngx-editor-toolbar\" role=\"toolbar\" aria-label=\"Editor Toolbar\">\n        <!-- History -->\n        @if (computedConfig.toolbar?.history) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Undo (Ctrl+Z)\"\n              aria-label=\"Undo\"\n              (mousedown)=\"$event.preventDefault(); undo()\"\n            >\n              <ngx-editor-icon name=\"undo\"></ngx-editor-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Redo (Ctrl+Y)\"\n              aria-label=\"Redo\"\n              (mousedown)=\"$event.preventDefault(); redo()\"\n            >\n              <ngx-editor-icon name=\"redo\"></ngx-editor-icon>\n            </button>\n          </div>\n        }\n\n        <!-- Format Block -->\n        @if (computedConfig.toolbar?.format) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Paragraph Format\"\n              aria-label=\"Paragraph Format\"\n              [value]=\"activeBlockTag\"\n              (change)=\"onFormatBlockChange($event)\"\n            >\n              <option value=\"p\">Normal text</option>\n              <option value=\"h1\">Heading 1</option>\n              <option value=\"h2\">Heading 2</option>\n              <option value=\"h3\">Heading 3</option>\n              <option value=\"h4\">Heading 4</option>\n              <option value=\"blockquote\">Quote</option>\n              <option value=\"pre\">Code Block</option>\n            </select>\n          </div>\n        }\n\n        <!-- Font Family -->\n        @if (computedConfig.toolbar?.fontName) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Family\"\n              aria-label=\"Font Family\"\n              (change)=\"onFontNameChange($event)\"\n            >\n              <option value=\"\">Font</option>\n              @for (font of resolvedFontFamilies; track font.value) {\n                <option [value]=\"font.value\">{{ font.label }}</option>\n              }\n            </select>\n          </div>\n        }\n\n        <!-- Font Size -->\n        @if (computedConfig.toolbar?.fontSize) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Size\"\n              aria-label=\"Font Size\"\n              (change)=\"onFontSizeChange($event)\"\n            >\n              <option value=\"\">Size</option>\n              <option value=\"1\">Small (10pt)</option>\n              <option value=\"3\">Normal (12pt)</option>\n              <option value=\"5\">Large (18pt)</option>\n              <option value=\"7\">Huge (36pt)</option>\n            </select>\n          </div>\n        }\n\n        <!-- Inline Styles: Bold, Italic, Underline, Strike, Sub, Sup, Code -->\n        @if (computedConfig.toolbar?.inline) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.inline?.bold !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.bold\"\n                title=\"Bold (Ctrl+B)\"\n                aria-label=\"Bold\"\n                (mousedown)=\"$event.preventDefault(); bold()\"\n              >\n                <ngx-editor-icon name=\"bold\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.italic !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.italic\"\n                title=\"Italic (Ctrl+I)\"\n                aria-label=\"Italic\"\n                (mousedown)=\"$event.preventDefault(); italic()\"\n              >\n                <ngx-editor-icon name=\"italic\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.underline !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.underline\"\n                title=\"Underline (Ctrl+U)\"\n                aria-label=\"Underline\"\n                (mousedown)=\"$event.preventDefault(); underline()\"\n              >\n                <ngx-editor-icon name=\"underline\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.strikeThrough !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.strikeThrough\"\n                title=\"Strikethrough\"\n                aria-label=\"Strikethrough\"\n                (mousedown)=\"$event.preventDefault(); strike()\"\n              >\n                <ngx-editor-icon name=\"strike\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.subscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.subscript\"\n                title=\"Subscript\"\n                aria-label=\"Subscript\"\n                (mousedown)=\"$event.preventDefault(); subscript()\"\n              >\n                <ngx-editor-icon name=\"subscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.superscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.superscript\"\n                title=\"Superscript\"\n                aria-label=\"Superscript\"\n                (mousedown)=\"$event.preventDefault(); superscript()\"\n              >\n                <ngx-editor-icon name=\"superscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.code !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Inline Code\"\n                aria-label=\"Inline Code\"\n                (mousedown)=\"$event.preventDefault(); wrapSelectionWithCode()\"\n              >\n                <ngx-editor-icon name=\"code\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Colors -->\n        @if (computedConfig.toolbar?.color) {\n          <div class=\"ngx-editor-toolbar-group\" style=\"position: relative;\">\n            @if (computedConfig.toolbar?.color?.textColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Text Color\"\n                aria-label=\"Text Color\"\n                (click)=\"toggleColorPicker('text')\"\n              >\n                <ngx-editor-icon name=\"textColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedTextColor\"\n              ></div>\n            }\n\n            @if (computedConfig.toolbar?.color?.backgroundColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Highlight Color\"\n                aria-label=\"Highlight Color\"\n                (click)=\"toggleColorPicker('background')\"\n              >\n                <ngx-editor-icon name=\"bgColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedBgColor\"\n              ></div>\n            }\n\n            <!-- Color Popover -->\n            @if (activeColorPicker) {\n              <div class=\"ngx-color-popover\" (mousedown)=\"$event.stopPropagation()\">\n                <div class=\"color-grid\">\n                  @for (color of computedConfig.colorPalette; track color) {\n                    <button\n                      type=\"button\"\n                      class=\"color-swatch\"\n                      [style.background-color]=\"color\"\n                      (click)=\"applyColor(color)\"\n                    ></button>\n                  }\n                </div>\n                <div class=\"custom-color-picker\">\n                  <input\n                    type=\"color\"\n                    (change)=\"onCustomColorChange($event)\"\n                  />\n                  <span>Custom color</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Alignment -->\n        @if (computedConfig.toolbar?.alignment) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.alignment?.left !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyLeft\"\n                title=\"Align Left\"\n                aria-label=\"Align Left\"\n                (mousedown)=\"$event.preventDefault(); alignLeft()\"\n              >\n                <ngx-editor-icon name=\"alignLeft\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.center !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyCenter\"\n                title=\"Align Center\"\n                aria-label=\"Align Center\"\n                (mousedown)=\"$event.preventDefault(); alignCenter()\"\n              >\n                <ngx-editor-icon name=\"alignCenter\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.right !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyRight\"\n                title=\"Align Right\"\n                aria-label=\"Align Right\"\n                (mousedown)=\"$event.preventDefault(); alignRight()\"\n              >\n                <ngx-editor-icon name=\"alignRight\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.justify !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyFull\"\n                title=\"Justify\"\n                aria-label=\"Justify\"\n                (mousedown)=\"$event.preventDefault(); alignJustify()\"\n              >\n                <ngx-editor-icon name=\"alignJustify\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Lists & Indentation -->\n        @if (computedConfig.toolbar?.list) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.list?.unordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertUnorderedList\"\n                title=\"Bullet List\"\n                aria-label=\"Bullet List\"\n                (mousedown)=\"$event.preventDefault(); insertUnorderedList()\"\n              >\n                <ngx-editor-icon name=\"unorderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.ordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertOrderedList\"\n                title=\"Numbered List\"\n                aria-label=\"Numbered List\"\n                (mousedown)=\"$event.preventDefault(); insertOrderedList()\"\n              >\n                <ngx-editor-icon name=\"orderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.indent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Increase Indent\"\n                aria-label=\"Increase Indent\"\n                (mousedown)=\"$event.preventDefault(); indent()\"\n              >\n                <ngx-editor-icon name=\"indent\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.outdent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Decrease Indent\"\n                aria-label=\"Decrease Indent\"\n                (mousedown)=\"$event.preventDefault(); outdent()\"\n              >\n                <ngx-editor-icon name=\"outdent\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Insert Options -->\n        @if (computedConfig.toolbar?.insert) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.insert?.link !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.link\"\n                title=\"Insert Link (Ctrl+K)\"\n                aria-label=\"Insert Link\"\n                (click)=\"openLinkModal()\"\n              >\n                <ngx-editor-icon name=\"link\"></ngx-editor-icon>\n              </button>\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Remove Link\"\n                aria-label=\"Remove Link\"\n                (mousedown)=\"$event.preventDefault(); unlink()\"\n              >\n                <ngx-editor-icon name=\"unlink\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.image !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Insert Image\"\n                aria-label=\"Insert Image\"\n                (click)=\"openImageModal()\"\n              >\n                <ngx-editor-icon name=\"image\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.horizontalRule !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Horizontal Line\"\n                aria-label=\"Horizontal Line\"\n                (mousedown)=\"$event.preventDefault(); insertHorizontalRule()\"\n              >\n                <ngx-editor-icon name=\"horizontalRule\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Extra Actions -->\n        @if (computedConfig.toolbar?.extra) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.extra?.clearFormat !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Clear Formatting\"\n                aria-label=\"Clear Formatting\"\n                (mousedown)=\"$event.preventDefault(); clearFormatting()\"\n              >\n                <ngx-editor-icon name=\"clearFormat\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.extra?.sourceView !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"isSourceView\"\n                title=\"View HTML Source\"\n                aria-label=\"View HTML Source\"\n                (click)=\"toggleSourceView()\"\n              >\n                <ngx-editor-icon name=\"sourceView\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- Editor Content Area -->\n  <div class=\"ngx-editor-content-wrapper\">\n    <!-- Visual contenteditable -->\n    <div\n      #editorContent\n      class=\"ngx-editor-content\"\n      [style.display]=\"isSourceView ? 'none' : 'block'\"\n      [style.height]=\"computedConfig.height\"\n      [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n      [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n      [ngStyle]=\"parsedContentStyle\"\n      [attr.contenteditable]=\"!disabled && !readonly\"\n      [attr.spellcheck]=\"computedConfig.spellcheck\"\n      [attr.data-placeholder]=\"computedConfig.placeholder\"\n      [attr.data-empty]=\"isEmpty\"\n      (input)=\"onEditorInput()\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"updateEditorState()\"\n      (paste)=\"onEditorPaste($event)\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0;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)=\"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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NgxRichTextEditorComponent, decorators: [{
             type: Component,
@@ -3643,7 +3788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                             useExisting: forwardRef(() => NgxRichTextEditorComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ngx-editor-container\"\n  [ngClass]=\"customClass\"\n  [class.is-focused]=\"isFocused\"\n  [class.is-disabled]=\"disabled\"\n  [style.min-height]=\"computedConfig.minHeight\"\n  [style.max-height]=\"computedConfig.maxHeight\"\n  [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n  [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n  [ngStyle]=\"parsedEditorStyle\"\n>\n  <!-- Toolbar -->\n  @if (computedConfig.showToolbar && !readonly) {\n    <!-- Array-configured Toolbar (if tools input is provided) -->\n    @if (computedConfig.tools && computedConfig.tools.length > 0) {\n      <ngx-editor-toolbar\n        [editor]=\"this\"\n        [tools]=\"computedConfig.tools\"\n        [fontFamilies]=\"resolvedFontFamilies\"\n      ></ngx-editor-toolbar>\n    } @else {\n      <!-- Default Full Toolbar -->\n      <div class=\"ngx-editor-toolbar\" role=\"toolbar\" aria-label=\"Editor Toolbar\">\n        <!-- History -->\n        @if (computedConfig.toolbar?.history) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Undo (Ctrl+Z)\"\n              aria-label=\"Undo\"\n              (mousedown)=\"$event.preventDefault(); undo()\"\n            >\n              <ngx-editor-icon name=\"undo\"></ngx-editor-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Redo (Ctrl+Y)\"\n              aria-label=\"Redo\"\n              (mousedown)=\"$event.preventDefault(); redo()\"\n            >\n              <ngx-editor-icon name=\"redo\"></ngx-editor-icon>\n            </button>\n          </div>\n        }\n\n        <!-- Format Block -->\n        @if (computedConfig.toolbar?.format) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Paragraph Format\"\n              aria-label=\"Paragraph Format\"\n              [value]=\"activeBlockTag\"\n              (change)=\"onFormatBlockChange($event)\"\n            >\n              <option value=\"p\">Normal text</option>\n              <option value=\"h1\">Heading 1</option>\n              <option value=\"h2\">Heading 2</option>\n              <option value=\"h3\">Heading 3</option>\n              <option value=\"h4\">Heading 4</option>\n              <option value=\"blockquote\">Quote</option>\n              <option value=\"pre\">Code Block</option>\n            </select>\n          </div>\n        }\n\n        <!-- Font Family -->\n        @if (computedConfig.toolbar?.fontName) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Family\"\n              aria-label=\"Font Family\"\n              (change)=\"onFontNameChange($event)\"\n            >\n              <option value=\"\">Font</option>\n              @for (font of resolvedFontFamilies; track font.value) {\n                <option [value]=\"font.value\">{{ font.label }}</option>\n              }\n            </select>\n          </div>\n        }\n\n        <!-- Font Size -->\n        @if (computedConfig.toolbar?.fontSize) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Size\"\n              aria-label=\"Font Size\"\n              (change)=\"onFontSizeChange($event)\"\n            >\n              <option value=\"\">Size</option>\n              <option value=\"1\">Small (10pt)</option>\n              <option value=\"3\">Normal (12pt)</option>\n              <option value=\"5\">Large (18pt)</option>\n              <option value=\"7\">Huge (36pt)</option>\n            </select>\n          </div>\n        }\n\n        <!-- Inline Styles: Bold, Italic, Underline, Strike, Sub, Sup, Code -->\n        @if (computedConfig.toolbar?.inline) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.inline?.bold !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.bold\"\n                title=\"Bold (Ctrl+B)\"\n                aria-label=\"Bold\"\n                (mousedown)=\"$event.preventDefault(); bold()\"\n              >\n                <ngx-editor-icon name=\"bold\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.italic !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.italic\"\n                title=\"Italic (Ctrl+I)\"\n                aria-label=\"Italic\"\n                (mousedown)=\"$event.preventDefault(); italic()\"\n              >\n                <ngx-editor-icon name=\"italic\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.underline !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.underline\"\n                title=\"Underline (Ctrl+U)\"\n                aria-label=\"Underline\"\n                (mousedown)=\"$event.preventDefault(); underline()\"\n              >\n                <ngx-editor-icon name=\"underline\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.strikeThrough !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.strikeThrough\"\n                title=\"Strikethrough\"\n                aria-label=\"Strikethrough\"\n                (mousedown)=\"$event.preventDefault(); strike()\"\n              >\n                <ngx-editor-icon name=\"strike\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.subscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.subscript\"\n                title=\"Subscript\"\n                aria-label=\"Subscript\"\n                (mousedown)=\"$event.preventDefault(); subscript()\"\n              >\n                <ngx-editor-icon name=\"subscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.superscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.superscript\"\n                title=\"Superscript\"\n                aria-label=\"Superscript\"\n                (mousedown)=\"$event.preventDefault(); superscript()\"\n              >\n                <ngx-editor-icon name=\"superscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.code !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Inline Code\"\n                aria-label=\"Inline Code\"\n                (mousedown)=\"$event.preventDefault(); wrapSelectionWithCode()\"\n              >\n                <ngx-editor-icon name=\"code\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Colors -->\n        @if (computedConfig.toolbar?.color) {\n          <div class=\"ngx-editor-toolbar-group\" style=\"position: relative;\">\n            @if (computedConfig.toolbar?.color?.textColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Text Color\"\n                aria-label=\"Text Color\"\n                (click)=\"toggleColorPicker('text')\"\n              >\n                <ngx-editor-icon name=\"textColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedTextColor\"\n              ></div>\n            }\n\n            @if (computedConfig.toolbar?.color?.backgroundColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Highlight Color\"\n                aria-label=\"Highlight Color\"\n                (click)=\"toggleColorPicker('background')\"\n              >\n                <ngx-editor-icon name=\"bgColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedBgColor\"\n              ></div>\n            }\n\n            <!-- Color Popover -->\n            @if (activeColorPicker) {\n              <div class=\"ngx-color-popover\" (mousedown)=\"$event.stopPropagation()\">\n                <div class=\"color-grid\">\n                  @for (color of computedConfig.colorPalette; track color) {\n                    <button\n                      type=\"button\"\n                      class=\"color-swatch\"\n                      [style.background-color]=\"color\"\n                      (click)=\"applyColor(color)\"\n                    ></button>\n                  }\n                </div>\n                <div class=\"custom-color-picker\">\n                  <input\n                    type=\"color\"\n                    (change)=\"onCustomColorChange($event)\"\n                  />\n                  <span>Custom color</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Alignment -->\n        @if (computedConfig.toolbar?.alignment) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.alignment?.left !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyLeft\"\n                title=\"Align Left\"\n                aria-label=\"Align Left\"\n                (mousedown)=\"$event.preventDefault(); alignLeft()\"\n              >\n                <ngx-editor-icon name=\"alignLeft\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.center !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyCenter\"\n                title=\"Align Center\"\n                aria-label=\"Align Center\"\n                (mousedown)=\"$event.preventDefault(); alignCenter()\"\n              >\n                <ngx-editor-icon name=\"alignCenter\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.right !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyRight\"\n                title=\"Align Right\"\n                aria-label=\"Align Right\"\n                (mousedown)=\"$event.preventDefault(); alignRight()\"\n              >\n                <ngx-editor-icon name=\"alignRight\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.justify !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyFull\"\n                title=\"Justify\"\n                aria-label=\"Justify\"\n                (mousedown)=\"$event.preventDefault(); alignJustify()\"\n              >\n                <ngx-editor-icon name=\"alignJustify\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Lists & Indentation -->\n        @if (computedConfig.toolbar?.list) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.list?.unordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertUnorderedList\"\n                title=\"Bullet List\"\n                aria-label=\"Bullet List\"\n                (mousedown)=\"$event.preventDefault(); insertUnorderedList()\"\n              >\n                <ngx-editor-icon name=\"unorderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.ordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertOrderedList\"\n                title=\"Numbered List\"\n                aria-label=\"Numbered List\"\n                (mousedown)=\"$event.preventDefault(); insertOrderedList()\"\n              >\n                <ngx-editor-icon name=\"orderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.indent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Increase Indent\"\n                aria-label=\"Increase Indent\"\n                (mousedown)=\"$event.preventDefault(); indent()\"\n              >\n                <ngx-editor-icon name=\"indent\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.outdent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Decrease Indent\"\n                aria-label=\"Decrease Indent\"\n                (mousedown)=\"$event.preventDefault(); outdent()\"\n              >\n                <ngx-editor-icon name=\"outdent\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Insert Options -->\n        @if (computedConfig.toolbar?.insert) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.insert?.link !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.link\"\n                title=\"Insert Link (Ctrl+K)\"\n                aria-label=\"Insert Link\"\n                (click)=\"openLinkModal()\"\n              >\n                <ngx-editor-icon name=\"link\"></ngx-editor-icon>\n              </button>\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Remove Link\"\n                aria-label=\"Remove Link\"\n                (mousedown)=\"$event.preventDefault(); unlink()\"\n              >\n                <ngx-editor-icon name=\"unlink\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.image !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Insert Image\"\n                aria-label=\"Insert Image\"\n                (click)=\"openImageModal()\"\n              >\n                <ngx-editor-icon name=\"image\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.horizontalRule !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Horizontal Line\"\n                aria-label=\"Horizontal Line\"\n                (mousedown)=\"$event.preventDefault(); insertHorizontalRule()\"\n              >\n                <ngx-editor-icon name=\"horizontalRule\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Extra Actions -->\n        @if (computedConfig.toolbar?.extra) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.extra?.clearFormat !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Clear Formatting\"\n                aria-label=\"Clear Formatting\"\n                (mousedown)=\"$event.preventDefault(); clearFormatting()\"\n              >\n                <ngx-editor-icon name=\"clearFormat\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.extra?.sourceView !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"isSourceView\"\n                title=\"View HTML Source\"\n                aria-label=\"View HTML Source\"\n                (click)=\"toggleSourceView()\"\n              >\n                <ngx-editor-icon name=\"sourceView\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- Editor Content Area -->\n  <div class=\"ngx-editor-content-wrapper\">\n    <!-- Visual contenteditable -->\n    <div\n      #editorContent\n      class=\"ngx-editor-content\"\n      [style.display]=\"isSourceView ? 'none' : 'block'\"\n      [style.height]=\"computedConfig.height\"\n      [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n      [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n      [ngStyle]=\"parsedContentStyle\"\n      [attr.contenteditable]=\"!disabled && !readonly\"\n      [attr.spellcheck]=\"computedConfig.spellcheck\"\n      [attr.data-placeholder]=\"computedConfig.placeholder\"\n      [attr.data-empty]=\"isEmpty\"\n      (input)=\"onEditorInput()\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"updateEditorState()\"\n      (paste)=\"onEditorPaste($event)\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0;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)=\"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"] }]
         }], ctorParameters: () => [{ type: EditorCommandService }, { type: i2.DomSanitizer }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { editorContentRef: [{
                 type: ViewChild,
                 args: ['editorContent', { static: false }]