@ecodev/natural-editor 64.0.2 → 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,7 +12,7 @@ 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, commonImageMimeTypes, NaturalFileDropDirective } from '@ecodev/natural';
|
|
15
|
+
import { ifValid, NaturalIconDirective, NaturalErrorMessagePipe, rgbToHex, commonImageMimeTypes, NaturalFileDropDirective } from '@ecodev/natural';
|
|
16
16
|
import { MatInput } from '@angular/material/input';
|
|
17
17
|
import { MatFormField, MatLabel, MatError, MatSuffix } from '@angular/material/form-field';
|
|
18
18
|
import { MatIcon } from '@angular/material/icon';
|
|
@@ -88,10 +88,10 @@ class NaturalCustomCssDirective {
|
|
|
88
88
|
uniqueId = 0;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
92
|
-
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 });
|
|
93
93
|
}
|
|
94
|
-
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: [{
|
|
95
95
|
type: Directive,
|
|
96
96
|
args: [{
|
|
97
97
|
selector: '[naturalCustomCss]',
|
|
@@ -99,7 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
99
99
|
'[attr.data-natural-id]': 'id',
|
|
100
100
|
},
|
|
101
101
|
}]
|
|
102
|
-
}], ctorParameters: () => [] });
|
|
102
|
+
}], ctorParameters: () => [], propDecorators: { naturalCustomCss: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalCustomCss", required: true }] }] } });
|
|
103
103
|
|
|
104
104
|
class ImagePlugin {
|
|
105
105
|
plugin;
|
|
@@ -170,10 +170,10 @@ class ImagePlugin {
|
|
|
170
170
|
},
|
|
171
171
|
});
|
|
172
172
|
}
|
|
173
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
174
|
-
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' });
|
|
175
175
|
}
|
|
176
|
-
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: [{
|
|
177
177
|
type: Injectable,
|
|
178
178
|
args: [{ providedIn: 'root' }]
|
|
179
179
|
}], ctorParameters: () => [] });
|
|
@@ -762,10 +762,10 @@ class ColorDialogComponent {
|
|
|
762
762
|
this.colorControl.setValue(color);
|
|
763
763
|
this.maybeConfirm();
|
|
764
764
|
}
|
|
765
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
766
|
-
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"] }] });
|
|
767
767
|
}
|
|
768
|
-
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: [{
|
|
769
769
|
type: Component,
|
|
770
770
|
args: [{ selector: 'natural-editor-color-dialog', imports: [
|
|
771
771
|
MatDialogModule,
|
|
@@ -852,12 +852,22 @@ class LinkDialogComponent {
|
|
|
852
852
|
confirm() {
|
|
853
853
|
this.dialogRef.close(this.form.getRawValue());
|
|
854
854
|
}
|
|
855
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
856
|
-
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" }] });
|
|
857
857
|
}
|
|
858
|
-
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: [{
|
|
859
859
|
type: Component,
|
|
860
|
-
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"] }]
|
|
861
871
|
}], ctorParameters: () => [] });
|
|
862
872
|
|
|
863
873
|
function markActive(state, type) {
|
|
@@ -995,10 +1005,10 @@ class ClassDialogComponent {
|
|
|
995
1005
|
confirm() {
|
|
996
1006
|
this.dialogRef.close(this.form.getRawValue());
|
|
997
1007
|
}
|
|
998
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
999
|
-
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"] }] });
|
|
1000
1010
|
}
|
|
1001
|
-
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: [{
|
|
1002
1012
|
type: Component,
|
|
1003
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"] }]
|
|
1004
1014
|
}], ctorParameters: () => [] });
|
|
@@ -1104,10 +1114,10 @@ class IdDialogComponent {
|
|
|
1104
1114
|
confirm() {
|
|
1105
1115
|
this.dialogRef.close(this.form.getRawValue());
|
|
1106
1116
|
}
|
|
1107
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1108
|
-
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"] }] });
|
|
1109
1119
|
}
|
|
1110
|
-
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: [{
|
|
1111
1121
|
type: Component,
|
|
1112
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"] }]
|
|
1113
1123
|
}], ctorParameters: () => [] });
|
|
@@ -1748,10 +1758,10 @@ class NaturalEditorComponent {
|
|
|
1748
1758
|
}
|
|
1749
1759
|
this.view.focus();
|
|
1750
1760
|
}
|
|
1751
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1752
|
-
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 [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"] }] });
|
|
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"] }] });
|
|
1753
1763
|
}
|
|
1754
|
-
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: [{
|
|
1755
1765
|
type: Component,
|
|
1756
1766
|
args: [{ selector: 'natural-editor', imports: [
|
|
1757
1767
|
MatButton,
|
|
@@ -1766,7 +1776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
1766
1776
|
MatDivider,
|
|
1767
1777
|
NaturalFileDropDirective,
|
|
1768
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"] }]
|
|
1769
|
-
}], ctorParameters: () => [] });
|
|
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"] }] } });
|
|
1770
1780
|
|
|
1771
1781
|
/*
|
|
1772
1782
|
* Public API Surface of natural-editor
|