@stackch/angular-richtext-editor 1.1.0 → 1.2.0

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

@@ -143,7 +143,6 @@ class StackchRichtextEditorConfig {
     // i18n overrides (partial), default is English
     i18n;
 }
-1;
 class StackchRichtextEditorI18n {
     // Generic
     placeholder = 'Write…';
@@ -327,6 +326,8 @@ class StackchRichtextEditor {
     get disabled() { return this._disabled; }
     _disabled = false;
     valueChange = new EventEmitter();
+    // Structured metrics event (future-proof)
+    metricsChange = new EventEmitter();
     editorRef;
     constructor(cdr) {
         this.cdr = cdr;
@@ -592,6 +593,8 @@ 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; }
@@ -705,7 +708,8 @@ class StackchRichtextEditor {
             // 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,8 +721,8 @@ 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 {
@@ -799,12 +803,25 @@ class StackchRichtextEditor {
         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;
+        // textContent excludes markup; normalize null to empty string
+        const textLen = (editor.textContent || '').length;
+        // Structured metrics event
+        this.metricsChange.emit({ htmlLength: htmlLen, textLength: textLen });
+    }
     // Remove empty style attributes (style="") and unwrap spans without any attributes
     cleanupEmptyStylesAndSpans(root) {
+        console.log('[RTE] cleanupEmptyStylesAndSpans: start cleanup');
         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;
@@ -817,16 +834,28 @@ 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('[RTE] cleanup: removing empty span', el);
+                    toRemove.push(el);
+                    continue;
+                }
+                if (el.attributes.length === 0) {
+                    console.log('[RTE] cleanup: unwrapping style-free span', el);
+                    toUnwrap.push(el);
+                }
             }
         }
         for (const span of toUnwrap) {
+            console.log('[RTE] cleanup: unwrap span', { span, childCount: span.childNodes.length });
             while (span.firstChild)
                 span.parentNode?.insertBefore(span.firstChild, span);
             span.remove();
         }
+        for (const span of toRemove) {
+            console.log('[RTE] cleanup: remove span without children', span);
+            span.remove();
+        }
     }
     // History API
     get canUndo() { return this.historyIndex > 0; }
@@ -983,363 +1012,182 @@ class StackchRichtextEditor {
     }
     // Minimal inline style applier for inline styles
     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');
+        // Delegate to generic, style-agnostic applier
+        this.applySelectionStyles({ [cssProp]: value });
     }
     applyInlineStyleSmart(cssProp, value) {
+        // Delegate to generic applier which handles selection/logging
+        this.applySelectionStyles({ [cssProp]: value });
+    }
+    applySelectionStyles(styles) {
         this.focusEditor();
         this.restoreSelection();
         const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
+        if (!sel || sel.rangeCount === 0) {
+            console.warn('[RTE] applySelectionStyles: no selection available', { styles });
             return;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
+        }
+        let range = sel.getRangeAt(0);
+        if (range.collapsed) {
+            console.warn('[RTE] applySelectionStyles: range is collapsed', { styles });
             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);
+        }
+        const entries = Object.entries(styles).filter(([, v]) => v != null && v !== '');
+        if (entries.length === 0) {
+            console.warn('[RTE] applySelectionStyles: no style entries to apply', { 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);
+        const propsToClear = Array.from(new Set(entries.map(([prop]) => this.toCssProperty(prop))));
+        console.log('[RTE] 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 { }
-        }
-        for (const el of styled) {
-            el.style[cssProp] = value;
-        }
-        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);
+            else if (clearedRange) {
+                range = clearedRange;
             }
-            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;
-            }
-            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('[RTE] applySelectionStyles: range collapsed after clearing, restoring previous range');
+                const sel = window.getSelection();
+                if (sel) {
+                    sel.removeAllRanges();
+                    sel.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('[RTE] 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);
-            }
-            catch { }
-        }
-        function leftGuard(rng, r) {
-            try {
-                r.setEnd(rng.startContainer, rng.startOffset);
+        console.log('[RTE] 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);
         }
+        this.emitValue();
+        this.takeSnapshot('style');
     }
-    // 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;
-    }
-    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('[RTE] 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();
@@ -1409,56 +1257,13 @@ class StackchRichtextEditor {
         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 +1304,249 @@ 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('[RTE] removeInlineStyleInRange:start', {
+            cssPropKebab,
+            rangeCollapsed: effectiveRange.collapsed,
+            commonTag: common.tagName,
+            commonHasStyle: common.style ? common.style.getPropertyValue?.(cssPropKebab) : undefined
+        });
+        // Include the common element itself if it matches and intersects (TreeWalker won't visit the root)
+        if (common instanceof HTMLElement && matchesEl(common) && intersects(common)) {
+            affected.push(common);
         }
-        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('[RTE] 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('[RTE] unwrap tag', el.tagName);
                 while (el.firstChild)
                     el.parentNode?.insertBefore(el.firstChild, el);
                 el.remove();
+                removedTags++;
                 continue;
             }
+            console.log('[RTE] remove style', cssPropKebab, 'from', el.tagName, el.getAttribute('style'));
             el.style.removeProperty(cssPropKebab);
+            if (!el.style.length) {
+                console.log('[RTE] removeInlineStyleInRange: style attribute now empty, removing attribute', el);
+                el.removeAttribute('style');
+            }
+            removedProps++;
             if (!el.getAttribute('style')) {
+                console.log('[RTE] unwrap empty styled span', el.tagName);
                 while (el.firstChild)
                     el.parentNode?.insertBefore(el.firstChild, el);
                 el.remove();
             }
         }
-        this.emitValue();
+        this.pruneDanglingStyleCarriers(common, cssPropKebab);
+        console.log('[RTE] removeInlineStyleInRange:done', { affected: affected.length, removedTags, removedProps });
+        let resultRange = null;
+        if (!options?.suppressEmit) {
+            this.emitValue();
+            resultRange = null;
+        }
+        else {
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0) {
+                resultRange = sel.getRangeAt(0).cloneRange();
+            }
+            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('[RTE] pruneDanglingStyleCarriers: removing empty carrier', { tag: el.tagName, style: el.getAttribute('style') });
+            if (el.tagName === 'B' || el.tagName === 'STRONG' || el.tagName === 'I' || el.tagName === 'EM' || el.tagName === 'U') {
+                el.remove();
+                continue;
+            }
+            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 +1558,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('[RTE] 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 +1579,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,18 +1598,10 @@ 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');
@@ -2062,7 +1947,7 @@ class StackchRichtextEditor {
         }
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StackchRichtextEditor, isStandalone: true, selector: "stackch-richtext-editor", inputs: { placeholder: "placeholder", showToolbar: "showToolbar", fonts: "fonts", fontSizes: "fontSizes", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", disabled: "disabled", config: "config" }, outputs: { valueChange: "valueChange", metricsChange: "metricsChange" }, host: { listeners: { "document:selectionchange": "onSelectionChange()", "document:click": "closeMenus()", "keydown": "onKeydown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => StackchRichtextEditor),
@@ -2097,6 +1982,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 }]