@ecodev/natural-editor 62.1.3 → 62.3.0

package/fesm2022/ecodev-natural-editor.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, Directive, HostBinding, Input, Injectable, Component, EventEmitter, input, ElementRef, ViewChild, Output } from '@angular/core';
+import { inject, Input, HostBinding, Directive, Injectable, Component, viewChild, ElementRef, output, input } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormControl, Validators, FormGroup, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
-import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
 import { Plugin, TextSelection, AllSelection, EditorState } from 'prosemirror-state';
 import { Schema, DOMSerializer, DOMParser } from 'prosemirror-model';
 import * as i1 from '@angular/material/dialog';
@@ -12,7 +12,7 @@ import { setCellAttr, isInTable, selectionCell, CellSelection, tableNodeTypes, a
 import { keymap } from 'prosemirror-keymap';
 import { nodes, marks } from 'prosemirror-schema-basic';
 import { addListNodes, wrapInList, splitListItem, liftListItem, sinkListItem } from 'prosemirror-schema-list';
-import { joinUpItem, liftItem, selectParentNodeItem, undoItem, redoItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
+import { redoItem, undoItem, selectParentNodeItem, liftItem, joinUpItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
 import { ifValid, NaturalIconDirective, rgbToHex, NaturalFileDropDirective } from '@ecodev/natural';
 import * as i4$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -35,6 +35,8 @@ import * as i4$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { Subject } from 'rxjs';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 
 /**
  * Prefix all CSS selectors with the given selector
@@ -91,10 +93,10 @@ class NaturalCustomCssDirective {
             uniqueId = 0;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCustomCssDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalCustomCssDirective, isStandalone: true, selector: "[naturalCustomCss]", inputs: { naturalCustomCss: "naturalCustomCss" }, host: { properties: { "attr.data-natural-id": "this.id" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalCustomCssDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalCustomCssDirective, isStandalone: true, selector: "[naturalCustomCss]", inputs: { naturalCustomCss: "naturalCustomCss" }, host: { properties: { "attr.data-natural-id": "this.id" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCustomCssDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalCustomCssDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[naturalCustomCss]',
@@ -177,10 +179,10 @@ class ImagePlugin {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ImagePlugin, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ImagePlugin, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ImagePlugin, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ImagePlugin, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ImagePlugin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ImagePlugin, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -769,12 +771,12 @@ class ColorDialogComponent {
         this.colorControl.setValue(color);
         this.maybeConfirm();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ColorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ColorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lectionner une couleur</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <div>\n        @for (row of colors; track row) {\n            <div>\n                @for (color of row; track color) {\n                    <div class=\"color\" [style]=\"{backgroundColor: color}\" (click)=\"selectColor(color)\"> </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div>\n        <button mat-button (click)=\"selectColor('')\">\n            <mat-icon naturalIcon=\"format_color_reset\" />\n            <span i18n>Transparent</span></button\n        >\n    </div>\n\n    <mat-form-field>\n        <mat-label i18n>Couleur</mat-label>\n        <input matInput [formControl]=\"colorControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n        <div\n            class=\"sample\"\n            matTextSuffix\n            [style]=\"{backgroundColor: colorControl.valid ? colorControl.value : ''}\"\n        ></div>\n        @if (colorControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre le format hexadecimal. Par exemple: #ff4000 </mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;row-gap:25px;justify-content:center;width:70vw;max-width:30em}.color{display:inline-block;cursor:pointer;margin:3px;width:25px;height:25px}.color:hover{margin:0;padding:3px}.sample{width:27px;height:27px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ColorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: ColorDialogComponent, isStandalone: true, selector: "natural-editor-color-dialog", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lectionner une couleur</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <div>\n        @for (row of colors; track row) {\n            <div>\n                @for (color of row; track color) {\n                    <div class=\"color\" [style]=\"{backgroundColor: color}\" (click)=\"selectColor(color)\"> </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div>\n        <button mat-button (click)=\"selectColor('')\">\n            <mat-icon naturalIcon=\"format_color_reset\" />\n            <span i18n>Transparent</span></button\n        >\n    </div>\n\n    <mat-form-field>\n        <mat-label i18n>Couleur</mat-label>\n        <input matInput cdkFocusInitial [formControl]=\"colorControl\" (keydown.enter)=\"maybeConfirm()\" />\n        <div\n            class=\"sample\"\n            matTextSuffix\n            [style]=\"{backgroundColor: colorControl.valid ? colorControl.value : ''}\"\n        ></div>\n        @if (colorControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre le format hexadecimal. Par exemple: #ff4000 </mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"maybeConfirm()\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;row-gap:25px;justify-content:center;width:70vw;max-width:30em}.color{display:inline-block;cursor:pointer;margin:3px;width:25px;height:25px}.color:hover{margin:0;padding:3px}.sample{width:27px;height:27px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ColorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ColorDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
+            args: [{ selector: 'natural-editor-color-dialog', imports: [
                         MatDialogModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -783,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         NaturalIconDirective,
                         MatFormFieldModule,
                         MatInputModule,
-                    ], template: "<h2 i18n mat-dialog-title>S\u00E9lectionner une couleur</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <div>\n        @for (row of colors; track row) {\n            <div>\n                @for (color of row; track color) {\n                    <div class=\"color\" [style]=\"{backgroundColor: color}\" (click)=\"selectColor(color)\"> </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div>\n        <button mat-button (click)=\"selectColor('')\">\n            <mat-icon naturalIcon=\"format_color_reset\" />\n            <span i18n>Transparent</span></button\n        >\n    </div>\n\n    <mat-form-field>\n        <mat-label i18n>Couleur</mat-label>\n        <input matInput [formControl]=\"colorControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n        <div\n            class=\"sample\"\n            matTextSuffix\n            [style]=\"{backgroundColor: colorControl.valid ? colorControl.value : ''}\"\n        ></div>\n        @if (colorControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre le format hexadecimal. Par exemple: #ff4000 </mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;row-gap:25px;justify-content:center;width:70vw;max-width:30em}.color{display:inline-block;cursor:pointer;margin:3px;width:25px;height:25px}.color:hover{margin:0;padding:3px}.sample{width:27px;height:27px}\n"] }]
+                    ], template: "<h2 i18n mat-dialog-title>S\u00E9lectionner une couleur</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <div>\n        @for (row of colors; track row) {\n            <div>\n                @for (color of row; track color) {\n                    <div class=\"color\" [style]=\"{backgroundColor: color}\" (click)=\"selectColor(color)\"> </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div>\n        <button mat-button (click)=\"selectColor('')\">\n            <mat-icon naturalIcon=\"format_color_reset\" />\n            <span i18n>Transparent</span></button\n        >\n    </div>\n\n    <mat-form-field>\n        <mat-label i18n>Couleur</mat-label>\n        <input matInput cdkFocusInitial [formControl]=\"colorControl\" (keydown.enter)=\"maybeConfirm()\" />\n        <div\n            class=\"sample\"\n            matTextSuffix\n            [style]=\"{backgroundColor: colorControl.valid ? colorControl.value : ''}\"\n        ></div>\n        @if (colorControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre le format hexadecimal. Par exemple: #ff4000 </mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"maybeConfirm()\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;row-gap:25px;justify-content:center;width:70vw;max-width:30em}.color{display:inline-block;cursor:pointer;margin:3px;width:25px;height:25px}.color:hover{margin:0;padding:3px}.sample{width:27px;height:27px}\n"] }]
         }], ctorParameters: () => [] });
 
 const setCellBackgroundColor = setCellAttr.bind(null, 'background');
@@ -856,12 +858,12 @@ class LinkDialogComponent {
     confirm() {
         this.dialogRef.close(this.form.getRawValue());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: LinkDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>URL</mat-label>\n        <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n        @if (hrefControl.hasError('required')) {\n            <mat-error i18n>Ce champ est requis</mat-error>\n        }\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label i18n>Titre</mat-label>\n        <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:60em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LinkDialogComponent, isStandalone: true, selector: "natural-editor-link-dialog", ngImport: i0, template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>URL</mat-label>\n        <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n        @if (hrefControl.hasError('required')) {\n            <mat-error i18n>Ce champ est requis</mat-error>\n        }\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label i18n>Titre</mat-label>\n        <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"maybeConfirm()\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:60em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: LinkDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LinkDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>URL</mat-label>\n        <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n        @if (hrefControl.hasError('required')) {\n            <mat-error i18n>Ce champ est requis</mat-error>\n        }\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label i18n>Titre</mat-label>\n        <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:60em}\n"] }]
+            args: [{ selector: 'natural-editor-link-dialog', imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>URL</mat-label>\n        <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n        @if (hrefControl.hasError('required')) {\n            <mat-error i18n>Ce champ est requis</mat-error>\n        }\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label i18n>Titre</mat-label>\n        <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"maybeConfirm()\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:60em}\n"] }]
         }], ctorParameters: () => [] });
 
 function markActive(state, type) {
@@ -999,12 +1001,12 @@ class ClassDialogComponent {
     confirm() {
         this.dialogRef.close(this.form.getRawValue());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ClassDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ClassDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>Saisir les classes CSS</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>Classes CSS</mat-label>\n        <input matInput [formControl]=\"classControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n        @if (classControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre un ou plusieurs nom de classe CSS</mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ClassDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: ClassDialogComponent, isStandalone: true, selector: "natural-editor-class-dialog", ngImport: i0, template: "<h2 i18n mat-dialog-title>Saisir les classes CSS</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>Classes CSS</mat-label>\n        <input matInput cdkFocusInitial [formControl]=\"classControl\" (keydown.enter)=\"maybeConfirm()\" />\n        @if (classControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre un ou plusieurs nom de classe CSS</mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"maybeConfirm()\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ClassDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ClassDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Saisir les classes CSS</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>Classes CSS</mat-label>\n        <input matInput [formControl]=\"classControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n        @if (classControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre un ou plusieurs nom de classe CSS</mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"] }]
+            args: [{ selector: 'natural-editor-class-dialog', imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Saisir les classes CSS</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>Classes CSS</mat-label>\n        <input matInput cdkFocusInitial [formControl]=\"classControl\" (keydown.enter)=\"maybeConfirm()\" />\n        @if (classControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre un ou plusieurs nom de classe CSS</mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"maybeConfirm()\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"] }]
         }], ctorParameters: () => [] });
 
 function setClass(tr, classValue, allowedNodeTypes) {
@@ -1108,12 +1110,12 @@ class IdDialogComponent {
     confirm() {
         this.dialogRef.close(this.form.getRawValue());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: IdDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>Saisir le ID</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>ID</mat-label>\n        <input matInput [formControl]=\"idControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n        @if (idControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre un ID valide</mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: IdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: IdDialogComponent, isStandalone: true, selector: "natural-editor-id-dialog", ngImport: i0, template: "<h2 i18n mat-dialog-title>Saisir le ID</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>ID</mat-label>\n        <input matInput cdkFocusInitial [formControl]=\"idControl\" (keydown.enter)=\"maybeConfirm()\" />\n        @if (idControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre un ID valide</mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"maybeConfirm()\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IdDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: IdDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Saisir le ID</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>ID</mat-label>\n        <input matInput [formControl]=\"idControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n        @if (idControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre un ID valide</mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"] }]
+            args: [{ selector: 'natural-editor-id-dialog', imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Saisir le ID</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>ID</mat-label>\n        <input matInput cdkFocusInitial [formControl]=\"idControl\" (keydown.enter)=\"maybeConfirm()\" />\n        @if (idControl.hasError('pattern')) {\n            <mat-error i18n>Doit \u00EAtre un ID valide</mat-error>\n        }\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n>Annuler</button>\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"maybeConfirm()\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"] }]
         }], ctorParameters: () => [] });
 
 function setId(tr, idValue, allowedNodeTypes) {
@@ -1583,8 +1585,8 @@ class NaturalEditorComponent {
     dialog = inject(MatDialog);
     imagePlugin = inject(ImagePlugin);
     view = null;
-    editor;
-    contentChange = new EventEmitter();
+    editor = viewChild.required('editor', { read: ElementRef });
+    contentChange = output();
     /**
      * Callback to upload an image.
      *
@@ -1610,10 +1612,11 @@ class NaturalEditorComponent {
      */
     content = '';
     menu = null;
+    save$ = new Subject();
     /**
      * If subscribed to, then the save button will be shown and click events forwarded
      */
-    save = new EventEmitter();
+    save = outputFromObservable(this.save$);
     disabled = false;
     constructor() {
         if (this.ngControl !== null) {
@@ -1625,7 +1628,7 @@ class NaturalEditorComponent {
         this.menu = buildMenuItems(this.schema, this.dialog);
         const serializer = DOMSerializer.fromSchema(this.schema);
         const state = this.createState();
-        this.view = new EditorView(this.editor.nativeElement, {
+        this.view = new EditorView(this.editor().nativeElement, {
             state: state,
             editable: () => !this.disabled,
             dispatchTransaction: (transaction) => {
@@ -1674,6 +1677,7 @@ class NaturalEditorComponent {
         });
     }
     createPlugins() {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         const isMac = !!this.document.defaultView?.navigator.platform.match(/Mac/);
         const plugins = [
             buildInputRules(this.schema),
@@ -1748,12 +1752,12 @@ class NaturalEditorComponent {
         }
         this.view.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalEditorComponent, isStandalone: true, selector: "natural-editor", inputs: { imageUploader: { classPropertyName: "imageUploader", publicName: "imageUploader", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", save: "save" }, providers: [ImagePlugin], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (menu && !this.disabled) {\n    <div class=\"menu-container\">\n        <div class=\"menu\">\n            @if (save.observed) {\n                <button mat-icon-button (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n                    <mat-icon fontIcon=\"save\" />\n                </button>\n            }\n            <mat-button-toggle-group hideMultipleSelectionIndicator multiple>\n                @if (menu.toggleStrong) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.toggleStrong.disabled\"\n                        [checked]=\"menu.toggleStrong.active\"\n                        (click)=\"run($event, 'toggleStrong')\"\n                        i18n-matTooltip\n                        matTooltip=\"Gras\"\n                    >\n                        <mat-icon fontIcon=\"format_bold\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleEm) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.toggleEm.disabled\"\n                        [checked]=\"menu.toggleEm.active\"\n                        (click)=\"run($event, 'toggleEm')\"\n                        i18n-matTooltip\n                        matTooltip=\"Italique\"\n                    >\n                        <mat-icon fontIcon=\"format_italic\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleCode) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.toggleCode.disabled\"\n                        [checked]=\"menu.toggleCode.active\"\n                        (click)=\"run($event, 'toggleCode')\"\n                        i18n-matTooltip\n                        matTooltip=\"Code\"\n                    >\n                        <mat-icon fontIcon=\"code\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleLink) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.toggleLink.disabled\"\n                        [checked]=\"menu.toggleLink.active\"\n                        (click)=\"run($event, 'toggleLink')\"\n                        i18n-matTooltip\n                        matTooltip=\"Ins\u00E9rer un lien...\"\n                    >\n                        <mat-icon fontIcon=\"insert_link\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.textColor) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.textColor.disabled\"\n                        [checked]=\"menu.textColor.active\"\n                        (click)=\"run($event, 'textColor')\"\n                        i18n-matTooltip\n                        matTooltip=\"Couleur du texte...\"\n                    >\n                        <mat-icon fontIcon=\"format_color_text\" />\n                    </mat-button-toggle>\n                }\n            </mat-button-toggle-group>\n            <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n                <span i18n>Type</span>\n                <mat-icon fontIcon=\"arrow_drop_down\" />\n            </button>\n            <mat-menu #blockMenu=\"matMenu\">\n                @if (menu.makeParagraph) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.makeParagraph.disabled\"\n                        (click)=\"run($event, 'makeParagraph')\"\n                        i18n\n                        >Paragraphe\n                    </button>\n                }\n                @if (menu.makeCodeBlock) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.makeCodeBlock.disabled\"\n                        (click)=\"run($event, 'makeCodeBlock')\"\n                        i18n\n                        >Code\n                    </button>\n                }\n                @if (menu.makeHead1) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead1.disabled\" (click)=\"run($event, 'makeHead1')\" i18n\n                        >Titre 1\n                    </button>\n                }\n                @if (menu.makeHead2) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead2.disabled\" (click)=\"run($event, 'makeHead2')\" i18n\n                        >Titre 2\n                    </button>\n                }\n                @if (menu.makeHead3) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead3.disabled\" (click)=\"run($event, 'makeHead3')\" i18n\n                        >Titre 3\n                    </button>\n                }\n                @if (menu.makeHead4) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead4.disabled\" (click)=\"run($event, 'makeHead4')\" i18n\n                        >Titre 4\n                    </button>\n                }\n                @if (menu.makeHead5) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead5.disabled\" (click)=\"run($event, 'makeHead5')\" i18n\n                        >Titre 5\n                    </button>\n                }\n                @if (menu.makeHead6) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead6.disabled\" (click)=\"run($event, 'makeHead6')\" i18n\n                        >Titre 6\n                    </button>\n                }\n                @if (menu.blockClass || menu.blockId) {\n                    <mat-divider />\n                }\n                @if (menu.blockClass) {\n                    <button mat-menu-item [disabled]=\"menu.blockClass.disabled\" (click)=\"run($event, 'blockClass')\" i18n\n                        >Classe...\n                    </button>\n                }\n                @if (menu.blockId) {\n                    <button i18n mat-menu-item [disabled]=\"menu.blockId.disabled\" (click)=\"run($event, 'blockId')\"\n                        >ID...\n                    </button>\n                }\n            </mat-menu>\n            @if (menu.addColumnBefore) {\n                <button mat-button [matMenuTriggerFor]=\"tableMenu\">\n                    <span i18n>Tableau</span>\n                    <mat-icon fontIcon=\"arrow_drop_down\" />\n                </button>\n            }\n            <mat-menu #tableMenu=\"matMenu\">\n                @if (menu.insertTable) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.insertTable.disabled\"\n                        (click)=\"run($event, 'insertTable')\"\n                        i18n\n                        >Ins\u00E9rer un tableau\n                    </button>\n                }\n                @if (menu.deleteTable) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.deleteTable.disabled\"\n                        (click)=\"run($event, 'deleteTable')\"\n                        i18n\n                        >Supprimer le tableau\n                    </button>\n                }\n                @if (menu.mergeCells) {\n                    <button mat-menu-item [disabled]=\"menu.mergeCells.disabled\" (click)=\"run($event, 'mergeCells')\" i18n\n                        >Fusionner les cellules\n                    </button>\n                }\n                @if (menu.splitCell) {\n                    <button mat-menu-item [disabled]=\"menu.splitCell.disabled\" (click)=\"run($event, 'splitCell')\" i18n\n                        >Scinder les cellules\n                    </button>\n                }\n                @if (menu.cellBackgroundColor) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.cellBackgroundColor.disabled\"\n                        (click)=\"run($event, 'cellBackgroundColor')\"\n                        i18n\n                        >Couleur de fond...\n                    </button>\n                }\n                @if (menu.tableClass) {\n                    <button mat-menu-item [disabled]=\"menu.tableClass.disabled\" (click)=\"run($event, 'tableClass')\" i18n\n                        >Classe...\n                    </button>\n                }\n                @if (menu.tableId) {\n                    <button i18n mat-menu-item [disabled]=\"menu.tableId.disabled\" (click)=\"run($event, 'tableId')\"\n                        >ID...\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.addColumnBefore) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.addColumnBefore.disabled\"\n                        (click)=\"run($event, 'addColumnBefore')\"\n                        i18n\n                        >Ins\u00E9rer une colonne avant\n                    </button>\n                }\n                @if (menu.addColumnAfter) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.addColumnAfter.disabled\"\n                        (click)=\"run($event, 'addColumnAfter')\"\n                        i18n\n                        >Ins\u00E9rer une colonne apr\u00E8s\n                    </button>\n                }\n                @if (menu.deleteColumn) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.deleteColumn.disabled\"\n                        (click)=\"run($event, 'deleteColumn')\"\n                        i18n\n                        >Supprimer la colonne\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.addRowBefore) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.addRowBefore.disabled\"\n                        (click)=\"run($event, 'addRowBefore')\"\n                        i18n\n                        >Ins\u00E9rer une ligne avant\n                    </button>\n                }\n                @if (menu.addRowAfter) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.addRowAfter.disabled\"\n                        (click)=\"run($event, 'addRowAfter')\"\n                        i18n\n                        >Ins\u00E9rer une ligne apr\u00E8s\n                    </button>\n                }\n                @if (menu.deleteRow) {\n                    <button mat-menu-item [disabled]=\"menu.deleteRow.disabled\" (click)=\"run($event, 'deleteRow')\" i18n\n                        >Supprimer la ligne\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.toggleHeaderColumn) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.toggleHeaderColumn.disabled\"\n                        (click)=\"run($event, 'toggleHeaderColumn')\"\n                        i18n\n                        >Ent\u00EAte de colonne\n                    </button>\n                }\n                @if (menu.toggleHeaderRow) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.toggleHeaderRow.disabled\"\n                        (click)=\"run($event, 'toggleHeaderRow')\"\n                        i18n\n                        >Ent\u00EAte de ligne\n                    </button>\n                }\n                @if (menu.toggleHeaderCell) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.toggleHeaderCell.disabled\"\n                        (click)=\"run($event, 'toggleHeaderCell')\"\n                        i18n\n                        >Ent\u00EAte de cellule\n                    </button>\n                }\n            </mat-menu>\n            @if (imageUploader) {\n                <button\n                    mat-icon-button\n                    naturalFileDrop\n                    [selectable]=\"true\"\n                    [broadcast]=\"false\"\n                    i18n-matTooltip\n                    matTooltip=\"Ins\u00E9rer une image\"\n                    (fileChange)=\"upload($event)\"\n                >\n                    <mat-icon fontIcon=\"insert_photo\" />\n                </button>\n            }\n            @if (menu.alignLeft) {\n                <mat-button-toggle-group hideSingleSelectionIndicator>\n                    @if (menu.alignLeft) {\n                        <mat-button-toggle\n                            [disabled]=\"menu.alignLeft.disabled\"\n                            [checked]=\"menu.alignLeft.active\"\n                            (click)=\"run($event, 'alignLeft')\"\n                            i18n-matTooltip\n                            matTooltip=\"Aligner gauche\"\n                        >\n                            <mat-icon fontIcon=\"format_align_left\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignCenter) {\n                        <mat-button-toggle\n                            [disabled]=\"menu.alignCenter.disabled\"\n                            [checked]=\"menu.alignCenter.active\"\n                            (click)=\"run($event, 'alignCenter')\"\n                            i18n-matTooltip\n                            matTooltip=\"Centrer\"\n                        >\n                            <mat-icon fontIcon=\"format_align_center\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignRight) {\n                        <mat-button-toggle\n                            [disabled]=\"menu.alignRight.disabled\"\n                            [checked]=\"menu.alignRight.active\"\n                            (click)=\"run($event, 'alignRight')\"\n                            i18n-matTooltip\n                            matTooltip=\"Aligner droite\"\n                        >\n                            <mat-icon fontIcon=\"format_align_right\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignJustify) {\n                        <mat-button-toggle\n                            [disabled]=\"menu.alignJustify.disabled\"\n                            [checked]=\"menu.alignJustify.active\"\n                            (click)=\"run($event, 'alignJustify')\"\n                            i18n-matTooltip\n                            matTooltip=\"Justifier\"\n                        >\n                            <mat-icon fontIcon=\"format_align_justify\" />\n                        </mat-button-toggle>\n                    }\n                </mat-button-toggle-group>\n            }\n            @if (menu.undo) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.undo.disabled\"\n                    (click)=\"run($event, 'undo')\"\n                    i18n-matTooltip\n                    matTooltip=\"Annuler\"\n                >\n                    <mat-icon fontIcon=\"undo\" />\n                </button>\n            }\n            @if (menu.redo) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.redo.disabled\"\n                    (click)=\"run($event, 'redo')\"\n                    i18n-matTooltip\n                    matTooltip=\"Refaire\"\n                >\n                    <mat-icon fontIcon=\"redo\" />\n                </button>\n            }\n            @if (menu.wrapBulletList && menu.wrapBulletList.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.wrapBulletList.disabled\"\n                    (click)=\"run($event, 'wrapBulletList')\"\n                    i18n-matTooltip\n                    matTooltip=\"Liste \u00E0 puce\"\n                >\n                    <mat-icon fontIcon=\"format_list_bulleted\" />\n                </button>\n            }\n            @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.wrapOrderedList.disabled\"\n                    (click)=\"run($event, 'wrapOrderedList')\"\n                    i18n-matTooltip\n                    matTooltip=\"Liste \u00E0 num\u00E9ro\"\n                >\n                    <mat-icon fontIcon=\"format_list_numbered\" />\n                </button>\n            }\n            @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.wrapBlockQuote.disabled\"\n                    (click)=\"run($event, 'wrapBlockQuote')\"\n                    i18n-matTooltip\n                    matTooltip=\"Citation\"\n                >\n                    <mat-icon fontIcon=\"format_quote\" />\n                </button>\n            }\n            @if (menu.joinUp && menu.joinUp.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.joinUp.disabled\"\n                    (click)=\"run($event, 'joinUp')\"\n                    i18n-matTooltip\n                    matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n                >\n                    <mat-icon fontIcon=\"move_up\" />\n                </button>\n            }\n            @if (menu.lift && menu.lift.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.lift.disabled\"\n                    (click)=\"run($event, 'lift')\"\n                    i18n-matTooltip\n                    matTooltip=\"D\u00E9sindenter\"\n                >\n                    <mat-icon fontIcon=\"format_indent_decrease\" />\n                </button>\n            }\n            @if (menu.selectParentNode && menu.selectParentNode.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.selectParentNode.disabled\"\n                    (click)=\"run($event, 'selectParentNode')\"\n                    i18n-matTooltip\n                    matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n                >\n                    <mat-icon fontIcon=\"select_all\" />\n                </button>\n            }\n        </div>\n    </div>\n}\n<div class=\"editor-container\" #editor></div>\n", styles: [".menu{display:flex;flex-wrap:wrap;border-bottom:1px solid;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{--padding-right: 8px;--padding-left: 14px;position:relative;outline:none;padding:4px var(--padding-right) 4px var(--padding-left);width:calc(100% - var(--padding-right) - var(--padding-left));line-height:1.2;word-wrap:break-word;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;white-space:pre-wrap}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none;content:\"\"}::ng-deep .ProseMirror-gapcursor{display:none;position:absolute;pointer-events:none}::ng-deep .ProseMirror-gapcursor:after{display:block;position:absolute;top:-2px;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite;border-top:1px solid black;width:20px;content:\"\"}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{margin:1em 0;border:none;padding:2px 10px}::ng-deep .ProseMirror-example-setup-style hr:after{display:block;background-color:silver;height:1px;content:\"\";line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{margin-right:0;margin-left:0;border-left:3px solid #eee;padding-left:1em}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;width:100%;table-layout:fixed;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{position:relative;vertical-align:top;box-sizing:border-box}::ng-deep .ProseMirror .column-resize-handle{position:absolute;top:0;right:-2px;bottom:0;z-index:20;background-color:#adf;width:4px;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{position:absolute;inset:0;z-index:2;background:#c8c8ff66;pointer-events:none;content:\"\"}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{border:1px solid #ddd;padding:3px 5px;min-width:1em}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;animation:gradient 3s none infinite;background-size:500% 100%!important;width:50px;height:50px}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.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: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.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: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalEditorComponent, isStandalone: true, selector: "natural-editor", inputs: { imageUploader: { classPropertyName: "imageUploader", publicName: "imageUploader", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", save: "save" }, providers: [ImagePlugin], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (menu && !disabled) {\n    <div class=\"menu-container\">\n        <div class=\"menu\">\n            @if (save$.observed) {\n                <button mat-icon-button i18n-matTooltip matTooltip=\"Enregistrer\" (click)=\"save$.next()\">\n                    <mat-icon fontIcon=\"save\" />\n                </button>\n            }\n            <mat-button-toggle-group hideMultipleSelectionIndicator multiple>\n                @if (menu.toggleStrong) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Gras\"\n                        [disabled]=\"menu.toggleStrong.disabled\"\n                        [checked]=\"menu.toggleStrong.active\"\n                        (click)=\"run($event, 'toggleStrong')\"\n                    >\n                        <mat-icon fontIcon=\"format_bold\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleEm) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Italique\"\n                        [disabled]=\"menu.toggleEm.disabled\"\n                        [checked]=\"menu.toggleEm.active\"\n                        (click)=\"run($event, 'toggleEm')\"\n                    >\n                        <mat-icon fontIcon=\"format_italic\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleCode) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Code\"\n                        [disabled]=\"menu.toggleCode.disabled\"\n                        [checked]=\"menu.toggleCode.active\"\n                        (click)=\"run($event, 'toggleCode')\"\n                    >\n                        <mat-icon fontIcon=\"code\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleLink) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Ins\u00E9rer un lien...\"\n                        [disabled]=\"menu.toggleLink.disabled\"\n                        [checked]=\"menu.toggleLink.active\"\n                        (click)=\"run($event, 'toggleLink')\"\n                    >\n                        <mat-icon fontIcon=\"insert_link\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.textColor) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Couleur du texte...\"\n                        [disabled]=\"menu.textColor.disabled\"\n                        [checked]=\"menu.textColor.active\"\n                        (click)=\"run($event, 'textColor')\"\n                    >\n                        <mat-icon fontIcon=\"format_color_text\" />\n                    </mat-button-toggle>\n                }\n            </mat-button-toggle-group>\n            <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n                <span i18n>Type</span>\n                <mat-icon fontIcon=\"arrow_drop_down\" />\n            </button>\n            <mat-menu #blockMenu=\"matMenu\">\n                @if (menu.makeParagraph) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.makeParagraph.disabled\"\n                        (click)=\"run($event, 'makeParagraph')\"\n                        >Paragraphe\n                    </button>\n                }\n                @if (menu.makeCodeBlock) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.makeCodeBlock.disabled\"\n                        (click)=\"run($event, 'makeCodeBlock')\"\n                        >Code\n                    </button>\n                }\n                @if (menu.makeHead1) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead1.disabled\" (click)=\"run($event, 'makeHead1')\"\n                        >Titre 1\n                    </button>\n                }\n                @if (menu.makeHead2) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead2.disabled\" (click)=\"run($event, 'makeHead2')\"\n                        >Titre 2\n                    </button>\n                }\n                @if (menu.makeHead3) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead3.disabled\" (click)=\"run($event, 'makeHead3')\"\n                        >Titre 3\n                    </button>\n                }\n                @if (menu.makeHead4) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead4.disabled\" (click)=\"run($event, 'makeHead4')\"\n                        >Titre 4\n                    </button>\n                }\n                @if (menu.makeHead5) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead5.disabled\" (click)=\"run($event, 'makeHead5')\"\n                        >Titre 5\n                    </button>\n                }\n                @if (menu.makeHead6) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead6.disabled\" (click)=\"run($event, 'makeHead6')\"\n                        >Titre 6\n                    </button>\n                }\n                @if (menu.blockClass || menu.blockId) {\n                    <mat-divider />\n                }\n                @if (menu.blockClass) {\n                    <button mat-menu-item i18n [disabled]=\"menu.blockClass.disabled\" (click)=\"run($event, 'blockClass')\"\n                        >Classe...\n                    </button>\n                }\n                @if (menu.blockId) {\n                    <button i18n mat-menu-item [disabled]=\"menu.blockId.disabled\" (click)=\"run($event, 'blockId')\"\n                        >ID...\n                    </button>\n                }\n            </mat-menu>\n            @if (menu.addColumnBefore) {\n                <button mat-button [matMenuTriggerFor]=\"tableMenu\">\n                    <span i18n>Tableau</span>\n                    <mat-icon fontIcon=\"arrow_drop_down\" />\n                </button>\n            }\n            <mat-menu #tableMenu=\"matMenu\">\n                @if (menu.insertTable) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.insertTable.disabled\"\n                        (click)=\"run($event, 'insertTable')\"\n                        >Ins\u00E9rer un tableau\n                    </button>\n                }\n                @if (menu.deleteTable) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.deleteTable.disabled\"\n                        (click)=\"run($event, 'deleteTable')\"\n                        >Supprimer le tableau\n                    </button>\n                }\n                @if (menu.mergeCells) {\n                    <button mat-menu-item i18n [disabled]=\"menu.mergeCells.disabled\" (click)=\"run($event, 'mergeCells')\"\n                        >Fusionner les cellules\n                    </button>\n                }\n                @if (menu.splitCell) {\n                    <button mat-menu-item i18n [disabled]=\"menu.splitCell.disabled\" (click)=\"run($event, 'splitCell')\"\n                        >Scinder les cellules\n                    </button>\n                }\n                @if (menu.cellBackgroundColor) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.cellBackgroundColor.disabled\"\n                        (click)=\"run($event, 'cellBackgroundColor')\"\n                        >Couleur de fond...\n                    </button>\n                }\n                @if (menu.tableClass) {\n                    <button mat-menu-item i18n [disabled]=\"menu.tableClass.disabled\" (click)=\"run($event, 'tableClass')\"\n                        >Classe...\n                    </button>\n                }\n                @if (menu.tableId) {\n                    <button i18n mat-menu-item [disabled]=\"menu.tableId.disabled\" (click)=\"run($event, 'tableId')\"\n                        >ID...\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.addColumnBefore) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.addColumnBefore.disabled\"\n                        (click)=\"run($event, 'addColumnBefore')\"\n                        >Ins\u00E9rer une colonne avant\n                    </button>\n                }\n                @if (menu.addColumnAfter) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.addColumnAfter.disabled\"\n                        (click)=\"run($event, 'addColumnAfter')\"\n                        >Ins\u00E9rer une colonne apr\u00E8s\n                    </button>\n                }\n                @if (menu.deleteColumn) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.deleteColumn.disabled\"\n                        (click)=\"run($event, 'deleteColumn')\"\n                        >Supprimer la colonne\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.addRowBefore) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.addRowBefore.disabled\"\n                        (click)=\"run($event, 'addRowBefore')\"\n                        >Ins\u00E9rer une ligne avant\n                    </button>\n                }\n                @if (menu.addRowAfter) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.addRowAfter.disabled\"\n                        (click)=\"run($event, 'addRowAfter')\"\n                        >Ins\u00E9rer une ligne apr\u00E8s\n                    </button>\n                }\n                @if (menu.deleteRow) {\n                    <button mat-menu-item i18n [disabled]=\"menu.deleteRow.disabled\" (click)=\"run($event, 'deleteRow')\"\n                        >Supprimer la ligne\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.toggleHeaderColumn) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.toggleHeaderColumn.disabled\"\n                        (click)=\"run($event, 'toggleHeaderColumn')\"\n                        >Ent\u00EAte de colonne\n                    </button>\n                }\n                @if (menu.toggleHeaderRow) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.toggleHeaderRow.disabled\"\n                        (click)=\"run($event, 'toggleHeaderRow')\"\n                        >Ent\u00EAte de ligne\n                    </button>\n                }\n                @if (menu.toggleHeaderCell) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.toggleHeaderCell.disabled\"\n                        (click)=\"run($event, 'toggleHeaderCell')\"\n                        >Ent\u00EAte de cellule\n                    </button>\n                }\n            </mat-menu>\n            @if (imageUploader) {\n                <button\n                    mat-icon-button\n                    naturalFileDrop\n                    i18n-matTooltip\n                    matTooltip=\"Ins\u00E9rer une image\"\n                    [selectable]=\"true\"\n                    [broadcast]=\"false\"\n                    (fileChange)=\"upload($event)\"\n                >\n                    <mat-icon fontIcon=\"insert_photo\" />\n                </button>\n            }\n            @if (menu.alignLeft) {\n                <mat-button-toggle-group hideSingleSelectionIndicator>\n                    @if (menu.alignLeft) {\n                        <mat-button-toggle\n                            i18n-matTooltip\n                            matTooltip=\"Aligner gauche\"\n                            [disabled]=\"menu.alignLeft.disabled\"\n                            [checked]=\"menu.alignLeft.active\"\n                            (click)=\"run($event, 'alignLeft')\"\n                        >\n                            <mat-icon fontIcon=\"format_align_left\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignCenter) {\n                        <mat-button-toggle\n                            i18n-matTooltip\n                            matTooltip=\"Centrer\"\n                            [disabled]=\"menu.alignCenter.disabled\"\n                            [checked]=\"menu.alignCenter.active\"\n                            (click)=\"run($event, 'alignCenter')\"\n                        >\n                            <mat-icon fontIcon=\"format_align_center\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignRight) {\n                        <mat-button-toggle\n                            i18n-matTooltip\n                            matTooltip=\"Aligner droite\"\n                            [disabled]=\"menu.alignRight.disabled\"\n                            [checked]=\"menu.alignRight.active\"\n                            (click)=\"run($event, 'alignRight')\"\n                        >\n                            <mat-icon fontIcon=\"format_align_right\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignJustify) {\n                        <mat-button-toggle\n                            i18n-matTooltip\n                            matTooltip=\"Justifier\"\n                            [disabled]=\"menu.alignJustify.disabled\"\n                            [checked]=\"menu.alignJustify.active\"\n                            (click)=\"run($event, 'alignJustify')\"\n                        >\n                            <mat-icon fontIcon=\"format_align_justify\" />\n                        </mat-button-toggle>\n                    }\n                </mat-button-toggle-group>\n            }\n            @if (menu.undo) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Annuler\"\n                    [disabled]=\"menu.undo.disabled\"\n                    (click)=\"run($event, 'undo')\"\n                >\n                    <mat-icon fontIcon=\"undo\" />\n                </button>\n            }\n            @if (menu.redo) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Refaire\"\n                    [disabled]=\"menu.redo.disabled\"\n                    (click)=\"run($event, 'redo')\"\n                >\n                    <mat-icon fontIcon=\"redo\" />\n                </button>\n            }\n            @if (menu.wrapBulletList && menu.wrapBulletList.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Liste \u00E0 puce\"\n                    [disabled]=\"menu.wrapBulletList.disabled\"\n                    (click)=\"run($event, 'wrapBulletList')\"\n                >\n                    <mat-icon fontIcon=\"format_list_bulleted\" />\n                </button>\n            }\n            @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Liste \u00E0 num\u00E9ro\"\n                    [disabled]=\"menu.wrapOrderedList.disabled\"\n                    (click)=\"run($event, 'wrapOrderedList')\"\n                >\n                    <mat-icon fontIcon=\"format_list_numbered\" />\n                </button>\n            }\n            @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Citation\"\n                    [disabled]=\"menu.wrapBlockQuote.disabled\"\n                    (click)=\"run($event, 'wrapBlockQuote')\"\n                >\n                    <mat-icon fontIcon=\"format_quote\" />\n                </button>\n            }\n            @if (menu.joinUp && menu.joinUp.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n                    [disabled]=\"menu.joinUp.disabled\"\n                    (click)=\"run($event, 'joinUp')\"\n                >\n                    <mat-icon fontIcon=\"move_up\" />\n                </button>\n            }\n            @if (menu.lift && menu.lift.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"D\u00E9sindenter\"\n                    [disabled]=\"menu.lift.disabled\"\n                    (click)=\"run($event, 'lift')\"\n                >\n                    <mat-icon fontIcon=\"format_indent_decrease\" />\n                </button>\n            }\n            @if (menu.selectParentNode && menu.selectParentNode.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n                    [disabled]=\"menu.selectParentNode.disabled\"\n                    (click)=\"run($event, 'selectParentNode')\"\n                >\n                    <mat-icon fontIcon=\"select_all\" />\n                </button>\n            }\n        </div>\n    </div>\n}\n<div #editor class=\"editor-container\"></div>\n", styles: [".menu{display:flex;flex-wrap:wrap;border-bottom:1px solid;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{--padding-right: 8px;--padding-left: 14px;position:relative;outline:none;padding:4px var(--padding-right) 4px var(--padding-left);width:calc(100% - var(--padding-right) - var(--padding-left));line-height:1.2;word-wrap:break-word;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;white-space:pre-wrap}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none;content:\"\"}::ng-deep .ProseMirror-gapcursor{display:none;position:absolute;pointer-events:none}::ng-deep .ProseMirror-gapcursor:after{display:block;position:absolute;top:-2px;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite;border-top:1px solid black;width:20px;content:\"\"}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{margin:1em 0;border:none;padding:2px 10px}::ng-deep .ProseMirror-example-setup-style hr:after{display:block;background-color:silver;height:1px;content:\"\";line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{margin-right:0;margin-left:0;border-left:3px solid #eee;padding-left:1em}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;width:100%;table-layout:fixed;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{position:relative;vertical-align:top;box-sizing:border-box}::ng-deep .ProseMirror .column-resize-handle{position:absolute;top:0;right:-2px;bottom:0;z-index:20;background-color:#adf;width:4px;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{position:absolute;inset:0;z-index:2;background:#c8c8ff66;pointer-events:none;content:\"\"}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{border:1px solid #ddd;padding:3px 5px;min-width:1em}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;animation:gradient 3s none infinite;background-size:500% 100%!important;width:50px;height:50px}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.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: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.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: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-editor', providers: [ImagePlugin], standalone: true, imports: [
+            args: [{ selector: 'natural-editor', providers: [ImagePlugin], imports: [
                         MatButtonModule,
                         MatTooltipModule,
                         MatIconModule,
@@ -1761,19 +1765,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatMenuModule,
                         MatDividerModule,
                         NaturalFileDropDirective,
-                    ], template: "@if (menu && !this.disabled) {\n    <div class=\"menu-container\">\n        <div class=\"menu\">\n            @if (save.observed) {\n                <button mat-icon-button (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n                    <mat-icon fontIcon=\"save\" />\n                </button>\n            }\n            <mat-button-toggle-group hideMultipleSelectionIndicator multiple>\n                @if (menu.toggleStrong) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.toggleStrong.disabled\"\n                        [checked]=\"menu.toggleStrong.active\"\n                        (click)=\"run($event, 'toggleStrong')\"\n                        i18n-matTooltip\n                        matTooltip=\"Gras\"\n                    >\n                        <mat-icon fontIcon=\"format_bold\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleEm) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.toggleEm.disabled\"\n                        [checked]=\"menu.toggleEm.active\"\n                        (click)=\"run($event, 'toggleEm')\"\n                        i18n-matTooltip\n                        matTooltip=\"Italique\"\n                    >\n                        <mat-icon fontIcon=\"format_italic\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleCode) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.toggleCode.disabled\"\n                        [checked]=\"menu.toggleCode.active\"\n                        (click)=\"run($event, 'toggleCode')\"\n                        i18n-matTooltip\n                        matTooltip=\"Code\"\n                    >\n                        <mat-icon fontIcon=\"code\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleLink) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.toggleLink.disabled\"\n                        [checked]=\"menu.toggleLink.active\"\n                        (click)=\"run($event, 'toggleLink')\"\n                        i18n-matTooltip\n                        matTooltip=\"Ins\u00E9rer un lien...\"\n                    >\n                        <mat-icon fontIcon=\"insert_link\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.textColor) {\n                    <mat-button-toggle\n                        [disabled]=\"menu.textColor.disabled\"\n                        [checked]=\"menu.textColor.active\"\n                        (click)=\"run($event, 'textColor')\"\n                        i18n-matTooltip\n                        matTooltip=\"Couleur du texte...\"\n                    >\n                        <mat-icon fontIcon=\"format_color_text\" />\n                    </mat-button-toggle>\n                }\n            </mat-button-toggle-group>\n            <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n                <span i18n>Type</span>\n                <mat-icon fontIcon=\"arrow_drop_down\" />\n            </button>\n            <mat-menu #blockMenu=\"matMenu\">\n                @if (menu.makeParagraph) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.makeParagraph.disabled\"\n                        (click)=\"run($event, 'makeParagraph')\"\n                        i18n\n                        >Paragraphe\n                    </button>\n                }\n                @if (menu.makeCodeBlock) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.makeCodeBlock.disabled\"\n                        (click)=\"run($event, 'makeCodeBlock')\"\n                        i18n\n                        >Code\n                    </button>\n                }\n                @if (menu.makeHead1) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead1.disabled\" (click)=\"run($event, 'makeHead1')\" i18n\n                        >Titre 1\n                    </button>\n                }\n                @if (menu.makeHead2) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead2.disabled\" (click)=\"run($event, 'makeHead2')\" i18n\n                        >Titre 2\n                    </button>\n                }\n                @if (menu.makeHead3) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead3.disabled\" (click)=\"run($event, 'makeHead3')\" i18n\n                        >Titre 3\n                    </button>\n                }\n                @if (menu.makeHead4) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead4.disabled\" (click)=\"run($event, 'makeHead4')\" i18n\n                        >Titre 4\n                    </button>\n                }\n                @if (menu.makeHead5) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead5.disabled\" (click)=\"run($event, 'makeHead5')\" i18n\n                        >Titre 5\n                    </button>\n                }\n                @if (menu.makeHead6) {\n                    <button mat-menu-item [disabled]=\"menu.makeHead6.disabled\" (click)=\"run($event, 'makeHead6')\" i18n\n                        >Titre 6\n                    </button>\n                }\n                @if (menu.blockClass || menu.blockId) {\n                    <mat-divider />\n                }\n                @if (menu.blockClass) {\n                    <button mat-menu-item [disabled]=\"menu.blockClass.disabled\" (click)=\"run($event, 'blockClass')\" i18n\n                        >Classe...\n                    </button>\n                }\n                @if (menu.blockId) {\n                    <button i18n mat-menu-item [disabled]=\"menu.blockId.disabled\" (click)=\"run($event, 'blockId')\"\n                        >ID...\n                    </button>\n                }\n            </mat-menu>\n            @if (menu.addColumnBefore) {\n                <button mat-button [matMenuTriggerFor]=\"tableMenu\">\n                    <span i18n>Tableau</span>\n                    <mat-icon fontIcon=\"arrow_drop_down\" />\n                </button>\n            }\n            <mat-menu #tableMenu=\"matMenu\">\n                @if (menu.insertTable) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.insertTable.disabled\"\n                        (click)=\"run($event, 'insertTable')\"\n                        i18n\n                        >Ins\u00E9rer un tableau\n                    </button>\n                }\n                @if (menu.deleteTable) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.deleteTable.disabled\"\n                        (click)=\"run($event, 'deleteTable')\"\n                        i18n\n                        >Supprimer le tableau\n                    </button>\n                }\n                @if (menu.mergeCells) {\n                    <button mat-menu-item [disabled]=\"menu.mergeCells.disabled\" (click)=\"run($event, 'mergeCells')\" i18n\n                        >Fusionner les cellules\n                    </button>\n                }\n                @if (menu.splitCell) {\n                    <button mat-menu-item [disabled]=\"menu.splitCell.disabled\" (click)=\"run($event, 'splitCell')\" i18n\n                        >Scinder les cellules\n                    </button>\n                }\n                @if (menu.cellBackgroundColor) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.cellBackgroundColor.disabled\"\n                        (click)=\"run($event, 'cellBackgroundColor')\"\n                        i18n\n                        >Couleur de fond...\n                    </button>\n                }\n                @if (menu.tableClass) {\n                    <button mat-menu-item [disabled]=\"menu.tableClass.disabled\" (click)=\"run($event, 'tableClass')\" i18n\n                        >Classe...\n                    </button>\n                }\n                @if (menu.tableId) {\n                    <button i18n mat-menu-item [disabled]=\"menu.tableId.disabled\" (click)=\"run($event, 'tableId')\"\n                        >ID...\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.addColumnBefore) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.addColumnBefore.disabled\"\n                        (click)=\"run($event, 'addColumnBefore')\"\n                        i18n\n                        >Ins\u00E9rer une colonne avant\n                    </button>\n                }\n                @if (menu.addColumnAfter) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.addColumnAfter.disabled\"\n                        (click)=\"run($event, 'addColumnAfter')\"\n                        i18n\n                        >Ins\u00E9rer une colonne apr\u00E8s\n                    </button>\n                }\n                @if (menu.deleteColumn) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.deleteColumn.disabled\"\n                        (click)=\"run($event, 'deleteColumn')\"\n                        i18n\n                        >Supprimer la colonne\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.addRowBefore) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.addRowBefore.disabled\"\n                        (click)=\"run($event, 'addRowBefore')\"\n                        i18n\n                        >Ins\u00E9rer une ligne avant\n                    </button>\n                }\n                @if (menu.addRowAfter) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.addRowAfter.disabled\"\n                        (click)=\"run($event, 'addRowAfter')\"\n                        i18n\n                        >Ins\u00E9rer une ligne apr\u00E8s\n                    </button>\n                }\n                @if (menu.deleteRow) {\n                    <button mat-menu-item [disabled]=\"menu.deleteRow.disabled\" (click)=\"run($event, 'deleteRow')\" i18n\n                        >Supprimer la ligne\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.toggleHeaderColumn) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.toggleHeaderColumn.disabled\"\n                        (click)=\"run($event, 'toggleHeaderColumn')\"\n                        i18n\n                        >Ent\u00EAte de colonne\n                    </button>\n                }\n                @if (menu.toggleHeaderRow) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.toggleHeaderRow.disabled\"\n                        (click)=\"run($event, 'toggleHeaderRow')\"\n                        i18n\n                        >Ent\u00EAte de ligne\n                    </button>\n                }\n                @if (menu.toggleHeaderCell) {\n                    <button\n                        mat-menu-item\n                        [disabled]=\"menu.toggleHeaderCell.disabled\"\n                        (click)=\"run($event, 'toggleHeaderCell')\"\n                        i18n\n                        >Ent\u00EAte de cellule\n                    </button>\n                }\n            </mat-menu>\n            @if (imageUploader) {\n                <button\n                    mat-icon-button\n                    naturalFileDrop\n                    [selectable]=\"true\"\n                    [broadcast]=\"false\"\n                    i18n-matTooltip\n                    matTooltip=\"Ins\u00E9rer une image\"\n                    (fileChange)=\"upload($event)\"\n                >\n                    <mat-icon fontIcon=\"insert_photo\" />\n                </button>\n            }\n            @if (menu.alignLeft) {\n                <mat-button-toggle-group hideSingleSelectionIndicator>\n                    @if (menu.alignLeft) {\n                        <mat-button-toggle\n                            [disabled]=\"menu.alignLeft.disabled\"\n                            [checked]=\"menu.alignLeft.active\"\n                            (click)=\"run($event, 'alignLeft')\"\n                            i18n-matTooltip\n                            matTooltip=\"Aligner gauche\"\n                        >\n                            <mat-icon fontIcon=\"format_align_left\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignCenter) {\n                        <mat-button-toggle\n                            [disabled]=\"menu.alignCenter.disabled\"\n                            [checked]=\"menu.alignCenter.active\"\n                            (click)=\"run($event, 'alignCenter')\"\n                            i18n-matTooltip\n                            matTooltip=\"Centrer\"\n                        >\n                            <mat-icon fontIcon=\"format_align_center\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignRight) {\n                        <mat-button-toggle\n                            [disabled]=\"menu.alignRight.disabled\"\n                            [checked]=\"menu.alignRight.active\"\n                            (click)=\"run($event, 'alignRight')\"\n                            i18n-matTooltip\n                            matTooltip=\"Aligner droite\"\n                        >\n                            <mat-icon fontIcon=\"format_align_right\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignJustify) {\n                        <mat-button-toggle\n                            [disabled]=\"menu.alignJustify.disabled\"\n                            [checked]=\"menu.alignJustify.active\"\n                            (click)=\"run($event, 'alignJustify')\"\n                            i18n-matTooltip\n                            matTooltip=\"Justifier\"\n                        >\n                            <mat-icon fontIcon=\"format_align_justify\" />\n                        </mat-button-toggle>\n                    }\n                </mat-button-toggle-group>\n            }\n            @if (menu.undo) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.undo.disabled\"\n                    (click)=\"run($event, 'undo')\"\n                    i18n-matTooltip\n                    matTooltip=\"Annuler\"\n                >\n                    <mat-icon fontIcon=\"undo\" />\n                </button>\n            }\n            @if (menu.redo) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.redo.disabled\"\n                    (click)=\"run($event, 'redo')\"\n                    i18n-matTooltip\n                    matTooltip=\"Refaire\"\n                >\n                    <mat-icon fontIcon=\"redo\" />\n                </button>\n            }\n            @if (menu.wrapBulletList && menu.wrapBulletList.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.wrapBulletList.disabled\"\n                    (click)=\"run($event, 'wrapBulletList')\"\n                    i18n-matTooltip\n                    matTooltip=\"Liste \u00E0 puce\"\n                >\n                    <mat-icon fontIcon=\"format_list_bulleted\" />\n                </button>\n            }\n            @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.wrapOrderedList.disabled\"\n                    (click)=\"run($event, 'wrapOrderedList')\"\n                    i18n-matTooltip\n                    matTooltip=\"Liste \u00E0 num\u00E9ro\"\n                >\n                    <mat-icon fontIcon=\"format_list_numbered\" />\n                </button>\n            }\n            @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.wrapBlockQuote.disabled\"\n                    (click)=\"run($event, 'wrapBlockQuote')\"\n                    i18n-matTooltip\n                    matTooltip=\"Citation\"\n                >\n                    <mat-icon fontIcon=\"format_quote\" />\n                </button>\n            }\n            @if (menu.joinUp && menu.joinUp.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.joinUp.disabled\"\n                    (click)=\"run($event, 'joinUp')\"\n                    i18n-matTooltip\n                    matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n                >\n                    <mat-icon fontIcon=\"move_up\" />\n                </button>\n            }\n            @if (menu.lift && menu.lift.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.lift.disabled\"\n                    (click)=\"run($event, 'lift')\"\n                    i18n-matTooltip\n                    matTooltip=\"D\u00E9sindenter\"\n                >\n                    <mat-icon fontIcon=\"format_indent_decrease\" />\n                </button>\n            }\n            @if (menu.selectParentNode && menu.selectParentNode.show) {\n                <button\n                    mat-icon-button\n                    [disabled]=\"menu.selectParentNode.disabled\"\n                    (click)=\"run($event, 'selectParentNode')\"\n                    i18n-matTooltip\n                    matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n                >\n                    <mat-icon fontIcon=\"select_all\" />\n                </button>\n            }\n        </div>\n    </div>\n}\n<div class=\"editor-container\" #editor></div>\n", styles: [".menu{display:flex;flex-wrap:wrap;border-bottom:1px solid;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{--padding-right: 8px;--padding-left: 14px;position:relative;outline:none;padding:4px var(--padding-right) 4px var(--padding-left);width:calc(100% - var(--padding-right) - var(--padding-left));line-height:1.2;word-wrap:break-word;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;white-space:pre-wrap}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none;content:\"\"}::ng-deep .ProseMirror-gapcursor{display:none;position:absolute;pointer-events:none}::ng-deep .ProseMirror-gapcursor:after{display:block;position:absolute;top:-2px;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite;border-top:1px solid black;width:20px;content:\"\"}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{margin:1em 0;border:none;padding:2px 10px}::ng-deep .ProseMirror-example-setup-style hr:after{display:block;background-color:silver;height:1px;content:\"\";line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{margin-right:0;margin-left:0;border-left:3px solid #eee;padding-left:1em}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;width:100%;table-layout:fixed;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{position:relative;vertical-align:top;box-sizing:border-box}::ng-deep .ProseMirror .column-resize-handle{position:absolute;top:0;right:-2px;bottom:0;z-index:20;background-color:#adf;width:4px;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{position:absolute;inset:0;z-index:2;background:#c8c8ff66;pointer-events:none;content:\"\"}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{border:1px solid #ddd;padding:3px 5px;min-width:1em}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;animation:gradient 3s none infinite;background-size:500% 100%!important;width:50px;height:50px}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { editor: [{
-                type: ViewChild,
-                args: ['editor', { read: ElementRef, static: true }]
-            }], contentChange: [{
-                type: Output
-            }], imageUploader: [{
+                    ], template: "@if (menu && !disabled) {\n    <div class=\"menu-container\">\n        <div class=\"menu\">\n            @if (save$.observed) {\n                <button mat-icon-button i18n-matTooltip matTooltip=\"Enregistrer\" (click)=\"save$.next()\">\n                    <mat-icon fontIcon=\"save\" />\n                </button>\n            }\n            <mat-button-toggle-group hideMultipleSelectionIndicator multiple>\n                @if (menu.toggleStrong) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Gras\"\n                        [disabled]=\"menu.toggleStrong.disabled\"\n                        [checked]=\"menu.toggleStrong.active\"\n                        (click)=\"run($event, 'toggleStrong')\"\n                    >\n                        <mat-icon fontIcon=\"format_bold\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleEm) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Italique\"\n                        [disabled]=\"menu.toggleEm.disabled\"\n                        [checked]=\"menu.toggleEm.active\"\n                        (click)=\"run($event, 'toggleEm')\"\n                    >\n                        <mat-icon fontIcon=\"format_italic\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleCode) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Code\"\n                        [disabled]=\"menu.toggleCode.disabled\"\n                        [checked]=\"menu.toggleCode.active\"\n                        (click)=\"run($event, 'toggleCode')\"\n                    >\n                        <mat-icon fontIcon=\"code\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.toggleLink) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Ins\u00E9rer un lien...\"\n                        [disabled]=\"menu.toggleLink.disabled\"\n                        [checked]=\"menu.toggleLink.active\"\n                        (click)=\"run($event, 'toggleLink')\"\n                    >\n                        <mat-icon fontIcon=\"insert_link\" />\n                    </mat-button-toggle>\n                }\n                @if (menu.textColor) {\n                    <mat-button-toggle\n                        i18n-matTooltip\n                        matTooltip=\"Couleur du texte...\"\n                        [disabled]=\"menu.textColor.disabled\"\n                        [checked]=\"menu.textColor.active\"\n                        (click)=\"run($event, 'textColor')\"\n                    >\n                        <mat-icon fontIcon=\"format_color_text\" />\n                    </mat-button-toggle>\n                }\n            </mat-button-toggle-group>\n            <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n                <span i18n>Type</span>\n                <mat-icon fontIcon=\"arrow_drop_down\" />\n            </button>\n            <mat-menu #blockMenu=\"matMenu\">\n                @if (menu.makeParagraph) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.makeParagraph.disabled\"\n                        (click)=\"run($event, 'makeParagraph')\"\n                        >Paragraphe\n                    </button>\n                }\n                @if (menu.makeCodeBlock) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.makeCodeBlock.disabled\"\n                        (click)=\"run($event, 'makeCodeBlock')\"\n                        >Code\n                    </button>\n                }\n                @if (menu.makeHead1) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead1.disabled\" (click)=\"run($event, 'makeHead1')\"\n                        >Titre 1\n                    </button>\n                }\n                @if (menu.makeHead2) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead2.disabled\" (click)=\"run($event, 'makeHead2')\"\n                        >Titre 2\n                    </button>\n                }\n                @if (menu.makeHead3) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead3.disabled\" (click)=\"run($event, 'makeHead3')\"\n                        >Titre 3\n                    </button>\n                }\n                @if (menu.makeHead4) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead4.disabled\" (click)=\"run($event, 'makeHead4')\"\n                        >Titre 4\n                    </button>\n                }\n                @if (menu.makeHead5) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead5.disabled\" (click)=\"run($event, 'makeHead5')\"\n                        >Titre 5\n                    </button>\n                }\n                @if (menu.makeHead6) {\n                    <button mat-menu-item i18n [disabled]=\"menu.makeHead6.disabled\" (click)=\"run($event, 'makeHead6')\"\n                        >Titre 6\n                    </button>\n                }\n                @if (menu.blockClass || menu.blockId) {\n                    <mat-divider />\n                }\n                @if (menu.blockClass) {\n                    <button mat-menu-item i18n [disabled]=\"menu.blockClass.disabled\" (click)=\"run($event, 'blockClass')\"\n                        >Classe...\n                    </button>\n                }\n                @if (menu.blockId) {\n                    <button i18n mat-menu-item [disabled]=\"menu.blockId.disabled\" (click)=\"run($event, 'blockId')\"\n                        >ID...\n                    </button>\n                }\n            </mat-menu>\n            @if (menu.addColumnBefore) {\n                <button mat-button [matMenuTriggerFor]=\"tableMenu\">\n                    <span i18n>Tableau</span>\n                    <mat-icon fontIcon=\"arrow_drop_down\" />\n                </button>\n            }\n            <mat-menu #tableMenu=\"matMenu\">\n                @if (menu.insertTable) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.insertTable.disabled\"\n                        (click)=\"run($event, 'insertTable')\"\n                        >Ins\u00E9rer un tableau\n                    </button>\n                }\n                @if (menu.deleteTable) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.deleteTable.disabled\"\n                        (click)=\"run($event, 'deleteTable')\"\n                        >Supprimer le tableau\n                    </button>\n                }\n                @if (menu.mergeCells) {\n                    <button mat-menu-item i18n [disabled]=\"menu.mergeCells.disabled\" (click)=\"run($event, 'mergeCells')\"\n                        >Fusionner les cellules\n                    </button>\n                }\n                @if (menu.splitCell) {\n                    <button mat-menu-item i18n [disabled]=\"menu.splitCell.disabled\" (click)=\"run($event, 'splitCell')\"\n                        >Scinder les cellules\n                    </button>\n                }\n                @if (menu.cellBackgroundColor) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.cellBackgroundColor.disabled\"\n                        (click)=\"run($event, 'cellBackgroundColor')\"\n                        >Couleur de fond...\n                    </button>\n                }\n                @if (menu.tableClass) {\n                    <button mat-menu-item i18n [disabled]=\"menu.tableClass.disabled\" (click)=\"run($event, 'tableClass')\"\n                        >Classe...\n                    </button>\n                }\n                @if (menu.tableId) {\n                    <button i18n mat-menu-item [disabled]=\"menu.tableId.disabled\" (click)=\"run($event, 'tableId')\"\n                        >ID...\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.addColumnBefore) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.addColumnBefore.disabled\"\n                        (click)=\"run($event, 'addColumnBefore')\"\n                        >Ins\u00E9rer une colonne avant\n                    </button>\n                }\n                @if (menu.addColumnAfter) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.addColumnAfter.disabled\"\n                        (click)=\"run($event, 'addColumnAfter')\"\n                        >Ins\u00E9rer une colonne apr\u00E8s\n                    </button>\n                }\n                @if (menu.deleteColumn) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.deleteColumn.disabled\"\n                        (click)=\"run($event, 'deleteColumn')\"\n                        >Supprimer la colonne\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.addRowBefore) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.addRowBefore.disabled\"\n                        (click)=\"run($event, 'addRowBefore')\"\n                        >Ins\u00E9rer une ligne avant\n                    </button>\n                }\n                @if (menu.addRowAfter) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.addRowAfter.disabled\"\n                        (click)=\"run($event, 'addRowAfter')\"\n                        >Ins\u00E9rer une ligne apr\u00E8s\n                    </button>\n                }\n                @if (menu.deleteRow) {\n                    <button mat-menu-item i18n [disabled]=\"menu.deleteRow.disabled\" (click)=\"run($event, 'deleteRow')\"\n                        >Supprimer la ligne\n                    </button>\n                }\n                <mat-divider />\n                @if (menu.toggleHeaderColumn) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.toggleHeaderColumn.disabled\"\n                        (click)=\"run($event, 'toggleHeaderColumn')\"\n                        >Ent\u00EAte de colonne\n                    </button>\n                }\n                @if (menu.toggleHeaderRow) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.toggleHeaderRow.disabled\"\n                        (click)=\"run($event, 'toggleHeaderRow')\"\n                        >Ent\u00EAte de ligne\n                    </button>\n                }\n                @if (menu.toggleHeaderCell) {\n                    <button\n                        mat-menu-item\n                        i18n\n                        [disabled]=\"menu.toggleHeaderCell.disabled\"\n                        (click)=\"run($event, 'toggleHeaderCell')\"\n                        >Ent\u00EAte de cellule\n                    </button>\n                }\n            </mat-menu>\n            @if (imageUploader) {\n                <button\n                    mat-icon-button\n                    naturalFileDrop\n                    i18n-matTooltip\n                    matTooltip=\"Ins\u00E9rer une image\"\n                    [selectable]=\"true\"\n                    [broadcast]=\"false\"\n                    (fileChange)=\"upload($event)\"\n                >\n                    <mat-icon fontIcon=\"insert_photo\" />\n                </button>\n            }\n            @if (menu.alignLeft) {\n                <mat-button-toggle-group hideSingleSelectionIndicator>\n                    @if (menu.alignLeft) {\n                        <mat-button-toggle\n                            i18n-matTooltip\n                            matTooltip=\"Aligner gauche\"\n                            [disabled]=\"menu.alignLeft.disabled\"\n                            [checked]=\"menu.alignLeft.active\"\n                            (click)=\"run($event, 'alignLeft')\"\n                        >\n                            <mat-icon fontIcon=\"format_align_left\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignCenter) {\n                        <mat-button-toggle\n                            i18n-matTooltip\n                            matTooltip=\"Centrer\"\n                            [disabled]=\"menu.alignCenter.disabled\"\n                            [checked]=\"menu.alignCenter.active\"\n                            (click)=\"run($event, 'alignCenter')\"\n                        >\n                            <mat-icon fontIcon=\"format_align_center\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignRight) {\n                        <mat-button-toggle\n                            i18n-matTooltip\n                            matTooltip=\"Aligner droite\"\n                            [disabled]=\"menu.alignRight.disabled\"\n                            [checked]=\"menu.alignRight.active\"\n                            (click)=\"run($event, 'alignRight')\"\n                        >\n                            <mat-icon fontIcon=\"format_align_right\" />\n                        </mat-button-toggle>\n                    }\n                    @if (menu.alignJustify) {\n                        <mat-button-toggle\n                            i18n-matTooltip\n                            matTooltip=\"Justifier\"\n                            [disabled]=\"menu.alignJustify.disabled\"\n                            [checked]=\"menu.alignJustify.active\"\n                            (click)=\"run($event, 'alignJustify')\"\n                        >\n                            <mat-icon fontIcon=\"format_align_justify\" />\n                        </mat-button-toggle>\n                    }\n                </mat-button-toggle-group>\n            }\n            @if (menu.undo) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Annuler\"\n                    [disabled]=\"menu.undo.disabled\"\n                    (click)=\"run($event, 'undo')\"\n                >\n                    <mat-icon fontIcon=\"undo\" />\n                </button>\n            }\n            @if (menu.redo) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Refaire\"\n                    [disabled]=\"menu.redo.disabled\"\n                    (click)=\"run($event, 'redo')\"\n                >\n                    <mat-icon fontIcon=\"redo\" />\n                </button>\n            }\n            @if (menu.wrapBulletList && menu.wrapBulletList.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Liste \u00E0 puce\"\n                    [disabled]=\"menu.wrapBulletList.disabled\"\n                    (click)=\"run($event, 'wrapBulletList')\"\n                >\n                    <mat-icon fontIcon=\"format_list_bulleted\" />\n                </button>\n            }\n            @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Liste \u00E0 num\u00E9ro\"\n                    [disabled]=\"menu.wrapOrderedList.disabled\"\n                    (click)=\"run($event, 'wrapOrderedList')\"\n                >\n                    <mat-icon fontIcon=\"format_list_numbered\" />\n                </button>\n            }\n            @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Citation\"\n                    [disabled]=\"menu.wrapBlockQuote.disabled\"\n                    (click)=\"run($event, 'wrapBlockQuote')\"\n                >\n                    <mat-icon fontIcon=\"format_quote\" />\n                </button>\n            }\n            @if (menu.joinUp && menu.joinUp.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n                    [disabled]=\"menu.joinUp.disabled\"\n                    (click)=\"run($event, 'joinUp')\"\n                >\n                    <mat-icon fontIcon=\"move_up\" />\n                </button>\n            }\n            @if (menu.lift && menu.lift.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"D\u00E9sindenter\"\n                    [disabled]=\"menu.lift.disabled\"\n                    (click)=\"run($event, 'lift')\"\n                >\n                    <mat-icon fontIcon=\"format_indent_decrease\" />\n                </button>\n            }\n            @if (menu.selectParentNode && menu.selectParentNode.show) {\n                <button\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n                    [disabled]=\"menu.selectParentNode.disabled\"\n                    (click)=\"run($event, 'selectParentNode')\"\n                >\n                    <mat-icon fontIcon=\"select_all\" />\n                </button>\n            }\n        </div>\n    </div>\n}\n<div #editor class=\"editor-container\"></div>\n", styles: [".menu{display:flex;flex-wrap:wrap;border-bottom:1px solid;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{--padding-right: 8px;--padding-left: 14px;position:relative;outline:none;padding:4px var(--padding-right) 4px var(--padding-left);width:calc(100% - var(--padding-right) - var(--padding-left));line-height:1.2;word-wrap:break-word;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;white-space:pre-wrap}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none;content:\"\"}::ng-deep .ProseMirror-gapcursor{display:none;position:absolute;pointer-events:none}::ng-deep .ProseMirror-gapcursor:after{display:block;position:absolute;top:-2px;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite;border-top:1px solid black;width:20px;content:\"\"}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{margin:1em 0;border:none;padding:2px 10px}::ng-deep .ProseMirror-example-setup-style hr:after{display:block;background-color:silver;height:1px;content:\"\";line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{margin-right:0;margin-left:0;border-left:3px solid #eee;padding-left:1em}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;width:100%;table-layout:fixed;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{position:relative;vertical-align:top;box-sizing:border-box}::ng-deep .ProseMirror .column-resize-handle{position:absolute;top:0;right:-2px;bottom:0;z-index:20;background-color:#adf;width:4px;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{position:absolute;inset:0;z-index:2;background:#c8c8ff66;pointer-events:none;content:\"\"}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{border:1px solid #ddd;padding:3px 5px;min-width:1em}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;animation:gradient 3s none infinite;background-size:500% 100%!important;width:50px;height:50px}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { imageUploader: [{
                 type: Input
-            }], save: [{
-                type: Output
             }] } });
 
-/// <reference types="@angular/localize" />
 /*
  * Public API Surface of natural-editor
  */