ngx-rich-text-pro 1.0.2 → 1.0.3

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

@@ -1239,13 +1239,231 @@ class NgxRichTextEditorComponent {
         }
         this.editorBlur.emit(event);
     }
-    onEditorPaste() {
-        if (this.highlightHashtags) {
-            setTimeout(() => {
+    onEditorPaste(event) {
+        if (this.disabled || this.readonly || this.isSourceView)
+            return;
+        if (!event || !event.clipboardData) {
+            if (this.highlightHashtags) {
+                setTimeout(() => {
+                    this.highlightHashtagsInElement();
+                    this.onEditorInput();
+                });
+            }
+            return;
+        }
+        event.preventDefault();
+        const clipboard = event.clipboardData;
+        const rawHtml = clipboard.getData('text/html');
+        const plainText = clipboard.getData('text/plain');
+        let htmlToInsert = '';
+        // 1. Try extracting and cleaning rich HTML from clipboard
+        if (rawHtml && rawHtml.trim()) {
+            htmlToInsert = this.cleanPastedHtml(rawHtml);
+        }
+        // 2. If no valid HTML or plain text copy (e.g. from markdown/unicode/chat/plain editors)
+        if (!htmlToInsert || !htmlToInsert.trim()) {
+            if (plainText && plainText.trim()) {
+                const hasNewlines = plainText.includes('\n') || plainText.includes('\r');
+                const hasListMarkers = /^\s*(-\s|\d+\.\s)/m.test(plainText);
+                if (hasNewlines || hasListMarkers) {
+                    htmlToInsert = this.modelTextToEditorHtml(plainText);
+                }
+                else {
+                    htmlToInsert = this.modelInlineTextToHtml(plainText);
+                }
+            }
+        }
+        if (htmlToInsert) {
+            this.focusEditor();
+            this.commandService.insertHtml(htmlToInsert);
+            if (this.highlightHashtags) {
                 this.highlightHashtagsInElement();
-                this.onEditorInput();
-            });
+            }
+            this.onEditorInput();
+            this.updateEditorState();
+        }
+    }
+    cleanPastedHtml(rawHtml) {
+        if (typeof DOMParser === 'undefined') {
+            return rawHtml;
         }
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(rawHtml, 'text/html');
+        const body = doc.body;
+        // Remove unwanted / dangerous elements
+        const unwanted = body.querySelectorAll('script, style, meta, link, iframe, noscript');
+        unwanted.forEach((el) => el.remove());
+        const isExclusive = this.exclusiveInlineFormats ?? this.computedConfig.exclusiveInlineFormats;
+        const sanitizeNode = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent || '';
+                const formatted = this.convertUnicodeMathFormatting(text);
+                if (formatted !== text) {
+                    const wrapper = document.createElement('span');
+                    wrapper.innerHTML = formatted;
+                    return wrapper;
+                }
+                return document.createTextNode(text);
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE) {
+                return null;
+            }
+            const el = node;
+            const tag = el.tagName.toLowerCase();
+            const fontWeight = (el.style.fontWeight || '').toLowerCase();
+            const fontStyle = (el.style.fontStyle || '').toLowerCase();
+            const textDecoration = (el.style.textDecoration || '').toLowerCase();
+            const className = (el.className || '').toLowerCase();
+            const hasBoldClass = className.includes('bold') ||
+                className.includes('font-bold') ||
+                className.includes('fw-bold') ||
+                className.includes('weight-bold');
+            const hasItalicClass = className.includes('italic') ||
+                className.includes('font-italic') ||
+                className.includes('fst-italic');
+            const hasUnderlineClass = className.includes('underline') ||
+                className.includes('text-underline') ||
+                className.includes('publish-editor-underline');
+            const isBold = (tag === 'b' ||
+                tag === 'strong' ||
+                fontWeight === 'bold' ||
+                parseInt(fontWeight, 10) >= 600 ||
+                hasBoldClass) &&
+                fontWeight !== 'normal' &&
+                fontWeight !== '400';
+            const isItalic = (tag === 'i' || tag === 'em' || fontStyle === 'italic' || hasItalicClass) &&
+                fontStyle !== 'normal';
+            const isUnderline = (tag === 'u' || tag === 'ins' || textDecoration.includes('underline') || hasUnderlineClass) &&
+                !textDecoration.includes('none');
+            // Process children recursively
+            const childNodes = Array.from(el.childNodes);
+            const processedChildren = [];
+            for (const child of childNodes) {
+                const processed = sanitizeNode(child);
+                if (processed) {
+                    processedChildren.push(processed);
+                }
+            }
+            const appendChildren = (target) => {
+                for (const child of processedChildren) {
+                    if (child.nodeType === Node.ELEMENT_NODE &&
+                        child.tagName === 'SPAN' &&
+                        child.children.length > 0) {
+                        while (child.firstChild) {
+                            target.appendChild(child.firstChild);
+                        }
+                    }
+                    else {
+                        target.appendChild(child);
+                    }
+                }
+            };
+            // Wrap formatting tags
+            if (isExclusive) {
+                if (isUnderline) {
+                    const u = document.createElement('u');
+                    appendChildren(u);
+                    return u;
+                }
+                if (isBold) {
+                    const b = document.createElement('b');
+                    appendChildren(b);
+                    return b;
+                }
+                if (isItalic) {
+                    const i = document.createElement('i');
+                    appendChildren(i);
+                    return i;
+                }
+            }
+            else {
+                let currentElement = null;
+                if (isBold) {
+                    currentElement = document.createElement('b');
+                }
+                if (isItalic) {
+                    const i = document.createElement('i');
+                    if (currentElement)
+                        currentElement.appendChild(i);
+                    else
+                        currentElement = i;
+                }
+                if (isUnderline) {
+                    const u = document.createElement('u');
+                    if (currentElement)
+                        currentElement.appendChild(u);
+                    else
+                        currentElement = u;
+                }
+                if (currentElement) {
+                    let innermost = currentElement;
+                    while (innermost.firstElementChild) {
+                        innermost = innermost.firstElementChild;
+                    }
+                    appendChildren(innermost);
+                    return currentElement;
+                }
+            }
+            // Semantic block elements
+            if (tag === 'p' ||
+                tag === 'div' ||
+                tag === 'blockquote' ||
+                tag === 'pre' ||
+                tag === 'h1' ||
+                tag === 'h2' ||
+                tag === 'h3' ||
+                tag === 'h4') {
+                const block = document.createElement(tag === 'div' ? 'p' : tag);
+                appendChildren(block);
+                return block;
+            }
+            if (tag === 'ul' || tag === 'ol') {
+                const list = document.createElement(tag);
+                if (el.hasAttribute('start'))
+                    list.setAttribute('start', el.getAttribute('start'));
+                appendChildren(list);
+                return list;
+            }
+            if (tag === 'li') {
+                const li = document.createElement('li');
+                appendChildren(li);
+                return li;
+            }
+            if (tag === 'br') {
+                return document.createElement('br');
+            }
+            if (tag === 'a' && el.hasAttribute('href')) {
+                const a = document.createElement('a');
+                a.href = el.getAttribute('href') || '';
+                if (el.getAttribute('target') === '_blank')
+                    a.target = '_blank';
+                appendChildren(a);
+                return a;
+            }
+            if (tag === 'img' && el.hasAttribute('src')) {
+                const img = document.createElement('img');
+                img.src = el.getAttribute('src') || '';
+                if (el.hasAttribute('alt'))
+                    img.alt = el.getAttribute('alt');
+                return img;
+            }
+            // Default: unwrap container and keep children
+            const fragment = document.createDocumentFragment();
+            for (const child of processedChildren) {
+                fragment.appendChild(child);
+            }
+            return fragment;
+        };
+        const fragment = document.createDocumentFragment();
+        Array.from(body.childNodes).forEach((child) => {
+            const sanitized = sanitizeNode(child);
+            if (sanitized) {
+                fragment.appendChild(sanitized);
+            }
+        });
+        const temp = document.createElement('div');
+        temp.appendChild(fragment);
+        return temp.innerHTML;
     }
     onEditorKeydown(event) {
         const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
@@ -2304,7 +2522,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()\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0 0 1em}.ngx-editor-content b,.ngx-editor-content strong{font-weight:700!important}.ngx-editor-content i,.ngx-editor-content em{font-style:italic!important}.ngx-editor-content u,.ngx-editor-content .publish-editor-underline{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:.12em}.ngx-editor-content h1{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.25}.ngx-editor-content h2{font-size:1.6em;font-weight:600;margin:.75em 0;line-height:1.3}.ngx-editor-content h3{font-size:1.3em;font-weight:600;margin:.83em 0}.ngx-editor-content h4{font-size:1.1em;font-weight:600;margin:1em 0}.ngx-editor-content ul,.ngx-editor-content ol{margin:0 0 1em 1.5em;padding:0}.ngx-editor-content li{margin-bottom:.25em}.ngx-editor-content blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--ngx-editor-border-focus);background-color:#f8fafc;color:var(--ngx-editor-muted);font-style:italic}.ngx-editor-content pre{background-color:#1e293b;color:#f8fafc;padding:12px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;margin:1em 0}.ngx-editor-content code{background-color:#f1f5f9;color:#e11d48;padding:2px 5px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9em}.ngx-editor-content a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ngx-editor-content .ngx-editor-hashtag,.ngx-editor-content .post-content-hashtag{color:var(--ngx-editor-hashtag-color, #0069FF)!important;font-weight:500;display:inline;cursor:text}.ngx-editor-content hr{border:none;border-top:1px solid var(--ngx-editor-border);margin:1.5em 0}.ngx-editor-content img{max-width:100%;height:auto;border-radius:4px}.ngx-editor-content[data-empty=true]:before{content:attr(data-placeholder);position:absolute;color:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-content:has(ol,ul,li,table,img,hr,blockquote,pre):before{display:none!important;content:none!important}.ngx-editor-source{width:100%;flex:1;min-height:200px;padding:16px;border:none;outline:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.5;background-color:#0f172a;color:#38bdf8;resize:vertical;box-sizing:border-box}.ngx-editor-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--ngx-editor-toolbar-bg);border-top:1px solid var(--ngx-editor-border);font-size:12px;color:var(--ngx-editor-muted)}.ngx-editor-statusbar .statusbar-left,.ngx-editor-statusbar .statusbar-right{display:flex;align-items:center;gap:12px}.ngx-editor-statusbar .status-tag{background-color:#e2e8f0;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:10px}.ngx-editor-statusbar .status-badge{background-color:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:500;font-size:11px}.ngx-editor-modal-backdrop{position:absolute;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease-out}.ngx-editor-modal{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.ngx-editor-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ngx-editor-modal .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-editor-text)}.ngx-editor-modal .modal-body{display:flex;flex-direction:column;gap:12px}.ngx-editor-modal .form-group{display:flex;flex-direction:column;gap:4px}.ngx-editor-modal .form-group label{font-size:13px;font-weight:500;color:var(--ngx-editor-text)}.ngx-editor-modal .form-group input[type=text],.ngx-editor-modal .form-group input[type=url]{padding:8px 12px;border:1px solid var(--ngx-editor-border);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s ease}.ngx-editor-modal .form-group input[type=text]:focus,.ngx-editor-modal .form-group input[type=url]:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-modal .form-group .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ngx-editor-text);-webkit-user-select:none;user-select:none}.ngx-editor-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.ngx-editor-modal .modal-footer button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.ngx-editor-modal .modal-footer .btn-secondary{background:#f1f5f9;border:1px solid var(--ngx-editor-border);color:var(--ngx-editor-text)}.ngx-editor-modal .modal-footer .btn-secondary:hover{background:#e2e8f0}.ngx-editor-modal .modal-footer .btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}.ngx-editor-modal .modal-footer .btn-primary:hover{background:#1d4ed8}.ngx-editor-modal .modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgxEditorIconComponent, selector: "ngx-editor-icon", inputs: ["name"] }, { kind: "component", type: NgxEditorToolbarComponent, selector: "ngx-editor-toolbar", inputs: ["editor", "tools", "fontFamilies"], outputs: ["actionTriggered"] }] });
+        ], viewQueries: [{ propertyName: "editorContentRef", first: true, predicate: ["editorContent"], descendants: true }, { propertyName: "sourceTextareaRef", first: true, predicate: ["sourceTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ngx-editor-container\"\n  [ngClass]=\"customClass\"\n  [class.is-focused]=\"isFocused\"\n  [class.is-disabled]=\"disabled\"\n  [style.min-height]=\"computedConfig.minHeight\"\n  [style.max-height]=\"computedConfig.maxHeight\"\n  [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n  [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n  [ngStyle]=\"parsedEditorStyle\"\n>\n  <!-- Toolbar -->\n  @if (computedConfig.showToolbar && !readonly) {\n    <!-- Array-configured Toolbar (if tools input is provided) -->\n    @if (computedConfig.tools && computedConfig.tools.length > 0) {\n      <ngx-editor-toolbar\n        [editor]=\"this\"\n        [tools]=\"computedConfig.tools\"\n        [fontFamilies]=\"resolvedFontFamilies\"\n      ></ngx-editor-toolbar>\n    } @else {\n      <!-- Default Full Toolbar -->\n      <div class=\"ngx-editor-toolbar\" role=\"toolbar\" aria-label=\"Editor Toolbar\">\n        <!-- History -->\n        @if (computedConfig.toolbar?.history) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Undo (Ctrl+Z)\"\n              aria-label=\"Undo\"\n              (mousedown)=\"$event.preventDefault(); undo()\"\n            >\n              <ngx-editor-icon name=\"undo\"></ngx-editor-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Redo (Ctrl+Y)\"\n              aria-label=\"Redo\"\n              (mousedown)=\"$event.preventDefault(); redo()\"\n            >\n              <ngx-editor-icon name=\"redo\"></ngx-editor-icon>\n            </button>\n          </div>\n        }\n\n        <!-- Format Block -->\n        @if (computedConfig.toolbar?.format) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Paragraph Format\"\n              aria-label=\"Paragraph Format\"\n              [value]=\"activeBlockTag\"\n              (change)=\"onFormatBlockChange($event)\"\n            >\n              <option value=\"p\">Normal text</option>\n              <option value=\"h1\">Heading 1</option>\n              <option value=\"h2\">Heading 2</option>\n              <option value=\"h3\">Heading 3</option>\n              <option value=\"h4\">Heading 4</option>\n              <option value=\"blockquote\">Quote</option>\n              <option value=\"pre\">Code Block</option>\n            </select>\n          </div>\n        }\n\n        <!-- Font Family -->\n        @if (computedConfig.toolbar?.fontName) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Family\"\n              aria-label=\"Font Family\"\n              (change)=\"onFontNameChange($event)\"\n            >\n              <option value=\"\">Font</option>\n              @for (font of resolvedFontFamilies; track font.value) {\n                <option [value]=\"font.value\">{{ font.label }}</option>\n              }\n            </select>\n          </div>\n        }\n\n        <!-- Font Size -->\n        @if (computedConfig.toolbar?.fontSize) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Size\"\n              aria-label=\"Font Size\"\n              (change)=\"onFontSizeChange($event)\"\n            >\n              <option value=\"\">Size</option>\n              <option value=\"1\">Small (10pt)</option>\n              <option value=\"3\">Normal (12pt)</option>\n              <option value=\"5\">Large (18pt)</option>\n              <option value=\"7\">Huge (36pt)</option>\n            </select>\n          </div>\n        }\n\n        <!-- Inline Styles: Bold, Italic, Underline, Strike, Sub, Sup, Code -->\n        @if (computedConfig.toolbar?.inline) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.inline?.bold !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.bold\"\n                title=\"Bold (Ctrl+B)\"\n                aria-label=\"Bold\"\n                (mousedown)=\"$event.preventDefault(); bold()\"\n              >\n                <ngx-editor-icon name=\"bold\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.italic !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.italic\"\n                title=\"Italic (Ctrl+I)\"\n                aria-label=\"Italic\"\n                (mousedown)=\"$event.preventDefault(); italic()\"\n              >\n                <ngx-editor-icon name=\"italic\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.underline !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.underline\"\n                title=\"Underline (Ctrl+U)\"\n                aria-label=\"Underline\"\n                (mousedown)=\"$event.preventDefault(); underline()\"\n              >\n                <ngx-editor-icon name=\"underline\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.strikeThrough !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.strikeThrough\"\n                title=\"Strikethrough\"\n                aria-label=\"Strikethrough\"\n                (mousedown)=\"$event.preventDefault(); strike()\"\n              >\n                <ngx-editor-icon name=\"strike\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.subscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.subscript\"\n                title=\"Subscript\"\n                aria-label=\"Subscript\"\n                (mousedown)=\"$event.preventDefault(); subscript()\"\n              >\n                <ngx-editor-icon name=\"subscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.superscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.superscript\"\n                title=\"Superscript\"\n                aria-label=\"Superscript\"\n                (mousedown)=\"$event.preventDefault(); superscript()\"\n              >\n                <ngx-editor-icon name=\"superscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.code !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Inline Code\"\n                aria-label=\"Inline Code\"\n                (mousedown)=\"$event.preventDefault(); wrapSelectionWithCode()\"\n              >\n                <ngx-editor-icon name=\"code\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Colors -->\n        @if (computedConfig.toolbar?.color) {\n          <div class=\"ngx-editor-toolbar-group\" style=\"position: relative;\">\n            @if (computedConfig.toolbar?.color?.textColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Text Color\"\n                aria-label=\"Text Color\"\n                (click)=\"toggleColorPicker('text')\"\n              >\n                <ngx-editor-icon name=\"textColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedTextColor\"\n              ></div>\n            }\n\n            @if (computedConfig.toolbar?.color?.backgroundColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Highlight Color\"\n                aria-label=\"Highlight Color\"\n                (click)=\"toggleColorPicker('background')\"\n              >\n                <ngx-editor-icon name=\"bgColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedBgColor\"\n              ></div>\n            }\n\n            <!-- Color Popover -->\n            @if (activeColorPicker) {\n              <div class=\"ngx-color-popover\" (mousedown)=\"$event.stopPropagation()\">\n                <div class=\"color-grid\">\n                  @for (color of computedConfig.colorPalette; track color) {\n                    <button\n                      type=\"button\"\n                      class=\"color-swatch\"\n                      [style.background-color]=\"color\"\n                      (click)=\"applyColor(color)\"\n                    ></button>\n                  }\n                </div>\n                <div class=\"custom-color-picker\">\n                  <input\n                    type=\"color\"\n                    (change)=\"onCustomColorChange($event)\"\n                  />\n                  <span>Custom color</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Alignment -->\n        @if (computedConfig.toolbar?.alignment) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.alignment?.left !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyLeft\"\n                title=\"Align Left\"\n                aria-label=\"Align Left\"\n                (mousedown)=\"$event.preventDefault(); alignLeft()\"\n              >\n                <ngx-editor-icon name=\"alignLeft\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.center !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyCenter\"\n                title=\"Align Center\"\n                aria-label=\"Align Center\"\n                (mousedown)=\"$event.preventDefault(); alignCenter()\"\n              >\n                <ngx-editor-icon name=\"alignCenter\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.right !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyRight\"\n                title=\"Align Right\"\n                aria-label=\"Align Right\"\n                (mousedown)=\"$event.preventDefault(); alignRight()\"\n              >\n                <ngx-editor-icon name=\"alignRight\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.justify !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyFull\"\n                title=\"Justify\"\n                aria-label=\"Justify\"\n                (mousedown)=\"$event.preventDefault(); alignJustify()\"\n              >\n                <ngx-editor-icon name=\"alignJustify\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Lists & Indentation -->\n        @if (computedConfig.toolbar?.list) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.list?.unordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertUnorderedList\"\n                title=\"Bullet List\"\n                aria-label=\"Bullet List\"\n                (mousedown)=\"$event.preventDefault(); insertUnorderedList()\"\n              >\n                <ngx-editor-icon name=\"unorderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.ordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertOrderedList\"\n                title=\"Numbered List\"\n                aria-label=\"Numbered List\"\n                (mousedown)=\"$event.preventDefault(); insertOrderedList()\"\n              >\n                <ngx-editor-icon name=\"orderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.indent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Increase Indent\"\n                aria-label=\"Increase Indent\"\n                (mousedown)=\"$event.preventDefault(); indent()\"\n              >\n                <ngx-editor-icon name=\"indent\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.outdent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Decrease Indent\"\n                aria-label=\"Decrease Indent\"\n                (mousedown)=\"$event.preventDefault(); outdent()\"\n              >\n                <ngx-editor-icon name=\"outdent\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Insert Options -->\n        @if (computedConfig.toolbar?.insert) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.insert?.link !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.link\"\n                title=\"Insert Link (Ctrl+K)\"\n                aria-label=\"Insert Link\"\n                (click)=\"openLinkModal()\"\n              >\n                <ngx-editor-icon name=\"link\"></ngx-editor-icon>\n              </button>\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Remove Link\"\n                aria-label=\"Remove Link\"\n                (mousedown)=\"$event.preventDefault(); unlink()\"\n              >\n                <ngx-editor-icon name=\"unlink\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.image !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Insert Image\"\n                aria-label=\"Insert Image\"\n                (click)=\"openImageModal()\"\n              >\n                <ngx-editor-icon name=\"image\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.horizontalRule !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Horizontal Line\"\n                aria-label=\"Horizontal Line\"\n                (mousedown)=\"$event.preventDefault(); insertHorizontalRule()\"\n              >\n                <ngx-editor-icon name=\"horizontalRule\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Extra Actions -->\n        @if (computedConfig.toolbar?.extra) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.extra?.clearFormat !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Clear Formatting\"\n                aria-label=\"Clear Formatting\"\n                (mousedown)=\"$event.preventDefault(); clearFormatting()\"\n              >\n                <ngx-editor-icon name=\"clearFormat\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.extra?.sourceView !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"isSourceView\"\n                title=\"View HTML Source\"\n                aria-label=\"View HTML Source\"\n                (click)=\"toggleSourceView()\"\n              >\n                <ngx-editor-icon name=\"sourceView\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- Editor Content Area -->\n  <div class=\"ngx-editor-content-wrapper\">\n    <!-- Visual contenteditable -->\n    <div\n      #editorContent\n      class=\"ngx-editor-content\"\n      [style.display]=\"isSourceView ? 'none' : 'block'\"\n      [style.height]=\"computedConfig.height\"\n      [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n      [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n      [ngStyle]=\"parsedContentStyle\"\n      [attr.contenteditable]=\"!disabled && !readonly\"\n      [attr.spellcheck]=\"computedConfig.spellcheck\"\n      [attr.data-placeholder]=\"computedConfig.placeholder\"\n      [attr.data-empty]=\"isEmpty\"\n      (input)=\"onEditorInput()\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"updateEditorState()\"\n      (paste)=\"onEditorPaste($event)\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0 0 1em}.ngx-editor-content b,.ngx-editor-content strong{font-weight:700!important}.ngx-editor-content i,.ngx-editor-content em{font-style:italic!important}.ngx-editor-content u,.ngx-editor-content .publish-editor-underline{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:.12em}.ngx-editor-content h1{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.25}.ngx-editor-content h2{font-size:1.6em;font-weight:600;margin:.75em 0;line-height:1.3}.ngx-editor-content h3{font-size:1.3em;font-weight:600;margin:.83em 0}.ngx-editor-content h4{font-size:1.1em;font-weight:600;margin:1em 0}.ngx-editor-content ul,.ngx-editor-content ol{margin:0 0 1em 1.5em;padding:0}.ngx-editor-content li{margin-bottom:.25em}.ngx-editor-content blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--ngx-editor-border-focus);background-color:#f8fafc;color:var(--ngx-editor-muted);font-style:italic}.ngx-editor-content pre{background-color:#1e293b;color:#f8fafc;padding:12px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;margin:1em 0}.ngx-editor-content code{background-color:#f1f5f9;color:#e11d48;padding:2px 5px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9em}.ngx-editor-content a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ngx-editor-content .ngx-editor-hashtag,.ngx-editor-content .post-content-hashtag{color:var(--ngx-editor-hashtag-color, #0069FF)!important;font-weight:500;display:inline;cursor:text}.ngx-editor-content hr{border:none;border-top:1px solid var(--ngx-editor-border);margin:1.5em 0}.ngx-editor-content img{max-width:100%;height:auto;border-radius:4px}.ngx-editor-content[data-empty=true]:before{content:attr(data-placeholder);position:absolute;color:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-content:has(ol,ul,li,table,img,hr,blockquote,pre):before{display:none!important;content:none!important}.ngx-editor-source{width:100%;flex:1;min-height:200px;padding:16px;border:none;outline:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.5;background-color:#0f172a;color:#38bdf8;resize:vertical;box-sizing:border-box}.ngx-editor-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--ngx-editor-toolbar-bg);border-top:1px solid var(--ngx-editor-border);font-size:12px;color:var(--ngx-editor-muted)}.ngx-editor-statusbar .statusbar-left,.ngx-editor-statusbar .statusbar-right{display:flex;align-items:center;gap:12px}.ngx-editor-statusbar .status-tag{background-color:#e2e8f0;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:10px}.ngx-editor-statusbar .status-badge{background-color:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:500;font-size:11px}.ngx-editor-modal-backdrop{position:absolute;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease-out}.ngx-editor-modal{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.ngx-editor-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ngx-editor-modal .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-editor-text)}.ngx-editor-modal .modal-body{display:flex;flex-direction:column;gap:12px}.ngx-editor-modal .form-group{display:flex;flex-direction:column;gap:4px}.ngx-editor-modal .form-group label{font-size:13px;font-weight:500;color:var(--ngx-editor-text)}.ngx-editor-modal .form-group input[type=text],.ngx-editor-modal .form-group input[type=url]{padding:8px 12px;border:1px solid var(--ngx-editor-border);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s ease}.ngx-editor-modal .form-group input[type=text]:focus,.ngx-editor-modal .form-group input[type=url]:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-modal .form-group .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ngx-editor-text);-webkit-user-select:none;user-select:none}.ngx-editor-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.ngx-editor-modal .modal-footer button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.ngx-editor-modal .modal-footer .btn-secondary{background:#f1f5f9;border:1px solid var(--ngx-editor-border);color:var(--ngx-editor-text)}.ngx-editor-modal .modal-footer .btn-secondary:hover{background:#e2e8f0}.ngx-editor-modal .modal-footer .btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}.ngx-editor-modal .modal-footer .btn-primary:hover{background:#1d4ed8}.ngx-editor-modal .modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgxEditorIconComponent, selector: "ngx-editor-icon", inputs: ["name"] }, { kind: "component", type: NgxEditorToolbarComponent, selector: "ngx-editor-toolbar", inputs: ["editor", "tools", "fontFamilies"], outputs: ["actionTriggered"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NgxRichTextEditorComponent, decorators: [{
             type: Component,
@@ -2314,7 +2532,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()\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0 0 1em}.ngx-editor-content b,.ngx-editor-content strong{font-weight:700!important}.ngx-editor-content i,.ngx-editor-content em{font-style:italic!important}.ngx-editor-content u,.ngx-editor-content .publish-editor-underline{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:.12em}.ngx-editor-content h1{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.25}.ngx-editor-content h2{font-size:1.6em;font-weight:600;margin:.75em 0;line-height:1.3}.ngx-editor-content h3{font-size:1.3em;font-weight:600;margin:.83em 0}.ngx-editor-content h4{font-size:1.1em;font-weight:600;margin:1em 0}.ngx-editor-content ul,.ngx-editor-content ol{margin:0 0 1em 1.5em;padding:0}.ngx-editor-content li{margin-bottom:.25em}.ngx-editor-content blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--ngx-editor-border-focus);background-color:#f8fafc;color:var(--ngx-editor-muted);font-style:italic}.ngx-editor-content pre{background-color:#1e293b;color:#f8fafc;padding:12px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;margin:1em 0}.ngx-editor-content code{background-color:#f1f5f9;color:#e11d48;padding:2px 5px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9em}.ngx-editor-content a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ngx-editor-content .ngx-editor-hashtag,.ngx-editor-content .post-content-hashtag{color:var(--ngx-editor-hashtag-color, #0069FF)!important;font-weight:500;display:inline;cursor:text}.ngx-editor-content hr{border:none;border-top:1px solid var(--ngx-editor-border);margin:1.5em 0}.ngx-editor-content img{max-width:100%;height:auto;border-radius:4px}.ngx-editor-content[data-empty=true]:before{content:attr(data-placeholder);position:absolute;color:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-content:has(ol,ul,li,table,img,hr,blockquote,pre):before{display:none!important;content:none!important}.ngx-editor-source{width:100%;flex:1;min-height:200px;padding:16px;border:none;outline:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.5;background-color:#0f172a;color:#38bdf8;resize:vertical;box-sizing:border-box}.ngx-editor-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--ngx-editor-toolbar-bg);border-top:1px solid var(--ngx-editor-border);font-size:12px;color:var(--ngx-editor-muted)}.ngx-editor-statusbar .statusbar-left,.ngx-editor-statusbar .statusbar-right{display:flex;align-items:center;gap:12px}.ngx-editor-statusbar .status-tag{background-color:#e2e8f0;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:10px}.ngx-editor-statusbar .status-badge{background-color:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:500;font-size:11px}.ngx-editor-modal-backdrop{position:absolute;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease-out}.ngx-editor-modal{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.ngx-editor-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ngx-editor-modal .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-editor-text)}.ngx-editor-modal .modal-body{display:flex;flex-direction:column;gap:12px}.ngx-editor-modal .form-group{display:flex;flex-direction:column;gap:4px}.ngx-editor-modal .form-group label{font-size:13px;font-weight:500;color:var(--ngx-editor-text)}.ngx-editor-modal .form-group input[type=text],.ngx-editor-modal .form-group input[type=url]{padding:8px 12px;border:1px solid var(--ngx-editor-border);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s ease}.ngx-editor-modal .form-group input[type=text]:focus,.ngx-editor-modal .form-group input[type=url]:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-modal .form-group .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ngx-editor-text);-webkit-user-select:none;user-select:none}.ngx-editor-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.ngx-editor-modal .modal-footer button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.ngx-editor-modal .modal-footer .btn-secondary{background:#f1f5f9;border:1px solid var(--ngx-editor-border);color:var(--ngx-editor-text)}.ngx-editor-modal .modal-footer .btn-secondary:hover{background:#e2e8f0}.ngx-editor-modal .modal-footer .btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}.ngx-editor-modal .modal-footer .btn-primary:hover{background:#1d4ed8}.ngx-editor-modal .modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], template: "<div\n  class=\"ngx-editor-container\"\n  [ngClass]=\"customClass\"\n  [class.is-focused]=\"isFocused\"\n  [class.is-disabled]=\"disabled\"\n  [style.min-height]=\"computedConfig.minHeight\"\n  [style.max-height]=\"computedConfig.maxHeight\"\n  [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n  [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n  [ngStyle]=\"parsedEditorStyle\"\n>\n  <!-- Toolbar -->\n  @if (computedConfig.showToolbar && !readonly) {\n    <!-- Array-configured Toolbar (if tools input is provided) -->\n    @if (computedConfig.tools && computedConfig.tools.length > 0) {\n      <ngx-editor-toolbar\n        [editor]=\"this\"\n        [tools]=\"computedConfig.tools\"\n        [fontFamilies]=\"resolvedFontFamilies\"\n      ></ngx-editor-toolbar>\n    } @else {\n      <!-- Default Full Toolbar -->\n      <div class=\"ngx-editor-toolbar\" role=\"toolbar\" aria-label=\"Editor Toolbar\">\n        <!-- History -->\n        @if (computedConfig.toolbar?.history) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Undo (Ctrl+Z)\"\n              aria-label=\"Undo\"\n              (mousedown)=\"$event.preventDefault(); undo()\"\n            >\n              <ngx-editor-icon name=\"undo\"></ngx-editor-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-editor-btn\"\n              title=\"Redo (Ctrl+Y)\"\n              aria-label=\"Redo\"\n              (mousedown)=\"$event.preventDefault(); redo()\"\n            >\n              <ngx-editor-icon name=\"redo\"></ngx-editor-icon>\n            </button>\n          </div>\n        }\n\n        <!-- Format Block -->\n        @if (computedConfig.toolbar?.format) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Paragraph Format\"\n              aria-label=\"Paragraph Format\"\n              [value]=\"activeBlockTag\"\n              (change)=\"onFormatBlockChange($event)\"\n            >\n              <option value=\"p\">Normal text</option>\n              <option value=\"h1\">Heading 1</option>\n              <option value=\"h2\">Heading 2</option>\n              <option value=\"h3\">Heading 3</option>\n              <option value=\"h4\">Heading 4</option>\n              <option value=\"blockquote\">Quote</option>\n              <option value=\"pre\">Code Block</option>\n            </select>\n          </div>\n        }\n\n        <!-- Font Family -->\n        @if (computedConfig.toolbar?.fontName) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Family\"\n              aria-label=\"Font Family\"\n              (change)=\"onFontNameChange($event)\"\n            >\n              <option value=\"\">Font</option>\n              @for (font of resolvedFontFamilies; track font.value) {\n                <option [value]=\"font.value\">{{ font.label }}</option>\n              }\n            </select>\n          </div>\n        }\n\n        <!-- Font Size -->\n        @if (computedConfig.toolbar?.fontSize) {\n          <div class=\"ngx-editor-toolbar-group\">\n            <select\n              class=\"ngx-editor-select\"\n              title=\"Font Size\"\n              aria-label=\"Font Size\"\n              (change)=\"onFontSizeChange($event)\"\n            >\n              <option value=\"\">Size</option>\n              <option value=\"1\">Small (10pt)</option>\n              <option value=\"3\">Normal (12pt)</option>\n              <option value=\"5\">Large (18pt)</option>\n              <option value=\"7\">Huge (36pt)</option>\n            </select>\n          </div>\n        }\n\n        <!-- Inline Styles: Bold, Italic, Underline, Strike, Sub, Sup, Code -->\n        @if (computedConfig.toolbar?.inline) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.inline?.bold !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.bold\"\n                title=\"Bold (Ctrl+B)\"\n                aria-label=\"Bold\"\n                (mousedown)=\"$event.preventDefault(); bold()\"\n              >\n                <ngx-editor-icon name=\"bold\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.italic !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.italic\"\n                title=\"Italic (Ctrl+I)\"\n                aria-label=\"Italic\"\n                (mousedown)=\"$event.preventDefault(); italic()\"\n              >\n                <ngx-editor-icon name=\"italic\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.underline !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.underline\"\n                title=\"Underline (Ctrl+U)\"\n                aria-label=\"Underline\"\n                (mousedown)=\"$event.preventDefault(); underline()\"\n              >\n                <ngx-editor-icon name=\"underline\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.strikeThrough !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.strikeThrough\"\n                title=\"Strikethrough\"\n                aria-label=\"Strikethrough\"\n                (mousedown)=\"$event.preventDefault(); strike()\"\n              >\n                <ngx-editor-icon name=\"strike\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.subscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.subscript\"\n                title=\"Subscript\"\n                aria-label=\"Subscript\"\n                (mousedown)=\"$event.preventDefault(); subscript()\"\n              >\n                <ngx-editor-icon name=\"subscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.superscript !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.superscript\"\n                title=\"Superscript\"\n                aria-label=\"Superscript\"\n                (mousedown)=\"$event.preventDefault(); superscript()\"\n              >\n                <ngx-editor-icon name=\"superscript\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.inline?.code !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Inline Code\"\n                aria-label=\"Inline Code\"\n                (mousedown)=\"$event.preventDefault(); wrapSelectionWithCode()\"\n              >\n                <ngx-editor-icon name=\"code\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Colors -->\n        @if (computedConfig.toolbar?.color) {\n          <div class=\"ngx-editor-toolbar-group\" style=\"position: relative;\">\n            @if (computedConfig.toolbar?.color?.textColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Text Color\"\n                aria-label=\"Text Color\"\n                (click)=\"toggleColorPicker('text')\"\n              >\n                <ngx-editor-icon name=\"textColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedTextColor\"\n              ></div>\n            }\n\n            @if (computedConfig.toolbar?.color?.backgroundColor !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn ngx-editor-color-btn\"\n                title=\"Highlight Color\"\n                aria-label=\"Highlight Color\"\n                (click)=\"toggleColorPicker('background')\"\n              >\n                <ngx-editor-icon name=\"bgColor\"></ngx-editor-icon>\n              </button>\n              <div\n                class=\"color-bar\"\n                [style.background-color]=\"selectedBgColor\"\n              ></div>\n            }\n\n            <!-- Color Popover -->\n            @if (activeColorPicker) {\n              <div class=\"ngx-color-popover\" (mousedown)=\"$event.stopPropagation()\">\n                <div class=\"color-grid\">\n                  @for (color of computedConfig.colorPalette; track color) {\n                    <button\n                      type=\"button\"\n                      class=\"color-swatch\"\n                      [style.background-color]=\"color\"\n                      (click)=\"applyColor(color)\"\n                    ></button>\n                  }\n                </div>\n                <div class=\"custom-color-picker\">\n                  <input\n                    type=\"color\"\n                    (change)=\"onCustomColorChange($event)\"\n                  />\n                  <span>Custom color</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Alignment -->\n        @if (computedConfig.toolbar?.alignment) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.alignment?.left !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyLeft\"\n                title=\"Align Left\"\n                aria-label=\"Align Left\"\n                (mousedown)=\"$event.preventDefault(); alignLeft()\"\n              >\n                <ngx-editor-icon name=\"alignLeft\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.center !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyCenter\"\n                title=\"Align Center\"\n                aria-label=\"Align Center\"\n                (mousedown)=\"$event.preventDefault(); alignCenter()\"\n              >\n                <ngx-editor-icon name=\"alignCenter\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.right !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyRight\"\n                title=\"Align Right\"\n                aria-label=\"Align Right\"\n                (mousedown)=\"$event.preventDefault(); alignRight()\"\n              >\n                <ngx-editor-icon name=\"alignRight\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.alignment?.justify !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.justifyFull\"\n                title=\"Justify\"\n                aria-label=\"Justify\"\n                (mousedown)=\"$event.preventDefault(); alignJustify()\"\n              >\n                <ngx-editor-icon name=\"alignJustify\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Lists & Indentation -->\n        @if (computedConfig.toolbar?.list) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.list?.unordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertUnorderedList\"\n                title=\"Bullet List\"\n                aria-label=\"Bullet List\"\n                (mousedown)=\"$event.preventDefault(); insertUnorderedList()\"\n              >\n                <ngx-editor-icon name=\"unorderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.ordered !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.insertOrderedList\"\n                title=\"Numbered List\"\n                aria-label=\"Numbered List\"\n                (mousedown)=\"$event.preventDefault(); insertOrderedList()\"\n              >\n                <ngx-editor-icon name=\"orderedList\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.indent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Increase Indent\"\n                aria-label=\"Increase Indent\"\n                (mousedown)=\"$event.preventDefault(); indent()\"\n              >\n                <ngx-editor-icon name=\"indent\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.list?.outdent !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Decrease Indent\"\n                aria-label=\"Decrease Indent\"\n                (mousedown)=\"$event.preventDefault(); outdent()\"\n              >\n                <ngx-editor-icon name=\"outdent\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Insert Options -->\n        @if (computedConfig.toolbar?.insert) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.insert?.link !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"activeStates.link\"\n                title=\"Insert Link (Ctrl+K)\"\n                aria-label=\"Insert Link\"\n                (click)=\"openLinkModal()\"\n              >\n                <ngx-editor-icon name=\"link\"></ngx-editor-icon>\n              </button>\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Remove Link\"\n                aria-label=\"Remove Link\"\n                (mousedown)=\"$event.preventDefault(); unlink()\"\n              >\n                <ngx-editor-icon name=\"unlink\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.image !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Insert Image\"\n                aria-label=\"Insert Image\"\n                (click)=\"openImageModal()\"\n              >\n                <ngx-editor-icon name=\"image\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.insert?.horizontalRule !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Horizontal Line\"\n                aria-label=\"Horizontal Line\"\n                (mousedown)=\"$event.preventDefault(); insertHorizontalRule()\"\n              >\n                <ngx-editor-icon name=\"horizontalRule\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Extra Actions -->\n        @if (computedConfig.toolbar?.extra) {\n          <div class=\"ngx-editor-toolbar-group\">\n            @if (computedConfig.toolbar?.extra?.clearFormat !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                title=\"Clear Formatting\"\n                aria-label=\"Clear Formatting\"\n                (mousedown)=\"$event.preventDefault(); clearFormatting()\"\n              >\n                <ngx-editor-icon name=\"clearFormat\"></ngx-editor-icon>\n              </button>\n            }\n            @if (computedConfig.toolbar?.extra?.sourceView !== false) {\n              <button\n                type=\"button\"\n                class=\"ngx-editor-btn\"\n                [class.is-active]=\"isSourceView\"\n                title=\"View HTML Source\"\n                aria-label=\"View HTML Source\"\n                (click)=\"toggleSourceView()\"\n              >\n                <ngx-editor-icon name=\"sourceView\"></ngx-editor-icon>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- Editor Content Area -->\n  <div class=\"ngx-editor-content-wrapper\">\n    <!-- Visual contenteditable -->\n    <div\n      #editorContent\n      class=\"ngx-editor-content\"\n      [style.display]=\"isSourceView ? 'none' : 'block'\"\n      [style.height]=\"computedConfig.height\"\n      [style.font-family]=\"fontFamily || computedConfig.fontFamily || null\"\n      [style.font-size]=\"fontSize || computedConfig.fontSize || null\"\n      [ngStyle]=\"parsedContentStyle\"\n      [attr.contenteditable]=\"!disabled && !readonly\"\n      [attr.spellcheck]=\"computedConfig.spellcheck\"\n      [attr.data-placeholder]=\"computedConfig.placeholder\"\n      [attr.data-empty]=\"isEmpty\"\n      (input)=\"onEditorInput()\"\n      (focus)=\"onEditorFocus($event)\"\n      (blur)=\"onEditorBlur($event)\"\n      (keydown)=\"onEditorKeydown($event)\"\n      (keyup)=\"updateEditorState()\"\n      (mouseup)=\"updateEditorState()\"\n      (paste)=\"onEditorPaste($event)\"\n    ></div>\n\n    <!-- Raw HTML Source Code View -->\n    @if (isSourceView) {\n      <textarea\n        #sourceTextarea\n        class=\"ngx-editor-source\"\n        [style.height]=\"computedConfig.height\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"content\"\n        (input)=\"onSourceInput($event)\"\n      ></textarea>\n    }\n  </div>\n\n  <!-- Status Bar -->\n  @if (computedConfig.showStatusBar) {\n    <div class=\"ngx-editor-statusbar\">\n      <div class=\"statusbar-left\">\n        @if (activeBlockTag) {\n          <span class=\"status-tag\">&lt;{{ activeBlockTag }}&gt;</span>\n        }\n        @if (isSourceView) {\n          <span class=\"status-badge\">HTML SOURCE MODE</span>\n        }\n      </div>\n      <div class=\"statusbar-right\">\n        @if (computedConfig.showWordCount) {\n          <span>Words: <strong>{{ stats.words }}</strong></span>\n        }\n        @if (computedConfig.maxCharacters) {\n          <span [class.limit-reached]=\"stats.chars > computedConfig.maxCharacters\">\n            {{ stats.chars }}/{{ computedConfig.maxCharacters }} Characters\n          </span>\n        } @else if (computedConfig.showCharCount) {\n          <span>Characters: <strong>{{ stats.chars }}</strong></span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Link Modal -->\n  @if (showLinkModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeLinkModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Link</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeLinkModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Link Text</label>\n            <input\n              type=\"text\"\n              placeholder=\"Display text\"\n              [(ngModel)]=\"linkModel.text\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Target URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\"\n              [(ngModel)]=\"linkModel.url\"\n              (keydown.enter)=\"insertLinkFromModal()\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" [(ngModel)]=\"linkModel.newTab\" />\n              Open in a new tab\n            </label>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeLinkModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!linkModel.url\"\n            (click)=\"insertLinkFromModal()\"\n          >\n            Insert Link\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image Modal -->\n  @if (showImageModal) {\n    <div class=\"ngx-editor-modal-backdrop\" (click)=\"closeImageModal()\">\n      <div class=\"ngx-editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Insert Image</h3>\n          <button type=\"button\" class=\"ngx-editor-btn\" (click)=\"closeImageModal()\" aria-label=\"Close\">\n            <ngx-editor-icon name=\"close\"></ngx-editor-icon>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"form-group\">\n            <label>Image URL</label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com/image.png\"\n              [(ngModel)]=\"imageModel.url\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Or Upload File</label>\n            <input\n              type=\"file\"\n              accept=\"image/*\"\n              (change)=\"onImageFileUpload($event)\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label>Alt Description</label>\n            <input\n              type=\"text\"\n              placeholder=\"Image description\"\n              [(ngModel)]=\"imageModel.alt\"\n            />\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn-secondary\" (click)=\"closeImageModal()\">Cancel</button>\n          <button\n            type=\"button\"\n            class=\"btn-primary\"\n            [disabled]=\"!imageModel.url\"\n            (click)=\"insertImageFromModal()\"\n          >\n            Insert Image\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--ngx-editor-font-family, inherit);box-sizing:border-box;--ngx-editor-font-family: inherit;--ngx-editor-font-size: 15px;--ngx-editor-line-height: 1.65;--ngx-editor-border: #e2e8f0;--ngx-editor-border-focus: #3b82f6;--ngx-editor-bg: #ffffff;--ngx-editor-toolbar-bg: #f8fafc;--ngx-editor-toolbar-btn-hover: #e2e8f0;--ngx-editor-toolbar-btn-active: #dbeafe;--ngx-editor-toolbar-btn-active-color: #1d4ed8;--ngx-editor-text: #1e293b;--ngx-editor-muted: #64748b;--ngx-editor-radius: 8px;--ngx-editor-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ngx-editor-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .25);--ngx-editor-hashtag-color: #0069FF}.ngx-editor-container{display:flex;flex-direction:column;background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:var(--ngx-editor-radius);box-shadow:var(--ngx-editor-shadow);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;position:relative}.ngx-editor-container.is-focused{border-color:var(--ngx-editor-border-focus);box-shadow:var(--ngx-editor-shadow-focus)}.ngx-editor-container.is-disabled{background-color:#f1f5f9;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background-color:var(--ngx-editor-toolbar-bg);border-bottom:1px solid var(--ngx-editor-border);-webkit-user-select:none;user-select:none;z-index:10}.ngx-editor-toolbar-group{display:flex;align-items:center;gap:2px}.ngx-editor-toolbar-group:not(:last-child):after{content:\"\";display:inline-block;width:1px;height:18px;background-color:var(--ngx-editor-border);margin:0 4px}.ngx-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ngx-editor-text);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none}.ngx-editor-btn:hover:not(:disabled){background-color:var(--ngx-editor-toolbar-btn-hover)}.ngx-editor-btn:active:not(:disabled),.ngx-editor-btn.is-active{background-color:var(--ngx-editor-toolbar-btn-active);color:var(--ngx-editor-toolbar-btn-active-color);border-color:#bfdbfe}.ngx-editor-btn:disabled{opacity:.35;cursor:not-allowed}.ngx-editor-btn svg{display:block;pointer-events:none}.ngx-editor-select{height:32px;padding:0 8px;font-size:13px;color:var(--ngx-editor-text);background-color:var(--ngx-editor-bg);border:1px solid var(--ngx-editor-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s ease}.ngx-editor-select:hover{border-color:#cbd5e1}.ngx-editor-select:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-color-btn{position:relative}.ngx-editor-color-btn .color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:1px}.ngx-color-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--ngx-editor-border);border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:8px;z-index:50;width:176px}.ngx-color-popover .color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}.ngx-color-popover .color-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s ease}.ngx-color-popover .color-swatch:hover{transform:scale(1.15);z-index:2}.ngx-color-popover .custom-color-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ngx-editor-muted)}.ngx-color-popover .custom-color-picker input[type=color]{width:28px;height:24px;border:1px solid var(--ngx-editor-border);border-radius:3px;padding:0;cursor:pointer;background:none}.ngx-editor-content-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.ngx-editor-content{flex:1;padding:16px;outline:none;font-family:var(--ngx-editor-font-family, inherit);font-size:var(--ngx-editor-font-size, 15px);line-height:var(--ngx-editor-line-height, 1.65);color:var(--ngx-editor-text);overflow-y:auto;min-height:200px;word-break:break-word}.ngx-editor-content p{margin:0 0 1em}.ngx-editor-content b,.ngx-editor-content strong{font-weight:700!important}.ngx-editor-content i,.ngx-editor-content em{font-style:italic!important}.ngx-editor-content u,.ngx-editor-content .publish-editor-underline{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:.12em}.ngx-editor-content h1{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.25}.ngx-editor-content h2{font-size:1.6em;font-weight:600;margin:.75em 0;line-height:1.3}.ngx-editor-content h3{font-size:1.3em;font-weight:600;margin:.83em 0}.ngx-editor-content h4{font-size:1.1em;font-weight:600;margin:1em 0}.ngx-editor-content ul,.ngx-editor-content ol{margin:0 0 1em 1.5em;padding:0}.ngx-editor-content li{margin-bottom:.25em}.ngx-editor-content blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--ngx-editor-border-focus);background-color:#f8fafc;color:var(--ngx-editor-muted);font-style:italic}.ngx-editor-content pre{background-color:#1e293b;color:#f8fafc;padding:12px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;margin:1em 0}.ngx-editor-content code{background-color:#f1f5f9;color:#e11d48;padding:2px 5px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9em}.ngx-editor-content a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ngx-editor-content .ngx-editor-hashtag,.ngx-editor-content .post-content-hashtag{color:var(--ngx-editor-hashtag-color, #0069FF)!important;font-weight:500;display:inline;cursor:text}.ngx-editor-content hr{border:none;border-top:1px solid var(--ngx-editor-border);margin:1.5em 0}.ngx-editor-content img{max-width:100%;height:auto;border-radius:4px}.ngx-editor-content[data-empty=true]:before{content:attr(data-placeholder);position:absolute;color:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-editor-content:has(ol,ul,li,table,img,hr,blockquote,pre):before{display:none!important;content:none!important}.ngx-editor-source{width:100%;flex:1;min-height:200px;padding:16px;border:none;outline:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.5;background-color:#0f172a;color:#38bdf8;resize:vertical;box-sizing:border-box}.ngx-editor-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--ngx-editor-toolbar-bg);border-top:1px solid var(--ngx-editor-border);font-size:12px;color:var(--ngx-editor-muted)}.ngx-editor-statusbar .statusbar-left,.ngx-editor-statusbar .statusbar-right{display:flex;align-items:center;gap:12px}.ngx-editor-statusbar .status-tag{background-color:#e2e8f0;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:10px}.ngx-editor-statusbar .status-badge{background-color:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:500;font-size:11px}.ngx-editor-modal-backdrop{position:absolute;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease-out}.ngx-editor-modal{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.ngx-editor-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ngx-editor-modal .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-editor-text)}.ngx-editor-modal .modal-body{display:flex;flex-direction:column;gap:12px}.ngx-editor-modal .form-group{display:flex;flex-direction:column;gap:4px}.ngx-editor-modal .form-group label{font-size:13px;font-weight:500;color:var(--ngx-editor-text)}.ngx-editor-modal .form-group input[type=text],.ngx-editor-modal .form-group input[type=url]{padding:8px 12px;border:1px solid var(--ngx-editor-border);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s ease}.ngx-editor-modal .form-group input[type=text]:focus,.ngx-editor-modal .form-group input[type=url]:focus{border-color:var(--ngx-editor-border-focus)}.ngx-editor-modal .form-group .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ngx-editor-text);-webkit-user-select:none;user-select:none}.ngx-editor-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.ngx-editor-modal .modal-footer button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.ngx-editor-modal .modal-footer .btn-secondary{background:#f1f5f9;border:1px solid var(--ngx-editor-border);color:var(--ngx-editor-text)}.ngx-editor-modal .modal-footer .btn-secondary:hover{background:#e2e8f0}.ngx-editor-modal .modal-footer .btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}.ngx-editor-modal .modal-footer .btn-primary:hover{background:#1d4ed8}.ngx-editor-modal .modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: EditorCommandService }, { type: i2.DomSanitizer }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { editorContentRef: [{
                 type: ViewChild,
                 args: ['editorContent', { static: false }]