@ecodev/natural-editor 60.1.1 → 61.0.1
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.
- package/esm2022/lib/class-dialog/class-dialog.component.mjs +8 -10
- package/esm2022/lib/color-dialog/color-dialog.component.mjs +8 -10
- package/esm2022/lib/custom-css/custom-css.directive.mjs +9 -12
- package/esm2022/lib/editor/editor.component.mjs +18 -26
- package/esm2022/lib/id-dialog/id-dialog.component.mjs +8 -10
- package/esm2022/lib/link-dialog/link-dialog.component.mjs +8 -10
- package/esm2022/lib/utils/image.mjs +6 -8
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/ecodev-natural-editor.mjs +48 -68
- package/fesm2022/ecodev-natural-editor.mjs.map +1 -1
- package/lib/class-dialog/class-dialog.component.d.ts +1 -2
- package/lib/color-dialog/color-dialog.component.d.ts +1 -2
- package/lib/custom-css/custom-css.directive.d.ts +0 -1
- package/lib/editor/editor.component.d.ts +5 -6
- package/lib/id-dialog/id-dialog.component.d.ts +1 -2
- package/lib/link-dialog/link-dialog.component.d.ts +1 -2
- package/lib/utils/image.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { inject, Directive, HostBinding, Input, Injectable, Component, EventEmitter, ElementRef, ViewChild, Output } from '@angular/core';
|
|
3
3
|
import { DOCUMENT } from '@angular/common';
|
|
4
|
+
import * as i2 from '@angular/forms';
|
|
5
|
+
import { FormControl, Validators, FormGroup, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
|
|
4
6
|
import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
|
|
5
7
|
import { Plugin, TextSelection, AllSelection, EditorState } from 'prosemirror-state';
|
|
6
8
|
import { Schema, DOMSerializer, DOMParser } from 'prosemirror-model';
|
|
9
|
+
import * as i1 from '@angular/material/dialog';
|
|
10
|
+
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
7
11
|
import { setCellAttr, isInTable, selectionCell, CellSelection, tableNodeTypes, addColumnBefore, addColumnAfter, deleteColumn, addRowBefore, addRowAfter, deleteRow, deleteTable, mergeCells, splitCell, toggleHeaderColumn, toggleHeaderRow, toggleHeaderCell, tableEditing, goToNextCell } from 'prosemirror-tables';
|
|
8
12
|
import { keymap } from 'prosemirror-keymap';
|
|
9
13
|
import { nodes, marks } from 'prosemirror-schema-basic';
|
|
10
14
|
import { addListNodes, wrapInList, splitListItem, liftListItem, sinkListItem } from 'prosemirror-schema-list';
|
|
11
15
|
import { joinUpItem, liftItem, selectParentNodeItem, undoItem, redoItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
|
|
12
|
-
import * as i1 from '@angular/material/dialog';
|
|
13
|
-
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
14
|
-
import * as i2 from '@angular/forms';
|
|
15
|
-
import { FormControl, Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
16
16
|
import { ifValid, NaturalIconDirective, NaturalFileDropDirective } from '@ecodev/natural';
|
|
17
17
|
import * as i4$1 from '@angular/material/input';
|
|
18
18
|
import { MatInputModule } from '@angular/material/input';
|
|
@@ -27,13 +27,13 @@ import { undo, redo, history } from 'prosemirror-history';
|
|
|
27
27
|
import { dropCursor } from 'prosemirror-dropcursor';
|
|
28
28
|
import { gapCursor } from 'prosemirror-gapcursor';
|
|
29
29
|
import { wrappingInputRule, textblockTypeInputRule, ellipsis, emDash, inputRules, undoInputRule } from 'prosemirror-inputrules';
|
|
30
|
-
import * as
|
|
30
|
+
import * as i6 from '@angular/material/divider';
|
|
31
31
|
import { MatDividerModule } from '@angular/material/divider';
|
|
32
|
-
import * as
|
|
32
|
+
import * as i5$1 from '@angular/material/menu';
|
|
33
33
|
import { MatMenuModule } from '@angular/material/menu';
|
|
34
|
-
import * as
|
|
34
|
+
import * as i4$2 from '@angular/material/button-toggle';
|
|
35
35
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
36
|
-
import * as
|
|
36
|
+
import * as i2$1 from '@angular/material/tooltip';
|
|
37
37
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
38
38
|
|
|
39
39
|
/**
|
|
@@ -71,6 +71,11 @@ let componentCount = 0;
|
|
|
71
71
|
* ```
|
|
72
72
|
*/
|
|
73
73
|
class NaturalCustomCssDirective {
|
|
74
|
+
constructor() {
|
|
75
|
+
this.document = inject(DOCUMENT);
|
|
76
|
+
this.style = null;
|
|
77
|
+
this.id = 'n' + ++uniqueId;
|
|
78
|
+
}
|
|
74
79
|
set naturalCustomCss(value) {
|
|
75
80
|
if (value && !this.style) {
|
|
76
81
|
this.style = this.document.createElement('style');
|
|
@@ -80,11 +85,6 @@ class NaturalCustomCssDirective {
|
|
|
80
85
|
this.style.innerHTML = value ? prefixCss(`[data-natural-id=${this.id}]`, value) : '';
|
|
81
86
|
}
|
|
82
87
|
}
|
|
83
|
-
constructor(document) {
|
|
84
|
-
this.document = document;
|
|
85
|
-
this.style = null;
|
|
86
|
-
this.id = 'n' + ++uniqueId;
|
|
87
|
-
}
|
|
88
88
|
ngOnDestroy() {
|
|
89
89
|
this.style?.remove();
|
|
90
90
|
// Reset uniqueId if we have no component alive anymore, so that we never reach max int
|
|
@@ -93,7 +93,7 @@ class NaturalCustomCssDirective {
|
|
|
93
93
|
uniqueId = 0;
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCustomCssDirective, deps: [
|
|
96
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCustomCssDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
97
97
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalCustomCssDirective, isStandalone: true, selector: "[naturalCustomCss]", inputs: { naturalCustomCss: "naturalCustomCss" }, host: { properties: { "attr.data-natural-id": "this.id" } }, ngImport: i0 }); }
|
|
98
98
|
}
|
|
99
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCustomCssDirective, decorators: [{
|
|
@@ -102,10 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
102
102
|
selector: '[naturalCustomCss]',
|
|
103
103
|
standalone: true,
|
|
104
104
|
}]
|
|
105
|
-
}],
|
|
106
|
-
type: Inject,
|
|
107
|
-
args: [DOCUMENT]
|
|
108
|
-
}] }], propDecorators: { id: [{
|
|
105
|
+
}], propDecorators: { id: [{
|
|
109
106
|
type: HostBinding,
|
|
110
107
|
args: ['attr.data-natural-id']
|
|
111
108
|
}], naturalCustomCss: [{
|
|
@@ -114,7 +111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
114
111
|
}] } });
|
|
115
112
|
|
|
116
113
|
class ImagePlugin {
|
|
117
|
-
constructor(
|
|
114
|
+
constructor() {
|
|
115
|
+
const document = inject(DOCUMENT);
|
|
118
116
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
119
117
|
const self = this;
|
|
120
118
|
this.plugin = new Plugin({
|
|
@@ -180,16 +178,13 @@ class ImagePlugin {
|
|
|
180
178
|
},
|
|
181
179
|
});
|
|
182
180
|
}
|
|
183
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ImagePlugin, deps: [
|
|
181
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ImagePlugin, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
184
182
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ImagePlugin, providedIn: 'root' }); }
|
|
185
183
|
}
|
|
186
184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ImagePlugin, decorators: [{
|
|
187
185
|
type: Injectable,
|
|
188
186
|
args: [{ providedIn: 'root' }]
|
|
189
|
-
}], ctorParameters: () => [
|
|
190
|
-
type: Inject,
|
|
191
|
-
args: [DOCUMENT]
|
|
192
|
-
}] }] });
|
|
187
|
+
}], ctorParameters: () => [] });
|
|
193
188
|
|
|
194
189
|
const ALIGN_PATTERN = /(left|right|center|justify)/;
|
|
195
190
|
/**
|
|
@@ -588,8 +583,8 @@ class TextAlignItem extends Item {
|
|
|
588
583
|
}
|
|
589
584
|
|
|
590
585
|
class ColorDialogComponent {
|
|
591
|
-
constructor(
|
|
592
|
-
this.dialogRef =
|
|
586
|
+
constructor() {
|
|
587
|
+
this.dialogRef = inject(MatDialogRef);
|
|
593
588
|
this.colors = [
|
|
594
589
|
[
|
|
595
590
|
'#000000',
|
|
@@ -739,6 +734,7 @@ class ColorDialogComponent {
|
|
|
739
734
|
this.form = new FormGroup({
|
|
740
735
|
color: this.colorControl,
|
|
741
736
|
});
|
|
737
|
+
const data = inject(MAT_DIALOG_DATA);
|
|
742
738
|
this.form.setValue(data);
|
|
743
739
|
}
|
|
744
740
|
maybeConfirm() {
|
|
@@ -751,7 +747,7 @@ class ColorDialogComponent {
|
|
|
751
747
|
this.colorControl.setValue(color);
|
|
752
748
|
this.maybeConfirm();
|
|
753
749
|
}
|
|
754
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ColorDialogComponent, deps: [
|
|
750
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ColorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
755
751
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ColorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lectionner une couleur</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <div>\n @for (row of colors; track row) {\n <div>\n @for (color of row; track color) {\n <div class=\"color\" [style]=\"{backgroundColor: color}\" (click)=\"selectColor(color)\"> </div>\n }\n </div>\n }\n </div>\n\n <div>\n <button mat-button (click)=\"selectColor('')\">\n <mat-icon naturalIcon=\"format_color_reset\" />\n <span i18n>Transparent</span></button\n >\n </div>\n\n <mat-form-field>\n <mat-label i18n>Couleur</mat-label>\n <input matInput [formControl]=\"colorControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n <div\n class=\"sample\"\n matTextSuffix\n [style]=\"{backgroundColor: colorControl.valid ? colorControl.value : ''}\"\n ></div>\n @if (colorControl.hasError('pattern')) {\n <mat-error i18n>Doit \u00EAtre le format hexadecimal. Par exemple: #ff4000 </mat-error>\n }\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close i18n>Annuler</button>\n <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;row-gap:25px;justify-content:center;width:70vw;max-width:30em}.color{display:inline-block;cursor:pointer;margin:3px;width:25px;height:25px}.color:hover{margin:0;padding:3px}.sample{width:27px;height:27px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
|
|
756
752
|
}
|
|
757
753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ColorDialogComponent, decorators: [{
|
|
@@ -766,10 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
766
762
|
MatFormFieldModule,
|
|
767
763
|
MatInputModule,
|
|
768
764
|
], template: "<h2 i18n mat-dialog-title>S\u00E9lectionner une couleur</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <div>\n @for (row of colors; track row) {\n <div>\n @for (color of row; track color) {\n <div class=\"color\" [style]=\"{backgroundColor: color}\" (click)=\"selectColor(color)\"> </div>\n }\n </div>\n }\n </div>\n\n <div>\n <button mat-button (click)=\"selectColor('')\">\n <mat-icon naturalIcon=\"format_color_reset\" />\n <span i18n>Transparent</span></button\n >\n </div>\n\n <mat-form-field>\n <mat-label i18n>Couleur</mat-label>\n <input matInput [formControl]=\"colorControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n <div\n class=\"sample\"\n matTextSuffix\n [style]=\"{backgroundColor: colorControl.valid ? colorControl.value : ''}\"\n ></div>\n @if (colorControl.hasError('pattern')) {\n <mat-error i18n>Doit \u00EAtre le format hexadecimal. Par exemple: #ff4000 </mat-error>\n }\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close i18n>Annuler</button>\n <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;row-gap:25px;justify-content:center;width:70vw;max-width:30em}.color{display:inline-block;cursor:pointer;margin:3px;width:25px;height:25px}.color:hover{margin:0;padding:3px}.sample{width:27px;height:27px}\n"] }]
|
|
769
|
-
}], ctorParameters: () => [
|
|
770
|
-
type: Inject,
|
|
771
|
-
args: [MAT_DIALOG_DATA]
|
|
772
|
-
}] }, { type: i1.MatDialogRef }] });
|
|
765
|
+
}], ctorParameters: () => [] });
|
|
773
766
|
|
|
774
767
|
const setCellBackgroundColor = setCellAttr.bind(null, 'background');
|
|
775
768
|
function findFirstClassInSelection$1(state) {
|
|
@@ -824,14 +817,15 @@ class CellBackgroundColorItem extends Item {
|
|
|
824
817
|
}
|
|
825
818
|
|
|
826
819
|
class LinkDialogComponent {
|
|
827
|
-
constructor(
|
|
828
|
-
this.dialogRef =
|
|
820
|
+
constructor() {
|
|
821
|
+
this.dialogRef = inject(MatDialogRef);
|
|
829
822
|
this.hrefControl = new FormControl('', { validators: Validators.required, nonNullable: true });
|
|
830
823
|
this.titleControl = new FormControl('', { nonNullable: true });
|
|
831
824
|
this.form = new FormGroup({
|
|
832
825
|
href: this.hrefControl,
|
|
833
826
|
title: this.titleControl,
|
|
834
827
|
});
|
|
828
|
+
const data = inject(MAT_DIALOG_DATA);
|
|
835
829
|
this.form.setValue({ title: '', ...data });
|
|
836
830
|
}
|
|
837
831
|
maybeConfirm() {
|
|
@@ -840,16 +834,13 @@ class LinkDialogComponent {
|
|
|
840
834
|
confirm() {
|
|
841
835
|
this.dialogRef.close(this.form.getRawValue());
|
|
842
836
|
}
|
|
843
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: LinkDialogComponent, deps: [
|
|
837
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
844
838
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: LinkDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <mat-form-field>\n <mat-label i18n>URL</mat-label>\n <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n @if (hrefControl.hasError('required')) {\n <mat-error i18n>Ce champ est requis</mat-error>\n }\n </mat-form-field>\n <mat-form-field>\n <mat-label i18n>Titre</mat-label>\n <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close i18n>Annuler</button>\n <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:60em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
845
839
|
}
|
|
846
840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: LinkDialogComponent, decorators: [{
|
|
847
841
|
type: Component,
|
|
848
842
|
args: [{ standalone: true, imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <mat-form-field>\n <mat-label i18n>URL</mat-label>\n <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n @if (hrefControl.hasError('required')) {\n <mat-error i18n>Ce champ est requis</mat-error>\n }\n </mat-form-field>\n <mat-form-field>\n <mat-label i18n>Titre</mat-label>\n <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close i18n>Annuler</button>\n <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:60em}\n"] }]
|
|
849
|
-
}], ctorParameters: () => [
|
|
850
|
-
type: Inject,
|
|
851
|
-
args: [MAT_DIALOG_DATA]
|
|
852
|
-
}] }, { type: i1.MatDialogRef }] });
|
|
843
|
+
}], ctorParameters: () => [] });
|
|
853
844
|
|
|
854
845
|
function markActive(state, type) {
|
|
855
846
|
const { from, $from, to, empty } = state.selection;
|
|
@@ -968,8 +959,8 @@ function wrapListItem(nodeType) {
|
|
|
968
959
|
}
|
|
969
960
|
|
|
970
961
|
class ClassDialogComponent {
|
|
971
|
-
constructor(
|
|
972
|
-
this.dialogRef =
|
|
962
|
+
constructor() {
|
|
963
|
+
this.dialogRef = inject(MatDialogRef);
|
|
973
964
|
this.classControl = new FormControl('', {
|
|
974
965
|
validators: Validators.pattern(/(^\s*(-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*)+)/),
|
|
975
966
|
nonNullable: true,
|
|
@@ -977,6 +968,7 @@ class ClassDialogComponent {
|
|
|
977
968
|
this.form = new FormGroup({
|
|
978
969
|
class: this.classControl,
|
|
979
970
|
});
|
|
971
|
+
const data = inject(MAT_DIALOG_DATA);
|
|
980
972
|
this.form.setValue(data);
|
|
981
973
|
}
|
|
982
974
|
maybeConfirm() {
|
|
@@ -985,16 +977,13 @@ class ClassDialogComponent {
|
|
|
985
977
|
confirm() {
|
|
986
978
|
this.dialogRef.close(this.form.getRawValue());
|
|
987
979
|
}
|
|
988
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ClassDialogComponent, deps: [
|
|
980
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ClassDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
989
981
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ClassDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>Saisir les classes CSS</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <mat-form-field>\n <mat-label i18n>Classes CSS</mat-label>\n <input matInput [formControl]=\"classControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n @if (classControl.hasError('pattern')) {\n <mat-error i18n>Doit \u00EAtre un ou plusieurs nom de classe CSS</mat-error>\n }\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close i18n>Annuler</button>\n <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
990
982
|
}
|
|
991
983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ClassDialogComponent, decorators: [{
|
|
992
984
|
type: Component,
|
|
993
985
|
args: [{ standalone: true, imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Saisir les classes CSS</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <mat-form-field>\n <mat-label i18n>Classes CSS</mat-label>\n <input matInput [formControl]=\"classControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n @if (classControl.hasError('pattern')) {\n <mat-error i18n>Doit \u00EAtre un ou plusieurs nom de classe CSS</mat-error>\n }\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close i18n>Annuler</button>\n <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"] }]
|
|
994
|
-
}], ctorParameters: () => [
|
|
995
|
-
type: Inject,
|
|
996
|
-
args: [MAT_DIALOG_DATA]
|
|
997
|
-
}] }, { type: i1.MatDialogRef }] });
|
|
986
|
+
}], ctorParameters: () => [] });
|
|
998
987
|
|
|
999
988
|
function setClass(tr, classValue, allowedNodeTypes) {
|
|
1000
989
|
const { selection, doc } = tr;
|
|
@@ -1079,8 +1068,8 @@ class ClassItem extends Item {
|
|
|
1079
1068
|
}
|
|
1080
1069
|
|
|
1081
1070
|
class IdDialogComponent {
|
|
1082
|
-
constructor(
|
|
1083
|
-
this.dialogRef =
|
|
1071
|
+
constructor() {
|
|
1072
|
+
this.dialogRef = inject(MatDialogRef);
|
|
1084
1073
|
this.idControl = new FormControl('', {
|
|
1085
1074
|
validators: Validators.pattern(/(^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)+)/),
|
|
1086
1075
|
nonNullable: true,
|
|
@@ -1088,6 +1077,7 @@ class IdDialogComponent {
|
|
|
1088
1077
|
this.form = new FormGroup({
|
|
1089
1078
|
id: this.idControl,
|
|
1090
1079
|
});
|
|
1080
|
+
const data = inject(MAT_DIALOG_DATA);
|
|
1091
1081
|
this.form.setValue(data);
|
|
1092
1082
|
}
|
|
1093
1083
|
maybeConfirm() {
|
|
@@ -1096,16 +1086,13 @@ class IdDialogComponent {
|
|
|
1096
1086
|
confirm() {
|
|
1097
1087
|
this.dialogRef.close(this.form.getRawValue());
|
|
1098
1088
|
}
|
|
1099
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IdDialogComponent, deps: [
|
|
1089
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1100
1090
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: IdDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>Saisir le ID</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <mat-form-field>\n <mat-label i18n>ID</mat-label>\n <input matInput [formControl]=\"idControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n @if (idControl.hasError('pattern')) {\n <mat-error i18n>Doit \u00EAtre un ID valide</mat-error>\n }\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close i18n>Annuler</button>\n <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
1101
1091
|
}
|
|
1102
1092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IdDialogComponent, decorators: [{
|
|
1103
1093
|
type: Component,
|
|
1104
1094
|
args: [{ standalone: true, imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<h2 i18n mat-dialog-title>Saisir le ID</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <mat-form-field>\n <mat-label i18n>ID</mat-label>\n <input matInput [formControl]=\"idControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n @if (idControl.hasError('pattern')) {\n <mat-error i18n>Doit \u00EAtre un ID valide</mat-error>\n }\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close i18n>Annuler</button>\n <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{display:grid;width:70vw;max-width:30em}\n"] }]
|
|
1105
|
-
}], ctorParameters: () => [
|
|
1106
|
-
type: Inject,
|
|
1107
|
-
args: [MAT_DIALOG_DATA]
|
|
1108
|
-
}] }, { type: i1.MatDialogRef }] });
|
|
1095
|
+
}], ctorParameters: () => [] });
|
|
1109
1096
|
|
|
1110
1097
|
function setId(tr, idValue, allowedNodeTypes) {
|
|
1111
1098
|
const { selection, doc } = tr;
|
|
@@ -1514,11 +1501,11 @@ function buildKeymap(schema, isMac) {
|
|
|
1514
1501
|
*/
|
|
1515
1502
|
// @dynamic
|
|
1516
1503
|
class NaturalEditorComponent {
|
|
1517
|
-
constructor(
|
|
1518
|
-
this.ngControl =
|
|
1519
|
-
this.document =
|
|
1520
|
-
this.dialog =
|
|
1521
|
-
this.imagePlugin =
|
|
1504
|
+
constructor() {
|
|
1505
|
+
this.ngControl = inject(NgControl, { optional: true, self: true });
|
|
1506
|
+
this.document = inject(DOCUMENT);
|
|
1507
|
+
this.dialog = inject(MatDialog);
|
|
1508
|
+
this.imagePlugin = inject(ImagePlugin);
|
|
1522
1509
|
this.view = null;
|
|
1523
1510
|
this.contentChange = new EventEmitter();
|
|
1524
1511
|
/**
|
|
@@ -1668,8 +1655,8 @@ class NaturalEditorComponent {
|
|
|
1668
1655
|
}
|
|
1669
1656
|
this.view.focus();
|
|
1670
1657
|
}
|
|
1671
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEditorComponent, deps: [
|
|
1672
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalEditorComponent, isStandalone: true, selector: "natural-editor", inputs: { imageUploader: "imageUploader" }, outputs: { contentChange: "contentChange", save: "save" }, providers: [ImagePlugin], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (menu && !this.disabled) {\n <div class=\"menu-container\">\n <div class=\"menu\">\n @if (save.observed) {\n <button mat-icon-button (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n <mat-icon fontIcon=\"save\" />\n </button>\n }\n <mat-button-toggle-group hideMultipleSelectionIndicator multiple>\n @if (menu.toggleStrong) {\n <mat-button-toggle\n [disabled]=\"menu.toggleStrong.disabled\"\n [checked]=\"menu.toggleStrong.active\"\n (click)=\"run($event, 'toggleStrong')\"\n i18n-matTooltip\n matTooltip=\"Gras\"\n >\n <mat-icon fontIcon=\"format_bold\" />\n </mat-button-toggle>\n }\n @if (menu.toggleEm) {\n <mat-button-toggle\n [disabled]=\"menu.toggleEm.disabled\"\n [checked]=\"menu.toggleEm.active\"\n (click)=\"run($event, 'toggleEm')\"\n i18n-matTooltip\n matTooltip=\"Italique\"\n >\n <mat-icon fontIcon=\"format_italic\" />\n </mat-button-toggle>\n }\n @if (menu.toggleCode) {\n <mat-button-toggle\n [disabled]=\"menu.toggleCode.disabled\"\n [checked]=\"menu.toggleCode.active\"\n (click)=\"run($event, 'toggleCode')\"\n i18n-matTooltip\n matTooltip=\"Code\"\n >\n <mat-icon fontIcon=\"code\" />\n </mat-button-toggle>\n }\n @if (menu.toggleLink) {\n <mat-button-toggle\n [disabled]=\"menu.toggleLink.disabled\"\n [checked]=\"menu.toggleLink.active\"\n (click)=\"run($event, 'toggleLink')\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer un lien...\"\n >\n <mat-icon fontIcon=\"insert_link\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n <span i18n>Type</span>\n <mat-icon fontIcon=\"arrow_drop_down\" />\n </button>\n <mat-menu #blockMenu=\"matMenu\">\n @if (menu.makeParagraph) {\n <button\n mat-menu-item\n [disabled]=\"menu.makeParagraph.disabled\"\n (click)=\"run($event, 'makeParagraph')\"\n i18n\n >Paragraphe\n </button>\n }\n @if (menu.makeCodeBlock) {\n <button\n mat-menu-item\n [disabled]=\"menu.makeCodeBlock.disabled\"\n (click)=\"run($event, 'makeCodeBlock')\"\n i18n\n >Code\n </button>\n }\n @if (menu.makeHead1) {\n <button mat-menu-item [disabled]=\"menu.makeHead1.disabled\" (click)=\"run($event, 'makeHead1')\" i18n\n >Titre 1\n </button>\n }\n @if (menu.makeHead2) {\n <button mat-menu-item [disabled]=\"menu.makeHead2.disabled\" (click)=\"run($event, 'makeHead2')\" i18n\n >Titre 2\n </button>\n }\n @if (menu.makeHead3) {\n <button mat-menu-item [disabled]=\"menu.makeHead3.disabled\" (click)=\"run($event, 'makeHead3')\" i18n\n >Titre 3\n </button>\n }\n @if (menu.makeHead4) {\n <button mat-menu-item [disabled]=\"menu.makeHead4.disabled\" (click)=\"run($event, 'makeHead4')\" i18n\n >Titre 4\n </button>\n }\n @if (menu.makeHead5) {\n <button mat-menu-item [disabled]=\"menu.makeHead5.disabled\" (click)=\"run($event, 'makeHead5')\" i18n\n >Titre 5\n </button>\n }\n @if (menu.makeHead6) {\n <button mat-menu-item [disabled]=\"menu.makeHead6.disabled\" (click)=\"run($event, 'makeHead6')\" i18n\n >Titre 6\n </button>\n }\n <mat-divider />\n @if (menu.blockClass) {\n <button mat-menu-item [disabled]=\"menu.blockClass.disabled\" (click)=\"run($event, 'blockClass')\" i18n\n >Classe...\n </button>\n }\n @if (menu.blockId) {\n <button i18n mat-menu-item [disabled]=\"menu.blockId.disabled\" (click)=\"run($event, 'blockId')\"\n >ID...\n </button>\n }\n </mat-menu>\n @if (menu.addColumnBefore) {\n <button mat-button [matMenuTriggerFor]=\"tableMenu\">\n <span i18n>Tableau</span>\n <mat-icon fontIcon=\"arrow_drop_down\" />\n </button>\n }\n <mat-menu #tableMenu=\"matMenu\">\n @if (menu.insertTable) {\n <button\n mat-menu-item\n [disabled]=\"menu.insertTable.disabled\"\n (click)=\"run($event, 'insertTable')\"\n i18n\n >Ins\u00E9rer un tableau\n </button>\n }\n @if (menu.deleteTable) {\n <button\n mat-menu-item\n [disabled]=\"menu.deleteTable.disabled\"\n (click)=\"run($event, 'deleteTable')\"\n i18n\n >Supprimer le tableau\n </button>\n }\n @if (menu.mergeCells) {\n <button mat-menu-item [disabled]=\"menu.mergeCells.disabled\" (click)=\"run($event, 'mergeCells')\" i18n\n >Fusionner les cellules\n </button>\n }\n @if (menu.splitCell) {\n <button mat-menu-item [disabled]=\"menu.splitCell.disabled\" (click)=\"run($event, 'splitCell')\" i18n\n >Scinder les cellules\n </button>\n }\n @if (menu.cellBackgroundColor) {\n <button\n mat-menu-item\n [disabled]=\"menu.cellBackgroundColor.disabled\"\n (click)=\"run($event, 'cellBackgroundColor')\"\n i18n\n >Couleur de fond...\n </button>\n }\n @if (menu.tableClass) {\n <button mat-menu-item [disabled]=\"menu.tableClass.disabled\" (click)=\"run($event, 'tableClass')\" i18n\n >Classe...\n </button>\n }\n @if (menu.tableId) {\n <button i18n mat-menu-item [disabled]=\"menu.tableId.disabled\" (click)=\"run($event, 'tableId')\"\n >ID...\n </button>\n }\n <mat-divider />\n @if (menu.addColumnBefore) {\n <button\n mat-menu-item\n [disabled]=\"menu.addColumnBefore.disabled\"\n (click)=\"run($event, 'addColumnBefore')\"\n i18n\n >Ins\u00E9rer une colonne avant\n </button>\n }\n @if (menu.addColumnAfter) {\n <button\n mat-menu-item\n [disabled]=\"menu.addColumnAfter.disabled\"\n (click)=\"run($event, 'addColumnAfter')\"\n i18n\n >Ins\u00E9rer une colonne apr\u00E8s\n </button>\n }\n @if (menu.deleteColumn) {\n <button\n mat-menu-item\n [disabled]=\"menu.deleteColumn.disabled\"\n (click)=\"run($event, 'deleteColumn')\"\n i18n\n >Supprimer la colonne\n </button>\n }\n <mat-divider />\n @if (menu.addRowBefore) {\n <button\n mat-menu-item\n [disabled]=\"menu.addRowBefore.disabled\"\n (click)=\"run($event, 'addRowBefore')\"\n i18n\n >Ins\u00E9rer une ligne avant\n </button>\n }\n @if (menu.addRowAfter) {\n <button\n mat-menu-item\n [disabled]=\"menu.addRowAfter.disabled\"\n (click)=\"run($event, 'addRowAfter')\"\n i18n\n >Ins\u00E9rer une ligne apr\u00E8s\n </button>\n }\n @if (menu.deleteRow) {\n <button mat-menu-item [disabled]=\"menu.deleteRow.disabled\" (click)=\"run($event, 'deleteRow')\" i18n\n >Supprimer la ligne\n </button>\n }\n <mat-divider />\n @if (menu.toggleHeaderColumn) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderColumn.disabled\"\n (click)=\"run($event, 'toggleHeaderColumn')\"\n i18n\n >Ent\u00EAte de colonne\n </button>\n }\n @if (menu.toggleHeaderRow) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderRow.disabled\"\n (click)=\"run($event, 'toggleHeaderRow')\"\n i18n\n >Ent\u00EAte de ligne\n </button>\n }\n @if (menu.toggleHeaderCell) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderCell.disabled\"\n (click)=\"run($event, 'toggleHeaderCell')\"\n i18n\n >Ent\u00EAte de cellule\n </button>\n }\n </mat-menu>\n @if (imageUploader) {\n <button\n mat-icon-button\n naturalFileDrop\n [selectable]=\"true\"\n [broadcast]=\"false\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer une image\"\n (fileChange)=\"upload($event)\"\n >\n <mat-icon fontIcon=\"insert_photo\" />\n </button>\n }\n @if (menu.alignLeft) {\n <mat-button-toggle-group hideSingleSelectionIndicator>\n @if (menu.alignLeft) {\n <mat-button-toggle\n [disabled]=\"menu.alignLeft.disabled\"\n [checked]=\"menu.alignLeft.active\"\n (click)=\"run($event, 'alignLeft')\"\n i18n-matTooltip\n matTooltip=\"Aligner gauche\"\n >\n <mat-icon fontIcon=\"format_align_left\" />\n </mat-button-toggle>\n }\n @if (menu.alignCenter) {\n <mat-button-toggle\n [disabled]=\"menu.alignCenter.disabled\"\n [checked]=\"menu.alignCenter.active\"\n (click)=\"run($event, 'alignCenter')\"\n i18n-matTooltip\n matTooltip=\"Centrer\"\n >\n <mat-icon fontIcon=\"format_align_center\" />\n </mat-button-toggle>\n }\n @if (menu.alignRight) {\n <mat-button-toggle\n [disabled]=\"menu.alignRight.disabled\"\n [checked]=\"menu.alignRight.active\"\n (click)=\"run($event, 'alignRight')\"\n i18n-matTooltip\n matTooltip=\"Aligner droite\"\n >\n <mat-icon fontIcon=\"format_align_right\" />\n </mat-button-toggle>\n }\n @if (menu.alignJustify) {\n <mat-button-toggle\n [disabled]=\"menu.alignJustify.disabled\"\n [checked]=\"menu.alignJustify.active\"\n (click)=\"run($event, 'alignJustify')\"\n i18n-matTooltip\n matTooltip=\"Justifier\"\n >\n <mat-icon fontIcon=\"format_align_justify\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n }\n @if (menu.undo) {\n <button\n mat-icon-button\n [disabled]=\"menu.undo.disabled\"\n (click)=\"run($event, 'undo')\"\n i18n-matTooltip\n matTooltip=\"Annuler\"\n >\n <mat-icon fontIcon=\"undo\" />\n </button>\n }\n @if (menu.redo) {\n <button\n mat-icon-button\n [disabled]=\"menu.redo.disabled\"\n (click)=\"run($event, 'redo')\"\n i18n-matTooltip\n matTooltip=\"Refaire\"\n >\n <mat-icon fontIcon=\"redo\" />\n </button>\n }\n @if (menu.wrapBulletList && menu.wrapBulletList.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapBulletList.disabled\"\n (click)=\"run($event, 'wrapBulletList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 puce\"\n >\n <mat-icon fontIcon=\"format_list_bulleted\" />\n </button>\n }\n @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapOrderedList.disabled\"\n (click)=\"run($event, 'wrapOrderedList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 num\u00E9ro\"\n >\n <mat-icon fontIcon=\"format_list_numbered\" />\n </button>\n }\n @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapBlockQuote.disabled\"\n (click)=\"run($event, 'wrapBlockQuote')\"\n i18n-matTooltip\n matTooltip=\"Citation\"\n >\n <mat-icon fontIcon=\"format_quote\" />\n </button>\n }\n @if (menu.joinUp && menu.joinUp.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.joinUp.disabled\"\n (click)=\"run($event, 'joinUp')\"\n i18n-matTooltip\n matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n >\n <mat-icon fontIcon=\"move_up\" />\n </button>\n }\n @if (menu.lift && menu.lift.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.lift.disabled\"\n (click)=\"run($event, 'lift')\"\n i18n-matTooltip\n matTooltip=\"D\u00E9sindenter\"\n >\n <mat-icon fontIcon=\"format_indent_decrease\" />\n </button>\n }\n @if (menu.selectParentNode && menu.selectParentNode.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.selectParentNode.disabled\"\n (click)=\"run($event, 'selectParentNode')\"\n i18n-matTooltip\n matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n >\n <mat-icon fontIcon=\"select_all\" />\n </button>\n }\n </div>\n </div>\n}\n<div class=\"editor-container\" #editor></div>\n", styles: [".menu{display:flex;flex-wrap:wrap;border-bottom:1px solid;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{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{outline:none;padding:4px 8px 4px 14px;line-height:1.2}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;width:100%;table-layout:fixed;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{position:relative;vertical-align:top;box-sizing:border-box}::ng-deep .ProseMirror .column-resize-handle{position:absolute;top:0;right:-2px;bottom:0;z-index:20;background-color:#adf;width:4px;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{position:absolute;inset:0;z-index:2;background:#c8c8ff66;pointer-events:none;content:\"\"}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{border:1px solid #ddd;padding:3px 5px;min-width:1em}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;animation:gradient 3s none infinite;background-size:500% 100%!important;width:50px;height:50px}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$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: i7.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7.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: i8.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: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.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: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] }); }
|
|
1658
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1659
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalEditorComponent, isStandalone: true, selector: "natural-editor", inputs: { imageUploader: "imageUploader" }, outputs: { contentChange: "contentChange", save: "save" }, providers: [ImagePlugin], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (menu && !this.disabled) {\n <div class=\"menu-container\">\n <div class=\"menu\">\n @if (save.observed) {\n <button mat-icon-button (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n <mat-icon fontIcon=\"save\" />\n </button>\n }\n <mat-button-toggle-group hideMultipleSelectionIndicator multiple>\n @if (menu.toggleStrong) {\n <mat-button-toggle\n [disabled]=\"menu.toggleStrong.disabled\"\n [checked]=\"menu.toggleStrong.active\"\n (click)=\"run($event, 'toggleStrong')\"\n i18n-matTooltip\n matTooltip=\"Gras\"\n >\n <mat-icon fontIcon=\"format_bold\" />\n </mat-button-toggle>\n }\n @if (menu.toggleEm) {\n <mat-button-toggle\n [disabled]=\"menu.toggleEm.disabled\"\n [checked]=\"menu.toggleEm.active\"\n (click)=\"run($event, 'toggleEm')\"\n i18n-matTooltip\n matTooltip=\"Italique\"\n >\n <mat-icon fontIcon=\"format_italic\" />\n </mat-button-toggle>\n }\n @if (menu.toggleCode) {\n <mat-button-toggle\n [disabled]=\"menu.toggleCode.disabled\"\n [checked]=\"menu.toggleCode.active\"\n (click)=\"run($event, 'toggleCode')\"\n i18n-matTooltip\n matTooltip=\"Code\"\n >\n <mat-icon fontIcon=\"code\" />\n </mat-button-toggle>\n }\n @if (menu.toggleLink) {\n <mat-button-toggle\n [disabled]=\"menu.toggleLink.disabled\"\n [checked]=\"menu.toggleLink.active\"\n (click)=\"run($event, 'toggleLink')\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer un lien...\"\n >\n <mat-icon fontIcon=\"insert_link\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n <span i18n>Type</span>\n <mat-icon fontIcon=\"arrow_drop_down\" />\n </button>\n <mat-menu #blockMenu=\"matMenu\">\n @if (menu.makeParagraph) {\n <button\n mat-menu-item\n [disabled]=\"menu.makeParagraph.disabled\"\n (click)=\"run($event, 'makeParagraph')\"\n i18n\n >Paragraphe\n </button>\n }\n @if (menu.makeCodeBlock) {\n <button\n mat-menu-item\n [disabled]=\"menu.makeCodeBlock.disabled\"\n (click)=\"run($event, 'makeCodeBlock')\"\n i18n\n >Code\n </button>\n }\n @if (menu.makeHead1) {\n <button mat-menu-item [disabled]=\"menu.makeHead1.disabled\" (click)=\"run($event, 'makeHead1')\" i18n\n >Titre 1\n </button>\n }\n @if (menu.makeHead2) {\n <button mat-menu-item [disabled]=\"menu.makeHead2.disabled\" (click)=\"run($event, 'makeHead2')\" i18n\n >Titre 2\n </button>\n }\n @if (menu.makeHead3) {\n <button mat-menu-item [disabled]=\"menu.makeHead3.disabled\" (click)=\"run($event, 'makeHead3')\" i18n\n >Titre 3\n </button>\n }\n @if (menu.makeHead4) {\n <button mat-menu-item [disabled]=\"menu.makeHead4.disabled\" (click)=\"run($event, 'makeHead4')\" i18n\n >Titre 4\n </button>\n }\n @if (menu.makeHead5) {\n <button mat-menu-item [disabled]=\"menu.makeHead5.disabled\" (click)=\"run($event, 'makeHead5')\" i18n\n >Titre 5\n </button>\n }\n @if (menu.makeHead6) {\n <button mat-menu-item [disabled]=\"menu.makeHead6.disabled\" (click)=\"run($event, 'makeHead6')\" i18n\n >Titre 6\n </button>\n }\n <mat-divider />\n @if (menu.blockClass) {\n <button mat-menu-item [disabled]=\"menu.blockClass.disabled\" (click)=\"run($event, 'blockClass')\" i18n\n >Classe...\n </button>\n }\n @if (menu.blockId) {\n <button i18n mat-menu-item [disabled]=\"menu.blockId.disabled\" (click)=\"run($event, 'blockId')\"\n >ID...\n </button>\n }\n </mat-menu>\n @if (menu.addColumnBefore) {\n <button mat-button [matMenuTriggerFor]=\"tableMenu\">\n <span i18n>Tableau</span>\n <mat-icon fontIcon=\"arrow_drop_down\" />\n </button>\n }\n <mat-menu #tableMenu=\"matMenu\">\n @if (menu.insertTable) {\n <button\n mat-menu-item\n [disabled]=\"menu.insertTable.disabled\"\n (click)=\"run($event, 'insertTable')\"\n i18n\n >Ins\u00E9rer un tableau\n </button>\n }\n @if (menu.deleteTable) {\n <button\n mat-menu-item\n [disabled]=\"menu.deleteTable.disabled\"\n (click)=\"run($event, 'deleteTable')\"\n i18n\n >Supprimer le tableau\n </button>\n }\n @if (menu.mergeCells) {\n <button mat-menu-item [disabled]=\"menu.mergeCells.disabled\" (click)=\"run($event, 'mergeCells')\" i18n\n >Fusionner les cellules\n </button>\n }\n @if (menu.splitCell) {\n <button mat-menu-item [disabled]=\"menu.splitCell.disabled\" (click)=\"run($event, 'splitCell')\" i18n\n >Scinder les cellules\n </button>\n }\n @if (menu.cellBackgroundColor) {\n <button\n mat-menu-item\n [disabled]=\"menu.cellBackgroundColor.disabled\"\n (click)=\"run($event, 'cellBackgroundColor')\"\n i18n\n >Couleur de fond...\n </button>\n }\n @if (menu.tableClass) {\n <button mat-menu-item [disabled]=\"menu.tableClass.disabled\" (click)=\"run($event, 'tableClass')\" i18n\n >Classe...\n </button>\n }\n @if (menu.tableId) {\n <button i18n mat-menu-item [disabled]=\"menu.tableId.disabled\" (click)=\"run($event, 'tableId')\"\n >ID...\n </button>\n }\n <mat-divider />\n @if (menu.addColumnBefore) {\n <button\n mat-menu-item\n [disabled]=\"menu.addColumnBefore.disabled\"\n (click)=\"run($event, 'addColumnBefore')\"\n i18n\n >Ins\u00E9rer une colonne avant\n </button>\n }\n @if (menu.addColumnAfter) {\n <button\n mat-menu-item\n [disabled]=\"menu.addColumnAfter.disabled\"\n (click)=\"run($event, 'addColumnAfter')\"\n i18n\n >Ins\u00E9rer une colonne apr\u00E8s\n </button>\n }\n @if (menu.deleteColumn) {\n <button\n mat-menu-item\n [disabled]=\"menu.deleteColumn.disabled\"\n (click)=\"run($event, 'deleteColumn')\"\n i18n\n >Supprimer la colonne\n </button>\n }\n <mat-divider />\n @if (menu.addRowBefore) {\n <button\n mat-menu-item\n [disabled]=\"menu.addRowBefore.disabled\"\n (click)=\"run($event, 'addRowBefore')\"\n i18n\n >Ins\u00E9rer une ligne avant\n </button>\n }\n @if (menu.addRowAfter) {\n <button\n mat-menu-item\n [disabled]=\"menu.addRowAfter.disabled\"\n (click)=\"run($event, 'addRowAfter')\"\n i18n\n >Ins\u00E9rer une ligne apr\u00E8s\n </button>\n }\n @if (menu.deleteRow) {\n <button mat-menu-item [disabled]=\"menu.deleteRow.disabled\" (click)=\"run($event, 'deleteRow')\" i18n\n >Supprimer la ligne\n </button>\n }\n <mat-divider />\n @if (menu.toggleHeaderColumn) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderColumn.disabled\"\n (click)=\"run($event, 'toggleHeaderColumn')\"\n i18n\n >Ent\u00EAte de colonne\n </button>\n }\n @if (menu.toggleHeaderRow) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderRow.disabled\"\n (click)=\"run($event, 'toggleHeaderRow')\"\n i18n\n >Ent\u00EAte de ligne\n </button>\n }\n @if (menu.toggleHeaderCell) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderCell.disabled\"\n (click)=\"run($event, 'toggleHeaderCell')\"\n i18n\n >Ent\u00EAte de cellule\n </button>\n }\n </mat-menu>\n @if (imageUploader) {\n <button\n mat-icon-button\n naturalFileDrop\n [selectable]=\"true\"\n [broadcast]=\"false\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer une image\"\n (fileChange)=\"upload($event)\"\n >\n <mat-icon fontIcon=\"insert_photo\" />\n </button>\n }\n @if (menu.alignLeft) {\n <mat-button-toggle-group hideSingleSelectionIndicator>\n @if (menu.alignLeft) {\n <mat-button-toggle\n [disabled]=\"menu.alignLeft.disabled\"\n [checked]=\"menu.alignLeft.active\"\n (click)=\"run($event, 'alignLeft')\"\n i18n-matTooltip\n matTooltip=\"Aligner gauche\"\n >\n <mat-icon fontIcon=\"format_align_left\" />\n </mat-button-toggle>\n }\n @if (menu.alignCenter) {\n <mat-button-toggle\n [disabled]=\"menu.alignCenter.disabled\"\n [checked]=\"menu.alignCenter.active\"\n (click)=\"run($event, 'alignCenter')\"\n i18n-matTooltip\n matTooltip=\"Centrer\"\n >\n <mat-icon fontIcon=\"format_align_center\" />\n </mat-button-toggle>\n }\n @if (menu.alignRight) {\n <mat-button-toggle\n [disabled]=\"menu.alignRight.disabled\"\n [checked]=\"menu.alignRight.active\"\n (click)=\"run($event, 'alignRight')\"\n i18n-matTooltip\n matTooltip=\"Aligner droite\"\n >\n <mat-icon fontIcon=\"format_align_right\" />\n </mat-button-toggle>\n }\n @if (menu.alignJustify) {\n <mat-button-toggle\n [disabled]=\"menu.alignJustify.disabled\"\n [checked]=\"menu.alignJustify.active\"\n (click)=\"run($event, 'alignJustify')\"\n i18n-matTooltip\n matTooltip=\"Justifier\"\n >\n <mat-icon fontIcon=\"format_align_justify\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n }\n @if (menu.undo) {\n <button\n mat-icon-button\n [disabled]=\"menu.undo.disabled\"\n (click)=\"run($event, 'undo')\"\n i18n-matTooltip\n matTooltip=\"Annuler\"\n >\n <mat-icon fontIcon=\"undo\" />\n </button>\n }\n @if (menu.redo) {\n <button\n mat-icon-button\n [disabled]=\"menu.redo.disabled\"\n (click)=\"run($event, 'redo')\"\n i18n-matTooltip\n matTooltip=\"Refaire\"\n >\n <mat-icon fontIcon=\"redo\" />\n </button>\n }\n @if (menu.wrapBulletList && menu.wrapBulletList.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapBulletList.disabled\"\n (click)=\"run($event, 'wrapBulletList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 puce\"\n >\n <mat-icon fontIcon=\"format_list_bulleted\" />\n </button>\n }\n @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapOrderedList.disabled\"\n (click)=\"run($event, 'wrapOrderedList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 num\u00E9ro\"\n >\n <mat-icon fontIcon=\"format_list_numbered\" />\n </button>\n }\n @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapBlockQuote.disabled\"\n (click)=\"run($event, 'wrapBlockQuote')\"\n i18n-matTooltip\n matTooltip=\"Citation\"\n >\n <mat-icon fontIcon=\"format_quote\" />\n </button>\n }\n @if (menu.joinUp && menu.joinUp.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.joinUp.disabled\"\n (click)=\"run($event, 'joinUp')\"\n i18n-matTooltip\n matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n >\n <mat-icon fontIcon=\"move_up\" />\n </button>\n }\n @if (menu.lift && menu.lift.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.lift.disabled\"\n (click)=\"run($event, 'lift')\"\n i18n-matTooltip\n matTooltip=\"D\u00E9sindenter\"\n >\n <mat-icon fontIcon=\"format_indent_decrease\" />\n </button>\n }\n @if (menu.selectParentNode && menu.selectParentNode.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.selectParentNode.disabled\"\n (click)=\"run($event, 'selectParentNode')\"\n i18n-matTooltip\n matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n >\n <mat-icon fontIcon=\"select_all\" />\n </button>\n }\n </div>\n </div>\n}\n<div class=\"editor-container\" #editor></div>\n", styles: [".menu{display:flex;flex-wrap:wrap;border-bottom:1px solid;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{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{outline:none;padding:4px 8px 4px 14px;line-height:1.2}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;width:100%;table-layout:fixed;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{position:relative;vertical-align:top;box-sizing:border-box}::ng-deep .ProseMirror .column-resize-handle{position:absolute;top:0;right:-2px;bottom:0;z-index:20;background-color:#adf;width:4px;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{position:absolute;inset:0;z-index:2;background:#c8c8ff66;pointer-events:none;content:\"\"}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{border:1px solid #ddd;padding:3px 5px;min-width:1em}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;animation:gradient 3s none infinite;background-size:500% 100%!important;width:50px;height:50px}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] }); }
|
|
1673
1660
|
}
|
|
1674
1661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEditorComponent, decorators: [{
|
|
1675
1662
|
type: Component,
|
|
@@ -1682,14 +1669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
1682
1669
|
MatDividerModule,
|
|
1683
1670
|
NaturalFileDropDirective,
|
|
1684
1671
|
], template: "@if (menu && !this.disabled) {\n <div class=\"menu-container\">\n <div class=\"menu\">\n @if (save.observed) {\n <button mat-icon-button (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n <mat-icon fontIcon=\"save\" />\n </button>\n }\n <mat-button-toggle-group hideMultipleSelectionIndicator multiple>\n @if (menu.toggleStrong) {\n <mat-button-toggle\n [disabled]=\"menu.toggleStrong.disabled\"\n [checked]=\"menu.toggleStrong.active\"\n (click)=\"run($event, 'toggleStrong')\"\n i18n-matTooltip\n matTooltip=\"Gras\"\n >\n <mat-icon fontIcon=\"format_bold\" />\n </mat-button-toggle>\n }\n @if (menu.toggleEm) {\n <mat-button-toggle\n [disabled]=\"menu.toggleEm.disabled\"\n [checked]=\"menu.toggleEm.active\"\n (click)=\"run($event, 'toggleEm')\"\n i18n-matTooltip\n matTooltip=\"Italique\"\n >\n <mat-icon fontIcon=\"format_italic\" />\n </mat-button-toggle>\n }\n @if (menu.toggleCode) {\n <mat-button-toggle\n [disabled]=\"menu.toggleCode.disabled\"\n [checked]=\"menu.toggleCode.active\"\n (click)=\"run($event, 'toggleCode')\"\n i18n-matTooltip\n matTooltip=\"Code\"\n >\n <mat-icon fontIcon=\"code\" />\n </mat-button-toggle>\n }\n @if (menu.toggleLink) {\n <mat-button-toggle\n [disabled]=\"menu.toggleLink.disabled\"\n [checked]=\"menu.toggleLink.active\"\n (click)=\"run($event, 'toggleLink')\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer un lien...\"\n >\n <mat-icon fontIcon=\"insert_link\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n <span i18n>Type</span>\n <mat-icon fontIcon=\"arrow_drop_down\" />\n </button>\n <mat-menu #blockMenu=\"matMenu\">\n @if (menu.makeParagraph) {\n <button\n mat-menu-item\n [disabled]=\"menu.makeParagraph.disabled\"\n (click)=\"run($event, 'makeParagraph')\"\n i18n\n >Paragraphe\n </button>\n }\n @if (menu.makeCodeBlock) {\n <button\n mat-menu-item\n [disabled]=\"menu.makeCodeBlock.disabled\"\n (click)=\"run($event, 'makeCodeBlock')\"\n i18n\n >Code\n </button>\n }\n @if (menu.makeHead1) {\n <button mat-menu-item [disabled]=\"menu.makeHead1.disabled\" (click)=\"run($event, 'makeHead1')\" i18n\n >Titre 1\n </button>\n }\n @if (menu.makeHead2) {\n <button mat-menu-item [disabled]=\"menu.makeHead2.disabled\" (click)=\"run($event, 'makeHead2')\" i18n\n >Titre 2\n </button>\n }\n @if (menu.makeHead3) {\n <button mat-menu-item [disabled]=\"menu.makeHead3.disabled\" (click)=\"run($event, 'makeHead3')\" i18n\n >Titre 3\n </button>\n }\n @if (menu.makeHead4) {\n <button mat-menu-item [disabled]=\"menu.makeHead4.disabled\" (click)=\"run($event, 'makeHead4')\" i18n\n >Titre 4\n </button>\n }\n @if (menu.makeHead5) {\n <button mat-menu-item [disabled]=\"menu.makeHead5.disabled\" (click)=\"run($event, 'makeHead5')\" i18n\n >Titre 5\n </button>\n }\n @if (menu.makeHead6) {\n <button mat-menu-item [disabled]=\"menu.makeHead6.disabled\" (click)=\"run($event, 'makeHead6')\" i18n\n >Titre 6\n </button>\n }\n <mat-divider />\n @if (menu.blockClass) {\n <button mat-menu-item [disabled]=\"menu.blockClass.disabled\" (click)=\"run($event, 'blockClass')\" i18n\n >Classe...\n </button>\n }\n @if (menu.blockId) {\n <button i18n mat-menu-item [disabled]=\"menu.blockId.disabled\" (click)=\"run($event, 'blockId')\"\n >ID...\n </button>\n }\n </mat-menu>\n @if (menu.addColumnBefore) {\n <button mat-button [matMenuTriggerFor]=\"tableMenu\">\n <span i18n>Tableau</span>\n <mat-icon fontIcon=\"arrow_drop_down\" />\n </button>\n }\n <mat-menu #tableMenu=\"matMenu\">\n @if (menu.insertTable) {\n <button\n mat-menu-item\n [disabled]=\"menu.insertTable.disabled\"\n (click)=\"run($event, 'insertTable')\"\n i18n\n >Ins\u00E9rer un tableau\n </button>\n }\n @if (menu.deleteTable) {\n <button\n mat-menu-item\n [disabled]=\"menu.deleteTable.disabled\"\n (click)=\"run($event, 'deleteTable')\"\n i18n\n >Supprimer le tableau\n </button>\n }\n @if (menu.mergeCells) {\n <button mat-menu-item [disabled]=\"menu.mergeCells.disabled\" (click)=\"run($event, 'mergeCells')\" i18n\n >Fusionner les cellules\n </button>\n }\n @if (menu.splitCell) {\n <button mat-menu-item [disabled]=\"menu.splitCell.disabled\" (click)=\"run($event, 'splitCell')\" i18n\n >Scinder les cellules\n </button>\n }\n @if (menu.cellBackgroundColor) {\n <button\n mat-menu-item\n [disabled]=\"menu.cellBackgroundColor.disabled\"\n (click)=\"run($event, 'cellBackgroundColor')\"\n i18n\n >Couleur de fond...\n </button>\n }\n @if (menu.tableClass) {\n <button mat-menu-item [disabled]=\"menu.tableClass.disabled\" (click)=\"run($event, 'tableClass')\" i18n\n >Classe...\n </button>\n }\n @if (menu.tableId) {\n <button i18n mat-menu-item [disabled]=\"menu.tableId.disabled\" (click)=\"run($event, 'tableId')\"\n >ID...\n </button>\n }\n <mat-divider />\n @if (menu.addColumnBefore) {\n <button\n mat-menu-item\n [disabled]=\"menu.addColumnBefore.disabled\"\n (click)=\"run($event, 'addColumnBefore')\"\n i18n\n >Ins\u00E9rer une colonne avant\n </button>\n }\n @if (menu.addColumnAfter) {\n <button\n mat-menu-item\n [disabled]=\"menu.addColumnAfter.disabled\"\n (click)=\"run($event, 'addColumnAfter')\"\n i18n\n >Ins\u00E9rer une colonne apr\u00E8s\n </button>\n }\n @if (menu.deleteColumn) {\n <button\n mat-menu-item\n [disabled]=\"menu.deleteColumn.disabled\"\n (click)=\"run($event, 'deleteColumn')\"\n i18n\n >Supprimer la colonne\n </button>\n }\n <mat-divider />\n @if (menu.addRowBefore) {\n <button\n mat-menu-item\n [disabled]=\"menu.addRowBefore.disabled\"\n (click)=\"run($event, 'addRowBefore')\"\n i18n\n >Ins\u00E9rer une ligne avant\n </button>\n }\n @if (menu.addRowAfter) {\n <button\n mat-menu-item\n [disabled]=\"menu.addRowAfter.disabled\"\n (click)=\"run($event, 'addRowAfter')\"\n i18n\n >Ins\u00E9rer une ligne apr\u00E8s\n </button>\n }\n @if (menu.deleteRow) {\n <button mat-menu-item [disabled]=\"menu.deleteRow.disabled\" (click)=\"run($event, 'deleteRow')\" i18n\n >Supprimer la ligne\n </button>\n }\n <mat-divider />\n @if (menu.toggleHeaderColumn) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderColumn.disabled\"\n (click)=\"run($event, 'toggleHeaderColumn')\"\n i18n\n >Ent\u00EAte de colonne\n </button>\n }\n @if (menu.toggleHeaderRow) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderRow.disabled\"\n (click)=\"run($event, 'toggleHeaderRow')\"\n i18n\n >Ent\u00EAte de ligne\n </button>\n }\n @if (menu.toggleHeaderCell) {\n <button\n mat-menu-item\n [disabled]=\"menu.toggleHeaderCell.disabled\"\n (click)=\"run($event, 'toggleHeaderCell')\"\n i18n\n >Ent\u00EAte de cellule\n </button>\n }\n </mat-menu>\n @if (imageUploader) {\n <button\n mat-icon-button\n naturalFileDrop\n [selectable]=\"true\"\n [broadcast]=\"false\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer une image\"\n (fileChange)=\"upload($event)\"\n >\n <mat-icon fontIcon=\"insert_photo\" />\n </button>\n }\n @if (menu.alignLeft) {\n <mat-button-toggle-group hideSingleSelectionIndicator>\n @if (menu.alignLeft) {\n <mat-button-toggle\n [disabled]=\"menu.alignLeft.disabled\"\n [checked]=\"menu.alignLeft.active\"\n (click)=\"run($event, 'alignLeft')\"\n i18n-matTooltip\n matTooltip=\"Aligner gauche\"\n >\n <mat-icon fontIcon=\"format_align_left\" />\n </mat-button-toggle>\n }\n @if (menu.alignCenter) {\n <mat-button-toggle\n [disabled]=\"menu.alignCenter.disabled\"\n [checked]=\"menu.alignCenter.active\"\n (click)=\"run($event, 'alignCenter')\"\n i18n-matTooltip\n matTooltip=\"Centrer\"\n >\n <mat-icon fontIcon=\"format_align_center\" />\n </mat-button-toggle>\n }\n @if (menu.alignRight) {\n <mat-button-toggle\n [disabled]=\"menu.alignRight.disabled\"\n [checked]=\"menu.alignRight.active\"\n (click)=\"run($event, 'alignRight')\"\n i18n-matTooltip\n matTooltip=\"Aligner droite\"\n >\n <mat-icon fontIcon=\"format_align_right\" />\n </mat-button-toggle>\n }\n @if (menu.alignJustify) {\n <mat-button-toggle\n [disabled]=\"menu.alignJustify.disabled\"\n [checked]=\"menu.alignJustify.active\"\n (click)=\"run($event, 'alignJustify')\"\n i18n-matTooltip\n matTooltip=\"Justifier\"\n >\n <mat-icon fontIcon=\"format_align_justify\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n }\n @if (menu.undo) {\n <button\n mat-icon-button\n [disabled]=\"menu.undo.disabled\"\n (click)=\"run($event, 'undo')\"\n i18n-matTooltip\n matTooltip=\"Annuler\"\n >\n <mat-icon fontIcon=\"undo\" />\n </button>\n }\n @if (menu.redo) {\n <button\n mat-icon-button\n [disabled]=\"menu.redo.disabled\"\n (click)=\"run($event, 'redo')\"\n i18n-matTooltip\n matTooltip=\"Refaire\"\n >\n <mat-icon fontIcon=\"redo\" />\n </button>\n }\n @if (menu.wrapBulletList && menu.wrapBulletList.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapBulletList.disabled\"\n (click)=\"run($event, 'wrapBulletList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 puce\"\n >\n <mat-icon fontIcon=\"format_list_bulleted\" />\n </button>\n }\n @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapOrderedList.disabled\"\n (click)=\"run($event, 'wrapOrderedList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 num\u00E9ro\"\n >\n <mat-icon fontIcon=\"format_list_numbered\" />\n </button>\n }\n @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.wrapBlockQuote.disabled\"\n (click)=\"run($event, 'wrapBlockQuote')\"\n i18n-matTooltip\n matTooltip=\"Citation\"\n >\n <mat-icon fontIcon=\"format_quote\" />\n </button>\n }\n @if (menu.joinUp && menu.joinUp.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.joinUp.disabled\"\n (click)=\"run($event, 'joinUp')\"\n i18n-matTooltip\n matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n >\n <mat-icon fontIcon=\"move_up\" />\n </button>\n }\n @if (menu.lift && menu.lift.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.lift.disabled\"\n (click)=\"run($event, 'lift')\"\n i18n-matTooltip\n matTooltip=\"D\u00E9sindenter\"\n >\n <mat-icon fontIcon=\"format_indent_decrease\" />\n </button>\n }\n @if (menu.selectParentNode && menu.selectParentNode.show) {\n <button\n mat-icon-button\n [disabled]=\"menu.selectParentNode.disabled\"\n (click)=\"run($event, 'selectParentNode')\"\n i18n-matTooltip\n matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n >\n <mat-icon fontIcon=\"select_all\" />\n </button>\n }\n </div>\n </div>\n}\n<div class=\"editor-container\" #editor></div>\n", styles: [".menu{display:flex;flex-wrap:wrap;border-bottom:1px solid;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{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{outline:none;padding:4px 8px 4px 14px;line-height:1.2}::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"] }]
|
|
1685
|
-
}], ctorParameters: () => [
|
|
1686
|
-
type: Optional
|
|
1687
|
-
}, {
|
|
1688
|
-
type: Self
|
|
1689
|
-
}] }, { type: Document, decorators: [{
|
|
1690
|
-
type: Inject,
|
|
1691
|
-
args: [DOCUMENT]
|
|
1692
|
-
}] }, { type: i1.MatDialog }, { type: ImagePlugin }], propDecorators: { editor: [{
|
|
1672
|
+
}], ctorParameters: () => [], propDecorators: { editor: [{
|
|
1693
1673
|
type: ViewChild,
|
|
1694
1674
|
args: ['editor', { read: ElementRef, static: true }]
|
|
1695
1675
|
}], contentChange: [{
|