@stackch/angular-material-richtext-editor 1.0.0

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

@@ -0,0 +1,2132 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, forwardRef, HostListener, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+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';
+
+class StackchRichtextEditorMaterialToolbar {
+    // State/config from parent editor
+    cfg;
+    i18n;
+    disabled = false;
+    fonts = [];
+    fontSizes = [];
+    isBoldActive = false;
+    isItalicActive = false;
+    isUnderlineActive = false;
+    canUndo = false;
+    canRedo = false;
+    // Consolidated UI state
+    uiState;
+    // Actions -> bubble to parent editor
+    undo = new EventEmitter();
+    redo = new EventEmitter();
+    toggleFontPanel = new EventEmitter();
+    toggleHeadingMenu = new EventEmitter();
+    toggleSpacingMenu = new EventEmitter();
+    toggleAlignMenu = new EventEmitter();
+    toggleColorMenu = new EventEmitter();
+    toggleListMenu = new EventEmitter();
+    pickFont = new EventEmitter();
+    pickFontSize = new EventEmitter();
+    pickAlign = new EventEmitter();
+    pickList = new EventEmitter();
+    pickHeading = new EventEmitter();
+    pickSpacing = new EventEmitter();
+    applyColor = new EventEmitter();
+    applyHighlight = new EventEmitter();
+    toggleBold = new EventEmitter();
+    toggleItalic = new EventEmitter();
+    toggleUnderline = new EventEmitter();
+    insertLink = new EventEmitter();
+    removeFormat = new EventEmitter();
+    // Ask parent to preserve selection before toolbar interactions (mousedown/pointerdown/focus)
+    saveSelectionRequest = new EventEmitter();
+    onToolbarMouseDown(evt) {
+        // Prevent focus stealing and keep selection in the editor
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.saveSelectionRequest.emit();
+    }
+    onColorPointerDown(evt) {
+        // Do not preventDefault to allow the color picker to open, just preserve selection
+        evt.stopPropagation();
+        this.saveSelectionRequest.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditorMaterialToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StackchRichtextEditorMaterialToolbar, isStandalone: true, selector: "stackch-richtext-editor-material-toolbar", inputs: { cfg: "cfg", i18n: "i18n", disabled: "disabled", fonts: "fonts", fontSizes: "fontSizes", isBoldActive: "isBoldActive", isItalicActive: "isItalicActive", isUnderlineActive: "isUnderlineActive", canUndo: "canUndo", canRedo: "canRedo", uiState: "uiState" }, outputs: { undo: "undo", redo: "redo", toggleFontPanel: "toggleFontPanel", toggleHeadingMenu: "toggleHeadingMenu", toggleSpacingMenu: "toggleSpacingMenu", toggleAlignMenu: "toggleAlignMenu", toggleColorMenu: "toggleColorMenu", toggleListMenu: "toggleListMenu", pickFont: "pickFont", pickFontSize: "pickFontSize", pickAlign: "pickAlign", pickList: "pickList", pickHeading: "pickHeading", pickSpacing: "pickSpacing", applyColor: "applyColor", applyHighlight: "applyHighlight", toggleBold: "toggleBold", toggleItalic: "toggleItalic", toggleUnderline: "toggleUnderline", insertLink: "insertLink", removeFormat: "removeFormat", saveSelectionRequest: "saveSelectionRequest" }, ngImport: i0, template: "<div class=\"stackch_rte__toolbar\">\r\n  <!-- Undo / Redo -->\r\n  @if (cfg.showUndoRedo) {\r\n    <button mat-icon-button (click)=\"undo.emit()\" [disabled]=\"disabled || !canUndo\" [matTooltip]=\"i18n.undoTitle\" aria-label=\"{{i18n.undoTitle}}\">\r\n      <mat-icon fontIcon=\"undo\"></mat-icon>\r\n    </button>\r\n    <button mat-icon-button (click)=\"redo.emit()\" [disabled]=\"disabled || !canRedo\" [matTooltip]=\"i18n.redoTitle\" aria-label=\"{{i18n.redoTitle}}\">\r\n      <mat-icon fontIcon=\"redo\"></mat-icon>\r\n    </button>\r\n    <span class=\"stackch_rte__sep\"></span>\r\n  }\r\n\r\n  <!-- Font & Size: single icon opens a menu with two submenus (Fonts, Sizes) -->\r\n  @if (cfg.showFontPanel) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"fontPanelMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.fontPanelTitle\" (menuOpened)=\"saveSelectionRequest.emit()\" aria-label=\"{{ i18n.fontPanelTitle }}\">\r\n      <mat-icon fontIcon=\"text_fields\"></mat-icon>\r\n    </button>\r\n    <mat-menu #fontPanelMenu=\"matMenu\">\r\n      <button mat-menu-item [matMenuTriggerFor]=\"fontMenu\">\r\n        <mat-icon fontIcon=\"text_fields\"></mat-icon>\r\n        <span style=\"margin-left:.5rem;\">{{ i18n.fontSectionTitle }}</span>\r\n      </button>\r\n      <button mat-menu-item [matMenuTriggerFor]=\"sizeMenu\">\r\n        <mat-icon fontIcon=\"format_size\"></mat-icon>\r\n        <span style=\"margin-left:.5rem;\">{{ i18n.sizeSectionTitle }}</span>\r\n      </button>\r\n    </mat-menu>\r\n\r\n    <mat-menu #fontMenu=\"matMenu\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      @for (f of fonts; track f) {\r\n        <button mat-menu-item (click)=\"pickFont.emit(f)\"><span [style.fontFamily]=\"f\">{{ f }}</span></button>\r\n      }\r\n    </mat-menu>\r\n\r\n    <mat-menu #sizeMenu=\"matMenu\" class=\"stackch_rte__size-menu\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <div style=\"display:grid; grid-template-columns: repeat(3, auto); gap:.25rem .5rem; padding:.25rem .5rem;\">\r\n        @for (s of fontSizes; track s) {\r\n          <button mat-menu-item style=\"min-width:auto; padding:0 .5rem; line-height:28px; height:28px;\" (click)=\"pickFontSize.emit(s)\">{{ s }}px</button>\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n\r\n  <!-- Headings menu -->\r\n  @if (cfg.showHeading) {\r\n    <button mat-button [matMenuTriggerFor]=\"headingMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.headingTitle\" (menuOpened)=\"saveSelectionRequest.emit()\" aria-label=\"{{ i18n.headingTitle }}\">\r\n      <mat-icon fontIcon=\"title\"></mat-icon>\r\n    </button>\r\n    <mat-menu #headingMenu=\"matMenu\">\r\n      <button mat-menu-item (click)=\"pickHeading.emit('p')\">{{ i18n.paragraphLabel }}</button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('pre')\"><span style=\"font-family:monospace;\">{{ i18n.codeLabel }}</span></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h1')\"><h1 style=\"display:inline; margin:0;\">{{ i18n.h1Label }}</h1></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h2')\"><h2 style=\"display:inline; margin:0;\">{{ i18n.h2Label }}</h2></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h3')\"><h3 style=\"display:inline; margin:0;\">{{ i18n.h3Label }}</h3></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h4')\"><h4 style=\"display:inline; margin:0;\">{{ i18n.h4Label }}</h4></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h5')\"><h5 style=\"display:inline; margin:0;\">{{ i18n.h5Label }}</h5></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h6')\"><h6 style=\"display:inline; margin:0;\">{{ i18n.h6Label }}</h6></button>\r\n    </mat-menu>\r\n  }\r\n\r\n  <!-- Spacing menu -->\r\n  @if (cfg.showSpacing) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"spacingMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.spacingTitle\" (menuOpened)=\"saveSelectionRequest.emit()\" aria-label=\"{{ i18n.spacingTitle }}\">\r\n      <mat-icon fontIcon=\"space_bar\"></mat-icon>\r\n    </button>\r\n    <mat-menu #spacingMenu=\"matMenu\">\r\n      <button mat-menu-item [matMenuTriggerFor]=\"marginMenu\">\r\n        <mat-icon fontIcon=\"vertical_align_center\"></mat-icon>\r\n        <span style=\"margin-left:.5rem;\">{{ i18n.marginTitle }}</span>\r\n      </button>\r\n      <button mat-menu-item [matMenuTriggerFor]=\"paddingMenu\">\r\n        <mat-icon fontIcon=\"crop_square\"></mat-icon>\r\n        <span style=\"margin-left:.5rem;\">{{ i18n.paddingTitle }}</span>\r\n      </button>\r\n    </mat-menu>\r\n\r\n    <mat-menu #marginMenu=\"matMenu\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <div style=\"padding:.5rem .75rem; font-weight:600; opacity:.8\">{{ i18n.marginTitle }}</div>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'all',value:0})\">0</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'all',value:4})\">4px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'all',value:8})\">8px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'all',value:12})\">12px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'vertical',value:16})\">Vert 16px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'horizontal',value:16})\">Horiz 16px</button>\r\n    </mat-menu>\r\n\r\n    <mat-menu #paddingMenu=\"matMenu\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <div style=\"padding:.5rem .75rem; font-weight:600; opacity:.8\">{{ i18n.paddingTitle }}</div>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'all',value:0})\">0</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'all',value:4})\">4px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'all',value:8})\">8px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'all',value:12})\">12px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'vertical',value:16})\">Vert 16px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'horizontal',value:16})\">Horiz 16px</button>\r\n    </mat-menu>\r\n  }\r\n\r\n  <!-- Colors: keep native color input but wrap with mat-menu trigger for layout -->\r\n  @if (cfg.showColor) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"colorMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.colorsTitle\" (menuOpened)=\"saveSelectionRequest.emit()\" aria-label=\"{{ i18n.colorsTitle }}\">\r\n      <mat-icon fontIcon=\"palette\"></mat-icon>\r\n    </button>\r\n    <mat-menu #colorMenu=\"matMenu\">\r\n      <div style=\"padding:.5rem .75rem; display:flex; gap:.75rem; align-items:center;\">\r\n        <label class=\"stackch_rte__color\" (mousedown)=\"$event.stopPropagation(); onColorPointerDown($event)\" (click)=\"$event.stopPropagation()\" (pointerdown)=\"onColorPointerDown($event)\" (touchstart)=\"onColorPointerDown($event)\">\r\n          <input type=\"color\" (mousedown)=\"onColorPointerDown($event)\" (click)=\"$event.stopPropagation()\" (pointerdown)=\"onColorPointerDown($event)\" (touchstart)=\"onColorPointerDown($event)\" (focus)=\"saveSelectionRequest.emit()\" (input)=\"applyColor.emit($any($event.target).value)\" (change)=\"applyColor.emit($any($event.target).value)\" [disabled]=\"disabled\" [title]=\"i18n.textColorTitle\" />\r\n          A\r\n        </label>\r\n        <label class=\"stackch_rte__color\" [title]=\"i18n.highlightTitle\" (mousedown)=\"$event.stopPropagation(); onColorPointerDown($event)\" (click)=\"$event.stopPropagation()\" (pointerdown)=\"onColorPointerDown($event)\" (touchstart)=\"onColorPointerDown($event)\">\r\n          <input type=\"color\" (mousedown)=\"onColorPointerDown($event)\" (click)=\"$event.stopPropagation()\" (pointerdown)=\"onColorPointerDown($event)\" (touchstart)=\"onColorPointerDown($event)\" (focus)=\"saveSelectionRequest.emit()\" (input)=\"applyHighlight.emit($any($event.target).value)\" (change)=\"applyHighlight.emit($any($event.target).value)\" [disabled]=\"disabled\" />\r\n          \u29C9\r\n        </label>\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n\r\n  <!-- Style buttons -->\r\n  @if (cfg.showBold) {\r\n    <button mat-icon-button [color]=\"isBoldActive ? 'primary' : undefined\" (mousedown)=\"onToolbarMouseDown($event)\" (click)=\"toggleBold.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.boldTitle\" aria-pressed=\"{{isBoldActive}}\">\r\n      <mat-icon fontIcon=\"format_bold\"></mat-icon>\r\n    </button>\r\n  }\r\n  @if (cfg.showItalic) {\r\n    <button mat-icon-button [color]=\"isItalicActive ? 'primary' : undefined\" (mousedown)=\"onToolbarMouseDown($event)\" (click)=\"toggleItalic.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.italicTitle\" aria-pressed=\"{{isItalicActive}}\">\r\n      <mat-icon fontIcon=\"format_italic\"></mat-icon>\r\n    </button>\r\n  }\r\n  @if (cfg.showUnderline) {\r\n    <button mat-icon-button [color]=\"isUnderlineActive ? 'primary' : undefined\" (mousedown)=\"onToolbarMouseDown($event)\" (click)=\"toggleUnderline.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.underlineTitle\" aria-pressed=\"{{isUnderlineActive}}\">\r\n      <mat-icon fontIcon=\"format_underlined\"></mat-icon>\r\n    </button>\r\n  }\r\n  <span class=\"stackch_rte__sep\"></span>\r\n\r\n  @if (cfg.showLists) {\r\n    <button mat-button [matMenuTriggerFor]=\"listMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.listsTitle\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <mat-icon fontIcon=\"format_list_bulleted\"></mat-icon>\r\n    </button>\r\n    <mat-menu #listMenu=\"matMenu\">\r\n      <button mat-menu-item (click)=\"pickList.emit('ul')\">{{ i18n.bulletListTitle }}</button>\r\n      <button mat-menu-item (click)=\"pickList.emit('ol')\">{{ i18n.numberedListTitle }}</button>\r\n    </mat-menu>\r\n  }\r\n  <span class=\"stackch_rte__sep\"></span>\r\n\r\n  @if (cfg.showAlign) {\r\n    <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.alignTitle\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <mat-icon fontIcon=\"format_align_left\"></mat-icon>\r\n    </button>\r\n    <mat-menu #alignMenu=\"matMenu\">\r\n      <button mat-menu-item (click)=\"pickAlign.emit('left')\"><mat-icon fontIcon=\"format_align_left\"></mat-icon> {{ i18n.alignLeftTitle }}</button>\r\n      <button mat-menu-item (click)=\"pickAlign.emit('center')\"><mat-icon fontIcon=\"format_align_center\"></mat-icon> {{ i18n.alignCenterTitle }}</button>\r\n      <button mat-menu-item (click)=\"pickAlign.emit('right')\"><mat-icon fontIcon=\"format_align_right\"></mat-icon> {{ i18n.alignRightTitle }}</button>\r\n      <button mat-menu-item (click)=\"pickAlign.emit('justify')\"><mat-icon fontIcon=\"format_align_justify\"></mat-icon> {{ i18n.alignJustifyTitle }}</button>\r\n    </mat-menu>\r\n  }\r\n  <span class=\"stackch_rte__sep\"></span>\r\n\r\n  @if (cfg.showLink) {\r\n    <button mat-icon-button (click)=\"insertLink.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.linkTitle\" aria-label=\"{{i18n.linkTitle}}\">\r\n      <mat-icon fontIcon=\"link\"></mat-icon>\r\n    </button>\r\n  }\r\n  @if (cfg.showRemoveFormat) {\r\n    <button mat-icon-button (click)=\"removeFormat.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.removeFormatTitle\" aria-label=\"{{i18n.removeFormatTitle}}\">\r\n      <mat-icon fontIcon=\"format_clear\"></mat-icon>\r\n    </button>\r\n  }\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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditorMaterialToolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'stackch-richtext-editor-material-toolbar', standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatTooltipModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                    ], template: "<div class=\"stackch_rte__toolbar\">\r\n  <!-- Undo / Redo -->\r\n  @if (cfg.showUndoRedo) {\r\n    <button mat-icon-button (click)=\"undo.emit()\" [disabled]=\"disabled || !canUndo\" [matTooltip]=\"i18n.undoTitle\" aria-label=\"{{i18n.undoTitle}}\">\r\n      <mat-icon fontIcon=\"undo\"></mat-icon>\r\n    </button>\r\n    <button mat-icon-button (click)=\"redo.emit()\" [disabled]=\"disabled || !canRedo\" [matTooltip]=\"i18n.redoTitle\" aria-label=\"{{i18n.redoTitle}}\">\r\n      <mat-icon fontIcon=\"redo\"></mat-icon>\r\n    </button>\r\n    <span class=\"stackch_rte__sep\"></span>\r\n  }\r\n\r\n  <!-- Font & Size: single icon opens a menu with two submenus (Fonts, Sizes) -->\r\n  @if (cfg.showFontPanel) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"fontPanelMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.fontPanelTitle\" (menuOpened)=\"saveSelectionRequest.emit()\" aria-label=\"{{ i18n.fontPanelTitle }}\">\r\n      <mat-icon fontIcon=\"text_fields\"></mat-icon>\r\n    </button>\r\n    <mat-menu #fontPanelMenu=\"matMenu\">\r\n      <button mat-menu-item [matMenuTriggerFor]=\"fontMenu\">\r\n        <mat-icon fontIcon=\"text_fields\"></mat-icon>\r\n        <span style=\"margin-left:.5rem;\">{{ i18n.fontSectionTitle }}</span>\r\n      </button>\r\n      <button mat-menu-item [matMenuTriggerFor]=\"sizeMenu\">\r\n        <mat-icon fontIcon=\"format_size\"></mat-icon>\r\n        <span style=\"margin-left:.5rem;\">{{ i18n.sizeSectionTitle }}</span>\r\n      </button>\r\n    </mat-menu>\r\n\r\n    <mat-menu #fontMenu=\"matMenu\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      @for (f of fonts; track f) {\r\n        <button mat-menu-item (click)=\"pickFont.emit(f)\"><span [style.fontFamily]=\"f\">{{ f }}</span></button>\r\n      }\r\n    </mat-menu>\r\n\r\n    <mat-menu #sizeMenu=\"matMenu\" class=\"stackch_rte__size-menu\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <div style=\"display:grid; grid-template-columns: repeat(3, auto); gap:.25rem .5rem; padding:.25rem .5rem;\">\r\n        @for (s of fontSizes; track s) {\r\n          <button mat-menu-item style=\"min-width:auto; padding:0 .5rem; line-height:28px; height:28px;\" (click)=\"pickFontSize.emit(s)\">{{ s }}px</button>\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n\r\n  <!-- Headings menu -->\r\n  @if (cfg.showHeading) {\r\n    <button mat-button [matMenuTriggerFor]=\"headingMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.headingTitle\" (menuOpened)=\"saveSelectionRequest.emit()\" aria-label=\"{{ i18n.headingTitle }}\">\r\n      <mat-icon fontIcon=\"title\"></mat-icon>\r\n    </button>\r\n    <mat-menu #headingMenu=\"matMenu\">\r\n      <button mat-menu-item (click)=\"pickHeading.emit('p')\">{{ i18n.paragraphLabel }}</button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('pre')\"><span style=\"font-family:monospace;\">{{ i18n.codeLabel }}</span></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h1')\"><h1 style=\"display:inline; margin:0;\">{{ i18n.h1Label }}</h1></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h2')\"><h2 style=\"display:inline; margin:0;\">{{ i18n.h2Label }}</h2></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h3')\"><h3 style=\"display:inline; margin:0;\">{{ i18n.h3Label }}</h3></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h4')\"><h4 style=\"display:inline; margin:0;\">{{ i18n.h4Label }}</h4></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h5')\"><h5 style=\"display:inline; margin:0;\">{{ i18n.h5Label }}</h5></button>\r\n      <button mat-menu-item (click)=\"pickHeading.emit('h6')\"><h6 style=\"display:inline; margin:0;\">{{ i18n.h6Label }}</h6></button>\r\n    </mat-menu>\r\n  }\r\n\r\n  <!-- Spacing menu -->\r\n  @if (cfg.showSpacing) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"spacingMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.spacingTitle\" (menuOpened)=\"saveSelectionRequest.emit()\" aria-label=\"{{ i18n.spacingTitle }}\">\r\n      <mat-icon fontIcon=\"space_bar\"></mat-icon>\r\n    </button>\r\n    <mat-menu #spacingMenu=\"matMenu\">\r\n      <button mat-menu-item [matMenuTriggerFor]=\"marginMenu\">\r\n        <mat-icon fontIcon=\"vertical_align_center\"></mat-icon>\r\n        <span style=\"margin-left:.5rem;\">{{ i18n.marginTitle }}</span>\r\n      </button>\r\n      <button mat-menu-item [matMenuTriggerFor]=\"paddingMenu\">\r\n        <mat-icon fontIcon=\"crop_square\"></mat-icon>\r\n        <span style=\"margin-left:.5rem;\">{{ i18n.paddingTitle }}</span>\r\n      </button>\r\n    </mat-menu>\r\n\r\n    <mat-menu #marginMenu=\"matMenu\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <div style=\"padding:.5rem .75rem; font-weight:600; opacity:.8\">{{ i18n.marginTitle }}</div>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'all',value:0})\">0</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'all',value:4})\">4px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'all',value:8})\">8px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'all',value:12})\">12px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'vertical',value:16})\">Vert 16px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'margin',target:'horizontal',value:16})\">Horiz 16px</button>\r\n    </mat-menu>\r\n\r\n    <mat-menu #paddingMenu=\"matMenu\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <div style=\"padding:.5rem .75rem; font-weight:600; opacity:.8\">{{ i18n.paddingTitle }}</div>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'all',value:0})\">0</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'all',value:4})\">4px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'all',value:8})\">8px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'all',value:12})\">12px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'vertical',value:16})\">Vert 16px</button>\r\n      <button mat-menu-item (click)=\"pickSpacing.emit({kind:'padding',target:'horizontal',value:16})\">Horiz 16px</button>\r\n    </mat-menu>\r\n  }\r\n\r\n  <!-- Colors: keep native color input but wrap with mat-menu trigger for layout -->\r\n  @if (cfg.showColor) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"colorMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.colorsTitle\" (menuOpened)=\"saveSelectionRequest.emit()\" aria-label=\"{{ i18n.colorsTitle }}\">\r\n      <mat-icon fontIcon=\"palette\"></mat-icon>\r\n    </button>\r\n    <mat-menu #colorMenu=\"matMenu\">\r\n      <div style=\"padding:.5rem .75rem; display:flex; gap:.75rem; align-items:center;\">\r\n        <label class=\"stackch_rte__color\" (mousedown)=\"$event.stopPropagation(); onColorPointerDown($event)\" (click)=\"$event.stopPropagation()\" (pointerdown)=\"onColorPointerDown($event)\" (touchstart)=\"onColorPointerDown($event)\">\r\n          <input type=\"color\" (mousedown)=\"onColorPointerDown($event)\" (click)=\"$event.stopPropagation()\" (pointerdown)=\"onColorPointerDown($event)\" (touchstart)=\"onColorPointerDown($event)\" (focus)=\"saveSelectionRequest.emit()\" (input)=\"applyColor.emit($any($event.target).value)\" (change)=\"applyColor.emit($any($event.target).value)\" [disabled]=\"disabled\" [title]=\"i18n.textColorTitle\" />\r\n          A\r\n        </label>\r\n        <label class=\"stackch_rte__color\" [title]=\"i18n.highlightTitle\" (mousedown)=\"$event.stopPropagation(); onColorPointerDown($event)\" (click)=\"$event.stopPropagation()\" (pointerdown)=\"onColorPointerDown($event)\" (touchstart)=\"onColorPointerDown($event)\">\r\n          <input type=\"color\" (mousedown)=\"onColorPointerDown($event)\" (click)=\"$event.stopPropagation()\" (pointerdown)=\"onColorPointerDown($event)\" (touchstart)=\"onColorPointerDown($event)\" (focus)=\"saveSelectionRequest.emit()\" (input)=\"applyHighlight.emit($any($event.target).value)\" (change)=\"applyHighlight.emit($any($event.target).value)\" [disabled]=\"disabled\" />\r\n          \u29C9\r\n        </label>\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n\r\n  <!-- Style buttons -->\r\n  @if (cfg.showBold) {\r\n    <button mat-icon-button [color]=\"isBoldActive ? 'primary' : undefined\" (mousedown)=\"onToolbarMouseDown($event)\" (click)=\"toggleBold.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.boldTitle\" aria-pressed=\"{{isBoldActive}}\">\r\n      <mat-icon fontIcon=\"format_bold\"></mat-icon>\r\n    </button>\r\n  }\r\n  @if (cfg.showItalic) {\r\n    <button mat-icon-button [color]=\"isItalicActive ? 'primary' : undefined\" (mousedown)=\"onToolbarMouseDown($event)\" (click)=\"toggleItalic.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.italicTitle\" aria-pressed=\"{{isItalicActive}}\">\r\n      <mat-icon fontIcon=\"format_italic\"></mat-icon>\r\n    </button>\r\n  }\r\n  @if (cfg.showUnderline) {\r\n    <button mat-icon-button [color]=\"isUnderlineActive ? 'primary' : undefined\" (mousedown)=\"onToolbarMouseDown($event)\" (click)=\"toggleUnderline.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.underlineTitle\" aria-pressed=\"{{isUnderlineActive}}\">\r\n      <mat-icon fontIcon=\"format_underlined\"></mat-icon>\r\n    </button>\r\n  }\r\n  <span class=\"stackch_rte__sep\"></span>\r\n\r\n  @if (cfg.showLists) {\r\n    <button mat-button [matMenuTriggerFor]=\"listMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.listsTitle\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <mat-icon fontIcon=\"format_list_bulleted\"></mat-icon>\r\n    </button>\r\n    <mat-menu #listMenu=\"matMenu\">\r\n      <button mat-menu-item (click)=\"pickList.emit('ul')\">{{ i18n.bulletListTitle }}</button>\r\n      <button mat-menu-item (click)=\"pickList.emit('ol')\">{{ i18n.numberedListTitle }}</button>\r\n    </mat-menu>\r\n  }\r\n  <span class=\"stackch_rte__sep\"></span>\r\n\r\n  @if (cfg.showAlign) {\r\n    <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"disabled\" [matTooltip]=\"i18n.alignTitle\" (menuOpened)=\"saveSelectionRequest.emit()\">\r\n      <mat-icon fontIcon=\"format_align_left\"></mat-icon>\r\n    </button>\r\n    <mat-menu #alignMenu=\"matMenu\">\r\n      <button mat-menu-item (click)=\"pickAlign.emit('left')\"><mat-icon fontIcon=\"format_align_left\"></mat-icon> {{ i18n.alignLeftTitle }}</button>\r\n      <button mat-menu-item (click)=\"pickAlign.emit('center')\"><mat-icon fontIcon=\"format_align_center\"></mat-icon> {{ i18n.alignCenterTitle }}</button>\r\n      <button mat-menu-item (click)=\"pickAlign.emit('right')\"><mat-icon fontIcon=\"format_align_right\"></mat-icon> {{ i18n.alignRightTitle }}</button>\r\n      <button mat-menu-item (click)=\"pickAlign.emit('justify')\"><mat-icon fontIcon=\"format_align_justify\"></mat-icon> {{ i18n.alignJustifyTitle }}</button>\r\n    </mat-menu>\r\n  }\r\n  <span class=\"stackch_rte__sep\"></span>\r\n\r\n  @if (cfg.showLink) {\r\n    <button mat-icon-button (click)=\"insertLink.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.linkTitle\" aria-label=\"{{i18n.linkTitle}}\">\r\n      <mat-icon fontIcon=\"link\"></mat-icon>\r\n    </button>\r\n  }\r\n  @if (cfg.showRemoveFormat) {\r\n    <button mat-icon-button (click)=\"removeFormat.emit()\" [disabled]=\"disabled\" [matTooltip]=\"i18n.removeFormatTitle\" aria-label=\"{{i18n.removeFormatTitle}}\">\r\n      <mat-icon fontIcon=\"format_clear\"></mat-icon>\r\n    </button>\r\n  }\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"] }]
+        }], propDecorators: { cfg: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fonts: [{
+                type: Input
+            }], fontSizes: [{
+                type: Input
+            }], isBoldActive: [{
+                type: Input
+            }], isItalicActive: [{
+                type: Input
+            }], isUnderlineActive: [{
+                type: Input
+            }], canUndo: [{
+                type: Input
+            }], canRedo: [{
+                type: Input
+            }], uiState: [{
+                type: Input
+            }], undo: [{
+                type: Output
+            }], redo: [{
+                type: Output
+            }], toggleFontPanel: [{
+                type: Output
+            }], toggleHeadingMenu: [{
+                type: Output
+            }], toggleSpacingMenu: [{
+                type: Output
+            }], toggleAlignMenu: [{
+                type: Output
+            }], toggleColorMenu: [{
+                type: Output
+            }], toggleListMenu: [{
+                type: Output
+            }], pickFont: [{
+                type: Output
+            }], pickFontSize: [{
+                type: Output
+            }], pickAlign: [{
+                type: Output
+            }], pickList: [{
+                type: Output
+            }], pickHeading: [{
+                type: Output
+            }], pickSpacing: [{
+                type: Output
+            }], applyColor: [{
+                type: Output
+            }], applyHighlight: [{
+                type: Output
+            }], toggleBold: [{
+                type: Output
+            }], toggleItalic: [{
+                type: Output
+            }], toggleUnderline: [{
+                type: Output
+            }], insertLink: [{
+                type: Output
+            }], removeFormat: [{
+                type: Output
+            }], saveSelectionRequest: [{
+                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();
+    editorRef;
+    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');
+        }
+    }
+    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.applyInlineStyle('color', color);
+    }
+    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);
+        }
+        // Some browsers use 'hiliteColor', others 'backColor'
+        this.applyInlineStyle('backgroundColor', color);
+    }
+    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.updateInlineStates();
+    }
+    // Remove empty style attributes (style="") and unwrap spans without any attributes
+    cleanupEmptyStylesAndSpans(root) {
+        const editor = root || this.editorRef.nativeElement;
+        const toUnwrap = [];
+        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');
+                }
+            }
+            // Unwrap spans that have no attributes left
+            if (el.tagName === 'SPAN' && el.attributes.length === 0) {
+                toUnwrap.push(el);
+            }
+        }
+        for (const span of toUnwrap) {
+            while (span.firstChild)
+                span.parentNode?.insertBefore(span.firstChild, 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) {
+        this.focusEditor();
+        this.restoreSelection();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        if (range.collapsed)
+            return;
+        const span = document.createElement('span');
+        span.style[cssProp] = value;
+        // Robuster als surroundContents: extract + wrap + insert
+        const frag = range.extractContents();
+        span.appendChild(frag);
+        range.insertNode(span);
+        // Cursor hinter das eingefügte Element setzen
+        sel.removeAllRanges();
+        const after = document.createRange();
+        after.setStartAfter(span);
+        after.collapse(true);
+        sel.addRange(after);
+        this.emitValue();
+        this.takeSnapshot('style');
+    }
+    applyInlineStyleSmart(cssProp, value) {
+        this.focusEditor();
+        this.restoreSelection();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        if (range.collapsed)
+            return;
+        const isBlockTag = (tag) => /^(P|DIV|PRE|H1|H2|H3|H4|H5|H6|LI|TD|TH)$/i.test(tag);
+        const getBlockAncestor = (node) => {
+            const editor = this.editorRef.nativeElement;
+            let el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+            while (el && el !== editor && !isBlockTag(el.tagName))
+                el = el.parentElement;
+            return (el && el !== editor) ? el : null;
+        };
+        const startBlock = getBlockAncestor(range.startContainer);
+        const endBlock = getBlockAncestor(range.endContainer);
+        const crossesBlocks = !!startBlock && !!endBlock && startBlock !== endBlock;
+        if (!crossesBlocks) {
+            // Single block selection: keep using inline wrapper for precise range
+            this.applyInlineStyle(cssProp, value);
+            return;
+        }
+        // Multi-block selection: apply style to each intersecting block element (avoid invalid span structure)
+        const common = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+            ? range.commonAncestorContainer
+            : (range.commonAncestorContainer.parentElement || this.editorRef.nativeElement);
+        const walker = document.createTreeWalker(common, NodeFilter.SHOW_ELEMENT);
+        const styled = new Set();
+        while (walker.nextNode()) {
+            const el = walker.currentNode;
+            if (!isBlockTag(el.tagName))
+                continue;
+            try {
+                if (range.intersectsNode && range.intersectsNode(el))
+                    styled.add(el);
+            }
+            catch { }
+        }
+        for (const el of styled) {
+            el.style[cssProp] = value;
+        }
+        this.emitValue();
+        this.takeSnapshot('style-blocks');
+    }
+    getIntersectingBlocks(range) {
+        const isBlockTag = (tag) => /^(P|DIV|PRE|H1|H2|H3|H4|H5|H6|LI|TD|TH)$/i.test(tag);
+        const common = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+            ? range.commonAncestorContainer
+            : (range.commonAncestorContainer.parentElement || this.editorRef.nativeElement);
+        const walker = document.createTreeWalker(common, NodeFilter.SHOW_ELEMENT);
+        const blocks = [];
+        while (walker.nextNode()) {
+            const el = walker.currentNode;
+            if (!isBlockTag(el.tagName))
+                continue;
+            try {
+                if (range.intersectsNode && range.intersectsNode(el))
+                    blocks.push(el);
+            }
+            catch { }
+        }
+        return blocks;
+    }
+    // Variant of applyInlineStyle that returns the created span and does not emit/snapshot by itself
+    wrapSelectionInline(cssProp, value) {
+        this.focusEditor();
+        this.restoreSelection();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return null;
+        const range = sel.getRangeAt(0);
+        if (range.collapsed)
+            return null;
+        const span = document.createElement('span');
+        span.style[cssProp] = value;
+        const frag = range.extractContents();
+        span.appendChild(frag);
+        range.insertNode(span);
+        // Restore selection just after for continuity
+        sel.removeAllRanges();
+        const after = document.createRange();
+        after.setStartAfter(span);
+        after.collapse(true);
+        sel.addRange(after);
+        return span;
+    }
+    isBoldCarrier(el) {
+        if (!el)
+            return false;
+        const tag = el.tagName;
+        if (tag === 'B' || tag === 'STRONG')
+            return true;
+        const fw = el.style?.fontWeight || '';
+        if (fw && fw !== 'normal' && fw !== '400')
+            return true;
+        return false;
+    }
+    boldAncestorContainingRange(range) {
+        let el = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+            ? range.commonAncestorContainer
+            : range.commonAncestorContainer.parentElement;
+        const editor = this.editorRef.nativeElement;
+        while (el && el !== editor) {
+            if (this.isBoldCarrier(el)) {
+                // ensure el contains both boundary containers fully
+                const sc = range.startContainer;
+                const ec = range.endContainer;
+                if (el.contains(sc) && el.contains(ec))
+                    return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    ancestorContainingRange(range, isCarrier) {
+        let el = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+            ? range.commonAncestorContainer
+            : range.commonAncestorContainer.parentElement;
+        const editor = this.editorRef.nativeElement;
+        while (el && el !== editor) {
+            if (isCarrier(el)) {
+                const sc = range.startContainer;
+                const ec = range.endContainer;
+                if (el.contains(sc) && el.contains(ec))
+                    return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    splitCarrierAroundSelection(range, carrier) {
+        const parent = carrier.parentNode;
+        if (!parent)
+            return;
+        const rRight = document.createRange();
+        rRight.setStart(range.endContainer, range.endOffset);
+        rightGuard(carrier, rRight);
+        const rightFrag = rRight.extractContents();
+        const rLeft = document.createRange();
+        rLeft.setStart(carrier, 0);
+        leftGuard(range, rLeft);
+        const leftFrag = rLeft.extractContents();
+        if (leftFrag.childNodes.length) {
+            const leftClone = carrier.cloneNode(false);
+            leftClone.appendChild(leftFrag);
+            parent.insertBefore(leftClone, carrier);
+        }
+        let insertAfterRef = carrier;
+        if (rightFrag.childNodes.length) {
+            const rightClone = carrier.cloneNode(false);
+            rightClone.appendChild(rightFrag);
+            parent.insertBefore(rightClone, carrier.nextSibling);
+            insertAfterRef = rightClone;
+        }
+        while (carrier.firstChild)
+            parent.insertBefore(carrier.firstChild, insertAfterRef);
+        carrier.remove();
+        function rightGuard(node, r) {
+            try {
+                r.setEnd(node, node.childNodes.length);
+            }
+            catch { }
+        }
+        function leftGuard(rng, r) {
+            try {
+                r.setEnd(rng.startContainer, rng.startOffset);
+            }
+            catch { }
+        }
+    }
+    // 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
+            parent.after(right);
+            // 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 (before.childNodes.length)
+            gp.insertBefore(before, ancestor);
+        // move node out, place where ancestor was
+        gp.insertBefore(node, ancestor);
+        if (after.childNodes.length)
+            gp.insertBefore(after, ancestor);
+        ancestor.remove();
+    }
+    cleanupEmptyBoldSpans(root) {
+        const toRemove = [];
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+        while (walker.nextNode()) {
+            const el = walker.currentNode;
+            const isBoldEl = (el.tagName === 'B' || el.tagName === 'STRONG' || (el.tagName === 'SPAN' && el.style.fontWeight && el.style.fontWeight !== 'normal' && el.style.fontWeight !== '400'));
+            if (!isBoldEl)
+                continue;
+            // remove if no children or only whitespace (including NBSP \u00A0 and zero-width space \u200B)
+            const text = el.textContent ?? '';
+            const normalized = text.replace(/[\u00A0\u200B\s]/g, '');
+            const onlyWhitespace = !el.firstChild || (normalized.length === 0 && el.querySelectorAll('*').length === 0);
+            if (onlyWhitespace) {
+                toRemove.push(el);
+            }
+        }
+        for (const el of toRemove)
+            el.remove();
+    }
+    maybeUnwrapNormalSpan(span) {
+        if (span.tagName !== 'SPAN')
+            return;
+        // If no bold applies from ancestors, drop the 400 style and unwrap if style empty
+        const hasBoldAbove = this.isNodeBold(span.parentElement);
+        if (!hasBoldAbove) {
+            if (span.style.fontWeight === '400')
+                span.style.removeProperty('font-weight');
+            if (!span.getAttribute('style')) {
+                while (span.firstChild)
+                    span.parentNode?.insertBefore(span.firstChild, span);
+                span.remove();
+            }
+        }
+    }
+    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) {
+        const root = this.editorRef.nativeElement;
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        while (walker.nextNode()) {
+            const n = walker.currentNode;
+            if (!n.data.trim())
+                continue;
+            try {
+                if (range.intersectsNode(n)) {
+                    if (this.isNodeBold(n.parentElement))
+                        return true;
+                }
+            }
+            catch { }
+        }
+        return false;
+    }
+    computeItalicAnyForRange(range) {
+        const root = this.editorRef.nativeElement;
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        while (walker.nextNode()) {
+            const n = walker.currentNode;
+            if (!n.data.trim())
+                continue;
+            try {
+                if (range.intersectsNode(n)) {
+                    if (this.isNodeItalic(n.parentElement))
+                        return true;
+                }
+            }
+            catch { }
+        }
+        return false;
+    }
+    computeUnderlineAnyForRange(range) {
+        const root = this.editorRef.nativeElement;
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        while (walker.nextNode()) {
+            const n = walker.currentNode;
+            if (!n.data.trim())
+                continue;
+            try {
+                if (range.intersectsNode(n)) {
+                    if (this.isNodeUnderline(n.parentElement))
+                        return true;
+                }
+            }
+            catch { }
+        }
+        return false;
+    }
+    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;
+    }
+    isItalicCarrier(el) {
+        if (!el)
+            return false;
+        const tag = el.tagName;
+        if (tag === 'I' || tag === 'EM')
+            return true;
+        const fs = el.style?.fontStyle || '';
+        return !!fs && fs !== 'normal';
+    }
+    isUnderlineCarrier(el) {
+        if (!el)
+            return false;
+        const tag = el.tagName;
+        if (tag === 'U')
+            return true;
+        const td = el.style?.textDecoration || '';
+        return typeof td === 'string' && td.includes('underline');
+    }
+    computeBoldActiveForRange(range) {
+        const root = this.isRangeInEditor(range) ? this.editorRef.nativeElement : range.commonAncestorContainer;
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        const nodes = [];
+        while (walker.nextNode()) {
+            const n = walker.currentNode;
+            if (!n.data.trim())
+                continue;
+            try {
+                if (range.intersectsNode(n))
+                    nodes.push(n);
+            }
+            catch { /* Safari may throw if node not in same tree */ }
+        }
+        if (nodes.length === 0)
+            return false;
+        return nodes.every(t => this.isNodeBold(t.parentElement));
+    }
+    computeItalicActiveForRange(range) {
+        const root = this.isRangeInEditor(range) ? this.editorRef.nativeElement : range.commonAncestorContainer;
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        const nodes = [];
+        while (walker.nextNode()) {
+            const n = walker.currentNode;
+            if (!n.data.trim())
+                continue;
+            try {
+                if (range.intersectsNode(n))
+                    nodes.push(n);
+            }
+            catch { }
+        }
+        if (nodes.length === 0)
+            return false;
+        return nodes.every(t => this.isNodeItalic(t.parentElement));
+    }
+    computeUnderlineActiveForRange(range) {
+        const root = this.isRangeInEditor(range) ? this.editorRef.nativeElement : range.commonAncestorContainer;
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        const nodes = [];
+        while (walker.nextNode()) {
+            const n = walker.currentNode;
+            if (!n.data.trim())
+                continue;
+            try {
+                if (range.intersectsNode(n))
+                    nodes.push(n);
+            }
+            catch { }
+        }
+        if (nodes.length === 0)
+            return false;
+        return nodes.every(t => this.isNodeUnderline(t.parentElement));
+    }
+    removeInlineStyleInRange(range, cssPropKebab) {
+        const editor = this.editorRef.nativeElement;
+        const common = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement || editor;
+        const affected = [];
+        const walker = document.createTreeWalker(common, NodeFilter.SHOW_ELEMENT);
+        while (walker.nextNode()) {
+            const el = walker.currentNode;
+            let matches = false;
+            if (el.tagName === 'SPAN' && el.style && el.style.getPropertyValue(cssPropKebab))
+                matches = true;
+            if (cssPropKebab === 'font-weight' && (el.tagName === 'B' || el.tagName === 'STRONG'))
+                matches = true;
+            if (cssPropKebab === 'font-style' && (el.tagName === 'I' || el.tagName === 'EM'))
+                matches = true;
+            if (cssPropKebab === 'text-decoration' && el.tagName === 'U')
+                matches = true;
+            if (!matches)
+                continue;
+            try {
+                if (range.intersectsNode ? range.intersectsNode(el) : true)
+                    affected.push(el);
+            }
+            catch { }
+        }
+        for (const el of affected) {
+            if (el.tagName === 'B' || el.tagName === 'STRONG' || el.tagName === 'I' || el.tagName === 'EM' || el.tagName === 'U') {
+                while (el.firstChild)
+                    el.parentNode?.insertBefore(el.firstChild, el);
+                el.remove();
+                continue;
+            }
+            el.style.removeProperty(cssPropKebab);
+            if (!el.getAttribute('style')) {
+                while (el.firstChild)
+                    el.parentNode?.insertBefore(el.firstChild, el);
+                el.remove();
+            }
+        }
+        this.emitValue();
+    }
+    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);
+        const blocks = this.getIntersectingBlocks(range);
+        const multiBlock = blocks.length > 1;
+        if (anyActive) {
+            if (multiBlock) {
+                for (const b of blocks)
+                    b.style.removeProperty('font-weight');
+                this.emitValue();
+                this.updateInlineStates();
+                this.takeSnapshot('toggle-bold-blocks');
+                return;
+            }
+            // Preferred: split bold ancestor around selection so we keep surrounding text intact
+            const changed = this.deselectBoldBySplitting(range);
+            if (changed) {
+                this.cleanupEmptyBoldSpans(this.editorRef.nativeElement);
+                this.emitValue();
+            }
+            else {
+                // Fallback: previous neutralization approach for complex cases
+                const normal = this.wrapSelectionInline('fontWeight', '400');
+                if (normal) {
+                    this.stripBoldWithin(normal);
+                    this.liftOutOfBoldAncestors(normal);
+                    this.cleanupEmptyBoldSpans(this.editorRef.nativeElement);
+                    this.maybeUnwrapNormalSpan(normal);
+                    this.emitValue();
+                }
+            }
+        }
+        else {
+            if (multiBlock) {
+                for (const b of blocks)
+                    b.style.fontWeight = 'bold';
+                this.emitValue();
+                this.updateInlineStates();
+                this.takeSnapshot('toggle-bold-blocks');
+                return;
+            }
+            this.applyInlineStyleSmart('fontWeight', 'bold');
+        }
+        this.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) {
+            const changed = this.deselectItalicBySplitting(range);
+            if (changed) {
+                this.cleanupEmptyItalicSpans(this.editorRef.nativeElement);
+                this.emitValue();
+            }
+            else {
+                this.removeInlineStyleInRange(range, 'font-style');
+                this.applyInlineStyle('fontStyle', 'normal');
+            }
+        }
+        else {
+            this.applyInlineStyleSmart('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) {
+            const changed = this.deselectUnderlineBySplitting(range);
+            if (changed) {
+                this.cleanupEmptyUnderlineSpans(this.editorRef.nativeElement);
+                this.emitValue();
+            }
+            else {
+                this.removeInlineStyleInRange(range, 'text-decoration');
+                this.applyInlineStyle('textDecoration', 'none');
+            }
+        }
+        else {
+            this.applyInlineStyleSmart('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);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditorMaterial, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StackchRichtextEditorMaterial, isStandalone: true, selector: "stackch-richtext-editor-material", inputs: { placeholder: "placeholder", showToolbar: "showToolbar", fonts: "fonts", fontSizes: "fontSizes", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", disabled: "disabled", config: "config" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:selectionchange": "onSelectionChange()", "document:click": "closeMenus()", "keydown": "onKeydown($event)" } }, providers: [
+            {
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StackchRichtextEditorMaterial, decorators: [{
+            type: Component,
+            args: [{ selector: 'stackch-richtext-editor-material', standalone: true, imports: [CommonModule, StackchRichtextEditorMaterialToolbar], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StackchRichtextEditorMaterial),
+                            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
+            }], 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']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT, StackchRichtextEditorConfig, StackchRichtextEditorI18n, StackchRichtextEditorMaterial, StackchRichtextEditorMaterialToolbar };
+//# sourceMappingURL=stackch-angular-material-richtext-editor.mjs.map