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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, forwardRef, HostListener, ViewChild } from '@angular/core';
+import { EventEmitter, Output, Input, Component, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/material/button';
@@ -12,6 +12,8 @@ import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
+import { StackchRichtextEditorBase } from '@stackch/angular-richtext-editor';
+export { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT, StackchRichtextEditorBase, StackchRichtextEditorConfig, StackchRichtextEditorI18n } from '@stackch/angular-richtext-editor';
 
 class StackchRichtextEditorMaterialToolbar {
     // State/config from parent editor
@@ -144,2033 +146,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }] } });
 
-class StackchRichtextEditorConfig {
-    // Sichtbarkeit einzelner Toolbar-Elemente (Default: an)
-    showUndoRedo = true;
-    showFontPanel = true;
-    showHeading = true;
-    showSpacing = true;
-    showColor = true;
-    showBold = true;
-    showItalic = true;
-    showUnderline = true;
-    showLists = true;
-    showAlign = true;
-    showLink = true;
-    showRemoveFormat = true;
-    // i18n overrides (partial), default is English
-    i18n;
-}
-class StackchRichtextEditorI18n {
-    // Generic
-    placeholder = 'Write…';
-    // Toolbar titles
-    undoTitle = 'Undo (Ctrl+Z)';
-    redoTitle = 'Redo (Ctrl+Y)';
-    fontPanelTitle = 'Font & Size';
-    fontSectionTitle = 'Font';
-    sizeSectionTitle = 'Size';
-    headingTitle = 'Heading';
-    spacingTitle = 'Spacing (Margin/Padding)';
-    marginTitle = 'Margin';
-    paddingTitle = 'Padding';
-    colorsTitle = 'Colors';
-    colorMenuTitle = 'Pick a color';
-    textColorTitle = 'Text color';
-    highlightTitle = 'Highlight';
-    boldTitle = 'Bold';
-    italicTitle = 'Italic';
-    underlineTitle = 'Underline';
-    listsTitle = 'Lists';
-    bulletListTitle = 'Bullet list';
-    numberedListTitle = 'Numbered list';
-    alignTitle = 'Alignment';
-    alignLeftTitle = 'Left';
-    alignCenterTitle = 'Center';
-    alignRightTitle = 'Right';
-    alignJustifyTitle = 'Justify';
-    linkTitle = 'Link';
-    removeFormatTitle = 'Remove format';
-    // Heading menu labels
-    paragraphLabel = 'Paragraph (P)';
-    codeLabel = 'Code (pre)';
-    h1Label = 'H1';
-    h2Label = 'H2';
-    h3Label = 'H3';
-    h4Label = 'H4';
-    h5Label = 'H5';
-    h6Label = 'H6';
-}
-// Predefined i18n bundles
-// Consumers can import these and pass via config.i18n to localize the toolbar/labels.
-const STACKCH_RTE_I18N_DE = {
-    // Generic
-    placeholder: 'Schreiben…',
-    // Toolbar titles
-    undoTitle: 'Rückgängig (Strg+Z)',
-    redoTitle: 'Wiederholen (Strg+Y)',
-    fontPanelTitle: 'Schrift & Größe',
-    fontSectionTitle: 'Schrift',
-    sizeSectionTitle: 'Größe',
-    headingTitle: 'Überschrift',
-    spacingTitle: 'Abstand (Außen/Innen)',
-    marginTitle: 'Außenabstand',
-    paddingTitle: 'Innenabstand',
-    colorsTitle: 'Farben',
-    colorMenuTitle: 'Farbe wählen',
-    textColorTitle: 'Textfarbe',
-    highlightTitle: 'Hervorheben',
-    boldTitle: 'Fett',
-    italicTitle: 'Kursiv',
-    underlineTitle: 'Unterstreichen',
-    listsTitle: 'Listen',
-    bulletListTitle: 'Aufzählung',
-    numberedListTitle: 'Nummeriert',
-    alignTitle: 'Ausrichtung',
-    alignLeftTitle: 'Links',
-    alignCenterTitle: 'Zentriert',
-    alignRightTitle: 'Rechts',
-    alignJustifyTitle: 'Blocksatz',
-    linkTitle: 'Link',
-    removeFormatTitle: 'Formatierung entfernen',
-    // Heading menu labels
-    paragraphLabel: 'Absatz (P)',
-    codeLabel: 'Code (pre)',
-    h1Label: 'H1',
-    h2Label: 'H2',
-    h3Label: 'H3',
-    h4Label: 'H4',
-    h5Label: 'H5',
-    h6Label: 'H6',
-};
-const STACKCH_RTE_I18N_FR = {
-    // Generic
-    placeholder: 'Écrire…',
-    // Toolbar titles
-    undoTitle: 'Annuler (Ctrl+Z)',
-    redoTitle: 'Rétablir (Ctrl+Y)',
-    fontPanelTitle: 'Police et taille',
-    fontSectionTitle: 'Police',
-    sizeSectionTitle: 'Taille',
-    headingTitle: 'Titre',
-    spacingTitle: 'Espacement (Marge/Remplissage)',
-    marginTitle: 'Marge',
-    paddingTitle: 'Remplissage',
-    colorsTitle: 'Couleurs',
-    colorMenuTitle: 'Choisir une couleur',
-    textColorTitle: 'Couleur du texte',
-    highlightTitle: 'Surligner',
-    boldTitle: 'Gras',
-    italicTitle: 'Italique',
-    underlineTitle: 'Souligné',
-    listsTitle: 'Listes',
-    bulletListTitle: 'Liste à puces',
-    numberedListTitle: 'Liste numérotée',
-    alignTitle: 'Alignement',
-    alignLeftTitle: 'Gauche',
-    alignCenterTitle: 'Centré',
-    alignRightTitle: 'Droite',
-    alignJustifyTitle: 'Justifié',
-    linkTitle: 'Lien',
-    removeFormatTitle: 'Effacer la mise en forme',
-    // Heading menu labels
-    paragraphLabel: 'Paragraphe (P)',
-    codeLabel: 'Code (pre)',
-    h1Label: 'H1',
-    h2Label: 'H2',
-    h3Label: 'H3',
-    h4Label: 'H4',
-    h5Label: 'H5',
-    h6Label: 'H6',
-};
-const STACKCH_RTE_I18N_IT = {
-    // Generic
-    placeholder: 'Scrivi…',
-    // Toolbar titles
-    undoTitle: 'Annulla (Ctrl+Z)',
-    redoTitle: 'Ripristina (Ctrl+Y)',
-    fontPanelTitle: 'Carattere e dimensione',
-    fontSectionTitle: 'Carattere',
-    sizeSectionTitle: 'Dimensione',
-    headingTitle: 'Titolo',
-    spacingTitle: 'Spaziatura (Margine/Riempimento)',
-    marginTitle: 'Margine',
-    paddingTitle: 'Riempimento',
-    colorsTitle: 'Colori',
-    colorMenuTitle: 'Scegli un colore',
-    textColorTitle: 'Colore del testo',
-    highlightTitle: 'Evidenzia',
-    boldTitle: 'Grassetto',
-    italicTitle: 'Corsivo',
-    underlineTitle: 'Sottolineato',
-    listsTitle: 'Elenchi',
-    bulletListTitle: 'Elenco puntato',
-    numberedListTitle: 'Elenco numerato',
-    alignTitle: 'Allineamento',
-    alignLeftTitle: 'Sinistra',
-    alignCenterTitle: 'Centrato',
-    alignRightTitle: 'Destra',
-    alignJustifyTitle: 'Giustificato',
-    linkTitle: 'Collegamento',
-    removeFormatTitle: 'Rimuovi formattazione',
-    // Heading menu labels
-    paragraphLabel: 'Paragrafo (P)',
-    codeLabel: 'Codice (pre)',
-    h1Label: 'H1',
-    h2Label: 'H2',
-    h3Label: 'H3',
-    h4Label: 'H4',
-    h5Label: 'H5',
-    h6Label: 'H6',
-};
-class StackchRichtextEditorMaterial {
-    cdr;
-    placeholder = '';
-    showToolbar = true;
-    fonts = [
-        'Arial, Helvetica, sans-serif',
-        'Georgia, serif',
-        'Times New Roman, Times, serif',
-        'Trebuchet MS, sans-serif',
-        'Verdana, Geneva, sans-serif',
-        'Courier New, Courier, monospace',
-        'Monaco, monospace'
-    ];
-    fontSizes = [12, 14, 16, 18, 20, 24, 28, 32];
-    height;
-    minHeight = 160;
-    maxHeight;
-    set disabled(value) { this._disabled = value; }
-    get disabled() { return this._disabled; }
-    _disabled = false;
-    valueChange = new EventEmitter();
-    // Structured metrics event (future-proof)
-    metricsChange = new EventEmitter();
-    editorRef;
+class StackchRichtextEditorMaterial extends StackchRichtextEditorBase {
+    logPrefix = '[RTE-material]';
     constructor(cdr) {
-        this.cdr = cdr;
-    }
-    // Toolbar-Konfiguration (default: alles an). Wir halten die übergebene Referenz
-    // und mergen Defaults im Getter, damit auch Eigenschaftsänderungen via ngModel sofort wirken.
-    config;
-    get cfg() {
-        return Object.assign(new StackchRichtextEditorConfig(), this.config || {});
-    }
-    get i18n() {
-        return Object.assign(new StackchRichtextEditorI18n(), this.cfg.i18n || {});
-    }
-    onChange = () => { };
-    onTouched = () => { };
-    savedRange = null;
-    // History (Undo/Redo)
-    history = [];
-    historyIndex = -1;
-    isRestoringHistory = false;
-    snapshotTimer = null;
-    // UI state for compact dropdowns / panel
-    showFontMenu = false;
-    showSizeMenu = false;
-    showFontPanel = false;
-    showHeadingMenu = false;
-    showSpacingMenu = false;
-    showAlignMenu = false;
-    showColorMenu = false;
-    showListMenu = false;
-    // Inline state flags for active buttons
-    isBoldActive = false;
-    isItalicActive = false;
-    isUnderlineActive = false;
-    // Selection helpers
-    saveSelection() {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        if (!this.isRangeInEditor(range))
-            return;
-        this.savedRange = range.cloneRange();
-        this.updateInlineStates();
-    }
-    // Prevent toolbar buttons from stealing focus from the editor while preserving selection
-    onToolbarMouseDown(evt) {
-        // Keep focus on the editor to avoid persistent button focus outlines
-        evt.preventDefault();
-        evt.stopPropagation();
-        this.saveSelection();
-    }
-    // Beim Öffnen des Color-Pickers: Selektion sichern
-    onColorPointerDown(_evt) {
-        this.saveSelection();
-    }
-    restoreSelection() {
-        const sel = window.getSelection();
-        if (!sel || !this.savedRange)
-            return;
-        if (!this.isRangeInEditor(this.savedRange))
-            return;
-        sel.removeAllRanges();
-        sel.addRange(this.savedRange);
-    }
-    isRangeInEditor(range) {
-        const editor = this.editorRef?.nativeElement;
-        if (!editor)
-            return false;
-        const container = range.commonAncestorContainer;
-        const node = container.nodeType === Node.ELEMENT_NODE ? container : container.parentElement;
-        return !!node && editor.contains(node);
-    }
-    // Update active-state on selection changes inside the editor
-    onSelectionChange() {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        if (!this.isRangeInEditor(range))
-            return;
-        this.updateInlineStates();
-    }
-    // Close dropdowns when clicking anywhere in the document
-    closeMenus() {
-        this.showFontMenu = false;
-        this.showSizeMenu = false;
-        this.showFontPanel = false;
-        this.showHeadingMenu = false;
-        this.showSpacingMenu = false;
-        this.showAlignMenu = false;
-        this.showColorMenu = false;
-        this.showListMenu = false;
-    }
-    // Keyboard: Undo/Redo
-    onKeydown(evt) {
-        const isMac = navigator.platform.toLowerCase().includes('mac');
-        const mod = isMac ? evt.metaKey : evt.ctrlKey;
-        if (mod && !evt.shiftKey && (evt.key === 'z' || evt.key === 'Z')) {
-            evt.preventDefault();
-            this.undo();
-        }
-        else if (mod && (evt.key === 'y' || evt.key === 'Y' || (evt.shiftKey && (evt.key === 'z' || evt.key === 'Z')))) {
-            evt.preventDefault();
-            this.redo();
-        }
-    }
-    toggleFontMenu(evt) {
-        this.saveSelection();
-        this.showFontMenu = !this.showFontMenu;
-        if (this.showFontMenu)
-            this.showSizeMenu = false;
-        evt.stopPropagation();
-    }
-    toggleSizeMenu(evt) {
-        this.saveSelection();
-        this.showSizeMenu = !this.showSizeMenu;
-        if (this.showSizeMenu)
-            this.showFontMenu = false;
-        evt.stopPropagation();
-    }
-    toggleFontPanel(evt) {
-        this.saveSelection();
-        this.showFontPanel = !this.showFontPanel;
-        // close others if open
-        if (this.showFontPanel) {
-            this.showFontMenu = false;
-            this.showSizeMenu = false;
-            this.showHeadingMenu = false;
-            this.showSpacingMenu = false;
-            this.showAlignMenu = false;
-            this.showColorMenu = false;
-        }
-        evt.stopPropagation();
-    }
-    toggleHeadingMenu(evt) {
-        this.saveSelection();
-        this.showHeadingMenu = !this.showHeadingMenu;
-        if (this.showHeadingMenu) {
-            this.showFontMenu = false;
-            this.showSizeMenu = false;
-            this.showFontPanel = false;
-            this.showSpacingMenu = false;
-            this.showAlignMenu = false;
-            this.showColorMenu = false;
-        }
-        evt.stopPropagation();
-    }
-    toggleSpacingMenu(evt) {
-        this.saveSelection();
-        this.showSpacingMenu = !this.showSpacingMenu;
-        if (this.showSpacingMenu) {
-            this.showFontPanel = false;
-            this.showHeadingMenu = false;
-            this.showAlignMenu = false;
-            this.showColorMenu = false;
-        }
-        evt.stopPropagation();
-    }
-    toggleAlignMenu(evt) {
-        this.saveSelection();
-        this.showAlignMenu = !this.showAlignMenu;
-        if (this.showAlignMenu) {
-            this.showFontMenu = false;
-            this.showSizeMenu = false;
-            this.showFontPanel = false;
-            this.showHeadingMenu = false;
-            this.showSpacingMenu = false;
-            this.showColorMenu = false;
-            this.showListMenu = false;
-        }
-        evt.stopPropagation();
-    }
-    toggleColorMenu(evt) {
-        this.saveSelection();
-        this.showColorMenu = !this.showColorMenu;
-        if (this.showColorMenu) {
-            this.showFontMenu = false;
-            this.showSizeMenu = false;
-            this.showFontPanel = false;
-            this.showHeadingMenu = false;
-            this.showSpacingMenu = false;
-            this.showAlignMenu = false;
-            this.showListMenu = false;
-        }
-        evt.stopPropagation();
-    }
-    toggleListMenu(evt) {
-        this.saveSelection();
-        this.showListMenu = !this.showListMenu;
-        if (this.showListMenu) {
-            this.showFontMenu = false;
-            this.showSizeMenu = false;
-            this.showFontPanel = false;
-            this.showHeadingMenu = false;
-            this.showSpacingMenu = false;
-            this.showAlignMenu = false;
-            this.showColorMenu = false;
-        }
-        evt.stopPropagation();
-    }
-    onPickAlign(where) {
-        this.focusEditor();
-        this.restoreSelection();
-        this.alignBlocks(where);
-        this.showAlignMenu = false;
-        this.emitValue();
-        this.takeSnapshot('align');
-    }
-    onPickFont(font) {
-        if (!font)
-            return;
-        this.focusEditor();
-        this.restoreSelection();
-        this.applyInlineStyle('fontFamily', font);
-        this.showFontMenu = false;
-    }
-    onPickFontSize(size) {
-        if (!Number.isFinite(size))
-            return;
-        this.focusEditor();
-        this.restoreSelection();
-        this.applyInlineStyle('fontSize', `${size}px`);
-        this.showSizeMenu = false;
-    }
-    onPickList(kind) {
-        this.focusEditor();
-        this.restoreSelection();
-        this.toggleList(kind);
-        this.showListMenu = false;
-        this.emitValue();
-        this.takeSnapshot('list');
-    }
-    onPickHeading(tag) {
-        this.focusEditor();
-        this.restoreSelection();
-        this.setHeading(tag);
-        this.showHeadingMenu = false;
-        this.emitValue();
-        this.takeSnapshot('heading');
-    }
-    onPickSpacing(kind, target, value) {
-        this.focusEditor();
-        this.restoreSelection();
-        // Bevorzugt: direkt auf die Selektion anwenden (inline Wrapper)
-        if (!this.applySpacingToSelection(kind, target, value)) {
-            // Fallback: Block-Spacing, wenn Auswahl blockübergreifend ist
-            this.setBlockSpacing(kind, target, value);
-        }
-        this.showSpacingMenu = false;
-        this.emitValue();
-        this.takeSnapshot('spacing');
-    }
-    // ControlValueAccessor
-    writeValue(value) {
-        const el = this.editorRef?.nativeElement;
-        if (!el)
-            return;
-        el.innerHTML = value || '';
-        // Initial snapshot nur einmal anlegen
-        if (this.history.length === 0) {
-            this.takeSnapshot('init');
-        }
-        // Emit initial metrics when value is written programmatically
-        this.emitMetrics();
-    }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(isDisabled) { this.disabled = isDisabled; }
-    // Toolbar actions using document.execCommand (deprecated but broadly supported)
-    cmd(command, value) {
-        // Restore last selection from editor before applying an action triggered by toolbar
-        this.focusEditor();
-        this.restoreSelection();
-        // Bevorzugt: eigene Range-basierte Implementierungen
-        switch (command) {
-            case 'bold':
-                this.applyInlineStyleSmart('fontWeight', 'bold');
-                return;
-            case 'italic':
-                this.applyInlineStyleSmart('fontStyle', 'italic');
-                return;
-            case 'underline':
-                this.applyInlineStyleSmart('textDecoration', 'underline');
-                return;
-            case 'foreColor':
-                this.applyInlineStyle('color', value || '');
-                return;
-            case 'hiliteColor':
-            case 'backColor':
-                this.applyInlineStyle('backgroundColor', value || '');
-                return;
-            case 'createLink':
-                if (value) {
-                    this.wrapSelectionWith('a', { href: value });
-                    this.emitValue();
-                    this.takeSnapshot('link');
-                }
-                return;
-            case 'insertText': {
-                const text = value ?? '';
-                this.insertTextAtSelection(text);
-                this.emitValue();
-                this.takeSnapshot('insertText');
-                return;
-            }
-            case 'insertUnorderedList':
-                this.toggleList('ul');
-                this.emitValue();
-                this.takeSnapshot('list');
-                return;
-            case 'insertOrderedList':
-                this.toggleList('ol');
-                this.emitValue();
-                this.takeSnapshot('list');
-                return;
-            case 'justifyLeft':
-                this.alignBlocks('left');
-                this.emitValue();
-                this.takeSnapshot('align');
-                return;
-            case 'justifyCenter':
-                this.alignBlocks('center');
-                this.emitValue();
-                this.takeSnapshot('align');
-                return;
-            case 'justifyRight':
-                this.alignBlocks('right');
-                this.emitValue();
-                this.takeSnapshot('align');
-                return;
-            case 'justifyFull':
-                this.alignBlocks('justify');
-                this.emitValue();
-                this.takeSnapshot('align');
-                return;
-        }
-        // Fallback (deprecated): nur für Format entfernen / Links lösen als Übergang
-        try {
-            // Hinweis im Dev-Mode ausgeben
-            if (!('___rteWarned' in this)) {
-                console.warn('[richtext-editor] document.execCommand ist deprecated; Fallback wird nur für removeFormat/unlink verwendet.');
-                this.___rteWarned = true;
-            }
-            if (command === 'removeFormat' || command === 'unlink') {
-                document.execCommand(command, false, value);
-            }
-        }
-        catch {
-            // Ignorieren, wenn nicht unterstützt
-        }
-        this.emitValue();
-        this.takeSnapshot('fallback');
-    }
-    applyFont(font) {
-        if (!font)
-            return;
-        this.applyInlineStyle('fontFamily', font);
-    }
-    applyFontSize(sizePx) {
-        if (!sizePx)
-            return;
-        const size = Number(sizePx);
-        if (!Number.isFinite(size))
-            return;
-        this.applyInlineStyle('fontSize', `${size}px`);
-    }
-    applyColor(color) {
-        this.focusEditor();
-        this.restoreSelection();
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const r = sel.getRangeAt(0);
-        if (r.collapsed) {
-            // Firefox/Edge: wenn keine explizite Auswahl, erweitere auf nächstes Wort
-            this.expandRangeToWord(r);
-        }
-        this.applySelectionStyles({ color });
-        this.saveSelection();
-    }
-    applyHighlight(color) {
-        this.focusEditor();
-        this.restoreSelection();
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const r = sel.getRangeAt(0);
-        if (r.collapsed) {
-            this.expandRangeToWord(r);
-        }
-        this.applySelectionStyles({ backgroundColor: color });
-        this.saveSelection();
-    }
-    expandRangeToWord(range) {
-        try {
-            const editor = this.editorRef.nativeElement;
-            let node = range.startContainer;
-            if (node.nodeType !== Node.TEXT_NODE) {
-                // Versuche, einen Textknoten in der Nähe zu finden
-                const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
-                let found = null;
-                while (walker.nextNode()) {
-                    const n = walker.currentNode;
-                    if (n.parentElement && editor.contains(n.parentElement)) {
-                        found = n;
-                        break;
-                    }
-                }
-                if (found)
-                    node = found;
-            }
-            const text = node.nodeType === Node.TEXT_NODE ? node.data : '';
-            let start = 0, end = text.length;
-            // einfache Wortgrenzen-Heuristik
-            const pos = range.startOffset;
-            for (let i = pos; i > 0; i--) {
-                if (/\s/.test(text[i - 1])) {
-                    start = i;
-                    break;
-                }
-            }
-            for (let i = pos; i < text.length; i++) {
-                if (/\s/.test(text[i])) {
-                    end = i;
-                    break;
-                }
-            }
-            range.setStart(node, start);
-            range.setEnd(node, end);
-            const sel = window.getSelection();
-            if (sel) {
-                sel.removeAllRanges();
-                sel.addRange(range);
-            }
-        }
-        catch { /* noop */ }
-    }
-    insertLink() {
-        const url = prompt('Link-URL eingeben:', 'https://');
-        if (url) {
-            this.cmd('createLink', url);
-        }
-    }
-    removeFormat() {
-        this.cmd('removeFormat');
-        this.cmd('unlink');
-    }
-    onInput() {
-        this.emitValue();
-        this.scheduleSnapshot();
-    }
-    onKeyup(_evt) {
-        this.saveSelection();
-        this.emitValue();
-        this.updateInlineStates();
-    }
-    onPaste(evt) {
-        // Optional: Clean paste to plain text while keeping basic formatting minimal.
-        if (!evt.clipboardData)
-            return;
-        evt.preventDefault();
-        const text = evt.clipboardData.getData('text/plain');
-        this.insertTextAtSelection(text);
-        this.emitValue();
-        this.takeSnapshot('paste');
-    }
-    emitValue() {
-        // Clean up empty style attributes and redundant spans before emitting
-        this.cleanupEmptyStylesAndSpans();
-        const val = this.editorRef.nativeElement.innerHTML;
-        this.onChange(val);
-        this.valueChange.emit(val);
-        this.emitMetrics();
-        this.updateInlineStates();
-    }
-    emitMetrics() {
-        const editor = this.editorRef?.nativeElement;
-        if (!editor)
-            return;
-        const htmlLen = editor.innerHTML.length;
-        const textLen = (editor.textContent || '').length;
-        this.metricsChange.emit({ htmlLength: htmlLen, textLength: textLen });
-    }
-    // Remove empty style attributes (style="") and unwrap spans without any attributes
-    cleanupEmptyStylesAndSpans(root) {
-        console.log('[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;
-            if (el.hasAttribute('style')) {
-                // If no style declarations remain, drop the attribute
-                const cssText = el.getAttribute('style') || '';
-                const byApiEmpty = (el.style ? el.style.length === 0 : false);
-                const normalized = cssText.replace(/[\s;]/g, '');
-                if (byApiEmpty || normalized.length === 0) {
-                    el.removeAttribute('style');
-                }
-            }
-            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; }
-    get canRedo() { return this.historyIndex >= 0 && this.historyIndex < this.history.length - 1; }
-    undo() {
-        if (!this.canUndo)
-            return;
-        this.applySnapshot(this.historyIndex - 1);
-    }
-    redo() {
-        if (!this.canRedo)
-            return;
-        this.applySnapshot(this.historyIndex + 1);
-    }
-    scheduleSnapshot() {
-        if (this.isRestoringHistory)
-            return;
-        if (this.snapshotTimer)
-            clearTimeout(this.snapshotTimer);
-        this.snapshotTimer = setTimeout(() => this.takeSnapshot('input'), 250);
-    }
-    takeSnapshot(_reason) {
-        if (this.isRestoringHistory)
-            return;
-        const editor = this.editorRef.nativeElement;
-        const html = editor.innerHTML;
-        const sel = window.getSelection();
-        let rangeData = null;
-        if (sel && sel.rangeCount > 0) {
-            const r = sel.getRangeAt(0);
-            if (this.isRangeInEditor(r)) {
-                const ser = this.serializeRange(r);
-                if (ser)
-                    rangeData = ser;
-            }
-        }
-        // Verhindere Duplikate nacheinander
-        const last = this.history[this.historyIndex];
-        if (last && last.html === html)
-            return;
-        // Zukunft verwerfen bei neuem Snapshot
-        if (this.historyIndex < this.history.length - 1) {
-            this.history = this.history.slice(0, this.historyIndex + 1);
-        }
-        this.history.push({ html, range: rangeData });
-        this.historyIndex = this.history.length - 1;
-        // Begrenze Historie
-        const MAX = 50;
-        if (this.history.length > MAX) {
-            const drop = this.history.length - MAX;
-            this.history.splice(0, drop);
-            this.historyIndex -= drop;
-            if (this.historyIndex < 0)
-                this.historyIndex = 0;
-        }
-    }
-    applySnapshot(index) {
-        if (index < 0 || index >= this.history.length)
-            return;
-        const snap = this.history[index];
-        const editor = this.editorRef.nativeElement;
-        this.isRestoringHistory = true;
-        editor.innerHTML = snap.html;
-        // Selektion wiederherstellen
-        if (snap.range) {
-            this.restoreSerializedRange(snap.range);
-        }
-        else {
-            // Cursor ans Ende
-            const sel = window.getSelection();
-            if (sel) {
-                sel.removeAllRanges();
-                const r = document.createRange();
-                r.selectNodeContents(editor);
-                r.collapse(false);
-                sel.addRange(r);
-            }
-        }
-        this.historyIndex = index;
-        this.isRestoringHistory = false;
-        // Werte emittieren nach Restore
-        this.emitValue();
-    }
-    serializeRange(range) {
-        const s = this.nodePathFromNode(range.startContainer);
-        const e = this.nodePathFromNode(range.endContainer);
-        if (!s || !e)
-            return null;
-        return {
-            startPath: s,
-            startOffset: range.startOffset,
-            endPath: e,
-            endOffset: range.endOffset,
-        };
-    }
-    restoreSerializedRange(data) {
-        const editor = this.editorRef.nativeElement;
-        const startNode = this.nodeFromPath(data.startPath);
-        const endNode = this.nodeFromPath(data.endPath);
-        if (!startNode || !endNode)
-            return;
-        const r = document.createRange();
-        try {
-            r.setStart(startNode, Math.min(data.startOffset, this.maxOffset(startNode)));
-            r.setEnd(endNode, Math.min(data.endOffset, this.maxOffset(endNode)));
-        }
-        catch {
-            r.selectNodeContents(editor);
-            r.collapse(false);
-        }
-        const sel = window.getSelection();
-        if (sel) {
-            sel.removeAllRanges();
-            sel.addRange(r);
-        }
-    }
-    nodePathFromNode(node) {
-        const editor = this.editorRef.nativeElement;
-        const path = [];
-        let n = node;
-        while (n && n !== editor) {
-            const pnode = n.parentNode;
-            if (!pnode)
-                return null;
-            const idx = Array.prototype.indexOf.call(pnode.childNodes, n);
-            path.push(idx);
-            n = pnode;
-        }
-        if (n !== editor)
-            return null;
-        path.reverse();
-        return path;
-    }
-    nodeFromPath(path) {
-        const editor = this.editorRef.nativeElement;
-        let n = editor;
-        for (const idx of path) {
-            if (!n.childNodes || idx < 0 || idx >= n.childNodes.length)
-                return null;
-            n = n.childNodes[idx];
-        }
-        return n;
-    }
-    maxOffset(node) {
-        if (node.nodeType === Node.TEXT_NODE)
-            return node.data.length;
-        return node.childNodes.length;
-    }
-    focusEditor() {
-        const el = this.editorRef.nativeElement;
-        if (document.activeElement !== el) {
-            el.focus();
-        }
-    }
-    // Minimal inline style applier for inline styles
-    applyInlineStyle(cssProp, value) {
-        // 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) {
-            console.warn('[RTE-material] applySelectionStyles: no selection available', { styles });
-            return;
-        }
-        let range = sel.getRangeAt(0);
-        if (range.collapsed) {
-            console.warn('[RTE-material] applySelectionStyles: range is collapsed', { styles });
-            return;
-        }
-        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;
-        }
-        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;
-            }
-        }
-        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');
-    }
-    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 text = walker.currentNode;
-            if (!text.data)
-                continue;
-            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 segments;
-    }
-    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)
-            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;
-            }
-            el = el.parentElement;
-        }
-        return null;
-    }
-    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) {
-        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);
-        }
-        for (const el of toRemove)
-            el.remove();
-    }
-    cleanupEmptyUnderlineSpans(root) {
-        const toRemove = [];
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
-        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)
-                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);
-        }
-        for (const el of toRemove)
-            el.remove();
-    }
-    // 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);
-        }
-        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();
-                }
-            }
-        }
-    }
-    // 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 (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;
-        }
-        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 (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
-        gp.insertBefore(node, ancestor);
-        if (after.childNodes.length)
-            gp.insertBefore(after, ancestor);
-        ancestor.remove();
-    }
-    saveSelectionFromRange(range) {
-        this.savedRange = range.cloneRange();
-    }
-    wrapSelectionWith(tag, attrs) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
-            return;
-        const el = document.createElement(tag);
-        if (attrs) {
-            for (const [k, v] of Object.entries(attrs)) {
-                if (v != null)
-                    el.setAttribute(k, v);
-            }
-        }
-        const frag = range.extractContents();
-        el.appendChild(frag);
-        range.insertNode(el);
-        // Auswahl hinter das Element setzen
-        sel.removeAllRanges();
-        const after = document.createRange();
-        after.setStartAfter(el);
-        after.collapse(true);
-        sel.addRange(after);
-    }
-    insertTextAtSelection(text) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        range.deleteContents();
-        const node = document.createTextNode(text);
-        range.insertNode(node);
-        // Cursor ans Ende des eingefügten Textes
-        sel.removeAllRanges();
-        const after = document.createRange();
-        after.setStartAfter(node);
-        after.collapse(true);
-        sel.addRange(after);
-    }
-    // ----- Inline toggle logic (Bold/Italic/Underline) -----
-    updateInlineStates() {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0) {
-            this.isBoldActive = this.isItalicActive = this.isUnderlineActive = false;
-            return;
-        }
-        const range = sel.getRangeAt(0);
-        if (!this.isRangeInEditor(range)) {
-            this.isBoldActive = this.isItalicActive = this.isUnderlineActive = false;
-            return;
-        }
-        if (range.collapsed) {
-            const node = range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement;
-            this.isBoldActive = this.isNodeBold(node);
-            this.isItalicActive = this.isNodeItalic(node);
-            this.isUnderlineActive = this.isNodeUnderline(node);
-            return;
-        }
-        this.isBoldActive = this.computeBoldAnyForRange(range);
-        this.isItalicActive = this.computeItalicAnyForRange(range);
-        this.isUnderlineActive = this.computeUnderlineAnyForRange(range);
-        // ensure UI reflects changes immediately
-        try {
-            this.cdr.detectChanges();
-        }
-        catch { }
-    }
-    computeBoldAnyForRange(range) {
-        return this.selectionHasStyle(range, 'font-weight');
-    }
-    computeItalicAnyForRange(range) {
-        return this.selectionHasStyle(range, 'font-style');
-    }
-    computeUnderlineAnyForRange(range) {
-        return this.selectionHasStyle(range, 'text-decoration');
-    }
-    isNodeBold(node) {
-        let el = node;
-        while (el) {
-            if (el.tagName === 'B' || el.tagName === 'STRONG')
-                return true;
-            const cs = getComputedStyle(el);
-            if (cs.fontWeight && cs.fontWeight !== 'normal' && cs.fontWeight !== '400') {
-                const w = cs.fontWeight === 'bold' ? 700 : parseInt(cs.fontWeight, 10);
-                if (!Number.isNaN(w) && w >= 600)
-                    return true;
-            }
-            el = el.parentElement;
-        }
-        return false;
-    }
-    isNodeItalic(node) {
-        let el = node;
-        while (el) {
-            if (el.tagName === 'I' || el.tagName === 'EM')
-                return true;
-            const cs = getComputedStyle(el);
-            if (cs.fontStyle && cs.fontStyle !== 'normal')
-                return true;
-            el = el.parentElement;
-        }
-        return false;
-    }
-    isNodeUnderline(node) {
-        let el = node;
-        while (el) {
-            if (el.tagName === 'U')
-                return true;
-            const cs = getComputedStyle(el);
-            if (cs.textDecorationLine && cs.textDecorationLine.includes('underline'))
-                return true;
-            el = el.parentElement;
-        }
-        return false;
-    }
-    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 {
-                return effectiveRange.intersectsNode ? effectiveRange.intersectsNode(node) : true;
-            }
-            catch {
-                return false;
-            }
-        };
-        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);
-        }
-        const walker = document.createTreeWalker(common, NodeFilter.SHOW_ELEMENT);
-        while (walker.nextNode()) {
-            const el = walker.currentNode;
-            if (!matchesEl(el))
-                continue;
-            if (intersects(el)) {
-                affected.push(el);
-                console.log('[RTE-material] removeInlineStyleInRange:match', el.tagName, el.getAttribute('style'));
-            }
-        }
-        let removedTags = 0;
-        let removedProps = 0;
-        for (const el of affected) {
-            if (el.tagName === 'B' || el.tagName === 'STRONG' || el.tagName === 'I' || el.tagName === 'EM' || el.tagName === 'U') {
-                console.log('[RTE-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.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();
-        this.restoreSelection();
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
-            this.expandRangeToWord(range);
-        const anyActive = this.computeBoldAnyForRange(range);
-        if (anyActive) {
-            this.removeInlineStyleInRange(range, 'font-weight');
-        }
-        else {
-            this.applySelectionStyles({ fontWeight: 'bold' });
-        }
-        this.updateInlineStates();
-        this.takeSnapshot('toggle-bold');
-    }
-    toggleItalic() {
-        this.focusEditor();
-        this.restoreSelection();
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
-            this.expandRangeToWord(range);
-        const anyActive = this.computeItalicAnyForRange(range);
-        if (anyActive) {
-            this.removeInlineStyleInRange(range, 'font-style');
-        }
-        else {
-            this.applySelectionStyles({ fontStyle: 'italic' });
-        }
-        this.updateInlineStates();
-        this.takeSnapshot('toggle-italic');
-    }
-    toggleUnderline() {
-        this.focusEditor();
-        this.restoreSelection();
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
-            this.expandRangeToWord(range);
-        const anyActive = this.computeUnderlineAnyForRange(range);
-        if (anyActive) {
-            this.removeInlineStyleInRange(range, 'text-decoration');
-        }
-        else {
-            this.applySelectionStyles({ textDecoration: 'underline' });
-        }
-        this.updateInlineStates();
-        this.takeSnapshot('toggle-underline');
-    }
-    getCurrentRange() {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return null;
-        const range = sel.getRangeAt(0);
-        return this.isRangeInEditor(range) ? range : null;
-    }
-    getEditorChildAncestor(node) {
-        const editor = this.editorRef.nativeElement;
-        let el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
-        while (el && el.parentElement && el.parentElement !== editor) {
-            el = el.parentElement;
-        }
-        // Wenn direktes Kind des Editors
-        if (el && el.parentElement === editor)
-            return el;
-        return editor;
-    }
-    findClosest(node, selector) {
-        let el = node && node.nodeType === 1 ? node : node?.parentElement ?? null;
-        while (el) {
-            if (el.matches(selector))
-                return el;
-            el = el.parentElement;
-        }
-        return null;
-    }
-    toggleList(kind) {
-        const range = this.getCurrentRange();
-        if (!range)
-            return;
-        const editor = this.editorRef.nativeElement;
-        // Wenn bereits in einer Liste, Liste aufheben
-        const listAncestor = this.findClosest(range.commonAncestorContainer, 'ul,ol');
-        if (listAncestor) {
-            // unwrap: li-Inhalte an die Stelle der Liste setzen
-            const frag = document.createDocumentFragment();
-            const items = Array.from(listAncestor.children); // li
-            for (const li of items) {
-                while (li.firstChild)
-                    frag.appendChild(li.firstChild);
-                // Optional: Zeilenumbruch zwischen Items
-                frag.appendChild(document.createElement('br'));
-            }
-            listAncestor.replaceWith(frag);
-            return;
-        }
-        // Neue Liste um die aktuelle Auswahl legen
-        const list = document.createElement(kind);
-        const li = document.createElement('li');
-        const contents = range.extractContents();
-        if (!contents.hasChildNodes()) {
-            li.textContent = '\u200b'; // zero-width space um leere li zu vermeiden
-        }
-        else {
-            li.appendChild(contents);
-        }
-        list.appendChild(li);
-        range.insertNode(list);
-        // Cursor ins li setzen
-        const sel = window.getSelection();
-        if (sel) {
-            sel.removeAllRanges();
-            const after = document.createRange();
-            after.selectNodeContents(li);
-            after.collapse(false);
-            sel.addRange(after);
-        }
-    }
-    alignBlocks(align) {
-        const range = this.getCurrentRange();
-        if (!range)
-            return;
-        const startBlock = this.getEditorChildAncestor(range.startContainer);
-        const endBlock = this.getEditorChildAncestor(range.endContainer);
-        const editor = this.editorRef.nativeElement;
-        const applyAlign = (el) => {
-            if (!el)
-                return;
-            el.style.textAlign = align;
-        };
-        if (startBlock === endBlock) {
-            applyAlign(startBlock);
-        }
-        else {
-            // grob: alle direkten Kinder zwischen start und end ausrichten
-            const children = Array.from(editor.children);
-            const i1 = children.indexOf(startBlock);
-            const i2 = children.indexOf(endBlock);
-            if (i1 >= 0 && i2 >= 0) {
-                const [from, to] = i1 <= i2 ? [i1, i2] : [i2, i1];
-                for (let i = from; i <= to; i++)
-                    applyAlign(children[i]);
-            }
-            else {
-                applyAlign(startBlock);
-            }
-        }
-    }
-    setBlockSpacing(kind, target, value) {
-        const range = this.getCurrentRange();
-        if (!range)
-            return;
-        const editor = this.editorRef.nativeElement;
-        const apply = (el) => {
-            if (!el)
-                return;
-            const v = `${value}px`;
-            if (target === 'all') {
-                el.style[kind] = v;
-            }
-            else if (target === 'vertical') {
-                el.style[`${kind}Top`] = v;
-                el.style[`${kind}Bottom`] = v;
-            }
-            else if (target === 'horizontal') {
-                el.style[`${kind}Left`] = v;
-                el.style[`${kind}Right`] = v;
-            }
-        };
-        const startBlock = this.getEditorChildAncestor(range.startContainer);
-        const endBlock = this.getEditorChildAncestor(range.endContainer);
-        if (startBlock === endBlock) {
-            apply(startBlock);
-        }
-        else {
-            const children = Array.from(editor.children);
-            const i1 = children.indexOf(startBlock);
-            const i2 = children.indexOf(endBlock);
-            if (i1 >= 0 && i2 >= 0) {
-                const [from, to] = i1 <= i2 ? [i1, i2] : [i2, i1];
-                for (let i = from; i <= to; i++)
-                    apply(children[i]);
-            }
-            else {
-                apply(startBlock);
-            }
-        }
-    }
-    // Versucht, Margin/Padding auf die konkrete Text-Selektion anzuwenden, indem die Auswahl mit einem Span umschlossen wird.
-    // Liefert true, wenn inline angewendet werden konnte; sonst false (z. B. wenn Auswahl blockübergreifend ist).
-    applySpacingToSelection(kind, target, value) {
-        const sel = window.getSelection();
-        if (!sel || sel.rangeCount === 0)
-            return false;
-        const range = sel.getRangeAt(0);
-        if (range.collapsed)
-            return false;
-        const startBlock = this.getEditorChildAncestor(range.startContainer);
-        const endBlock = this.getEditorChildAncestor(range.endContainer);
-        // Nur inline, wenn innerhalb desselben Blocks
-        if (!startBlock || !endBlock || startBlock !== endBlock)
-            return false;
-        const wrapper = document.createElement('span');
-        const px = `${value}px`;
-        if (target === 'all') {
-            wrapper.style[kind] = px;
-        }
-        else if (target === 'vertical') {
-            wrapper.style[`${kind}Top`] = px;
-            wrapper.style[`${kind}Bottom`] = px;
-        }
-        else if (target === 'horizontal') {
-            wrapper.style[`${kind}Left`] = px;
-            wrapper.style[`${kind}Right`] = px;
-        }
-        // Für vertikale Margins auf Inline-Elementen sicherstellen, dass sie greifen
-        if (kind === 'margin' && (target === 'all' || target === 'vertical')) {
-            wrapper.style.display = 'inline-block';
-        }
-        // Auswahl extrahieren und in Wrapper einsetzen
-        const frag = range.extractContents();
-        wrapper.appendChild(frag);
-        range.insertNode(wrapper);
-        // Gleichartige Wrapper zusammenführen und Cursor korrekt setzen
-        const normalized = this.normalizeSpacingSpans(wrapper, kind, target, value) || wrapper;
-        sel.removeAllRanges();
-        const after = document.createRange();
-        if (normalized.isConnected) {
-            after.setStartAfter(normalized);
-        }
-        else {
-            // Fallback: an das Ende des Startblocks
-            const sb = this.getEditorChildAncestor(range.startContainer);
-            if (sb)
-                after.selectNodeContents(sb);
-        }
-        after.collapse(true);
-        sel.addRange(after);
-        return true;
-    }
-    normalizeSpacingSpans(span, kind, target, value) {
-        const props = [];
-        if (target === 'all')
-            props.push(kind);
-        if (target === 'vertical')
-            props.push(`${kind}Top`, `${kind}Bottom`);
-        if (target === 'horizontal')
-            props.push(`${kind}Left`, `${kind}Right`);
-        const displayNeeded = kind === 'margin' && (target === 'all' || target === 'vertical');
-        const v = `${value}px`;
-        const hasSameSpacing = (a, b) => {
-            for (const p of props) {
-                if (a.style[p] !== b.style[p])
-                    return false;
-            }
-            if (displayNeeded) {
-                if (a.style.display !== b.style.display)
-                    return false;
-            }
-            return true;
-        };
-        // Downward: verschachtelte identische Spans in span zusammenführen
-        if (span.children.length === 1) {
-            const only = span.children[0];
-            if (only && only.tagName === 'SPAN' && hasSameSpacing(span, only)) {
-                while (only.firstChild)
-                    span.appendChild(only.firstChild);
-                only.remove();
-            }
-        }
-        let current = span;
-        // Upward: mit Elternelement verschmelzen, wenn identischer Span
-        const parent = current.parentElement;
-        if (parent && parent.tagName === 'SPAN' && hasSameSpacing(parent, current)) {
-            while (current.firstChild)
-                parent.insertBefore(current.firstChild, current);
-            current.remove();
-            current = parent;
-        }
-        if (!current)
-            return null;
-        // Left merge: vorherige Geschwister-Spans mit gleicher Formatierung in current ziehen
-        let prev = current.previousElementSibling;
-        if (prev && prev.tagName === 'SPAN' && hasSameSpacing(prev, current)) {
-            while (current.firstChild)
-                prev.appendChild(current.firstChild);
-            current.remove();
-            current = prev;
-        }
-        // Right merge: folgende Geschwister-Spans in current ziehen
-        let next = current.nextElementSibling;
-        while (next && next.tagName === 'SPAN' && hasSameSpacing(current, next)) {
-            while (next.firstChild)
-                current.appendChild(next.firstChild);
-            const toRemove = next;
-            next = next.nextElementSibling;
-            toRemove.remove();
-        }
-        return current;
-    }
-    setHeading(tag) {
-        const range = this.getCurrentRange();
-        if (!range)
-            return;
-        const editor = this.editorRef.nativeElement;
-        const replaceTag = (el, newTag) => {
-            if (!el || el === editor)
-                return null;
-            const neo = document.createElement(newTag);
-            while (el.firstChild)
-                neo.appendChild(el.firstChild);
-            el.replaceWith(neo);
-            return neo;
-        };
-        const startBlock = this.getEditorChildAncestor(range.startContainer);
-        const endBlock = this.getEditorChildAncestor(range.endContainer);
-        if (startBlock && startBlock !== editor && (startBlock === endBlock)) {
-            const currentTag = (startBlock.tagName || '').toLowerCase();
-            if (currentTag === tag)
-                return;
-            const convertible = /^(p|div|pre|h1|h2|h3|h4|h5|h6)$/i.test(currentTag);
-            if (convertible) {
-                const neo = replaceTag(startBlock, tag);
-                if (neo && tag === 'pre') {
-                    neo.setAttribute('style', 'white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;');
-                }
-                if (neo) {
-                    const sel = window.getSelection();
-                    if (sel) {
-                        sel.removeAllRanges();
-                        const after = document.createRange();
-                        after.selectNodeContents(neo);
-                        after.collapse(false);
-                        sel.addRange(after);
-                    }
-                }
-                return;
-            }
-        }
-        if (startBlock && endBlock && startBlock !== editor && endBlock !== editor) {
-            const children = Array.from(editor.children);
-            const i1 = children.indexOf(startBlock);
-            const i2 = children.indexOf(endBlock);
-            if (i1 >= 0 && i2 >= 0) {
-                const [from, to] = i1 <= i2 ? [i1, i2] : [i2, i1];
-                let last = null;
-                for (let i = from; i <= to; i++) {
-                    const el = children[i];
-                    const currentTag = (el.tagName || '').toLowerCase();
-                    if (/^(p|div|pre|h1|h2|h3|h4|h5|h6)$/i.test(currentTag)) {
-                        const neo = replaceTag(el, tag);
-                        if (neo && tag === 'pre') {
-                            neo.setAttribute('style', 'white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;');
-                        }
-                        if (neo)
-                            last = neo;
-                    }
-                }
-                if (last) {
-                    const sel = window.getSelection();
-                    if (sel) {
-                        sel.removeAllRanges();
-                        const after = document.createRange();
-                        after.selectNodeContents(last);
-                        after.collapse(false);
-                        sel.addRange(after);
-                    }
-                }
-                return;
-            }
-        }
-        if (!range.collapsed) {
-            const el = document.createElement(tag);
-            if (tag === 'pre') {
-                el.setAttribute('style', 'white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;');
-            }
-            const frag = range.extractContents();
-            el.appendChild(frag);
-            range.insertNode(el);
-            const sel = window.getSelection();
-            if (sel) {
-                sel.removeAllRanges();
-                const after = document.createRange();
-                after.selectNodeContents(el);
-                after.collapse(false);
-                sel.addRange(after);
-            }
-        }
+        super(cdr);
     }
     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", metricsChange: "metricsChange" }, 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", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => StackchRichtextEditorMaterial),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"stackch_rte\" [class.stackch_rte--disabled]=\"disabled\">\r\n  @if (showToolbar) {\r\n    <stackch-richtext-editor-material-toolbar\r\n      [cfg]=\"cfg\"\r\n      [i18n]=\"i18n\"\r\n      [disabled]=\"disabled\"\r\n      [fonts]=\"fonts\"\r\n      [fontSizes]=\"fontSizes\"\r\n      [isBoldActive]=\"isBoldActive\"\r\n      [isItalicActive]=\"isItalicActive\"\r\n      [isUnderlineActive]=\"isUnderlineActive\"\r\n      [canUndo]=\"canUndo\"\r\n      [canRedo]=\"canRedo\"\r\n      [uiState]=\"{ showFontPanel: showFontPanel, showHeadingMenu: showHeadingMenu, showSpacingMenu: showSpacingMenu, showAlignMenu: showAlignMenu, showColorMenu: showColorMenu, showListMenu: showListMenu }\"\r\n\r\n      (undo)=\"undo()\"\r\n      (redo)=\"redo()\"\r\n      (toggleFontPanel)=\"toggleFontPanel($event)\"\r\n      (toggleHeadingMenu)=\"toggleHeadingMenu($event)\"\r\n      (toggleSpacingMenu)=\"toggleSpacingMenu($event)\"\r\n      (toggleAlignMenu)=\"toggleAlignMenu($event)\"\r\n      (toggleColorMenu)=\"toggleColorMenu($event)\"\r\n      (toggleListMenu)=\"toggleListMenu($event)\"\r\n      (pickFont)=\"onPickFont($any($event))\"\r\n      (pickFontSize)=\"onPickFontSize($any($event))\"\r\n      (pickAlign)=\"onPickAlign($any($event))\"\r\n      (pickList)=\"onPickList($any($event))\"\r\n      (pickHeading)=\"onPickHeading($any($event))\"\r\n      (pickSpacing)=\"onPickSpacing($any($event).kind, $any($event).target, $any($event).value)\"\r\n      (applyColor)=\"applyColor($any($event))\"\r\n      (applyHighlight)=\"applyHighlight($any($event))\"\r\n      (toggleBold)=\"toggleBold()\"\r\n      (toggleItalic)=\"toggleItalic()\"\r\n      (toggleUnderline)=\"toggleUnderline()\"\r\n      (insertLink)=\"insertLink()\"\r\n      (removeFormat)=\"removeFormat()\"\r\n      (saveSelectionRequest)=\"saveSelection()\"\r\n    />\r\n  }\r\n\r\n  <div #editor\r\n      class=\"stackch_rte__editor\"\r\n      [attr.contenteditable]=\"!disabled\"\r\n      [attr.data-placeholder]=\"placeholder || i18n.placeholder\"\r\n      [style.minHeight.px]=\"minHeight\"\r\n      [style.maxHeight.px]=\"maxHeight\"\r\n      [style.height.px]=\"height\"\r\n      (mouseup)=\"saveSelection()\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (input)=\"onInput()\"\r\n      (blur)=\"onTouched()\"\r\n      (paste)=\"onPaste($event)\"></div>\r\n</div>\r\n", styles: [".stackch_rte{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}.stackch_rte--disabled{opacity:.7;pointer-events:none}.stackch_rte__toolbar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;border:1px solid #d0d7de;border-bottom:none;background:#f6f8fa;padding:.25rem;border-radius:6px 6px 0 0}.stackch_rte__btn{appearance:none;border:1px solid #d0d7de;background:#fff;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;outline:none}.stackch_rte__btn:hover{background:#f3f4f6}.stackch_rte__btn:focus{outline:none;box-shadow:none}.stackch_rte__btn:focus-visible{outline:2px solid rgba(9,105,218,.2)}.stackch_rte__btn.is-active{background:#e7f3ff;border-color:#0969da;color:#084298}.stackch_rte__select{border:1px solid #d0d7de;border-radius:4px;padding:.2rem .4rem;background:#fff}.stackch_rte__color{display:inline-flex;align-items:center;gap:.25rem;border:1px solid #d0d7de;padding:0 .4rem;border-radius:4px;background:#fff}.stackch_rte__color>input{inline-size:1.75rem;block-size:1.5rem;padding:0;border:none;background:none}.stackch_rte__sep{width:1px;height:1.25rem;background:#d0d7de;margin:0 .125rem}.stackch_rte__editor{border:1px solid #d0d7de;border-radius:0 0 6px 6px;padding:.5rem;background:#fff;overflow:auto}.stackch_rte__editor:empty:before{content:attr(data-placeholder);color:#97a1ad;pointer-events:none}.stackch_rte__editor:focus{outline:none;box-shadow:inset 0 0 0 1px #0969da;border-color:#0969da}.stackch_rte__dropdown{position:relative;display:inline-block}.stackch_rte__menu{position:absolute;top:100%;left:0;z-index:2;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 4px 12px #00000014;padding:.25rem;min-width:220px;max-height:220px;overflow:auto}.stackch_rte__menu-item{display:block;width:100%;text-align:left;background:#fff;border:none;padding:.375rem .5rem;border-radius:4px;cursor:pointer}.stackch_rte__menu-item:hover{background:#f3f4f6}.stackch_rte__menu--row{display:flex;flex-direction:row;gap:.25rem;align-items:center;min-width:auto;max-height:none;flex-wrap:nowrap}.stackch_rte__menu--row .stackch_rte__menu-item{display:inline-flex;width:auto;text-align:center;justify-content:center;align-items:center;padding:.3rem .45rem;white-space:nowrap;flex:0 0 auto;word-break:keep-all;overflow-wrap:normal}.stackch_rte__menu--row .stackch_rte__menu-item[style*=\"width:24px\"]{padding:0;width:24px;height:24px}.stackch_rte__menu--grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;min-width:420px}.stackch_rte__menu-section{display:flex;flex-direction:column;gap:.25rem}.stackch_rte__menu-title{font-size:12px;color:#57606a;padding:.25rem;text-transform:uppercase;letter-spacing:.04em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StackchRichtextEditorMaterialToolbar, selector: "stackch-richtext-editor-material-toolbar", inputs: ["cfg", "i18n", "disabled", "fonts", "fontSizes", "isBoldActive", "isItalicActive", "isUnderlineActive", "canUndo", "canRedo", "uiState"], outputs: ["undo", "redo", "toggleFontPanel", "toggleHeadingMenu", "toggleSpacingMenu", "toggleAlignMenu", "toggleColorMenu", "toggleListMenu", "pickFont", "pickFontSize", "pickAlign", "pickList", "pickHeading", "pickSpacing", "applyColor", "applyHighlight", "toggleBold", "toggleItalic", "toggleUnderline", "insertLink", "removeFormat", "saveSelectionRequest"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"stackch_rte\" [class.stackch_rte--disabled]=\"disabled\">\r\n  @if (showToolbar) {\r\n    <stackch-richtext-editor-material-toolbar\r\n      [cfg]=\"cfg\"\r\n      [i18n]=\"i18n\"\r\n      [disabled]=\"disabled\"\r\n      [fonts]=\"fonts\"\r\n      [fontSizes]=\"fontSizes\"\r\n      [isBoldActive]=\"isBoldActive\"\r\n      [isItalicActive]=\"isItalicActive\"\r\n      [isUnderlineActive]=\"isUnderlineActive\"\r\n      [canUndo]=\"canUndo\"\r\n      [canRedo]=\"canRedo\"\r\n      [uiState]=\"{ showFontPanel: showFontPanel, showHeadingMenu: showHeadingMenu, showSpacingMenu: showSpacingMenu, showAlignMenu: showAlignMenu, showColorMenu: showColorMenu, showListMenu: showListMenu }\"\r\n\r\n      (undo)=\"undo()\"\r\n      (redo)=\"redo()\"\r\n      (toggleFontPanel)=\"toggleFontPanel($event)\"\r\n      (toggleHeadingMenu)=\"toggleHeadingMenu($event)\"\r\n      (toggleSpacingMenu)=\"toggleSpacingMenu($event)\"\r\n      (toggleAlignMenu)=\"toggleAlignMenu($event)\"\r\n      (toggleColorMenu)=\"toggleColorMenu($event)\"\r\n      (toggleListMenu)=\"toggleListMenu($event)\"\r\n      (pickFont)=\"onPickFont($any($event))\"\r\n      (pickFontSize)=\"onPickFontSize($any($event))\"\r\n      (pickAlign)=\"onPickAlign($any($event))\"\r\n      (pickList)=\"onPickList($any($event))\"\r\n      (pickHeading)=\"onPickHeading($any($event))\"\r\n      (pickSpacing)=\"onPickSpacing($any($event).kind, $any($event).target, $any($event).value)\"\r\n      (applyColor)=\"applyColor($any($event))\"\r\n      (applyHighlight)=\"applyHighlight($any($event))\"\r\n      (toggleBold)=\"toggleBold()\"\r\n      (toggleItalic)=\"toggleItalic()\"\r\n      (toggleUnderline)=\"toggleUnderline()\"\r\n      (insertLink)=\"insertLink()\"\r\n      (removeFormat)=\"removeFormat()\"\r\n      (saveSelectionRequest)=\"saveSelection()\"\r\n    />\r\n  }\r\n\r\n  <div #editor\r\n      class=\"stackch_rte__editor\"\r\n      [attr.contenteditable]=\"!disabled\"\r\n      [attr.data-placeholder]=\"placeholder || i18n.placeholder\"\r\n      [style.minHeight.px]=\"minHeight\"\r\n      [style.maxHeight.px]=\"maxHeight\"\r\n      [style.height.px]=\"height\"\r\n      (mouseup)=\"saveSelection()\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (input)=\"onInput()\"\r\n      (blur)=\"onTouched()\"\r\n      (paste)=\"onPaste($event)\"></div>\r\n</div>\r\n", styles: [".stackch_rte{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}.stackch_rte--disabled{opacity:.7;pointer-events:none}.stackch_rte__toolbar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;border:1px solid #d0d7de;border-bottom:none;background:#f6f8fa;padding:.25rem;border-radius:6px 6px 0 0}.stackch_rte__btn{appearance:none;border:1px solid #d0d7de;background:#fff;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;outline:none}.stackch_rte__btn:hover{background:#f3f4f6}.stackch_rte__btn:focus{outline:none;box-shadow:none}.stackch_rte__btn:focus-visible{outline:2px solid rgba(9,105,218,.2)}.stackch_rte__btn.is-active{background:#e7f3ff;border-color:#0969da;color:#084298}.stackch_rte__select{border:1px solid #d0d7de;border-radius:4px;padding:.2rem .4rem;background:#fff}.stackch_rte__color{display:inline-flex;align-items:center;gap:.25rem;border:1px solid #d0d7de;padding:0 .4rem;border-radius:4px;background:#fff}.stackch_rte__color>input{inline-size:1.75rem;block-size:1.5rem;padding:0;border:none;background:none}.stackch_rte__sep{width:1px;height:1.25rem;background:#d0d7de;margin:0 .125rem}.stackch_rte__editor{border:1px solid #d0d7de;border-radius:0 0 6px 6px;padding:.5rem;background:#fff;overflow:auto}.stackch_rte__editor:empty:before{content:attr(data-placeholder);color:#97a1ad;pointer-events:none}.stackch_rte__editor:focus{outline:none;box-shadow:inset 0 0 0 1px #0969da;border-color:#0969da}.stackch_rte__dropdown{position:relative;display:inline-block}.stackch_rte__menu{position:absolute;top:100%;left:0;z-index:2;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 4px 12px #00000014;padding:.25rem;min-width:220px;max-height:220px;overflow:auto}.stackch_rte__menu-item{display:block;width:100%;text-align:left;background:#fff;border:none;padding:.375rem .5rem;border-radius:4px;cursor:pointer}.stackch_rte__menu-item:hover{background:#f3f4f6}.stackch_rte__menu--row{display:flex;flex-direction:row;gap:.25rem;align-items:center;min-width:auto;max-height:none;flex-wrap:nowrap}.stackch_rte__menu--row .stackch_rte__menu-item{display:inline-flex;width:auto;text-align:center;justify-content:center;align-items:center;padding:.3rem .45rem;white-space:nowrap;flex:0 0 auto;word-break:keep-all;overflow-wrap:normal}.stackch_rte__menu--row .stackch_rte__menu-item[style*=\"width:24px\"]{padding:0;width:24px;height:24px}.stackch_rte__menu--grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;min-width:420px}.stackch_rte__menu-section{display:flex;flex-direction:column;gap:.25rem}.stackch_rte__menu-title{font-size:12px;color:#57606a;padding:.25rem;text-transform:uppercase;letter-spacing:.04em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StackchRichtextEditorMaterialToolbar, selector: "stackch-richtext-editor-material-toolbar", inputs: ["cfg", "i18n", "disabled", "fonts", "fontSizes", "isBoldActive", "isItalicActive", "isUnderlineActive", "canUndo", "canRedo", "uiState"], outputs: ["undo", "redo", "toggleFontPanel", "toggleHeadingMenu", "toggleSpacingMenu", "toggleAlignMenu", "toggleColorMenu", "toggleListMenu", "pickFont", "pickFontSize", "pickAlign", "pickList", "pickHeading", "pickSpacing", "applyColor", "applyHighlight", "toggleBold", "toggleItalic", "toggleUnderline", "insertLink", "removeFormat", "saveSelectionRequest"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditorMaterial, decorators: [{
             type: Component,
@@ -2181,45 +169,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             multi: true,
                         },
                     ], template: "<div class=\"stackch_rte\" [class.stackch_rte--disabled]=\"disabled\">\r\n  @if (showToolbar) {\r\n    <stackch-richtext-editor-material-toolbar\r\n      [cfg]=\"cfg\"\r\n      [i18n]=\"i18n\"\r\n      [disabled]=\"disabled\"\r\n      [fonts]=\"fonts\"\r\n      [fontSizes]=\"fontSizes\"\r\n      [isBoldActive]=\"isBoldActive\"\r\n      [isItalicActive]=\"isItalicActive\"\r\n      [isUnderlineActive]=\"isUnderlineActive\"\r\n      [canUndo]=\"canUndo\"\r\n      [canRedo]=\"canRedo\"\r\n      [uiState]=\"{ showFontPanel: showFontPanel, showHeadingMenu: showHeadingMenu, showSpacingMenu: showSpacingMenu, showAlignMenu: showAlignMenu, showColorMenu: showColorMenu, showListMenu: showListMenu }\"\r\n\r\n      (undo)=\"undo()\"\r\n      (redo)=\"redo()\"\r\n      (toggleFontPanel)=\"toggleFontPanel($event)\"\r\n      (toggleHeadingMenu)=\"toggleHeadingMenu($event)\"\r\n      (toggleSpacingMenu)=\"toggleSpacingMenu($event)\"\r\n      (toggleAlignMenu)=\"toggleAlignMenu($event)\"\r\n      (toggleColorMenu)=\"toggleColorMenu($event)\"\r\n      (toggleListMenu)=\"toggleListMenu($event)\"\r\n      (pickFont)=\"onPickFont($any($event))\"\r\n      (pickFontSize)=\"onPickFontSize($any($event))\"\r\n      (pickAlign)=\"onPickAlign($any($event))\"\r\n      (pickList)=\"onPickList($any($event))\"\r\n      (pickHeading)=\"onPickHeading($any($event))\"\r\n      (pickSpacing)=\"onPickSpacing($any($event).kind, $any($event).target, $any($event).value)\"\r\n      (applyColor)=\"applyColor($any($event))\"\r\n      (applyHighlight)=\"applyHighlight($any($event))\"\r\n      (toggleBold)=\"toggleBold()\"\r\n      (toggleItalic)=\"toggleItalic()\"\r\n      (toggleUnderline)=\"toggleUnderline()\"\r\n      (insertLink)=\"insertLink()\"\r\n      (removeFormat)=\"removeFormat()\"\r\n      (saveSelectionRequest)=\"saveSelection()\"\r\n    />\r\n  }\r\n\r\n  <div #editor\r\n      class=\"stackch_rte__editor\"\r\n      [attr.contenteditable]=\"!disabled\"\r\n      [attr.data-placeholder]=\"placeholder || i18n.placeholder\"\r\n      [style.minHeight.px]=\"minHeight\"\r\n      [style.maxHeight.px]=\"maxHeight\"\r\n      [style.height.px]=\"height\"\r\n      (mouseup)=\"saveSelection()\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (input)=\"onInput()\"\r\n      (blur)=\"onTouched()\"\r\n      (paste)=\"onPaste($event)\"></div>\r\n</div>\r\n", styles: [".stackch_rte{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}.stackch_rte--disabled{opacity:.7;pointer-events:none}.stackch_rte__toolbar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;border:1px solid #d0d7de;border-bottom:none;background:#f6f8fa;padding:.25rem;border-radius:6px 6px 0 0}.stackch_rte__btn{appearance:none;border:1px solid #d0d7de;background:#fff;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;outline:none}.stackch_rte__btn:hover{background:#f3f4f6}.stackch_rte__btn:focus{outline:none;box-shadow:none}.stackch_rte__btn:focus-visible{outline:2px solid rgba(9,105,218,.2)}.stackch_rte__btn.is-active{background:#e7f3ff;border-color:#0969da;color:#084298}.stackch_rte__select{border:1px solid #d0d7de;border-radius:4px;padding:.2rem .4rem;background:#fff}.stackch_rte__color{display:inline-flex;align-items:center;gap:.25rem;border:1px solid #d0d7de;padding:0 .4rem;border-radius:4px;background:#fff}.stackch_rte__color>input{inline-size:1.75rem;block-size:1.5rem;padding:0;border:none;background:none}.stackch_rte__sep{width:1px;height:1.25rem;background:#d0d7de;margin:0 .125rem}.stackch_rte__editor{border:1px solid #d0d7de;border-radius:0 0 6px 6px;padding:.5rem;background:#fff;overflow:auto}.stackch_rte__editor:empty:before{content:attr(data-placeholder);color:#97a1ad;pointer-events:none}.stackch_rte__editor:focus{outline:none;box-shadow:inset 0 0 0 1px #0969da;border-color:#0969da}.stackch_rte__dropdown{position:relative;display:inline-block}.stackch_rte__menu{position:absolute;top:100%;left:0;z-index:2;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 4px 12px #00000014;padding:.25rem;min-width:220px;max-height:220px;overflow:auto}.stackch_rte__menu-item{display:block;width:100%;text-align:left;background:#fff;border:none;padding:.375rem .5rem;border-radius:4px;cursor:pointer}.stackch_rte__menu-item:hover{background:#f3f4f6}.stackch_rte__menu--row{display:flex;flex-direction:row;gap:.25rem;align-items:center;min-width:auto;max-height:none;flex-wrap:nowrap}.stackch_rte__menu--row .stackch_rte__menu-item{display:inline-flex;width:auto;text-align:center;justify-content:center;align-items:center;padding:.3rem .45rem;white-space:nowrap;flex:0 0 auto;word-break:keep-all;overflow-wrap:normal}.stackch_rte__menu--row .stackch_rte__menu-item[style*=\"width:24px\"]{padding:0;width:24px;height:24px}.stackch_rte__menu--grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;min-width:420px}.stackch_rte__menu-section{display:flex;flex-direction:column;gap:.25rem}.stackch_rte__menu-title{font-size:12px;color:#57606a;padding:.25rem;text-transform:uppercase;letter-spacing:.04em}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
-                type: Input
-            }], showToolbar: [{
-                type: Input
-            }], fonts: [{
-                type: Input
-            }], fontSizes: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], minHeight: [{
-                type: Input
-            }], maxHeight: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], metricsChange: [{
-                type: Output
-            }], editorRef: [{
-                type: ViewChild,
-                args: ['editor', { static: true }]
-            }], config: [{
-                type: Input
-            }], onSelectionChange: [{
-                type: HostListener,
-                args: ['document:selectionchange']
-            }], closeMenus: [{
-                type: HostListener,
-                args: ['document:click']
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT, StackchRichtextEditorConfig, StackchRichtextEditorI18n, StackchRichtextEditorMaterial, StackchRichtextEditorMaterialToolbar };
+export { StackchRichtextEditorMaterial, StackchRichtextEditorMaterialToolbar };
 //# sourceMappingURL=stackch-angular-material-richtext-editor.mjs.map