@stackch/angular-richtext-editor 1.1.1 → 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;
@@ -143,7 +144,6 @@ class StackchRichtextEditorConfig {
     // i18n overrides (partial), default is English
     i18n;
 }
-1;
 class StackchRichtextEditorI18n {
     // Generic
     placeholder = 'Write…';
@@ -184,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',
@@ -216,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',
@@ -256,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',
@@ -296,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 = [
@@ -327,6 +315,7 @@ class StackchRichtextEditor {
     get disabled() { return this._disabled; }
     _disabled = false;
     valueChange = new EventEmitter();
+    metricsChange = new EventEmitter();
     editorRef;
     constructor(cdr) {
         this.cdr = cdr;
@@ -361,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)
@@ -374,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();
@@ -400,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();
@@ -423,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();
@@ -434,6 +423,7 @@ class StackchRichtextEditor {
             this.redo();
         }
     }
+    // ─── Menu toggles ────────────────────────────────────────────────────────
     toggleFontMenu(evt) {
         this.saveSelection();
         this.showFontMenu = !this.showFontMenu;
@@ -451,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;
@@ -530,6 +519,7 @@ class StackchRichtextEditor {
         }
         evt.stopPropagation();
     }
+    // ─── Pick handlers (toolbar → editor) ───────────────────────────────────
     onPickAlign(where) {
         this.focusEditor();
         this.restoreSelection();
@@ -582,7 +572,7 @@ class StackchRichtextEditor {
         this.emitValue();
         this.takeSnapshot('spacing');
     }
-    // ControlValueAccessor
+    // ─── ControlValueAccessor ────────────────────────────────────────────────
     writeValue(value) {
         const el = this.editorRef?.nativeElement;
         if (!el)
@@ -592,16 +582,17 @@ class StackchRichtextEditor {
         if (this.history.length === 0) {
             this.takeSnapshot('init');
         }
+        // Emit initial metrics when value is written programmatically
+        this.emitMetrics();
     }
     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');
@@ -666,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;
@@ -702,10 +692,10 @@ 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.applyInlineStyle('color', color);
+        this.applySelectionStyles({ color });
+        this.saveSelection();
     }
     applyHighlight(color) {
         this.focusEditor();
@@ -717,15 +707,14 @@ class StackchRichtextEditor {
         if (r.collapsed) {
             this.expandRangeToWord(r);
         }
-        // Some browsers use 'hiliteColor', others 'backColor'
-        this.applyInlineStyle('backgroundColor', color);
+        this.applySelectionStyles({ backgroundColor: color });
+        this.saveSelection();
     }
     expandRangeToWord(range) {
         try {
             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()) {
@@ -740,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])) {
@@ -784,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();
@@ -793,23 +780,33 @@ 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);
         this.valueChange.emit(val);
+        this.emitMetrics();
         this.updateInlineStates();
     }
+    emitMetrics() {
+        const editor = this.editorRef?.nativeElement;
+        if (!editor)
+            return;
+        const htmlLen = editor.innerHTML.length;
+        const textLen = (editor.textContent || '').length;
+        this.metricsChange.emit({ htmlLength: htmlLen, textLength: textLen });
+    }
     // Remove empty style attributes (style="") and unwrap spans without any attributes
     cleanupEmptyStylesAndSpans(root) {
+        console.log(`${this.logPrefix} cleanupEmptyStylesAndSpans: start cleanup`);
         const editor = root || this.editorRef.nativeElement;
         const toUnwrap = [];
+        const toRemove = [];
         const walker = document.createTreeWalker(editor, NodeFilter.SHOW_ELEMENT);
         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, '');
@@ -817,18 +814,30 @@ class StackchRichtextEditor {
                     el.removeAttribute('style');
                 }
             }
-            // Unwrap spans that have no attributes left
-            if (el.tagName === 'SPAN' && el.attributes.length === 0) {
-                toUnwrap.push(el);
+            if (el.tagName === 'SPAN') {
+                if (!el.firstChild) {
+                    console.log(`${this.logPrefix} cleanup: removing empty span`, el);
+                    toRemove.push(el);
+                    continue;
+                }
+                if (el.attributes.length === 0) {
+                    console.log(`${this.logPrefix} cleanup: unwrapping style-free span`, el);
+                    toUnwrap.push(el);
+                }
             }
         }
         for (const span of toUnwrap) {
+            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(`${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() {
@@ -890,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();
@@ -907,7 +914,6 @@ class StackchRichtextEditor {
         }
         this.historyIndex = index;
         this.isRestoringHistory = false;
-        // Werte emittieren nach Restore
         this.emitValue();
     }
     serializeRange(range) {
@@ -981,365 +987,182 @@ class StackchRichtextEditor {
             el.focus();
         }
     }
-    // Minimal inline style applier for inline styles
+    // ─── Inline style application ────────────────────────────────────────────
     applyInlineStyle(cssProp, value) {
-        this.focusEditor();
-        this.restoreSelection();
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
-            return;
-        const span = document.createElement('span');
-        span.style[cssProp] = value;
-        // Robuster als surroundContents: extract + wrap + insert
-        const frag = range.extractContents();
-        span.appendChild(frag);
-        range.insertNode(span);
-        // Cursor hinter das eingefügte Element setzen
-        sel.removeAllRanges();
-        const after = document.createRange();
-        after.setStartAfter(span);
-        after.collapse(true);
-        sel.addRange(after);
-        this.emitValue();
-        this.takeSnapshot('style');
+        this.applySelectionStyles({ [cssProp]: value });
     }
     applyInlineStyleSmart(cssProp, value) {
+        this.applySelectionStyles({ [cssProp]: value });
+    }
+    applySelectionStyles(styles) {
         this.focusEditor();
         this.restoreSelection();
         const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
-            return;
-        const isBlockTag = (tag) => /^(P|DIV|PRE|H1|H2|H3|H4|H5|H6|LI|TD|TH)$/i.test(tag);
-        const getBlockAncestor = (node) => {
-            const editor = this.editorRef.nativeElement;
-            let el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
-            while (el && el !== editor && !isBlockTag(el.tagName))
-                el = el.parentElement;
-            return (el && el !== editor) ? el : null;
-        };
-        const startBlock = getBlockAncestor(range.startContainer);
-        const endBlock = getBlockAncestor(range.endContainer);
-        const crossesBlocks = !!startBlock && !!endBlock && startBlock !== endBlock;
-        if (!crossesBlocks) {
-            // Single block selection: keep using inline wrapper for precise range
-            this.applyInlineStyle(cssProp, value);
+        if (!sel || sel.rangeCount === 0) {
+            console.warn(`${this.logPrefix} applySelectionStyles: no selection available`, { styles });
             return;
         }
-        // Multi-block selection: apply style to each intersecting block element (avoid invalid span structure)
-        const common = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
-            ? range.commonAncestorContainer
-            : (range.commonAncestorContainer.parentElement || this.editorRef.nativeElement);
-        const walker = document.createTreeWalker(common, NodeFilter.SHOW_ELEMENT);
-        const styled = new Set();
-        while (walker.nextNode()) {
-            const el = walker.currentNode;
-            if (!isBlockTag(el.tagName))
-                continue;
-            try {
-                if (range.intersectsNode && range.intersectsNode(el))
-                    styled.add(el);
-            }
-            catch { }
+        let range = sel.getRangeAt(0);
+        if (range.collapsed) {
+            console.warn(`${this.logPrefix} applySelectionStyles: range is collapsed`, { styles });
+            return;
         }
-        for (const el of styled) {
-            el.style[cssProp] = value;
+        const entries = Object.entries(styles).filter(([, v]) => v != null && v !== '');
+        if (entries.length === 0) {
+            console.warn(`${this.logPrefix} applySelectionStyles: no style entries to apply`, { styles });
+            return;
         }
-        this.emitValue();
-        this.takeSnapshot('style-blocks');
-    }
-    getIntersectingBlocks(range) {
-        const isBlockTag = (tag) => /^(P|DIV|PRE|H1|H2|H3|H4|H5|H6|LI|TD|TH)$/i.test(tag);
-        const common = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
-            ? range.commonAncestorContainer
-            : (range.commonAncestorContainer.parentElement || this.editorRef.nativeElement);
-        const walker = document.createTreeWalker(common, NodeFilter.SHOW_ELEMENT);
-        const blocks = [];
-        while (walker.nextNode()) {
-            const el = walker.currentNode;
-            if (!isBlockTag(el.tagName))
-                continue;
-            try {
-                if (range.intersectsNode && range.intersectsNode(el))
-                    blocks.push(el);
+        const propsToClear = Array.from(new Set(entries.map(([prop]) => this.toCssProperty(prop))));
+        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 });
+            const refreshedSel = window.getSelection();
+            if (refreshedSel && refreshedSel.rangeCount > 0) {
+                range = refreshedSel.getRangeAt(0);
             }
-            catch { }
-        }
-        return blocks;
-    }
-    // Variant of applyInlineStyle that returns the created span and does not emit/snapshot by itself
-    wrapSelectionInline(cssProp, value) {
-        this.focusEditor();
-        this.restoreSelection();
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return null;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
-            return null;
-        const span = document.createElement('span');
-        span.style[cssProp] = value;
-        const frag = range.extractContents();
-        span.appendChild(frag);
-        range.insertNode(span);
-        // Restore selection just after for continuity
-        sel.removeAllRanges();
-        const after = document.createRange();
-        after.setStartAfter(span);
-        after.collapse(true);
-        sel.addRange(after);
-        return span;
-    }
-    isBoldCarrier(el) {
-        if (!el)
-            return false;
-        const tag = el.tagName;
-        if (tag === 'B' || tag === 'STRONG')
-            return true;
-        const fw = el.style?.fontWeight || '';
-        if (fw && fw !== 'normal' && fw !== '400')
-            return true;
-        return false;
-    }
-    boldAncestorContainingRange(range) {
-        let el = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
-            ? range.commonAncestorContainer
-            : range.commonAncestorContainer.parentElement;
-        const editor = this.editorRef.nativeElement;
-        while (el && el !== editor) {
-            if (this.isBoldCarrier(el)) {
-                // ensure el contains both boundary containers fully
-                const sc = range.startContainer;
-                const ec = range.endContainer;
-                if (el.contains(sc) && el.contains(ec))
-                    return el;
+            else if (clearedRange) {
+                range = clearedRange;
             }
-            el = el.parentElement;
-        }
-        return null;
-    }
-    ancestorContainingRange(range, isCarrier) {
-        let el = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
-            ? range.commonAncestorContainer
-            : range.commonAncestorContainer.parentElement;
-        const editor = this.editorRef.nativeElement;
-        while (el && el !== editor) {
-            if (isCarrier(el)) {
-                const sc = range.startContainer;
-                const ec = range.endContainer;
-                if (el.contains(sc) && el.contains(ec))
-                    return el;
+            if (range.collapsed && !beforeClear.collapsed) {
+                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;
             }
-            el = el.parentElement;
         }
-        return null;
-    }
-    splitCarrierAroundSelection(range, carrier) {
-        const parent = carrier.parentNode;
-        if (!parent)
+        const segments = this.collectTextSegments(range);
+        if (segments.length === 0) {
+            console.warn(`${this.logPrefix} applySelectionStyles: no text segments found`, {
+                entries,
+                commonAncestor: range.commonAncestorContainer
+            });
             return;
-        const rRight = document.createRange();
-        rRight.setStart(range.endContainer, range.endOffset);
-        rightGuard(carrier, rRight);
-        const rightFrag = rRight.extractContents();
-        const rLeft = document.createRange();
-        rLeft.setStart(carrier, 0);
-        leftGuard(range, rLeft);
-        const leftFrag = rLeft.extractContents();
-        if (leftFrag.childNodes.length) {
-            const leftClone = carrier.cloneNode(false);
-            leftClone.appendChild(leftFrag);
-            parent.insertBefore(leftClone, carrier);
         }
-        let insertAfterRef = carrier;
-        if (rightFrag.childNodes.length) {
-            const rightClone = carrier.cloneNode(false);
-            rightClone.appendChild(rightFrag);
-            parent.insertBefore(rightClone, carrier.nextSibling);
-            insertAfterRef = rightClone;
-        }
-        while (carrier.firstChild)
-            parent.insertBefore(carrier.firstChild, insertAfterRef);
-        carrier.remove();
-        function rightGuard(node, r) {
-            try {
-                r.setEnd(node, node.childNodes.length);
+        console.log(`${this.logPrefix} applySelectionStyles: applying styles to segments`, {
+            entries,
+            segmentCount: segments.length
+        });
+        const wrappedSegments = [];
+        for (let i = segments.length - 1; i >= 0; i--) {
+            const wrapped = this.applyStylesToSegment(segments[i], entries);
+            if (wrapped)
+                wrappedSegments.unshift(wrapped);
+        }
+        if (wrappedSegments.length) {
+            const first = wrappedSegments[0];
+            const last = wrappedSegments[wrappedSegments.length - 1];
+            const newRange = document.createRange();
+            newRange.setStartBefore(first);
+            newRange.setEndAfter(last);
+            const selAfter = window.getSelection();
+            if (selAfter) {
+                selAfter.removeAllRanges();
+                selAfter.addRange(newRange);
             }
-            catch { }
+            this.saveSelectionFromRange(newRange);
         }
-        function leftGuard(rng, r) {
-            try {
-                r.setEnd(rng.startContainer, rng.startOffset);
-            }
-            catch { }
-        }
-    }
-    // Unwrap bold formatting only for the selected content inside a containing bold ancestor by splitting it into left/selection/right parts
-    deselectBoldBySplitting(range) {
-        const ancestor = this.boldAncestorContainingRange(range);
-        if (!ancestor)
-            return false;
-        this.splitCarrierAroundSelection(range, ancestor);
-        return true;
-    }
-    deselectItalicBySplitting(range) {
-        const anc = this.ancestorContainingRange(range, el => this.isItalicCarrier(el));
-        if (!anc)
-            return false;
-        this.splitCarrierAroundSelection(range, anc);
-        return true;
-    }
-    deselectUnderlineBySplitting(range) {
-        const anc = this.ancestorContainingRange(range, el => this.isUnderlineCarrier(el));
-        if (!anc)
-            return false;
-        this.splitCarrierAroundSelection(range, anc);
-        return true;
+        this.emitValue();
+        this.takeSnapshot('style');
     }
-    cleanupEmptyItalicSpans(root) {
-        const toRemove = [];
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
-        while (walker.nextNode()) {
-            const el = walker.currentNode;
-            const isItalic = (el.tagName === 'I' || el.tagName === 'EM' || (el.tagName === 'SPAN' && el.style.fontStyle && el.style.fontStyle !== 'normal'));
-            if (!isItalic)
-                continue;
-            const text = el.textContent ?? '';
-            const normalized = text.replace(/[\u00A0\u200B\s]/g, '');
-            const onlyWhitespace = !el.firstChild || (normalized.length === 0 && el.querySelectorAll('*').length === 0);
-            if (onlyWhitespace)
-                toRemove.push(el);
+    collectTextSegments(range) {
+        const segments = [];
+        const root = range.commonAncestorContainer;
+        if (root.nodeType === Node.TEXT_NODE) {
+            const text = root;
+            const start = text === range.startContainer ? range.startOffset : 0;
+            const end = text === range.endContainer ? range.endOffset : text.data.length;
+            if (start < end)
+                segments.push({ node: text, start, end });
+            return segments;
         }
-        for (const el of toRemove)
-            el.remove();
-    }
-    cleanupEmptyUnderlineSpans(root) {
-        const toRemove = [];
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
         while (walker.nextNode()) {
-            const el = walker.currentNode;
-            const isU = (el.tagName === 'U' || (el.tagName === 'SPAN' && typeof el.style.textDecoration === 'string' && el.style.textDecoration.includes('underline')));
-            if (!isU)
+            const text = walker.currentNode;
+            if (!text.data)
                 continue;
-            const text = el.textContent ?? '';
-            const normalized = text.replace(/[\u00A0\u200B\s]/g, '');
-            const onlyWhitespace = !el.firstChild || (normalized.length === 0 && el.querySelectorAll('*').length === 0);
-            if (onlyWhitespace)
-                toRemove.push(el);
+            if (!this.intersectsRange(range, text))
+                continue;
+            const start = text === range.startContainer ? range.startOffset : 0;
+            const end = text === range.endContainer ? range.endOffset : text.data.length;
+            if (start >= end)
+                continue;
+            segments.push({ node: text, start, end });
         }
-        for (const el of toRemove)
-            el.remove();
+        return segments;
     }
-    // Remove bold wrappers and inline font-weight style inside a container
-    stripBoldWithin(container) {
-        const toProcess = [];
-        const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
-        while (walker.nextNode()) {
-            toProcess.push(walker.currentNode);
+    intersectsRange(range, node) {
+        try {
+            return range.intersectsNode ? range.intersectsNode(node) : true;
         }
-        for (const el of toProcess) {
-            if (el.tagName === 'B' || el.tagName === 'STRONG') {
-                while (el.firstChild)
-                    el.parentNode?.insertBefore(el.firstChild, el);
-                el.remove();
-                continue;
-            }
-            if (el.tagName === 'SPAN') {
-                if (el.style.fontWeight)
-                    el.style.removeProperty('font-weight');
-                // Clean empty style spans
-                if (!el.getAttribute('style')) {
-                    while (el.firstChild)
-                        el.parentNode?.insertBefore(el.firstChild, el);
-                    el.remove();
-                }
-            }
+        catch {
+            return false;
         }
     }
-    // Pull the given node out of any bold carrier ancestors by splitting them around the node
-    liftOutOfBoldAncestors(node) {
-        const editor = this.editorRef.nativeElement;
-        let currentBold = this.findClosest(node, 'b,strong,span[style*="font-weight"]');
-        while (currentBold && currentBold !== editor) {
-            this.splitOutOfAncestor(currentBold, node);
-            currentBold = this.findClosest(node, 'b,strong,span[style*="font-weight"]');
-        }
-    }
-    // Split arbitrary ancestor element so that `node` becomes a sibling outside of it, preserving order even if `node` is nested deeply
-    splitOutOfAncestor(ancestor, node) {
-        // First, climb from node up to direct child of ancestor, splitting wrappers after `node` at each level
-        let child = node;
-        let parent = child.parentElement;
-        while (parent && parent !== ancestor) {
-            const right = parent.cloneNode(false);
-            // move siblings after `child` into right clone
-            while (child.nextSibling)
-                right.appendChild(child.nextSibling);
-            // insert right after parent
-            parent.after(right);
-            // ascend
-            child = parent;
-            parent = child.parentElement;
+    applyStylesToSegment(segment, entries) {
+        const segRange = document.createRange();
+        segRange.setStart(segment.node, segment.start);
+        segRange.setEnd(segment.node, segment.end);
+        const wrapper = document.createElement('span');
+        for (const [prop, value] of entries) {
+            wrapper.style.setProperty(this.toCssProperty(prop), value);
         }
-        if (!parent)
-            return;
-        // Now `child` is a direct child of ancestor
-        const before = ancestor.cloneNode(false);
-        while (ancestor.firstChild && ancestor.firstChild !== child) {
-            before.appendChild(ancestor.firstChild);
-        }
-        const after = ancestor.cloneNode(false);
-        while (child.nextSibling)
-            after.appendChild(child.nextSibling);
-        const gp = ancestor.parentNode;
-        if (!gp)
-            return;
-        if (before.childNodes.length)
-            gp.insertBefore(before, ancestor);
-        // move node out, place where ancestor was
-        gp.insertBefore(node, ancestor);
-        if (after.childNodes.length)
-            gp.insertBefore(after, ancestor);
-        ancestor.remove();
-    }
-    cleanupEmptyBoldSpans(root) {
-        const toRemove = [];
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
-        while (walker.nextNode()) {
-            const el = walker.currentNode;
-            const isBoldEl = (el.tagName === 'B' || el.tagName === 'STRONG' || (el.tagName === 'SPAN' && el.style.fontWeight && el.style.fontWeight !== 'normal' && el.style.fontWeight !== '400'));
-            if (!isBoldEl)
-                continue;
-            // remove if no children or only whitespace (including NBSP \u00A0 and zero-width space \u200B)
-            const text = el.textContent ?? '';
-            const normalized = text.replace(/[\u00A0\u200B\s]/g, '');
-            const onlyWhitespace = !el.firstChild || (normalized.length === 0 && el.querySelectorAll('*').length === 0);
-            if (onlyWhitespace) {
-                toRemove.push(el);
-            }
+        try {
+            segRange.surroundContents(wrapper);
+            return this.mergeAdjacentStyledSpans(wrapper);
         }
-        for (const el of toRemove)
-            el.remove();
+        catch (err) {
+            console.error(`${this.logPrefix} applyStylesToSegment: failed to surround contents`, {
+                error: err,
+                segment,
+                entries
+            });
+        }
+        return null;
     }
-    maybeUnwrapNormalSpan(span) {
+    toCssProperty(prop) {
+        return prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+    mergeAdjacentStyledSpans(span) {
         if (span.tagName !== 'SPAN')
-            return;
-        // If no bold applies from ancestors, drop the 400 style and unwrap if style empty
-        const hasBoldAbove = this.isNodeBold(span.parentElement);
-        if (!hasBoldAbove) {
-            if (span.style.fontWeight === '400')
-                span.style.removeProperty('font-weight');
-            if (!span.getAttribute('style')) {
-                while (span.firstChild)
-                    span.parentNode?.insertBefore(span.firstChild, span);
-                span.remove();
-            }
+            return span;
+        let current = span;
+        const normalize = (el) => el && el.tagName === 'SPAN' ? el : null;
+        const styleText = (el) => (el ? el.getAttribute('style') || '' : '');
+        // Merge with parent if identical
+        let parent = normalize(current.parentElement);
+        if (parent && styleText(parent) === styleText(current) && parent.attributes.length === current.attributes.length) {
+            while (current.firstChild)
+                parent.insertBefore(current.firstChild, current);
+            current.remove();
+            current = parent;
+        }
+        // Merge with previous sibling ignoring empty text nodes
+        let prev = current.previousSibling;
+        while (prev && prev.nodeType === Node.TEXT_NODE && !prev.data.trim())
+            prev = prev.previousSibling;
+        if (prev instanceof HTMLElement && prev.tagName === 'SPAN' && styleText(prev) === styleText(current) && prev.attributes.length === current.attributes.length) {
+            while (current.firstChild)
+                prev.appendChild(current.firstChild);
+            current.remove();
+            current = prev;
         }
+        // Merge with next sibling ignoring empty text nodes
+        let next = current.nextSibling;
+        while (next && next.nodeType === Node.TEXT_NODE && !next.data.trim())
+            next = next.nextSibling;
+        if (next instanceof HTMLElement && next.tagName === 'SPAN' && styleText(next) === styleText(current) && next.attributes.length === current.attributes.length) {
+            while (next.firstChild)
+                current.appendChild(next.firstChild);
+            next.remove();
+        }
+        return current;
+    }
+    saveSelectionFromRange(range) {
+        this.savedRange = range.cloneRange();
     }
     wrapSelectionWith(tag, attrs) {
         const sel = window.getSelection();
@@ -1358,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);
@@ -1373,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) {
@@ -1402,63 +1223,19 @@ 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();
         }
         catch { }
     }
     computeBoldAnyForRange(range) {
-        const editor = this.editorRef.nativeElement;
-        const root = this.editorRef.nativeElement;
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-        while (walker.nextNode()) {
-            const n = walker.currentNode;
-            if (!n.data.trim())
-                continue;
-            try {
-                if (range.intersectsNode(n)) {
-                    if (this.isNodeBold(n.parentElement))
-                        return true;
-                }
-            }
-            catch { }
-        }
-        return false;
+        return this.selectionHasStyle(range, 'font-weight');
     }
     computeItalicAnyForRange(range) {
-        const root = this.editorRef.nativeElement;
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-        while (walker.nextNode()) {
-            const n = walker.currentNode;
-            if (!n.data.trim())
-                continue;
-            try {
-                if (range.intersectsNode(n)) {
-                    if (this.isNodeItalic(n.parentElement))
-                        return true;
-                }
-            }
-            catch { }
-        }
-        return false;
+        return this.selectionHasStyle(range, 'font-style');
     }
     computeUnderlineAnyForRange(range) {
-        const root = this.editorRef.nativeElement;
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-        while (walker.nextNode()) {
-            const n = walker.currentNode;
-            if (!n.data.trim())
-                continue;
-            try {
-                if (range.intersectsNode(n)) {
-                    if (this.isNodeUnderline(n.parentElement))
-                        return true;
-                }
-            }
-            catch { }
-        }
-        return false;
+        return this.selectionHasStyle(range, 'text-decoration');
     }
     isNodeBold(node) {
         let el = node;
@@ -1499,120 +1276,244 @@ class StackchRichtextEditor {
         }
         return false;
     }
-    isItalicCarrier(el) {
-        if (!el)
-            return false;
-        const tag = el.tagName;
-        if (tag === 'I' || tag === 'EM')
-            return true;
-        const fs = el.style?.fontStyle || '';
-        return !!fs && fs !== 'normal';
-    }
-    isUnderlineCarrier(el) {
-        if (!el)
-            return false;
-        const tag = el.tagName;
-        if (tag === 'U')
-            return true;
-        const td = el.style?.textDecoration || '';
-        return typeof td === 'string' && td.includes('underline');
-    }
-    computeBoldActiveForRange(range) {
+    removeInlineStyleInRange(range, cssPropKebab, options) {
+        const shouldRestoreSelection = options?.restoreSelection !== false;
+        this.isolateRangeFromStyleCarriers(range, cssPropKebab);
         const editor = this.editorRef.nativeElement;
-        const root = this.isRangeInEditor(range) ? this.editorRef.nativeElement : range.commonAncestorContainer;
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-        const nodes = [];
-        while (walker.nextNode()) {
-            const n = walker.currentNode;
-            if (!n.data.trim())
-                continue;
-            try {
-                if (range.intersectsNode(n))
-                    nodes.push(n);
-            }
-            catch { /* Safari may throw if node not in same tree */ }
-        }
-        if (nodes.length === 0)
-            return false;
-        return nodes.every(t => this.isNodeBold(t.parentElement));
-    }
-    computeItalicActiveForRange(range) {
-        const editor = this.editorRef.nativeElement;
-        const root = this.isRangeInEditor(range) ? this.editorRef.nativeElement : range.commonAncestorContainer;
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-        const nodes = [];
-        while (walker.nextNode()) {
-            const n = walker.currentNode;
-            if (!n.data.trim())
-                continue;
+        const selAfter = window.getSelection();
+        const effectiveRange = selAfter && selAfter.rangeCount > 0 ? selAfter.getRangeAt(0) : range;
+        const common = effectiveRange.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+            ? effectiveRange.commonAncestorContainer
+            : (effectiveRange.commonAncestorContainer.parentElement || editor);
+        const affected = [];
+        const intersects = (node) => {
             try {
-                if (range.intersectsNode(n))
-                    nodes.push(n);
+                return effectiveRange.intersectsNode ? effectiveRange.intersectsNode(node) : true;
             }
-            catch { }
-        }
-        if (nodes.length === 0)
-            return false;
-        return nodes.every(t => this.isNodeItalic(t.parentElement));
-    }
-    computeUnderlineActiveForRange(range) {
-        const editor = this.editorRef.nativeElement;
-        const root = this.isRangeInEditor(range) ? this.editorRef.nativeElement : range.commonAncestorContainer;
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-        const nodes = [];
-        while (walker.nextNode()) {
-            const n = walker.currentNode;
-            if (!n.data.trim())
-                continue;
-            try {
-                if (range.intersectsNode(n))
-                    nodes.push(n);
+            catch {
+                return false;
             }
-            catch { }
+        };
+        const matchesEl = (el) => this.isStyleCarrier(el, cssPropKebab);
+        console.log(`${this.logPrefix} removeInlineStyleInRange:start`, {
+            cssPropKebab,
+            rangeCollapsed: effectiveRange.collapsed,
+            commonTag: common.tagName,
+            commonHasStyle: common.style ? common.style.getPropertyValue?.(cssPropKebab) : undefined
+        });
+        if (common instanceof HTMLElement && matchesEl(common) && intersects(common)) {
+            affected.push(common);
         }
-        if (nodes.length === 0)
-            return false;
-        return nodes.every(t => this.isNodeUnderline(t.parentElement));
-    }
-    removeInlineStyleInRange(range, cssPropKebab) {
-        const editor = this.editorRef.nativeElement;
-        const common = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement || editor;
-        const affected = [];
         const walker = document.createTreeWalker(common, NodeFilter.SHOW_ELEMENT);
         while (walker.nextNode()) {
             const el = walker.currentNode;
-            let matches = false;
-            if (el.tagName === 'SPAN' && el.style && el.style.getPropertyValue(cssPropKebab))
-                matches = true;
-            if (cssPropKebab === 'font-weight' && (el.tagName === 'B' || el.tagName === 'STRONG'))
-                matches = true;
-            if (cssPropKebab === 'font-style' && (el.tagName === 'I' || el.tagName === 'EM'))
-                matches = true;
-            if (cssPropKebab === 'text-decoration' && el.tagName === 'U')
-                matches = true;
-            if (!matches)
+            if (!matchesEl(el))
                 continue;
-            try {
-                if (range.intersectsNode ? range.intersectsNode(el) : true)
-                    affected.push(el);
+            if (intersects(el)) {
+                affected.push(el);
+                console.log(`${this.logPrefix} removeInlineStyleInRange:match`, el.tagName, el.getAttribute('style'));
             }
-            catch { }
         }
+        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(`${this.logPrefix} unwrap tag`, el.tagName);
                 while (el.firstChild)
                     el.parentNode?.insertBefore(el.firstChild, el);
                 el.remove();
+                removedTags++;
                 continue;
             }
+            console.log(`${this.logPrefix} remove style`, cssPropKebab, 'from', el.tagName, el.getAttribute('style'));
             el.style.removeProperty(cssPropKebab);
+            if (!el.style.length) {
+                console.log(`${this.logPrefix} removeInlineStyleInRange: style attribute now empty, removing attribute`, el);
+                el.removeAttribute('style');
+            }
+            removedProps++;
             if (!el.getAttribute('style')) {
+                console.log(`${this.logPrefix} unwrap empty styled span`, el.tagName);
                 while (el.firstChild)
                     el.parentNode?.insertBefore(el.firstChild, el);
                 el.remove();
             }
         }
-        this.emitValue();
+        this.pruneDanglingStyleCarriers(common, cssPropKebab);
+        console.log(`${this.logPrefix} removeInlineStyleInRange:done`, { affected: affected.length, removedTags, removedProps });
+        let resultRange = null;
+        if (!options?.suppressEmit) {
+            this.emitValue();
+            resultRange = null;
+        }
+        else {
+            const sel2 = window.getSelection();
+            if (sel2 && sel2.rangeCount > 0) {
+                resultRange = sel2.getRangeAt(0).cloneRange();
+            }
+            else if (shouldRestoreSelection) {
+                resultRange = effectiveRange.cloneRange();
+            }
+            if (shouldRestoreSelection && resultRange) {
+                const selRestore = window.getSelection();
+                if (selRestore) {
+                    selRestore.removeAllRanges();
+                    selRestore.addRange(resultRange);
+                    this.saveSelectionFromRange(resultRange);
+                }
+            }
+        }
+        return resultRange;
+    }
+    pruneDanglingStyleCarriers(root, cssPropKebab) {
+        const toRemove = [];
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+        if (root instanceof HTMLElement && this.isStyleCarrier(root, cssPropKebab) && !this.elementHasVisibleContent(root)) {
+            toRemove.push(root);
+        }
+        while (walker.nextNode()) {
+            const el = walker.currentNode;
+            if (!this.isStyleCarrier(el, cssPropKebab))
+                continue;
+            if (this.elementHasVisibleContent(el))
+                continue;
+            toRemove.push(el);
+        }
+        for (const el of toRemove) {
+            console.log(`${this.logPrefix} pruneDanglingStyleCarriers: removing empty carrier`, { tag: el.tagName, style: el.getAttribute('style') });
+            el.remove();
+        }
+    }
+    elementHasVisibleContent(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.data;
+            for (let i = 0; i < text.length; i++) {
+                const ch = text[i];
+                if (ch === '\u00a0')
+                    return true;
+                if (!/\s/.test(ch) && ch !== '\u200b' && ch !== '\u200c' && ch !== '\u200d' && ch !== '\ufeff') {
+                    return true;
+                }
+            }
+            return false;
+        }
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            if (el.tagName === 'BR')
+                return true;
+            for (const child of Array.from(node.childNodes)) {
+                if (this.elementHasVisibleContent(child))
+                    return true;
+            }
+        }
+        return false;
+    }
+    isolateRangeFromStyleCarriers(range, cssPropKebab) {
+        let carrier = this.findCarrierContainingRange(range, cssPropKebab);
+        while (carrier) {
+            this.splitCarrierAroundSelection(range, carrier);
+            carrier = this.findCarrierContainingRange(range, cssPropKebab);
+        }
+    }
+    selectionHasStyle(range, cssPropKebab) {
+        const editor = this.editorRef.nativeElement;
+        const common = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+            ? range.commonAncestorContainer
+            : (range.commonAncestorContainer.parentElement || editor);
+        const intersects = (node) => this.intersectsRange(range, node);
+        if (common instanceof HTMLElement && this.isStyleCarrier(common, cssPropKebab) && intersects(common)) {
+            return true;
+        }
+        const walker = document.createTreeWalker(common, NodeFilter.SHOW_ELEMENT);
+        while (walker.nextNode()) {
+            const el = walker.currentNode;
+            if (!this.isStyleCarrier(el, cssPropKebab))
+                continue;
+            if (intersects(el))
+                return true;
+        }
+        return false;
+    }
+    findCarrierContainingRange(range, cssPropKebab) {
+        let el = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+            ? range.commonAncestorContainer
+            : range.commonAncestorContainer.parentElement;
+        const editor = this.editorRef.nativeElement;
+        while (el && el !== editor) {
+            if (this.isStyleCarrier(el, cssPropKebab)) {
+                const sc = range.startContainer;
+                const ec = range.endContainer;
+                if (el.contains(sc) && el.contains(ec))
+                    return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    isStyleCarrier(el, cssPropKebab) {
+        const tag = el.tagName;
+        if (cssPropKebab === 'font-weight') {
+            if (tag === 'B' || tag === 'STRONG')
+                return true;
+            const fw = el.style?.fontWeight || '';
+            return !!fw && fw !== 'normal' && fw !== '400';
+        }
+        if (cssPropKebab === 'font-style') {
+            if (tag === 'I' || tag === 'EM')
+                return true;
+            const fs = el.style?.fontStyle || '';
+            return !!fs && fs !== 'normal';
+        }
+        if (cssPropKebab === 'text-decoration') {
+            if (tag === 'U')
+                return true;
+            const td = el.style?.textDecoration || el.style?.textDecorationLine || '';
+            return typeof td === 'string' && td.includes('underline');
+        }
+        const inline = el.style?.getPropertyValue(cssPropKebab) || '';
+        if (!inline)
+            return false;
+        if (cssPropKebab === 'color') {
+            return inline !== 'inherit' && inline !== 'initial';
+        }
+        if (cssPropKebab === 'background-color') {
+            return inline !== 'transparent' && inline !== 'initial';
+        }
+        return true;
+    }
+    splitCarrierAroundSelection(range, carrier) {
+        const parent = carrier.parentNode;
+        if (!parent)
+            return;
+        const rightRange = document.createRange();
+        rightRange.setStart(range.endContainer, range.endOffset);
+        try {
+            rightRange.setEnd(carrier, carrier.childNodes.length);
+        }
+        catch { }
+        const rightFrag = rightRange.extractContents();
+        const leftRange = document.createRange();
+        leftRange.setStart(carrier, 0);
+        try {
+            leftRange.setEnd(range.startContainer, range.startOffset);
+        }
+        catch { }
+        const leftFrag = leftRange.extractContents();
+        if (leftFrag.childNodes.length) {
+            const leftClone = carrier.cloneNode(false);
+            leftClone.appendChild(leftFrag);
+            parent.insertBefore(leftClone, carrier);
+        }
+        let insertAfter = carrier;
+        if (rightFrag.childNodes.length) {
+            const rightClone = carrier.cloneNode(false);
+            rightClone.appendChild(rightFrag);
+            parent.insertBefore(rightClone, carrier.nextSibling);
+            insertAfter = rightClone;
+        }
+        while (carrier.firstChild)
+            parent.insertBefore(carrier.firstChild, insertAfter);
+        carrier.remove();
     }
     toggleBold() {
         this.focusEditor();
@@ -1624,45 +1525,12 @@ class StackchRichtextEditor {
         if (range.collapsed)
             this.expandRangeToWord(range);
         const anyActive = this.computeBoldAnyForRange(range);
-        const blocks = this.getIntersectingBlocks(range);
-        const multiBlock = blocks.length > 1;
+        console.log(`${this.logPrefix} toggleBold`, { anyActive, rangeCollapsed: range.collapsed });
         if (anyActive) {
-            if (multiBlock) {
-                for (const b of blocks)
-                    b.style.removeProperty('font-weight');
-                this.emitValue();
-                this.updateInlineStates();
-                this.takeSnapshot('toggle-bold-blocks');
-                return;
-            }
-            // Preferred: split bold ancestor around selection so we keep surrounding text intact
-            const changed = this.deselectBoldBySplitting(range);
-            if (changed) {
-                this.cleanupEmptyBoldSpans(this.editorRef.nativeElement);
-                this.emitValue();
-            }
-            else {
-                // Fallback: previous neutralization approach for complex cases
-                const normal = this.wrapSelectionInline('fontWeight', '400');
-                if (normal) {
-                    this.stripBoldWithin(normal);
-                    this.liftOutOfBoldAncestors(normal);
-                    this.cleanupEmptyBoldSpans(this.editorRef.nativeElement);
-                    this.maybeUnwrapNormalSpan(normal);
-                    this.emitValue();
-                }
-            }
+            this.removeInlineStyleInRange(range, 'font-weight');
         }
         else {
-            if (multiBlock) {
-                for (const b of blocks)
-                    b.style.fontWeight = 'bold';
-                this.emitValue();
-                this.updateInlineStates();
-                this.takeSnapshot('toggle-bold-blocks');
-                return;
-            }
-            this.applyInlineStyleSmart('fontWeight', 'bold');
+            this.applySelectionStyles({ fontWeight: 'bold' });
         }
         this.updateInlineStates();
         this.takeSnapshot('toggle-bold');
@@ -1678,18 +1546,10 @@ class StackchRichtextEditor {
             this.expandRangeToWord(range);
         const anyActive = this.computeItalicAnyForRange(range);
         if (anyActive) {
-            const changed = this.deselectItalicBySplitting(range);
-            if (changed) {
-                this.cleanupEmptyItalicSpans(this.editorRef.nativeElement);
-                this.emitValue();
-            }
-            else {
-                this.removeInlineStyleInRange(range, 'font-style');
-                this.applyInlineStyle('fontStyle', 'normal');
-            }
+            this.removeInlineStyleInRange(range, 'font-style');
         }
         else {
-            this.applyInlineStyleSmart('fontStyle', 'italic');
+            this.applySelectionStyles({ fontStyle: 'italic' });
         }
         this.updateInlineStates();
         this.takeSnapshot('toggle-italic');
@@ -1705,22 +1565,15 @@ class StackchRichtextEditor {
             this.expandRangeToWord(range);
         const anyActive = this.computeUnderlineAnyForRange(range);
         if (anyActive) {
-            const changed = this.deselectUnderlineBySplitting(range);
-            if (changed) {
-                this.cleanupEmptyUnderlineSpans(this.editorRef.nativeElement);
-                this.emitValue();
-            }
-            else {
-                this.removeInlineStyleInRange(range, 'text-decoration');
-                this.applyInlineStyle('textDecoration', 'none');
-            }
+            this.removeInlineStyleInRange(range, 'text-decoration');
         }
         else {
-            this.applyInlineStyleSmart('textDecoration', 'underline');
+            this.applySelectionStyles({ textDecoration: 'underline' });
         }
         this.updateInlineStates();
         this.takeSnapshot('toggle-underline');
     }
+    // ─── Block operations ─────────────────────────────────────────────────────
     getCurrentRange() {
         const sel = window.getSelection();
         if (!sel || sel.rangeCount === 0)
@@ -1734,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;
@@ -1753,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();
@@ -1806,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);
@@ -1860,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)
@@ -1871,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');
@@ -1887,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();
@@ -1903,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);
@@ -1912,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);
@@ -1921,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])
@@ -1933,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)) {
@@ -1943,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)
@@ -1953,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)
@@ -1961,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)
@@ -1977,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;
@@ -1988,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;
@@ -2020,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;
                     }
@@ -2034,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;
@@ -2045,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" }, 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: [{
@@ -2097,6 +1917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], metricsChange: [{
+                type: Output
             }], editorRef: [{
                 type: ViewChild,
                 args: ['editor', { static: true }]
@@ -2113,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
  */
@@ -2121,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