@stackch/angular-material-richtext-editor 1.0.0 → 1.2.0

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

@@ -344,6 +344,8 @@ class StackchRichtextEditorMaterial {
     get disabled() { return this._disabled; }
     _disabled = false;
     valueChange = new EventEmitter();
+    // Structured metrics event (future-proof)
+    metricsChange = new EventEmitter();
     editorRef;
     constructor(cdr) {
         this.cdr = cdr;
@@ -607,6 +609,8 @@ class StackchRichtextEditorMaterial {
         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; }
@@ -720,7 +724,8 @@ class StackchRichtextEditorMaterial {
             // 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();
@@ -732,8 +737,8 @@ class StackchRichtextEditorMaterial {
         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 {
@@ -814,12 +819,23 @@ class StackchRichtextEditorMaterial {
         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('[RTE-material] 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;
@@ -832,16 +848,28 @@ class StackchRichtextEditorMaterial {
                     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-material] cleanup: removing empty span', el);
+                    toRemove.push(el);
+                    continue;
+                }
+                if (el.attributes.length === 0) {
+                    console.log('[RTE-material] cleanup: unwrapping style-free span', el);
+                    toUnwrap.push(el);
+                }
             }
         }
         for (const span of toUnwrap) {
+            console.log('[RTE-material] 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-material] cleanup: remove span without children', span);
+            span.remove();
+        }
     }
     // History API
     get canUndo() { return this.historyIndex > 0; }
@@ -998,117 +1026,176 @@ class StackchRichtextEditorMaterial {
     }
     // 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 a generic, style-agnostic applier
+        this.applySelectionStyles({ [cssProp]: value });
     }
     applyInlineStyleSmart(cssProp, value) {
+        // Use generic, which handles single vs. multi-block selection
+        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-material] 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-material] 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-material] 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-material] 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);
+            }
+            else if (clearedRange) {
+                range = clearedRange;
+            }
+            if (range.collapsed && !beforeClear.collapsed) {
+                console.warn('[RTE-material] applySelectionStyles: range collapsed after clearing, restoring previous range');
+                const sel = window.getSelection();
+                if (sel) {
+                    sel.removeAllRanges();
+                    sel.addRange(beforeClear);
+                }
+                range = beforeClear;
             }
-            catch { }
         }
-        for (const el of styled) {
-            el.style[cssProp] = value;
+        const segments = this.collectTextSegments(range);
+        if (segments.length === 0) {
+            console.warn('[RTE-material] applySelectionStyles: no text segments found', {
+                entries,
+                commonAncestor: range.commonAncestorContainer
+            });
+            return;
+        }
+        console.log('[RTE-material] 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);
+            }
+            this.saveSelectionFromRange(newRange);
         }
         this.emitValue();
-        this.takeSnapshot('style-blocks');
+        this.takeSnapshot('style');
     }
-    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 = [];
+    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;
+        }
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
         while (walker.nextNode()) {
-            const el = walker.currentNode;
-            if (!isBlockTag(el.tagName))
+            const text = walker.currentNode;
+            if (!text.data)
                 continue;
-            try {
-                if (range.intersectsNode && range.intersectsNode(el))
-                    blocks.push(el);
-            }
-            catch { }
+            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 });
         }
-        return blocks;
+        return segments;
     }
-    // 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;
+    intersectsRange(range, node) {
+        try {
+            return range.intersectsNode ? range.intersectsNode(node) : true;
+        }
+        catch {
+            return false;
+        }
+    }
+    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);
+        }
+        try {
+            segRange.surroundContents(wrapper);
+            return this.mergeAdjacentStyledSpans(wrapper);
+        }
+        catch (err) {
+            console.error('[RTE-material] applyStylesToSegment: failed to surround contents', {
+                error: err,
+                segment,
+                entries
+            });
+        }
+        return null;
+    }
+    toCssProperty(prop) {
+        return prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+    mergeAdjacentStyledSpans(span) {
+        if (span.tagName !== 'SPAN')
+            return span;
+        let current = span;
+        const normalize = (el) => el && el.tagName === 'SPAN' ? el : null;
+        const styleText = (el) => (el ? el.getAttribute('style') || '' : '');
+        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;
+        }
+        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;
+        }
+        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;
     }
     isBoldCarrier(el) {
         if (!el)
@@ -1154,45 +1241,21 @@ class StackchRichtextEditorMaterial {
         }
         return null;
     }
-    splitCarrierAroundSelection(range, carrier) {
-        const parent = carrier.parentNode;
-        if (!parent)
-            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);
-            }
-            catch { }
-        }
+    isItalicCarrier(el) {
+        if (!el)
+            return false;
+        if (el.tagName === 'I' || el.tagName === 'EM')
+            return true;
+        const fs = el.style?.fontStyle || '';
+        return !!fs && fs !== 'normal';
+    }
+    isUnderlineCarrier(el) {
+        if (!el)
+            return false;
+        if (el.tagName === 'U')
+            return true;
+        const td = el.style?.textDecoration || el.style?.textDecorationLine || '';
+        return typeof td === 'string' && td.includes('underline');
     }
     // Unwrap bold formatting only for the selected content inside a containing bold ancestor by splitting it into left/selection/right parts
     deselectBoldBySplitting(range) {
@@ -1295,8 +1358,15 @@ class StackchRichtextEditorMaterial {
             // move siblings after `child` into right clone
             while (child.nextSibling)
                 right.appendChild(child.nextSibling);
-            // insert right after parent
-            parent.after(right);
+            // insert right after parent (avoid Document-level issues)
+            const pParent = parent.parentNode;
+            if (pParent && pParent.nodeType !== Node.DOCUMENT_NODE) {
+                pParent.insertBefore(right, parent.nextSibling);
+            }
+            else {
+                while (right.firstChild)
+                    parent.appendChild(right.firstChild);
+            }
             // ascend
             child = parent;
             parent = child.parentElement;
@@ -1314,6 +1384,19 @@ class StackchRichtextEditorMaterial {
         const gp = ancestor.parentNode;
         if (!gp)
             return;
+        if (gp.nodeType === Node.DOCUMENT_NODE) {
+            if (before.childNodes.length) {
+                while (before.firstChild)
+                    ancestor.parentNode?.insertBefore(before.firstChild, ancestor);
+            }
+            ancestor.parentNode?.insertBefore(node, ancestor);
+            if (after.childNodes.length) {
+                while (after.firstChild)
+                    ancestor.parentNode?.insertBefore(after.firstChild, ancestor);
+            }
+            ancestor.remove();
+            return;
+        }
         if (before.childNodes.length)
             gp.insertBefore(before, ancestor);
         // move node out, place where ancestor was
@@ -1322,39 +1405,8 @@ class StackchRichtextEditorMaterial {
             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);
-            }
-        }
-        for (const el of toRemove)
-            el.remove();
-    }
-    maybeUnwrapNormalSpan(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();
-            }
-        }
+    saveSelectionFromRange(range) {
+        this.savedRange = range.cloneRange();
     }
     wrapSelectionWith(tag, attrs) {
         const sel = window.getSelection();
@@ -1424,55 +1476,13 @@ class StackchRichtextEditorMaterial {
         catch { }
     }
     computeBoldAnyForRange(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.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;
@@ -1513,117 +1523,248 @@ class StackchRichtextEditorMaterial {
         }
         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) {
-        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 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;
+    removeInlineStyleInRange(range, cssPropKebab, options) {
+        const shouldRestoreSelection = options?.restoreSelection !== false;
+        this.isolateRangeFromStyleCarriers(range, cssPropKebab);
+        const editor = this.editorRef.nativeElement;
+        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 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-material] 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('[RTE-material] 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-material] unwrap tag', el.tagName);
                 while (el.firstChild)
                     el.parentNode?.insertBefore(el.firstChild, el);
                 el.remove();
+                removedTags++;
                 continue;
             }
+            console.log('[RTE-material] remove style', cssPropKebab, 'from', el.tagName, el.getAttribute('style'));
             el.style.removeProperty(cssPropKebab);
+            if (!el.style.length) {
+                console.log('[RTE-material] removeInlineStyleInRange: style attribute now empty, removing attribute', el);
+                el.removeAttribute('style');
+            }
+            removedProps++;
             if (!el.getAttribute('style')) {
+                console.log('[RTE-material] 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-material] 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 = [];
+        if (root instanceof HTMLElement && this.isStyleCarrier(root, cssPropKebab) && !this.elementHasVisibleContent(root)) {
+            toRemove.push(root);
+        }
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+        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-material] 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();
@@ -1635,45 +1776,11 @@ class StackchRichtextEditorMaterial {
         if (range.collapsed)
             this.expandRangeToWord(range);
         const anyActive = this.computeBoldAnyForRange(range);
-        const blocks = this.getIntersectingBlocks(range);
-        const multiBlock = blocks.length > 1;
         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');
@@ -1689,18 +1796,10 @@ class StackchRichtextEditorMaterial {
             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');
@@ -1716,18 +1815,10 @@ class StackchRichtextEditorMaterial {
             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');
@@ -2073,7 +2164,7 @@ class StackchRichtextEditorMaterial {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditorMaterial, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StackchRichtextEditorMaterial, isStandalone: true, selector: "stackch-richtext-editor-material", 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: StackchRichtextEditorMaterial, isStandalone: true, selector: "stackch-richtext-editor-material", 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(() => StackchRichtextEditorMaterial),
@@ -2108,6 +2199,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 }]