@stackch/angular-richtext-editor 1.2.0 → 1.2.1

package/fesm2022/stackch-angular-richtext-editor.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, forwardRef, HostListener, ViewChild } from '@angular/core';
+import { EventEmitter, Output, Input, Component, HostListener, ViewChild, Directive, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -126,6 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }] } });
 
+// ─── Config & Types ───────────────────────────────────────────────────────────
 class StackchRichtextEditorConfig {
     // Sichtbarkeit einzelner Toolbar-Elemente (Default: an)
     showUndoRedo = true;
@@ -183,12 +184,10 @@ class StackchRichtextEditorI18n {
     h5Label = 'H5';
     h6Label = 'H6';
 }
-// Predefined i18n bundles
+// ─── Predefined i18n bundles ──────────────────────────────────────────────────
 // Consumers can import these and pass via config.i18n to localize the toolbar/labels.
 const STACKCH_RTE_I18N_DE = {
-    // Generic
     placeholder: 'Schreiben…',
-    // Toolbar titles
     undoTitle: 'Rückgängig (Strg+Z)',
     redoTitle: 'Wiederholen (Strg+Y)',
     fontPanelTitle: 'Schrift & Größe',
@@ -215,20 +214,13 @@ const STACKCH_RTE_I18N_DE = {
     alignJustifyTitle: 'Blocksatz',
     linkTitle: 'Link',
     removeFormatTitle: 'Formatierung entfernen',
-    // Heading menu labels
     paragraphLabel: 'Absatz (P)',
     codeLabel: 'Code (pre)',
-    h1Label: 'H1',
-    h2Label: 'H2',
-    h3Label: 'H3',
-    h4Label: 'H4',
-    h5Label: 'H5',
-    h6Label: 'H6',
+    h1Label: 'H1', h2Label: 'H2', h3Label: 'H3',
+    h4Label: 'H4', h5Label: 'H5', h6Label: 'H6',
 };
 const STACKCH_RTE_I18N_FR = {
-    // Generic
     placeholder: 'Écrire…',
-    // Toolbar titles
     undoTitle: 'Annuler (Ctrl+Z)',
     redoTitle: 'Rétablir (Ctrl+Y)',
     fontPanelTitle: 'Police et taille',
@@ -255,20 +247,13 @@ const STACKCH_RTE_I18N_FR = {
     alignJustifyTitle: 'Justifié',
     linkTitle: 'Lien',
     removeFormatTitle: 'Effacer la mise en forme',
-    // Heading menu labels
     paragraphLabel: 'Paragraphe (P)',
     codeLabel: 'Code (pre)',
-    h1Label: 'H1',
-    h2Label: 'H2',
-    h3Label: 'H3',
-    h4Label: 'H4',
-    h5Label: 'H5',
-    h6Label: 'H6',
+    h1Label: 'H1', h2Label: 'H2', h3Label: 'H3',
+    h4Label: 'H4', h5Label: 'H5', h6Label: 'H6',
 };
 const STACKCH_RTE_I18N_IT = {
-    // Generic
     placeholder: 'Scrivi…',
-    // Toolbar titles
     undoTitle: 'Annulla (Ctrl+Z)',
     redoTitle: 'Ripristina (Ctrl+Y)',
     fontPanelTitle: 'Carattere e dimensione',
@@ -295,18 +280,22 @@ const STACKCH_RTE_I18N_IT = {
     alignJustifyTitle: 'Giustificato',
     linkTitle: 'Collegamento',
     removeFormatTitle: 'Rimuovi formattazione',
-    // Heading menu labels
     paragraphLabel: 'Paragrafo (P)',
     codeLabel: 'Codice (pre)',
-    h1Label: 'H1',
-    h2Label: 'H2',
-    h3Label: 'H3',
-    h4Label: 'H4',
-    h5Label: 'H5',
-    h6Label: 'H6',
+    h1Label: 'H1', h2Label: 'H2', h3Label: 'H3',
+    h4Label: 'H4', h5Label: 'H5', h6Label: 'H6',
 };
-class StackchRichtextEditor {
+// ─── Abstract Base ────────────────────────────────────────────────────────────
+/**
+ * Abstract base class shared by StackchRichtextEditor (core) and
+ * StackchRichtextEditorMaterial (Material variant).
+ * Contains all editing logic; concrete subclasses add only the @Component
+ * decorator with their own template / styles / toolbar.
+ */
+class StackchRichtextEditorBase {
     cdr;
+    // Override in concrete class to distinguish log output
+    logPrefix = '[RTE]';
     placeholder = '';
     showToolbar = true;
     fonts = [
@@ -326,7 +315,6 @@ class StackchRichtextEditor {
     get disabled() { return this._disabled; }
     _disabled = false;
     valueChange = new EventEmitter();
-    // Structured metrics event (future-proof)
     metricsChange = new EventEmitter();
     editorRef;
     constructor(cdr) {
@@ -362,7 +350,7 @@ class StackchRichtextEditor {
     isBoldActive = false;
     isItalicActive = false;
     isUnderlineActive = false;
-    // Selection helpers
+    // ─── Selection helpers ───────────────────────────────────────────────────
     saveSelection() {
         const sel = window.getSelection();
         if (!sel || sel.rangeCount === 0)
@@ -375,7 +363,6 @@ class StackchRichtextEditor {
     }
     // Prevent toolbar buttons from stealing focus from the editor while preserving selection
     onToolbarMouseDown(evt) {
-        // Keep focus on the editor to avoid persistent button focus outlines
         evt.preventDefault();
         evt.stopPropagation();
         this.saveSelection();
@@ -401,6 +388,7 @@ class StackchRichtextEditor {
         const node = container.nodeType === Node.ELEMENT_NODE ? container : container.parentElement;
         return !!node && editor.contains(node);
     }
+    // ─── Host listeners ──────────────────────────────────────────────────────
     // Update active-state on selection changes inside the editor
     onSelectionChange() {
         const sel = window.getSelection();
@@ -424,7 +412,7 @@ class StackchRichtextEditor {
     }
     // Keyboard: Undo/Redo
     onKeydown(evt) {
-        const isMac = navigator.platform.toLowerCase().includes('mac');
+        const isMac = (navigator.userAgentData?.platform ?? navigator.platform).toLowerCase().includes('mac');
         const mod = isMac ? evt.metaKey : evt.ctrlKey;
         if (mod && !evt.shiftKey && (evt.key === 'z' || evt.key === 'Z')) {
             evt.preventDefault();
@@ -435,6 +423,7 @@ class StackchRichtextEditor {
             this.redo();
         }
     }
+    // ─── Menu toggles ────────────────────────────────────────────────────────
     toggleFontMenu(evt) {
         this.saveSelection();
         this.showFontMenu = !this.showFontMenu;
@@ -452,7 +441,6 @@ class StackchRichtextEditor {
     toggleFontPanel(evt) {
         this.saveSelection();
         this.showFontPanel = !this.showFontPanel;
-        // close others if open
         if (this.showFontPanel) {
             this.showFontMenu = false;
             this.showSizeMenu = false;
@@ -531,6 +519,7 @@ class StackchRichtextEditor {
         }
         evt.stopPropagation();
     }
+    // ─── Pick handlers (toolbar → editor) ───────────────────────────────────
     onPickAlign(where) {
         this.focusEditor();
         this.restoreSelection();
@@ -583,7 +572,7 @@ class StackchRichtextEditor {
         this.emitValue();
         this.takeSnapshot('spacing');
     }
-    // ControlValueAccessor
+    // ─── ControlValueAccessor ────────────────────────────────────────────────
     writeValue(value) {
         const el = this.editorRef?.nativeElement;
         if (!el)
@@ -599,12 +588,11 @@ class StackchRichtextEditor {
     registerOnChange(fn) { this.onChange = fn; }
     registerOnTouched(fn) { this.onTouched = fn; }
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    // ─── Toolbar actions ─────────────────────────────────────────────────────
     // Toolbar actions using document.execCommand (deprecated but broadly supported)
     cmd(command, value) {
-        // Restore last selection from editor before applying an action triggered by toolbar
         this.focusEditor();
         this.restoreSelection();
-        // Bevorzugt: eigene Range-basierte Implementierungen
         switch (command) {
             case 'bold':
                 this.applyInlineStyleSmart('fontWeight', 'bold');
@@ -669,7 +657,6 @@ class StackchRichtextEditor {
         }
         // Fallback (deprecated): nur für Format entfernen / Links lösen als Übergang
         try {
-            // Hinweis im Dev-Mode ausgeben
             if (!('___rteWarned' in this)) {
                 console.warn('[richtext-editor] document.execCommand ist deprecated; Fallback wird nur für removeFormat/unlink verwendet.');
                 this.___rteWarned = true;
@@ -705,7 +692,6 @@ class StackchRichtextEditor {
             return;
         const r = sel.getRangeAt(0);
         if (r.collapsed) {
-            // Firefox/Edge: wenn keine explizite Auswahl, erweitere auf nächstes Wort
             this.expandRangeToWord(r);
         }
         this.applySelectionStyles({ color });
@@ -729,7 +715,6 @@ class StackchRichtextEditor {
             const editor = this.editorRef.nativeElement;
             let node = range.startContainer;
             if (node.nodeType !== Node.TEXT_NODE) {
-                // Versuche, einen Textknoten in der Nähe zu finden
                 const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
                 let found = null;
                 while (walker.nextNode()) {
@@ -744,7 +729,6 @@ class StackchRichtextEditor {
             }
             const text = node.nodeType === Node.TEXT_NODE ? node.data : '';
             let start = 0, end = text.length;
-            // einfache Wortgrenzen-Heuristik
             const pos = range.startOffset;
             for (let i = pos; i > 0; i--) {
                 if (/\s/.test(text[i - 1])) {
@@ -788,7 +772,6 @@ class StackchRichtextEditor {
         this.updateInlineStates();
     }
     onPaste(evt) {
-        // Optional: Clean paste to plain text while keeping basic formatting minimal.
         if (!evt.clipboardData)
             return;
         evt.preventDefault();
@@ -797,8 +780,8 @@ class StackchRichtextEditor {
         this.emitValue();
         this.takeSnapshot('paste');
     }
+    // ─── Internal emit helpers ───────────────────────────────────────────────
     emitValue() {
-        // Clean up empty style attributes and redundant spans before emitting
         this.cleanupEmptyStylesAndSpans();
         const val = this.editorRef.nativeElement.innerHTML;
         this.onChange(val);
@@ -811,14 +794,12 @@ class StackchRichtextEditor {
         if (!editor)
             return;
         const htmlLen = editor.innerHTML.length;
-        // textContent excludes markup; normalize null to empty string
         const textLen = (editor.textContent || '').length;
-        // Structured metrics event
         this.metricsChange.emit({ htmlLength: htmlLen, textLength: textLen });
     }
     // Remove empty style attributes (style="") and unwrap spans without any attributes
     cleanupEmptyStylesAndSpans(root) {
-        console.log('[RTE] cleanupEmptyStylesAndSpans: start cleanup');
+        console.log(`${this.logPrefix} cleanupEmptyStylesAndSpans: start cleanup`);
         const editor = root || this.editorRef.nativeElement;
         const toUnwrap = [];
         const toRemove = [];
@@ -826,7 +807,6 @@ class StackchRichtextEditor {
         while (walker.nextNode()) {
             const el = walker.currentNode;
             if (el.hasAttribute('style')) {
-                // If no style declarations remain, drop the attribute
                 const cssText = el.getAttribute('style') || '';
                 const byApiEmpty = (el.style ? el.style.length === 0 : false);
                 const normalized = cssText.replace(/[\s;]/g, '');
@@ -836,28 +816,28 @@ class StackchRichtextEditor {
             }
             if (el.tagName === 'SPAN') {
                 if (!el.firstChild) {
-                    console.log('[RTE] cleanup: removing empty span', el);
+                    console.log(`${this.logPrefix} cleanup: removing empty span`, el);
                     toRemove.push(el);
                     continue;
                 }
                 if (el.attributes.length === 0) {
-                    console.log('[RTE] cleanup: unwrapping style-free span', el);
+                    console.log(`${this.logPrefix} cleanup: unwrapping style-free span`, el);
                     toUnwrap.push(el);
                 }
             }
         }
         for (const span of toUnwrap) {
-            console.log('[RTE] cleanup: unwrap span', { span, childCount: span.childNodes.length });
+            console.log(`${this.logPrefix} cleanup: unwrap span`, { span, childCount: span.childNodes.length });
             while (span.firstChild)
                 span.parentNode?.insertBefore(span.firstChild, span);
             span.remove();
         }
         for (const span of toRemove) {
-            console.log('[RTE] cleanup: remove span without children', span);
+            console.log(`${this.logPrefix} cleanup: remove span without children`, span);
             span.remove();
         }
     }
-    // History API
+    // ─── History API ─────────────────────────────────────────────────────────
     get canUndo() { return this.historyIndex > 0; }
     get canRedo() { return this.historyIndex >= 0 && this.historyIndex < this.history.length - 1; }
     undo() {
@@ -919,12 +899,10 @@ class StackchRichtextEditor {
         const editor = this.editorRef.nativeElement;
         this.isRestoringHistory = true;
         editor.innerHTML = snap.html;
-        // Selektion wiederherstellen
         if (snap.range) {
             this.restoreSerializedRange(snap.range);
         }
         else {
-            // Cursor ans Ende
             const sel = window.getSelection();
             if (sel) {
                 sel.removeAllRanges();
@@ -936,7 +914,6 @@ class StackchRichtextEditor {
         }
         this.historyIndex = index;
         this.isRestoringHistory = false;
-        // Werte emittieren nach Restore
         this.emitValue();
     }
     serializeRange(range) {
@@ -1010,13 +987,11 @@ class StackchRichtextEditor {
             el.focus();
         }
     }
-    // Minimal inline style applier for inline styles
+    // ─── Inline style application ────────────────────────────────────────────
     applyInlineStyle(cssProp, value) {
-        // Delegate to generic, style-agnostic applier
         this.applySelectionStyles({ [cssProp]: value });
     }
     applyInlineStyleSmart(cssProp, value) {
-        // Delegate to generic applier which handles selection/logging
         this.applySelectionStyles({ [cssProp]: value });
     }
     applySelectionStyles(styles) {
@@ -1024,21 +999,21 @@ class StackchRichtextEditor {
         this.restoreSelection();
         const sel = window.getSelection();
         if (!sel || sel.rangeCount === 0) {
-            console.warn('[RTE] applySelectionStyles: no selection available', { styles });
+            console.warn(`${this.logPrefix} applySelectionStyles: no selection available`, { styles });
             return;
         }
         let range = sel.getRangeAt(0);
         if (range.collapsed) {
-            console.warn('[RTE] applySelectionStyles: range is collapsed', { styles });
+            console.warn(`${this.logPrefix} applySelectionStyles: range is collapsed`, { styles });
             return;
         }
         const entries = Object.entries(styles).filter(([, v]) => v != null && v !== '');
         if (entries.length === 0) {
-            console.warn('[RTE] applySelectionStyles: no style entries to apply', { styles });
+            console.warn(`${this.logPrefix} applySelectionStyles: no style entries to apply`, { styles });
             return;
         }
         const propsToClear = Array.from(new Set(entries.map(([prop]) => this.toCssProperty(prop))));
-        console.log('[RTE] applySelectionStyles: clearing props before apply', { propsToClear, entries });
+        console.log(`${this.logPrefix} applySelectionStyles: clearing props before apply`, { propsToClear, entries });
         for (const cssProp of propsToClear) {
             const beforeClear = range.cloneRange();
             const clearedRange = this.removeInlineStyleInRange(range, cssProp, { suppressEmit: true });
@@ -1050,24 +1025,24 @@ class StackchRichtextEditor {
                 range = clearedRange;
             }
             if (range.collapsed && !beforeClear.collapsed) {
-                console.warn('[RTE] applySelectionStyles: range collapsed after clearing, restoring previous range');
-                const sel = window.getSelection();
-                if (sel) {
-                    sel.removeAllRanges();
-                    sel.addRange(beforeClear);
+                console.warn(`${this.logPrefix} applySelectionStyles: range collapsed after clearing, restoring previous range`);
+                const sel2 = window.getSelection();
+                if (sel2) {
+                    sel2.removeAllRanges();
+                    sel2.addRange(beforeClear);
                 }
                 range = beforeClear;
             }
         }
         const segments = this.collectTextSegments(range);
         if (segments.length === 0) {
-            console.warn('[RTE] applySelectionStyles: no text segments found', {
+            console.warn(`${this.logPrefix} applySelectionStyles: no text segments found`, {
                 entries,
                 commonAncestor: range.commonAncestorContainer
             });
             return;
         }
-        console.log('[RTE] applySelectionStyles: applying styles to segments', {
+        console.log(`${this.logPrefix} applySelectionStyles: applying styles to segments`, {
             entries,
             segmentCount: segments.length
         });
@@ -1140,7 +1115,7 @@ class StackchRichtextEditor {
             return this.mergeAdjacentStyledSpans(wrapper);
         }
         catch (err) {
-            console.error('[RTE] applyStylesToSegment: failed to surround contents', {
+            console.error(`${this.logPrefix} applyStylesToSegment: failed to surround contents`, {
                 error: err,
                 segment,
                 entries
@@ -1206,7 +1181,6 @@ class StackchRichtextEditor {
         const frag = range.extractContents();
         el.appendChild(frag);
         range.insertNode(el);
-        // Auswahl hinter das Element setzen
         sel.removeAllRanges();
         const after = document.createRange();
         after.setStartAfter(el);
@@ -1221,14 +1195,13 @@ class StackchRichtextEditor {
         range.deleteContents();
         const node = document.createTextNode(text);
         range.insertNode(node);
-        // Cursor ans Ende des eingefügten Textes
         sel.removeAllRanges();
         const after = document.createRange();
         after.setStartAfter(node);
         after.collapse(true);
         sel.addRange(after);
     }
-    // ----- Inline toggle logic (Bold/Italic/Underline) -----
+    // ─── Inline toggle logic (Bold / Italic / Underline) ─────────────────────
     updateInlineStates() {
         const sel = window.getSelection();
         if (!sel || sel.rangeCount === 0) {
@@ -1250,7 +1223,6 @@ class StackchRichtextEditor {
         this.isBoldActive = this.computeBoldAnyForRange(range);
         this.isItalicActive = this.computeItalicAnyForRange(range);
         this.isUnderlineActive = this.computeUnderlineAnyForRange(range);
-        // ensure UI reflects changes immediately
         try {
             this.cdr.detectChanges();
         }
@@ -1323,13 +1295,12 @@ class StackchRichtextEditor {
             }
         };
         const matchesEl = (el) => this.isStyleCarrier(el, cssPropKebab);
-        console.log('[RTE] removeInlineStyleInRange:start', {
+        console.log(`${this.logPrefix} removeInlineStyleInRange:start`, {
             cssPropKebab,
             rangeCollapsed: effectiveRange.collapsed,
             commonTag: common.tagName,
             commonHasStyle: common.style ? common.style.getPropertyValue?.(cssPropKebab) : undefined
         });
-        // Include the common element itself if it matches and intersects (TreeWalker won't visit the root)
         if (common instanceof HTMLElement && matchesEl(common) && intersects(common)) {
             affected.push(common);
         }
@@ -1340,45 +1311,45 @@ class StackchRichtextEditor {
                 continue;
             if (intersects(el)) {
                 affected.push(el);
-                console.log('[RTE] removeInlineStyleInRange:match', el.tagName, el.getAttribute('style'));
+                console.log(`${this.logPrefix} removeInlineStyleInRange:match`, el.tagName, el.getAttribute('style'));
             }
         }
         let removedTags = 0;
         let removedProps = 0;
         for (const el of affected) {
             if (el.tagName === 'B' || el.tagName === 'STRONG' || el.tagName === 'I' || el.tagName === 'EM' || el.tagName === 'U') {
-                console.log('[RTE] unwrap tag', el.tagName);
+                console.log(`${this.logPrefix} unwrap tag`, el.tagName);
                 while (el.firstChild)
                     el.parentNode?.insertBefore(el.firstChild, el);
                 el.remove();
                 removedTags++;
                 continue;
             }
-            console.log('[RTE] remove style', cssPropKebab, 'from', el.tagName, el.getAttribute('style'));
+            console.log(`${this.logPrefix} remove style`, cssPropKebab, 'from', el.tagName, el.getAttribute('style'));
             el.style.removeProperty(cssPropKebab);
             if (!el.style.length) {
-                console.log('[RTE] removeInlineStyleInRange: style attribute now empty, removing attribute', el);
+                console.log(`${this.logPrefix} removeInlineStyleInRange: style attribute now empty, removing attribute`, el);
                 el.removeAttribute('style');
             }
             removedProps++;
             if (!el.getAttribute('style')) {
-                console.log('[RTE] unwrap empty styled span', el.tagName);
+                console.log(`${this.logPrefix} unwrap empty styled span`, el.tagName);
                 while (el.firstChild)
                     el.parentNode?.insertBefore(el.firstChild, el);
                 el.remove();
             }
         }
         this.pruneDanglingStyleCarriers(common, cssPropKebab);
-        console.log('[RTE] removeInlineStyleInRange:done', { affected: affected.length, removedTags, removedProps });
+        console.log(`${this.logPrefix} removeInlineStyleInRange:done`, { affected: affected.length, removedTags, removedProps });
         let resultRange = null;
         if (!options?.suppressEmit) {
             this.emitValue();
             resultRange = null;
         }
         else {
-            const sel = window.getSelection();
-            if (sel && sel.rangeCount > 0) {
-                resultRange = sel.getRangeAt(0).cloneRange();
+            const sel2 = window.getSelection();
+            if (sel2 && sel2.rangeCount > 0) {
+                resultRange = sel2.getRangeAt(0).cloneRange();
             }
             else if (shouldRestoreSelection) {
                 resultRange = effectiveRange.cloneRange();
@@ -1409,11 +1380,7 @@ class StackchRichtextEditor {
             toRemove.push(el);
         }
         for (const el of toRemove) {
-            console.log('[RTE] pruneDanglingStyleCarriers: removing empty carrier', { tag: el.tagName, style: el.getAttribute('style') });
-            if (el.tagName === 'B' || el.tagName === 'STRONG' || el.tagName === 'I' || el.tagName === 'EM' || el.tagName === 'U') {
-                el.remove();
-                continue;
-            }
+            console.log(`${this.logPrefix} pruneDanglingStyleCarriers: removing empty carrier`, { tag: el.tagName, style: el.getAttribute('style') });
             el.remove();
         }
     }
@@ -1558,7 +1525,7 @@ class StackchRichtextEditor {
         if (range.collapsed)
             this.expandRangeToWord(range);
         const anyActive = this.computeBoldAnyForRange(range);
-        console.log('[RTE] toggleBold', { anyActive, rangeCollapsed: range.collapsed });
+        console.log(`${this.logPrefix} toggleBold`, { anyActive, rangeCollapsed: range.collapsed });
         if (anyActive) {
             this.removeInlineStyleInRange(range, 'font-weight');
         }
@@ -1606,6 +1573,7 @@ class StackchRichtextEditor {
         this.updateInlineStates();
         this.takeSnapshot('toggle-underline');
     }
+    // ─── Block operations ─────────────────────────────────────────────────────
     getCurrentRange() {
         const sel = window.getSelection();
         if (!sel || sel.rangeCount === 0)
@@ -1619,7 +1587,6 @@ class StackchRichtextEditor {
         while (el && el.parentElement && el.parentElement !== editor) {
             el = el.parentElement;
         }
-        // Wenn direktes Kind des Editors
         if (el && el.parentElement === editor)
             return el;
         return editor;
@@ -1638,34 +1605,29 @@ class StackchRichtextEditor {
         if (!range)
             return;
         const editor = this.editorRef.nativeElement;
-        // Wenn bereits in einer Liste, Liste aufheben
         const listAncestor = this.findClosest(range.commonAncestorContainer, 'ul,ol');
         if (listAncestor) {
-            // unwrap: li-Inhalte an die Stelle der Liste setzen
             const frag = document.createDocumentFragment();
-            const items = Array.from(listAncestor.children); // li
+            const items = Array.from(listAncestor.children);
             for (const li of items) {
                 while (li.firstChild)
                     frag.appendChild(li.firstChild);
-                // Optional: Zeilenumbruch zwischen Items
                 frag.appendChild(document.createElement('br'));
             }
             listAncestor.replaceWith(frag);
             return;
         }
-        // Neue Liste um die aktuelle Auswahl legen
         const list = document.createElement(kind);
         const li = document.createElement('li');
         const contents = range.extractContents();
         if (!contents.hasChildNodes()) {
-            li.textContent = '\u200b'; // zero-width space um leere li zu vermeiden
+            li.textContent = '\u200b';
         }
         else {
             li.appendChild(contents);
         }
         list.appendChild(li);
         range.insertNode(list);
-        // Cursor ins li setzen
         const sel = window.getSelection();
         if (sel) {
             sel.removeAllRanges();
@@ -1691,7 +1653,6 @@ class StackchRichtextEditor {
             applyAlign(startBlock);
         }
         else {
-            // grob: alle direkten Kinder zwischen start und end ausrichten
             const children = Array.from(editor.children);
             const i1 = children.indexOf(startBlock);
             const i2 = children.indexOf(endBlock);
@@ -1745,8 +1706,8 @@ class StackchRichtextEditor {
             }
         }
     }
-    // Versucht, Margin/Padding auf die konkrete Text-Selektion anzuwenden, indem die Auswahl mit einem Span umschlossen wird.
-    // Liefert true, wenn inline angewendet werden konnte; sonst false (z. B. wenn Auswahl blockübergreifend ist).
+    // Versucht, Margin/Padding auf die konkrete Text-Selektion anzuwenden (inline Wrapper).
+    // Liefert true, wenn inline angewendet werden konnte; sonst false.
     applySpacingToSelection(kind, target, value) {
         const sel = window.getSelection();
         if (!sel || sel.rangeCount === 0)
@@ -1756,7 +1717,6 @@ class StackchRichtextEditor {
             return false;
         const startBlock = this.getEditorChildAncestor(range.startContainer);
         const endBlock = this.getEditorChildAncestor(range.endContainer);
-        // Nur inline, wenn innerhalb desselben Blocks
         if (!startBlock || !endBlock || startBlock !== endBlock)
             return false;
         const wrapper = document.createElement('span');
@@ -1772,15 +1732,12 @@ class StackchRichtextEditor {
             wrapper.style[`${kind}Left`] = px;
             wrapper.style[`${kind}Right`] = px;
         }
-        // Für vertikale Margins auf Inline-Elementen sicherstellen, dass sie greifen
         if (kind === 'margin' && (target === 'all' || target === 'vertical')) {
             wrapper.style.display = 'inline-block';
         }
-        // Auswahl extrahieren und in Wrapper einsetzen
         const frag = range.extractContents();
         wrapper.appendChild(frag);
         range.insertNode(wrapper);
-        // Gleichartige Wrapper zusammenführen und Cursor korrekt setzen
         const normalized = this.normalizeSpacingSpans(wrapper, kind, target, value) || wrapper;
         sel.removeAllRanges();
         const after = document.createRange();
@@ -1788,7 +1745,6 @@ class StackchRichtextEditor {
             after.setStartAfter(normalized);
         }
         else {
-            // Fallback: an das Ende des Startblocks
             const sb = this.getEditorChildAncestor(range.startContainer);
             if (sb)
                 after.selectNodeContents(sb);
@@ -1797,7 +1753,7 @@ class StackchRichtextEditor {
         sel.addRange(after);
         return true;
     }
-    normalizeSpacingSpans(span, kind, target, value) {
+    normalizeSpacingSpans(span, kind, target, _value) {
         const props = [];
         if (target === 'all')
             props.push(kind);
@@ -1806,7 +1762,6 @@ class StackchRichtextEditor {
         if (target === 'horizontal')
             props.push(`${kind}Left`, `${kind}Right`);
         const displayNeeded = kind === 'margin' && (target === 'all' || target === 'vertical');
-        const v = `${value}px`;
         const hasSameSpacing = (a, b) => {
             for (const p of props) {
                 if (a.style[p] !== b.style[p])
@@ -1818,7 +1773,6 @@ class StackchRichtextEditor {
             }
             return true;
         };
-        // Downward: verschachtelte identische Spans in span zusammenführen
         if (span.children.length === 1) {
             const only = span.children[0];
             if (only && only.tagName === 'SPAN' && hasSameSpacing(span, only)) {
@@ -1828,7 +1782,6 @@ class StackchRichtextEditor {
             }
         }
         let current = span;
-        // Upward: mit Elternelement verschmelzen, wenn identischer Span
         const parent = current.parentElement;
         if (parent && parent.tagName === 'SPAN' && hasSameSpacing(parent, current)) {
             while (current.firstChild)
@@ -1838,7 +1791,6 @@ class StackchRichtextEditor {
         }
         if (!current)
             return null;
-        // Left merge: vorherige Geschwister-Spans mit gleicher Formatierung in current ziehen
         let prev = current.previousElementSibling;
         if (prev && prev.tagName === 'SPAN' && hasSameSpacing(prev, current)) {
             while (current.firstChild)
@@ -1846,7 +1798,6 @@ class StackchRichtextEditor {
             current.remove();
             current = prev;
         }
-        // Right merge: folgende Geschwister-Spans in current ziehen
         let next = current.nextElementSibling;
         while (next && next.tagName === 'SPAN' && hasSameSpacing(current, next)) {
             while (next.firstChild)
@@ -1862,6 +1813,7 @@ class StackchRichtextEditor {
         if (!range)
             return;
         const editor = this.editorRef.nativeElement;
+        const PRE_STYLE = 'white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;';
         const replaceTag = (el, newTag) => {
             if (!el || el === editor)
                 return null;
@@ -1873,24 +1825,23 @@ class StackchRichtextEditor {
         };
         const startBlock = this.getEditorChildAncestor(range.startContainer);
         const endBlock = this.getEditorChildAncestor(range.endContainer);
-        if (startBlock && startBlock !== editor && (startBlock === endBlock)) {
+        if (startBlock && startBlock !== editor && startBlock === endBlock) {
             const currentTag = (startBlock.tagName || '').toLowerCase();
             if (currentTag === tag)
                 return;
             const convertible = /^(p|div|pre|h1|h2|h3|h4|h5|h6)$/i.test(currentTag);
             if (convertible) {
                 const neo = replaceTag(startBlock, tag);
-                if (neo && tag === 'pre') {
-                    neo.setAttribute('style', 'white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;');
-                }
+                if (neo && tag === 'pre')
+                    neo.setAttribute('style', PRE_STYLE);
                 if (neo) {
                     const sel = window.getSelection();
                     if (sel) {
                         sel.removeAllRanges();
-                        const after = document.createRange();
-                        after.selectNodeContents(neo);
-                        after.collapse(false);
-                        sel.addRange(after);
+                        const r = document.createRange();
+                        r.selectNodeContents(neo);
+                        r.collapse(false);
+                        sel.addRange(r);
                     }
                 }
                 return;
@@ -1905,12 +1856,10 @@ class StackchRichtextEditor {
                 let last = null;
                 for (let i = from; i <= to; i++) {
                     const el = children[i];
-                    const currentTag = (el.tagName || '').toLowerCase();
-                    if (/^(p|div|pre|h1|h2|h3|h4|h5|h6)$/i.test(currentTag)) {
+                    if (/^(p|div|pre|h1|h2|h3|h4|h5|h6)$/i.test(el.tagName)) {
                         const neo = replaceTag(el, tag);
-                        if (neo && tag === 'pre') {
-                            neo.setAttribute('style', 'white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;');
-                        }
+                        if (neo && tag === 'pre')
+                            neo.setAttribute('style', PRE_STYLE);
                         if (neo)
                             last = neo;
                     }
@@ -1919,10 +1868,10 @@ class StackchRichtextEditor {
                     const sel = window.getSelection();
                     if (sel) {
                         sel.removeAllRanges();
-                        const after = document.createRange();
-                        after.selectNodeContents(last);
-                        after.collapse(false);
-                        sel.addRange(after);
+                        const r = document.createRange();
+                        r.selectNodeContents(last);
+                        r.collapse(false);
+                        sel.addRange(r);
                     }
                 }
                 return;
@@ -1930,40 +1879,26 @@ class StackchRichtextEditor {
         }
         if (!range.collapsed) {
             const el = document.createElement(tag);
-            if (tag === 'pre') {
-                el.setAttribute('style', 'white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;');
-            }
+            if (tag === 'pre')
+                el.setAttribute('style', PRE_STYLE);
             const frag = range.extractContents();
             el.appendChild(frag);
             range.insertNode(el);
             const sel = window.getSelection();
             if (sel) {
                 sel.removeAllRanges();
-                const after = document.createRange();
-                after.selectNodeContents(el);
-                after.collapse(false);
-                sel.addRange(after);
+                const r = document.createRange();
+                r.selectNodeContents(el);
+                r.collapse(false);
+                sel.addRange(r);
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditor, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StackchRichtextEditor, isStandalone: true, selector: "stackch-richtext-editor", inputs: { placeholder: "placeholder", showToolbar: "showToolbar", fonts: "fonts", fontSizes: "fontSizes", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", disabled: "disabled", config: "config" }, outputs: { valueChange: "valueChange", metricsChange: "metricsChange" }, host: { listeners: { "document:selectionchange": "onSelectionChange()", "document:click": "closeMenus()", "keydown": "onKeydown($event)" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => StackchRichtextEditor),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"stackch_rte\" [class.stackch_rte--disabled]=\"disabled\">\r\n  @if (showToolbar) {\r\n    <stackch-richtext-editor-toolbar\r\n      [cfg]=\"cfg\"\r\n      [i18n]=\"i18n\"\r\n      [disabled]=\"disabled\"\r\n      [fonts]=\"fonts\"\r\n      [fontSizes]=\"fontSizes\"\r\n      [isBoldActive]=\"isBoldActive\"\r\n      [isItalicActive]=\"isItalicActive\"\r\n      [isUnderlineActive]=\"isUnderlineActive\"\r\n      [canUndo]=\"canUndo\"\r\n      [canRedo]=\"canRedo\"\r\n  [uiState]=\"{ showFontPanel: showFontPanel, showHeadingMenu: showHeadingMenu, showSpacingMenu: showSpacingMenu, showAlignMenu: showAlignMenu, showColorMenu: showColorMenu, showListMenu: showListMenu }\"\r\n\r\n      (undo)=\"undo()\"\r\n      (redo)=\"redo()\"\r\n      (toggleFontPanel)=\"toggleFontPanel($event)\"\r\n      (toggleHeadingMenu)=\"toggleHeadingMenu($event)\"\r\n      (toggleSpacingMenu)=\"toggleSpacingMenu($event)\"\r\n      (toggleAlignMenu)=\"toggleAlignMenu($event)\"\r\n      (toggleColorMenu)=\"toggleColorMenu($event)\"\r\n      (toggleListMenu)=\"toggleListMenu($event)\"\r\n  (pickFont)=\"onPickFont($any($event))\"\r\n  (pickFontSize)=\"onPickFontSize($any($event))\"\r\n  (pickAlign)=\"onPickAlign($any($event))\"\r\n  (pickList)=\"onPickList($any($event))\"\r\n  (pickHeading)=\"onPickHeading($any($event))\"\r\n  (pickSpacing)=\"onPickSpacing($any($event).kind, $any($event).target, $any($event).value)\"\r\n  (applyColor)=\"applyColor($any($event))\"\r\n  (applyHighlight)=\"applyHighlight($any($event))\"\r\n      (toggleBold)=\"toggleBold()\"\r\n      (toggleItalic)=\"toggleItalic()\"\r\n      (toggleUnderline)=\"toggleUnderline()\"\r\n      (insertLink)=\"insertLink()\"\r\n      (removeFormat)=\"removeFormat()\"\r\n      (saveSelectionRequest)=\"saveSelection()\"\r\n    />\r\n  }\r\n\r\n  <div #editor\r\n      class=\"stackch_rte__editor\"\r\n      [attr.contenteditable]=\"!disabled\"\r\n  [attr.data-placeholder]=\"placeholder || i18n.placeholder\"\r\n      [style.minHeight.px]=\"minHeight\"\r\n      [style.maxHeight.px]=\"maxHeight\"\r\n      [style.height.px]=\"height\"\r\n  (mouseup)=\"saveSelection()\"\r\n  (keyup)=\"onKeyup($event)\"\r\n  (input)=\"onInput()\"\r\n      (blur)=\"onTouched()\"\r\n      (paste)=\"onPaste($event)\"></div>\r\n</div>\r\n", styles: [".stackch_rte{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}.stackch_rte--disabled{opacity:.7;pointer-events:none}.stackch_rte__toolbar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;border:1px solid #d0d7de;border-bottom:none;background:#f6f8fa;padding:.25rem;border-radius:6px 6px 0 0}.stackch_rte__btn{appearance:none;border:1px solid #d0d7de;background:#fff;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;outline:none}.stackch_rte__btn:hover{background:#f3f4f6}.stackch_rte__btn:focus{outline:none;box-shadow:none}.stackch_rte__btn:focus-visible{outline:2px solid rgba(9,105,218,.2)}.stackch_rte__btn.is-active{background:#e7f3ff;border-color:#0969da;color:#084298}.stackch_rte__select{border:1px solid #d0d7de;border-radius:4px;padding:.2rem .4rem;background:#fff}.stackch_rte__color{display:inline-flex;align-items:center;gap:.25rem;border:1px solid #d0d7de;padding:0 .4rem;border-radius:4px;background:#fff}.stackch_rte__color>input{inline-size:1.75rem;block-size:1.5rem;padding:0;border:none;background:none}.stackch_rte__sep{width:1px;height:1.25rem;background:#d0d7de;margin:0 .125rem}.stackch_rte__editor{border:1px solid #d0d7de;border-radius:0 0 6px 6px;padding:.5rem;background:#fff;overflow:auto}.stackch_rte__editor:empty:before{content:attr(data-placeholder);color:#97a1ad;pointer-events:none}.stackch_rte__editor:focus{outline:none;box-shadow:inset 0 0 0 1px #0969da;border-color:#0969da}.stackch_rte__dropdown{position:relative;display:inline-block}.stackch_rte__menu{position:absolute;top:100%;left:0;z-index:2;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 4px 12px #00000014;padding:.25rem;min-width:220px;max-height:220px;overflow:auto}.stackch_rte__menu-item{display:block;width:100%;text-align:left;background:#fff;border:none;padding:.375rem .5rem;border-radius:4px;cursor:pointer}.stackch_rte__menu-item:hover{background:#f3f4f6}.stackch_rte__menu--row{display:flex;flex-direction:row;gap:.25rem;align-items:center;min-width:auto;max-height:none;flex-wrap:nowrap}.stackch_rte__menu--row .stackch_rte__menu-item{display:inline-flex;width:auto;text-align:center;justify-content:center;align-items:center;padding:.3rem .45rem;white-space:nowrap;flex:0 0 auto;word-break:keep-all;overflow-wrap:normal}.stackch_rte__menu--row .stackch_rte__menu-item[style*=\"width:24px\"]{padding:0;width:24px;height:24px}.stackch_rte__menu--grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;min-width:420px}.stackch_rte__menu-section{display:flex;flex-direction:column;gap:.25rem}.stackch_rte__menu-title{font-size:12px;color:#57606a;padding:.25rem;text-transform:uppercase;letter-spacing:.04em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StackchRichtextEditorToolbar, selector: "stackch-richtext-editor-toolbar", inputs: ["cfg", "i18n", "disabled", "fonts", "fontSizes", "isBoldActive", "isItalicActive", "isUnderlineActive", "canUndo", "canRedo", "uiState"], outputs: ["undo", "redo", "toggleFontPanel", "toggleHeadingMenu", "toggleSpacingMenu", "toggleAlignMenu", "toggleColorMenu", "toggleListMenu", "pickFont", "pickFontSize", "pickAlign", "pickList", "pickHeading", "pickSpacing", "applyColor", "applyHighlight", "toggleBold", "toggleItalic", "toggleUnderline", "insertLink", "removeFormat", "saveSelectionRequest"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditorBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: StackchRichtextEditorBase, isStandalone: true, inputs: { placeholder: "placeholder", showToolbar: "showToolbar", fonts: "fonts", fontSizes: "fontSizes", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", disabled: "disabled", config: "config" }, outputs: { valueChange: "valueChange", metricsChange: "metricsChange" }, host: { listeners: { "document:selectionchange": "onSelectionChange()", "document:click": "closeMenus()", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditor, decorators: [{
-            type: Component,
-            args: [{ selector: 'stackch-richtext-editor', standalone: true, imports: [CommonModule, StackchRichtextEditorToolbar], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => StackchRichtextEditor),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"stackch_rte\" [class.stackch_rte--disabled]=\"disabled\">\r\n  @if (showToolbar) {\r\n    <stackch-richtext-editor-toolbar\r\n      [cfg]=\"cfg\"\r\n      [i18n]=\"i18n\"\r\n      [disabled]=\"disabled\"\r\n      [fonts]=\"fonts\"\r\n      [fontSizes]=\"fontSizes\"\r\n      [isBoldActive]=\"isBoldActive\"\r\n      [isItalicActive]=\"isItalicActive\"\r\n      [isUnderlineActive]=\"isUnderlineActive\"\r\n      [canUndo]=\"canUndo\"\r\n      [canRedo]=\"canRedo\"\r\n  [uiState]=\"{ showFontPanel: showFontPanel, showHeadingMenu: showHeadingMenu, showSpacingMenu: showSpacingMenu, showAlignMenu: showAlignMenu, showColorMenu: showColorMenu, showListMenu: showListMenu }\"\r\n\r\n      (undo)=\"undo()\"\r\n      (redo)=\"redo()\"\r\n      (toggleFontPanel)=\"toggleFontPanel($event)\"\r\n      (toggleHeadingMenu)=\"toggleHeadingMenu($event)\"\r\n      (toggleSpacingMenu)=\"toggleSpacingMenu($event)\"\r\n      (toggleAlignMenu)=\"toggleAlignMenu($event)\"\r\n      (toggleColorMenu)=\"toggleColorMenu($event)\"\r\n      (toggleListMenu)=\"toggleListMenu($event)\"\r\n  (pickFont)=\"onPickFont($any($event))\"\r\n  (pickFontSize)=\"onPickFontSize($any($event))\"\r\n  (pickAlign)=\"onPickAlign($any($event))\"\r\n  (pickList)=\"onPickList($any($event))\"\r\n  (pickHeading)=\"onPickHeading($any($event))\"\r\n  (pickSpacing)=\"onPickSpacing($any($event).kind, $any($event).target, $any($event).value)\"\r\n  (applyColor)=\"applyColor($any($event))\"\r\n  (applyHighlight)=\"applyHighlight($any($event))\"\r\n      (toggleBold)=\"toggleBold()\"\r\n      (toggleItalic)=\"toggleItalic()\"\r\n      (toggleUnderline)=\"toggleUnderline()\"\r\n      (insertLink)=\"insertLink()\"\r\n      (removeFormat)=\"removeFormat()\"\r\n      (saveSelectionRequest)=\"saveSelection()\"\r\n    />\r\n  }\r\n\r\n  <div #editor\r\n      class=\"stackch_rte__editor\"\r\n      [attr.contenteditable]=\"!disabled\"\r\n  [attr.data-placeholder]=\"placeholder || i18n.placeholder\"\r\n      [style.minHeight.px]=\"minHeight\"\r\n      [style.maxHeight.px]=\"maxHeight\"\r\n      [style.height.px]=\"height\"\r\n  (mouseup)=\"saveSelection()\"\r\n  (keyup)=\"onKeyup($event)\"\r\n  (input)=\"onInput()\"\r\n      (blur)=\"onTouched()\"\r\n      (paste)=\"onPaste($event)\"></div>\r\n</div>\r\n", styles: [".stackch_rte{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}.stackch_rte--disabled{opacity:.7;pointer-events:none}.stackch_rte__toolbar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;border:1px solid #d0d7de;border-bottom:none;background:#f6f8fa;padding:.25rem;border-radius:6px 6px 0 0}.stackch_rte__btn{appearance:none;border:1px solid #d0d7de;background:#fff;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;outline:none}.stackch_rte__btn:hover{background:#f3f4f6}.stackch_rte__btn:focus{outline:none;box-shadow:none}.stackch_rte__btn:focus-visible{outline:2px solid rgba(9,105,218,.2)}.stackch_rte__btn.is-active{background:#e7f3ff;border-color:#0969da;color:#084298}.stackch_rte__select{border:1px solid #d0d7de;border-radius:4px;padding:.2rem .4rem;background:#fff}.stackch_rte__color{display:inline-flex;align-items:center;gap:.25rem;border:1px solid #d0d7de;padding:0 .4rem;border-radius:4px;background:#fff}.stackch_rte__color>input{inline-size:1.75rem;block-size:1.5rem;padding:0;border:none;background:none}.stackch_rte__sep{width:1px;height:1.25rem;background:#d0d7de;margin:0 .125rem}.stackch_rte__editor{border:1px solid #d0d7de;border-radius:0 0 6px 6px;padding:.5rem;background:#fff;overflow:auto}.stackch_rte__editor:empty:before{content:attr(data-placeholder);color:#97a1ad;pointer-events:none}.stackch_rte__editor:focus{outline:none;box-shadow:inset 0 0 0 1px #0969da;border-color:#0969da}.stackch_rte__dropdown{position:relative;display:inline-block}.stackch_rte__menu{position:absolute;top:100%;left:0;z-index:2;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 4px 12px #00000014;padding:.25rem;min-width:220px;max-height:220px;overflow:auto}.stackch_rte__menu-item{display:block;width:100%;text-align:left;background:#fff;border:none;padding:.375rem .5rem;border-radius:4px;cursor:pointer}.stackch_rte__menu-item:hover{background:#f3f4f6}.stackch_rte__menu--row{display:flex;flex-direction:row;gap:.25rem;align-items:center;min-width:auto;max-height:none;flex-wrap:nowrap}.stackch_rte__menu--row .stackch_rte__menu-item{display:inline-flex;width:auto;text-align:center;justify-content:center;align-items:center;padding:.3rem .45rem;white-space:nowrap;flex:0 0 auto;word-break:keep-all;overflow-wrap:normal}.stackch_rte__menu--row .stackch_rte__menu-item[style*=\"width:24px\"]{padding:0;width:24px;height:24px}.stackch_rte__menu--grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;min-width:420px}.stackch_rte__menu-section{display:flex;flex-direction:column;gap:.25rem}.stackch_rte__menu-title{font-size:12px;color:#57606a;padding:.25rem;text-transform:uppercase;letter-spacing:.04em}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditorBase, decorators: [{
+            type: Directive
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
             }], showToolbar: [{
@@ -2000,6 +1935,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
+class StackchRichtextEditor extends StackchRichtextEditorBase {
+    logPrefix = '[RTE]';
+    constructor(cdr) {
+        super(cdr);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditor, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StackchRichtextEditor, isStandalone: true, selector: "stackch-richtext-editor", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StackchRichtextEditor),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"stackch_rte\" [class.stackch_rte--disabled]=\"disabled\">\r\n  @if (showToolbar) {\r\n    <stackch-richtext-editor-toolbar\r\n      [cfg]=\"cfg\"\r\n      [i18n]=\"i18n\"\r\n      [disabled]=\"disabled\"\r\n      [fonts]=\"fonts\"\r\n      [fontSizes]=\"fontSizes\"\r\n      [isBoldActive]=\"isBoldActive\"\r\n      [isItalicActive]=\"isItalicActive\"\r\n      [isUnderlineActive]=\"isUnderlineActive\"\r\n      [canUndo]=\"canUndo\"\r\n      [canRedo]=\"canRedo\"\r\n  [uiState]=\"{ showFontPanel: showFontPanel, showHeadingMenu: showHeadingMenu, showSpacingMenu: showSpacingMenu, showAlignMenu: showAlignMenu, showColorMenu: showColorMenu, showListMenu: showListMenu }\"\r\n\r\n      (undo)=\"undo()\"\r\n      (redo)=\"redo()\"\r\n      (toggleFontPanel)=\"toggleFontPanel($event)\"\r\n      (toggleHeadingMenu)=\"toggleHeadingMenu($event)\"\r\n      (toggleSpacingMenu)=\"toggleSpacingMenu($event)\"\r\n      (toggleAlignMenu)=\"toggleAlignMenu($event)\"\r\n      (toggleColorMenu)=\"toggleColorMenu($event)\"\r\n      (toggleListMenu)=\"toggleListMenu($event)\"\r\n  (pickFont)=\"onPickFont($any($event))\"\r\n  (pickFontSize)=\"onPickFontSize($any($event))\"\r\n  (pickAlign)=\"onPickAlign($any($event))\"\r\n  (pickList)=\"onPickList($any($event))\"\r\n  (pickHeading)=\"onPickHeading($any($event))\"\r\n  (pickSpacing)=\"onPickSpacing($any($event).kind, $any($event).target, $any($event).value)\"\r\n  (applyColor)=\"applyColor($any($event))\"\r\n  (applyHighlight)=\"applyHighlight($any($event))\"\r\n      (toggleBold)=\"toggleBold()\"\r\n      (toggleItalic)=\"toggleItalic()\"\r\n      (toggleUnderline)=\"toggleUnderline()\"\r\n      (insertLink)=\"insertLink()\"\r\n      (removeFormat)=\"removeFormat()\"\r\n      (saveSelectionRequest)=\"saveSelection()\"\r\n    />\r\n  }\r\n\r\n  <div #editor\r\n      class=\"stackch_rte__editor\"\r\n      [attr.contenteditable]=\"!disabled\"\r\n  [attr.data-placeholder]=\"placeholder || i18n.placeholder\"\r\n      [style.minHeight.px]=\"minHeight\"\r\n      [style.maxHeight.px]=\"maxHeight\"\r\n      [style.height.px]=\"height\"\r\n  (mouseup)=\"saveSelection()\"\r\n  (keyup)=\"onKeyup($event)\"\r\n  (input)=\"onInput()\"\r\n      (blur)=\"onTouched()\"\r\n      (paste)=\"onPaste($event)\"></div>\r\n</div>\r\n", styles: [".stackch_rte{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}.stackch_rte--disabled{opacity:.7;pointer-events:none}.stackch_rte__toolbar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;border:1px solid #d0d7de;border-bottom:none;background:#f6f8fa;padding:.25rem;border-radius:6px 6px 0 0}.stackch_rte__btn{appearance:none;border:1px solid #d0d7de;background:#fff;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;outline:none}.stackch_rte__btn:hover{background:#f3f4f6}.stackch_rte__btn:focus{outline:none;box-shadow:none}.stackch_rte__btn:focus-visible{outline:2px solid rgba(9,105,218,.2)}.stackch_rte__btn.is-active{background:#e7f3ff;border-color:#0969da;color:#084298}.stackch_rte__select{border:1px solid #d0d7de;border-radius:4px;padding:.2rem .4rem;background:#fff}.stackch_rte__color{display:inline-flex;align-items:center;gap:.25rem;border:1px solid #d0d7de;padding:0 .4rem;border-radius:4px;background:#fff}.stackch_rte__color>input{inline-size:1.75rem;block-size:1.5rem;padding:0;border:none;background:none}.stackch_rte__sep{width:1px;height:1.25rem;background:#d0d7de;margin:0 .125rem}.stackch_rte__editor{border:1px solid #d0d7de;border-radius:0 0 6px 6px;padding:.5rem;background:#fff;overflow:auto}.stackch_rte__editor:empty:before{content:attr(data-placeholder);color:#97a1ad;pointer-events:none}.stackch_rte__editor:focus{outline:none;box-shadow:inset 0 0 0 1px #0969da;border-color:#0969da}.stackch_rte__dropdown{position:relative;display:inline-block}.stackch_rte__menu{position:absolute;top:100%;left:0;z-index:2;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 4px 12px #00000014;padding:.25rem;min-width:220px;max-height:220px;overflow:auto}.stackch_rte__menu-item{display:block;width:100%;text-align:left;background:#fff;border:none;padding:.375rem .5rem;border-radius:4px;cursor:pointer}.stackch_rte__menu-item:hover{background:#f3f4f6}.stackch_rte__menu--row{display:flex;flex-direction:row;gap:.25rem;align-items:center;min-width:auto;max-height:none;flex-wrap:nowrap}.stackch_rte__menu--row .stackch_rte__menu-item{display:inline-flex;width:auto;text-align:center;justify-content:center;align-items:center;padding:.3rem .45rem;white-space:nowrap;flex:0 0 auto;word-break:keep-all;overflow-wrap:normal}.stackch_rte__menu--row .stackch_rte__menu-item[style*=\"width:24px\"]{padding:0;width:24px;height:24px}.stackch_rte__menu--grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;min-width:420px}.stackch_rte__menu-section{display:flex;flex-direction:column;gap:.25rem}.stackch_rte__menu-title{font-size:12px;color:#57606a;padding:.25rem;text-transform:uppercase;letter-spacing:.04em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StackchRichtextEditorToolbar, selector: "stackch-richtext-editor-toolbar", inputs: ["cfg", "i18n", "disabled", "fonts", "fontSizes", "isBoldActive", "isItalicActive", "isUnderlineActive", "canUndo", "canRedo", "uiState"], outputs: ["undo", "redo", "toggleFontPanel", "toggleHeadingMenu", "toggleSpacingMenu", "toggleAlignMenu", "toggleColorMenu", "toggleListMenu", "pickFont", "pickFontSize", "pickAlign", "pickList", "pickHeading", "pickSpacing", "applyColor", "applyHighlight", "toggleBold", "toggleItalic", "toggleUnderline", "insertLink", "removeFormat", "saveSelectionRequest"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'stackch-richtext-editor', standalone: true, imports: [CommonModule, StackchRichtextEditorToolbar], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StackchRichtextEditor),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"stackch_rte\" [class.stackch_rte--disabled]=\"disabled\">\r\n  @if (showToolbar) {\r\n    <stackch-richtext-editor-toolbar\r\n      [cfg]=\"cfg\"\r\n      [i18n]=\"i18n\"\r\n      [disabled]=\"disabled\"\r\n      [fonts]=\"fonts\"\r\n      [fontSizes]=\"fontSizes\"\r\n      [isBoldActive]=\"isBoldActive\"\r\n      [isItalicActive]=\"isItalicActive\"\r\n      [isUnderlineActive]=\"isUnderlineActive\"\r\n      [canUndo]=\"canUndo\"\r\n      [canRedo]=\"canRedo\"\r\n  [uiState]=\"{ showFontPanel: showFontPanel, showHeadingMenu: showHeadingMenu, showSpacingMenu: showSpacingMenu, showAlignMenu: showAlignMenu, showColorMenu: showColorMenu, showListMenu: showListMenu }\"\r\n\r\n      (undo)=\"undo()\"\r\n      (redo)=\"redo()\"\r\n      (toggleFontPanel)=\"toggleFontPanel($event)\"\r\n      (toggleHeadingMenu)=\"toggleHeadingMenu($event)\"\r\n      (toggleSpacingMenu)=\"toggleSpacingMenu($event)\"\r\n      (toggleAlignMenu)=\"toggleAlignMenu($event)\"\r\n      (toggleColorMenu)=\"toggleColorMenu($event)\"\r\n      (toggleListMenu)=\"toggleListMenu($event)\"\r\n  (pickFont)=\"onPickFont($any($event))\"\r\n  (pickFontSize)=\"onPickFontSize($any($event))\"\r\n  (pickAlign)=\"onPickAlign($any($event))\"\r\n  (pickList)=\"onPickList($any($event))\"\r\n  (pickHeading)=\"onPickHeading($any($event))\"\r\n  (pickSpacing)=\"onPickSpacing($any($event).kind, $any($event).target, $any($event).value)\"\r\n  (applyColor)=\"applyColor($any($event))\"\r\n  (applyHighlight)=\"applyHighlight($any($event))\"\r\n      (toggleBold)=\"toggleBold()\"\r\n      (toggleItalic)=\"toggleItalic()\"\r\n      (toggleUnderline)=\"toggleUnderline()\"\r\n      (insertLink)=\"insertLink()\"\r\n      (removeFormat)=\"removeFormat()\"\r\n      (saveSelectionRequest)=\"saveSelection()\"\r\n    />\r\n  }\r\n\r\n  <div #editor\r\n      class=\"stackch_rte__editor\"\r\n      [attr.contenteditable]=\"!disabled\"\r\n  [attr.data-placeholder]=\"placeholder || i18n.placeholder\"\r\n      [style.minHeight.px]=\"minHeight\"\r\n      [style.maxHeight.px]=\"maxHeight\"\r\n      [style.height.px]=\"height\"\r\n  (mouseup)=\"saveSelection()\"\r\n  (keyup)=\"onKeyup($event)\"\r\n  (input)=\"onInput()\"\r\n      (blur)=\"onTouched()\"\r\n      (paste)=\"onPaste($event)\"></div>\r\n</div>\r\n", styles: [".stackch_rte{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}.stackch_rte--disabled{opacity:.7;pointer-events:none}.stackch_rte__toolbar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;border:1px solid #d0d7de;border-bottom:none;background:#f6f8fa;padding:.25rem;border-radius:6px 6px 0 0}.stackch_rte__btn{appearance:none;border:1px solid #d0d7de;background:#fff;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;outline:none}.stackch_rte__btn:hover{background:#f3f4f6}.stackch_rte__btn:focus{outline:none;box-shadow:none}.stackch_rte__btn:focus-visible{outline:2px solid rgba(9,105,218,.2)}.stackch_rte__btn.is-active{background:#e7f3ff;border-color:#0969da;color:#084298}.stackch_rte__select{border:1px solid #d0d7de;border-radius:4px;padding:.2rem .4rem;background:#fff}.stackch_rte__color{display:inline-flex;align-items:center;gap:.25rem;border:1px solid #d0d7de;padding:0 .4rem;border-radius:4px;background:#fff}.stackch_rte__color>input{inline-size:1.75rem;block-size:1.5rem;padding:0;border:none;background:none}.stackch_rte__sep{width:1px;height:1.25rem;background:#d0d7de;margin:0 .125rem}.stackch_rte__editor{border:1px solid #d0d7de;border-radius:0 0 6px 6px;padding:.5rem;background:#fff;overflow:auto}.stackch_rte__editor:empty:before{content:attr(data-placeholder);color:#97a1ad;pointer-events:none}.stackch_rte__editor:focus{outline:none;box-shadow:inset 0 0 0 1px #0969da;border-color:#0969da}.stackch_rte__dropdown{position:relative;display:inline-block}.stackch_rte__menu{position:absolute;top:100%;left:0;z-index:2;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 4px 12px #00000014;padding:.25rem;min-width:220px;max-height:220px;overflow:auto}.stackch_rte__menu-item{display:block;width:100%;text-align:left;background:#fff;border:none;padding:.375rem .5rem;border-radius:4px;cursor:pointer}.stackch_rte__menu-item:hover{background:#f3f4f6}.stackch_rte__menu--row{display:flex;flex-direction:row;gap:.25rem;align-items:center;min-width:auto;max-height:none;flex-wrap:nowrap}.stackch_rte__menu--row .stackch_rte__menu-item{display:inline-flex;width:auto;text-align:center;justify-content:center;align-items:center;padding:.3rem .45rem;white-space:nowrap;flex:0 0 auto;word-break:keep-all;overflow-wrap:normal}.stackch_rte__menu--row .stackch_rte__menu-item[style*=\"width:24px\"]{padding:0;width:24px;height:24px}.stackch_rte__menu--grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;min-width:420px}.stackch_rte__menu-section{display:flex;flex-direction:column;gap:.25rem}.stackch_rte__menu-title{font-size:12px;color:#57606a;padding:.25rem;text-transform:uppercase;letter-spacing:.04em}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
 /*
  * Public API Surface of richtext-editor
  */
@@ -2008,5 +1968,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT, StackchRichtextEditor, StackchRichtextEditorConfig, StackchRichtextEditorI18n, StackchRichtextEditorToolbar };
+export { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT, StackchRichtextEditor, StackchRichtextEditorBase, StackchRichtextEditorConfig, StackchRichtextEditorI18n, StackchRichtextEditorToolbar };
 //# sourceMappingURL=stackch-angular-richtext-editor.mjs.map