@ecodev/natural-editor 64.0.1 → 65.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,28 +12,20 @@ import { keymap } from 'prosemirror-keymap';
|
|
|
12
12
|
import { nodes, marks } from 'prosemirror-schema-basic';
|
|
13
13
|
import { addListNodes, wrapInList, splitListItem, liftListItem, sinkListItem } from 'prosemirror-schema-list';
|
|
14
14
|
import { redoItem, undoItem, selectParentNodeItem, liftItem, joinUpItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
|
|
15
|
-
import { ifValid, NaturalIconDirective, rgbToHex, NaturalFileDropDirective } from '@ecodev/natural';
|
|
16
|
-
import
|
|
17
|
-
import {
|
|
18
|
-
import
|
|
19
|
-
import {
|
|
20
|
-
import * as i4 from '@angular/material/icon';
|
|
21
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
22
|
-
import * as i5 from '@angular/material/button';
|
|
23
|
-
import { MatButtonModule } from '@angular/material/button';
|
|
15
|
+
import { ifValid, NaturalIconDirective, NaturalErrorMessagePipe, rgbToHex, commonImageMimeTypes, NaturalFileDropDirective } from '@ecodev/natural';
|
|
16
|
+
import { MatInput } from '@angular/material/input';
|
|
17
|
+
import { MatFormField, MatLabel, MatError, MatSuffix } from '@angular/material/form-field';
|
|
18
|
+
import { MatIcon } from '@angular/material/icon';
|
|
19
|
+
import { MatButton, MatIconButton } from '@angular/material/button';
|
|
24
20
|
import { toggleMark, joinUp, joinDown, lift, selectParentNode, wrapIn, chainCommands, exitCode, setBlockType, baseKeymap } from 'prosemirror-commands';
|
|
25
21
|
import { undo, redo, history } from 'prosemirror-history';
|
|
26
22
|
import { dropCursor } from 'prosemirror-dropcursor';
|
|
27
23
|
import { gapCursor } from 'prosemirror-gapcursor';
|
|
28
24
|
import { wrappingInputRule, textblockTypeInputRule, ellipsis, emDash, inputRules, undoInputRule } from 'prosemirror-inputrules';
|
|
29
|
-
import
|
|
30
|
-
import {
|
|
31
|
-
import
|
|
32
|
-
import {
|
|
33
|
-
import * as i4$2 from '@angular/material/button-toggle';
|
|
34
|
-
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
35
|
-
import * as i2$1 from '@angular/material/tooltip';
|
|
36
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
25
|
+
import { MatDivider } from '@angular/material/divider';
|
|
26
|
+
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
|
|
27
|
+
import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
|
|
28
|
+
import { MatTooltip } from '@angular/material/tooltip';
|
|
37
29
|
import { Subject } from 'rxjs';
|
|
38
30
|
import { outputFromObservable } from '@angular/core/rxjs-interop';
|
|
39
31
|
|
|
@@ -96,19 +88,18 @@ class NaturalCustomCssDirective {
|
|
|
96
88
|
uniqueId = 0;
|
|
97
89
|
}
|
|
98
90
|
}
|
|
99
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
100
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
91
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalCustomCssDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
92
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalCustomCssDirective, isStandalone: true, selector: "[naturalCustomCss]", inputs: { naturalCustomCss: { classPropertyName: "naturalCustomCss", publicName: "naturalCustomCss", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-natural-id": "id" } }, ngImport: i0 });
|
|
101
93
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalCustomCssDirective, decorators: [{
|
|
103
95
|
type: Directive,
|
|
104
96
|
args: [{
|
|
105
97
|
selector: '[naturalCustomCss]',
|
|
106
|
-
standalone: true,
|
|
107
98
|
host: {
|
|
108
99
|
'[attr.data-natural-id]': 'id',
|
|
109
100
|
},
|
|
110
101
|
}]
|
|
111
|
-
}], ctorParameters: () => [] });
|
|
102
|
+
}], ctorParameters: () => [], propDecorators: { naturalCustomCss: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalCustomCss", required: true }] }] } });
|
|
112
103
|
|
|
113
104
|
class ImagePlugin {
|
|
114
105
|
plugin;
|
|
@@ -179,10 +170,10 @@ class ImagePlugin {
|
|
|
179
170
|
},
|
|
180
171
|
});
|
|
181
172
|
}
|
|
182
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
183
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
173
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ImagePlugin, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
174
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ImagePlugin, providedIn: 'root' });
|
|
184
175
|
}
|
|
185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ImagePlugin, decorators: [{
|
|
186
177
|
type: Injectable,
|
|
187
178
|
args: [{ providedIn: 'root' }]
|
|
188
179
|
}], ctorParameters: () => [] });
|
|
@@ -771,20 +762,23 @@ class ColorDialogComponent {
|
|
|
771
762
|
this.colorControl.setValue(color);
|
|
772
763
|
this.maybeConfirm();
|
|
773
764
|
}
|
|
774
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
775
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
765
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
766
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: 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"] }] });
|
|
776
767
|
}
|
|
777
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColorDialogComponent, decorators: [{
|
|
778
769
|
type: Component,
|
|
779
770
|
args: [{ selector: 'natural-editor-color-dialog', imports: [
|
|
780
771
|
MatDialogModule,
|
|
781
772
|
FormsModule,
|
|
782
773
|
ReactiveFormsModule,
|
|
783
|
-
|
|
784
|
-
|
|
774
|
+
MatButton,
|
|
775
|
+
MatIcon,
|
|
785
776
|
NaturalIconDirective,
|
|
786
|
-
|
|
787
|
-
|
|
777
|
+
MatFormField,
|
|
778
|
+
MatLabel,
|
|
779
|
+
MatError,
|
|
780
|
+
MatSuffix,
|
|
781
|
+
MatInput,
|
|
788
782
|
], 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"] }]
|
|
789
783
|
}], ctorParameters: () => [] });
|
|
790
784
|
|
|
@@ -858,12 +852,22 @@ class LinkDialogComponent {
|
|
|
858
852
|
confirm() {
|
|
859
853
|
this.dialogRef.close(this.form.getRawValue());
|
|
860
854
|
}
|
|
861
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
862
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
855
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
856
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", 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 <mat-error>{{ hrefControl.errors | errorMessage }}</mat-error>\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: 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: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "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: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: "directive", type: MatLabel, selector: "mat-label" }, { 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: "pipe", type: NaturalErrorMessagePipe, name: "errorMessage" }] });
|
|
863
857
|
}
|
|
864
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LinkDialogComponent, decorators: [{
|
|
865
859
|
type: Component,
|
|
866
|
-
args: [{ selector: 'natural-editor-link-dialog', imports: [
|
|
860
|
+
args: [{ selector: 'natural-editor-link-dialog', imports: [
|
|
861
|
+
FormsModule,
|
|
862
|
+
MatButton,
|
|
863
|
+
MatDialogModule,
|
|
864
|
+
MatError,
|
|
865
|
+
MatFormField,
|
|
866
|
+
MatInput,
|
|
867
|
+
MatLabel,
|
|
868
|
+
NaturalErrorMessagePipe,
|
|
869
|
+
ReactiveFormsModule,
|
|
870
|
+
], 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 <mat-error>{{ hrefControl.errors | errorMessage }}</mat-error>\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"] }]
|
|
867
871
|
}], ctorParameters: () => [] });
|
|
868
872
|
|
|
869
873
|
function markActive(state, type) {
|
|
@@ -1001,12 +1005,12 @@ class ClassDialogComponent {
|
|
|
1001
1005
|
confirm() {
|
|
1002
1006
|
this.dialogRef.close(this.form.getRawValue());
|
|
1003
1007
|
}
|
|
1004
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1005
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1008
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ClassDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1009
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: 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: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
|
|
1006
1010
|
}
|
|
1007
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ClassDialogComponent, decorators: [{
|
|
1008
1012
|
type: Component,
|
|
1009
|
-
args: [{ selector: 'natural-editor-class-dialog', imports: [MatDialogModule, FormsModule, ReactiveFormsModule,
|
|
1013
|
+
args: [{ selector: 'natural-editor-class-dialog', imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormField, MatLabel, MatError, MatInput, MatButton], 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"] }]
|
|
1010
1014
|
}], ctorParameters: () => [] });
|
|
1011
1015
|
|
|
1012
1016
|
function setClass(tr, classValue, allowedNodeTypes) {
|
|
@@ -1110,12 +1114,12 @@ class IdDialogComponent {
|
|
|
1110
1114
|
confirm() {
|
|
1111
1115
|
this.dialogRef.close(this.form.getRawValue());
|
|
1112
1116
|
}
|
|
1113
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1114
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1117
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: IdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1118
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: 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: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
|
|
1115
1119
|
}
|
|
1116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: IdDialogComponent, decorators: [{
|
|
1117
1121
|
type: Component,
|
|
1118
|
-
args: [{ selector: 'natural-editor-id-dialog', imports: [MatDialogModule, FormsModule, ReactiveFormsModule,
|
|
1122
|
+
args: [{ selector: 'natural-editor-id-dialog', imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormField, MatLabel, MatError, MatInput, MatButton], 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"] }]
|
|
1119
1123
|
}], ctorParameters: () => [] });
|
|
1120
1124
|
|
|
1121
1125
|
function setId(tr, idValue, allowedNodeTypes) {
|
|
@@ -1584,11 +1588,12 @@ class NaturalEditorComponent {
|
|
|
1584
1588
|
document = inject(DOCUMENT);
|
|
1585
1589
|
dialog = inject(MatDialog);
|
|
1586
1590
|
imagePlugin = inject(ImagePlugin);
|
|
1591
|
+
commonImageMimeTypes = commonImageMimeTypes;
|
|
1587
1592
|
view = null;
|
|
1588
1593
|
editor = viewChild.required('editor', { read: ElementRef });
|
|
1589
1594
|
contentChange = output();
|
|
1590
1595
|
/**
|
|
1591
|
-
* Callback to upload an image.
|
|
1596
|
+
* Callback to upload an image and return the URL to view the image.
|
|
1592
1597
|
*
|
|
1593
1598
|
* If given it will enable advanced schema, including image and tables.
|
|
1594
1599
|
* It must be given on initialization and cannot be changed later on.
|
|
@@ -1753,21 +1758,25 @@ class NaturalEditorComponent {
|
|
|
1753
1758
|
}
|
|
1754
1759
|
this.view.focus();
|
|
1755
1760
|
}
|
|
1756
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1757
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalEditorComponent, isStandalone: true, selector: "natural-editor", inputs: { imageUploader: { classPropertyName: "imageUploader", publicName: "imageUploader", isSignal: true, 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: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n@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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }] });
|
|
1761
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1762
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalEditorComponent, isStandalone: true, selector: "natural-editor", inputs: { imageUploader: { classPropertyName: "imageUploader", publicName: "imageUploader", isSignal: true, 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: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n@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 [accept]=\"commonImageMimeTypes\"\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: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
|
|
1758
1763
|
}
|
|
1759
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEditorComponent, decorators: [{
|
|
1760
1765
|
type: Component,
|
|
1761
1766
|
args: [{ selector: 'natural-editor', imports: [
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1767
|
+
MatButton,
|
|
1768
|
+
MatIconButton,
|
|
1769
|
+
MatTooltip,
|
|
1770
|
+
MatIcon,
|
|
1771
|
+
MatButtonToggleGroup,
|
|
1772
|
+
MatButtonToggle,
|
|
1773
|
+
MatMenu,
|
|
1774
|
+
MatMenuItem,
|
|
1775
|
+
MatMenuTrigger,
|
|
1776
|
+
MatDivider,
|
|
1768
1777
|
NaturalFileDropDirective,
|
|
1769
|
-
], providers: [ImagePlugin], template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n@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"] }]
|
|
1770
|
-
}], ctorParameters: () => [] });
|
|
1778
|
+
], providers: [ImagePlugin], template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n@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 [accept]=\"commonImageMimeTypes\"\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"] }]
|
|
1779
|
+
}], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.ViewChild, args: ['editor', { ...{ read: ElementRef }, isSignal: true }] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], imageUploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUploader", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], save: [{ type: i0.Output, args: ["save"] }] } });
|
|
1771
1780
|
|
|
1772
1781
|
/*
|
|
1773
1782
|
* Public API Surface of natural-editor
|