@ecodev/natural-editor 43.0.0 → 44.0.2
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/esm2020/lib/class-dialog/class-dialog.component.mjs +12 -9
- package/esm2020/lib/color-dialog/color-dialog.component.mjs +14 -11
- package/esm2020/lib/custom-css/custom-css.directive.mjs +3 -3
- package/esm2020/lib/editor/editor.component.mjs +8 -8
- package/esm2020/lib/editor.module.mjs +5 -5
- package/esm2020/lib/id-dialog/id-dialog.component.mjs +12 -9
- package/esm2020/lib/link-dialog/link-dialog.component.mjs +11 -11
- package/esm2020/lib/utils/image.mjs +8 -7
- package/esm2020/lib/utils/items/table-item.mjs +1 -1
- package/esm2020/lib/utils/items/utils.mjs +1 -1
- package/esm2020/lib/utils/keymap.mjs +1 -1
- package/esm2020/lib/utils/schema/paragraph-with-alignment.mjs +2 -2
- package/esm2020/lib/utils/schema/table.mjs +3 -3
- package/fesm2015/ecodev-natural-editor.mjs +62 -52
- package/fesm2015/ecodev-natural-editor.mjs.map +1 -1
- package/fesm2020/ecodev-natural-editor.mjs +62 -52
- package/fesm2020/ecodev-natural-editor.mjs.map +1 -1
- package/{ecodev-natural-editor.d.ts → index.d.ts} +0 -0
- package/lib/class-dialog/class-dialog.component.d.ts +5 -3
- package/lib/color-dialog/color-dialog.component.d.ts +5 -3
- package/lib/custom-css/custom-css.directive.d.ts +1 -1
- package/lib/editor/editor.component.d.ts +1 -1
- package/lib/id-dialog/id-dialog.component.d.ts +5 -3
- package/lib/link-dialog/link-dialog.component.d.ts +7 -4
- package/lib/utils/items/utils.d.ts +1 -2
- package/lib/utils/keymap.d.ts +5 -1
- package/lib/utils/schema/schema.d.ts +2 -2
- package/package.json +9 -5
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '@angular/localize/init';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { Directive, Inject, HostBinding, Input, Injectable, Component, EventEmitter, ElementRef, Optional, Self, ViewChild, Output, NgModule } from '@angular/core';
|
|
4
|
-
import * as
|
|
4
|
+
import * as i2 from '@angular/common';
|
|
5
5
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
6
6
|
import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
|
|
7
7
|
import { Plugin, TextSelection, AllSelection, EditorState } from 'prosemirror-state';
|
|
@@ -13,13 +13,13 @@ import { addListNodes, wrapInList, splitListItem, liftListItem, sinkListItem } f
|
|
|
13
13
|
import { joinUpItem, liftItem, selectParentNodeItem, undoItem, redoItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
|
|
14
14
|
import * as i1 from '@angular/material/dialog';
|
|
15
15
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
16
|
-
import * as
|
|
16
|
+
import * as i6$1 from '@angular/forms';
|
|
17
17
|
import { FormControl, Validators, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
18
|
-
import * as
|
|
18
|
+
import * as i6 from '@ecodev/natural';
|
|
19
19
|
import { ifValid, NaturalFileModule, NaturalIconModule } from '@ecodev/natural';
|
|
20
20
|
import * as i3 from '@angular/material/button';
|
|
21
21
|
import { MatButtonModule } from '@angular/material/button';
|
|
22
|
-
import * as
|
|
22
|
+
import * as i4 from '@angular/material/form-field';
|
|
23
23
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
24
24
|
import * as i5 from '@angular/material/input';
|
|
25
25
|
import { MatInputModule } from '@angular/material/input';
|
|
@@ -28,14 +28,14 @@ import { undo, redo, history } from 'prosemirror-history';
|
|
|
28
28
|
import { dropCursor } from 'prosemirror-dropcursor';
|
|
29
29
|
import { gapCursor } from 'prosemirror-gapcursor';
|
|
30
30
|
import { wrappingInputRule, textblockTypeInputRule, ellipsis, emDash, inputRules, undoInputRule } from 'prosemirror-inputrules';
|
|
31
|
-
import * as
|
|
32
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
33
|
-
import * as i6$1 from '@angular/material/button-toggle';
|
|
31
|
+
import * as i6$2 from '@angular/material/button-toggle';
|
|
34
32
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
35
|
-
import * as i7 from '@angular/material/
|
|
36
|
-
import { MatMenuModule } from '@angular/material/menu';
|
|
37
|
-
import * as i8 from '@angular/material/divider';
|
|
33
|
+
import * as i7 from '@angular/material/divider';
|
|
38
34
|
import { MatDividerModule } from '@angular/material/divider';
|
|
35
|
+
import * as i8 from '@angular/material/icon';
|
|
36
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
37
|
+
import * as i9 from '@angular/material/menu';
|
|
38
|
+
import { MatMenuModule } from '@angular/material/menu';
|
|
39
39
|
import * as i10 from '@angular/material/tooltip';
|
|
40
40
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
41
41
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
@@ -98,9 +98,9 @@ class NaturalCustomCssDirective {
|
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
NaturalCustomCssDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
102
|
-
NaturalCustomCssDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
101
|
+
NaturalCustomCssDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalCustomCssDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
|
|
102
|
+
NaturalCustomCssDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: NaturalCustomCssDirective, selector: "[naturalCustomCss]", inputs: { naturalCustomCss: "naturalCustomCss" }, host: { properties: { "attr.data-natural-id": "this.id" } }, ngImport: i0 });
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalCustomCssDirective, decorators: [{
|
|
104
104
|
type: Directive,
|
|
105
105
|
args: [{
|
|
106
106
|
selector: '[naturalCustomCss]',
|
|
@@ -118,6 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
|
|
|
118
118
|
class ImagePlugin {
|
|
119
119
|
constructor(document) {
|
|
120
120
|
this.document = document;
|
|
121
|
+
const self = this;
|
|
121
122
|
this.plugin = new Plugin({
|
|
122
123
|
state: {
|
|
123
124
|
init() {
|
|
@@ -127,7 +128,7 @@ class ImagePlugin {
|
|
|
127
128
|
// Adjust decoration positions to changes made by the transaction
|
|
128
129
|
set = set.map(tr.mapping, tr.doc);
|
|
129
130
|
// See if the transaction adds or removes any placeholders
|
|
130
|
-
const action = tr.getMeta(
|
|
131
|
+
const action = tr.getMeta(self.plugin);
|
|
131
132
|
if (action && action.add) {
|
|
132
133
|
const widget = document.createElement('placeholder');
|
|
133
134
|
const deco = Decoration.widget(action.add.pos, widget, { id: action.add.id });
|
|
@@ -148,8 +149,8 @@ class ImagePlugin {
|
|
|
148
149
|
}
|
|
149
150
|
findPlaceholder(state, id) {
|
|
150
151
|
const decorators = this.plugin.getState(state);
|
|
151
|
-
const found = decorators
|
|
152
|
-
return found
|
|
152
|
+
const found = decorators?.find(undefined, undefined, spec => spec.id === id);
|
|
153
|
+
return found?.length ? found[0].from : null;
|
|
153
154
|
}
|
|
154
155
|
startImageUpload(view, file, uploader, schema) {
|
|
155
156
|
// A fresh object to act as the ID for this upload
|
|
@@ -182,9 +183,9 @@ class ImagePlugin {
|
|
|
182
183
|
});
|
|
183
184
|
}
|
|
184
185
|
}
|
|
185
|
-
ImagePlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
186
|
-
ImagePlugin.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
186
|
+
ImagePlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ImagePlugin, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
187
|
+
ImagePlugin.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ImagePlugin });
|
|
188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ImagePlugin, decorators: [{
|
|
188
189
|
type: Injectable
|
|
189
190
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
190
191
|
type: Inject,
|
|
@@ -211,7 +212,7 @@ const paragraphWithAlignment = {
|
|
|
211
212
|
tag: 'p',
|
|
212
213
|
getAttrs: (dom) => {
|
|
213
214
|
if (!(dom instanceof HTMLElement)) {
|
|
214
|
-
return;
|
|
215
|
+
return null;
|
|
215
216
|
}
|
|
216
217
|
const { textAlign } = dom.style;
|
|
217
218
|
let align = dom.getAttribute('align') || textAlign || '';
|
|
@@ -243,7 +244,7 @@ const paragraphWithAlignment = {
|
|
|
243
244
|
|
|
244
245
|
function getCellAttrs(dom, extraAttrs) {
|
|
245
246
|
if (!(dom instanceof HTMLElement)) {
|
|
246
|
-
return;
|
|
247
|
+
return null;
|
|
247
248
|
}
|
|
248
249
|
const widthAttr = dom.getAttribute('data-colwidth');
|
|
249
250
|
const widths = widthAttr && /^\d+(,\d+)*$/.test(widthAttr) ? widthAttr.split(',').map(s => Number(s)) : null;
|
|
@@ -310,7 +311,7 @@ function tableNodes(options) {
|
|
|
310
311
|
tag: 'table',
|
|
311
312
|
getAttrs: (dom) => {
|
|
312
313
|
if (!(dom instanceof HTMLElement)) {
|
|
313
|
-
return;
|
|
314
|
+
return null;
|
|
314
315
|
}
|
|
315
316
|
return {
|
|
316
317
|
class: dom.className,
|
|
@@ -667,7 +668,10 @@ class ColorDialogComponent {
|
|
|
667
668
|
'#342a06',
|
|
668
669
|
],
|
|
669
670
|
];
|
|
670
|
-
this.colorControl = new FormControl('',
|
|
671
|
+
this.colorControl = new FormControl('', {
|
|
672
|
+
validators: Validators.pattern(/^#\p{Hex_Digit}{6}/u),
|
|
673
|
+
nonNullable: true,
|
|
674
|
+
});
|
|
671
675
|
this.form = new FormGroup({
|
|
672
676
|
color: this.colorControl,
|
|
673
677
|
});
|
|
@@ -677,16 +681,16 @@ class ColorDialogComponent {
|
|
|
677
681
|
ifValid(this.form).subscribe(() => this.confirm());
|
|
678
682
|
}
|
|
679
683
|
confirm() {
|
|
680
|
-
this.dialogRef.close(this.form.
|
|
684
|
+
this.dialogRef.close(this.form.getRawValue());
|
|
681
685
|
}
|
|
682
686
|
selectColor(color) {
|
|
683
687
|
this.colorControl.setValue(color);
|
|
684
688
|
this.maybeConfirm();
|
|
685
689
|
}
|
|
686
690
|
}
|
|
687
|
-
ColorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
688
|
-
ColorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
691
|
+
ColorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ColorDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
692
|
+
ColorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: ColorDialogComponent, 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 <div *ngFor=\"let row of colors\">\n <div\n *ngFor=\"let color of row\"\n class=\"color\"\n [style]=\"{backgroundColor: color}\"\n (click)=\"selectColor(color)\"\n >\n </div>\n </div>\n </div>\n\n <div>\n <button mat-button (click)=\"selectColor('')\">\n <natural-icon name=\"format_color_reset\"></natural-icon>\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 class=\"sample\" matSuffix [style]=\"{backgroundColor: colorControl.valid ? colorControl.value : ''}\"></div>\n <mat-error *ngIf=\"colorControl.hasError('pattern')\" i18n\n >Doit \u00EAtre le format hexadecimal. Par exemple: #ff4000\n </mat-error>\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\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-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:30em;display:grid;justify-content:center;row-gap:25px}.color{display:inline-block;width:25px;height:25px;margin:3px;cursor:pointer}.color:hover{padding:3px;margin:0}.sample{width:27px;height:27px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.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: "component", type: i6.NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i6$1.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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
693
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ColorDialogComponent, decorators: [{
|
|
690
694
|
type: Component,
|
|
691
695
|
args: [{ template: "<h2 i18n mat-dialog-title>S\u00E9lectionner une couleur</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <div>\n <div *ngFor=\"let row of colors\">\n <div\n *ngFor=\"let color of row\"\n class=\"color\"\n [style]=\"{backgroundColor: color}\"\n (click)=\"selectColor(color)\"\n >\n </div>\n </div>\n </div>\n\n <div>\n <button mat-button (click)=\"selectColor('')\">\n <natural-icon name=\"format_color_reset\"></natural-icon>\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 class=\"sample\" matSuffix [style]=\"{backgroundColor: colorControl.valid ? colorControl.value : ''}\"></div>\n <mat-error *ngIf=\"colorControl.hasError('pattern')\" i18n\n >Doit \u00EAtre le format hexadecimal. Par exemple: #ff4000\n </mat-error>\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\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-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:30em;display:grid;justify-content:center;row-gap:25px}.color{display:inline-block;width:25px;height:25px;margin:3px;cursor:pointer}.color:hover{padding:3px;margin:0}.sample{width:27px;height:27px}\n"] }]
|
|
692
696
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
@@ -749,24 +753,24 @@ class CellBackgroundColorItem extends Item {
|
|
|
749
753
|
class LinkDialogComponent {
|
|
750
754
|
constructor(data, dialogRef) {
|
|
751
755
|
this.dialogRef = dialogRef;
|
|
752
|
-
this.hrefControl = new FormControl('', Validators.required);
|
|
753
|
-
this.titleControl = new FormControl('');
|
|
756
|
+
this.hrefControl = new FormControl('', { validators: Validators.required, nonNullable: true });
|
|
757
|
+
this.titleControl = new FormControl('', { nonNullable: true });
|
|
754
758
|
this.form = new FormGroup({
|
|
755
759
|
href: this.hrefControl,
|
|
756
760
|
title: this.titleControl,
|
|
757
761
|
});
|
|
758
|
-
this.form.setValue(data);
|
|
762
|
+
this.form.setValue({ title: '', ...data });
|
|
759
763
|
}
|
|
760
764
|
maybeConfirm() {
|
|
761
765
|
ifValid(this.form).subscribe(() => this.confirm());
|
|
762
766
|
}
|
|
763
767
|
confirm() {
|
|
764
|
-
this.dialogRef.close(this.form.
|
|
768
|
+
this.dialogRef.close(this.form.getRawValue());
|
|
765
769
|
}
|
|
766
770
|
}
|
|
767
|
-
LinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
768
|
-
LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
769
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
771
|
+
LinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LinkDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
772
|
+
LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: LinkDialogComponent, 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 <mat-error *ngIf=\"hrefControl.hasError('required')\" i18n>Ce champ est requis</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>\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-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:60em;display:grid}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.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: "directive", type: i6$1.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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LinkDialogComponent, decorators: [{
|
|
770
774
|
type: Component,
|
|
771
775
|
args: [{ 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 *ngIf=\"hrefControl.hasError('required')\" i18n>Ce champ est requis</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>\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-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:60em;display:grid}\n"] }]
|
|
772
776
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
@@ -879,7 +883,10 @@ function wrapListItem(nodeType) {
|
|
|
879
883
|
class ClassDialogComponent {
|
|
880
884
|
constructor(data, dialogRef) {
|
|
881
885
|
this.dialogRef = dialogRef;
|
|
882
|
-
this.classControl = new FormControl('',
|
|
886
|
+
this.classControl = new FormControl('', {
|
|
887
|
+
validators: Validators.pattern(/(^\s*(-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*)+)/),
|
|
888
|
+
nonNullable: true,
|
|
889
|
+
});
|
|
883
890
|
this.form = new FormGroup({
|
|
884
891
|
class: this.classControl,
|
|
885
892
|
});
|
|
@@ -889,12 +896,12 @@ class ClassDialogComponent {
|
|
|
889
896
|
ifValid(this.form).subscribe(() => this.confirm());
|
|
890
897
|
}
|
|
891
898
|
confirm() {
|
|
892
|
-
this.dialogRef.close(this.form.
|
|
899
|
+
this.dialogRef.close(this.form.getRawValue());
|
|
893
900
|
}
|
|
894
901
|
}
|
|
895
|
-
ClassDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
896
|
-
ClassDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
897
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
902
|
+
ClassDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ClassDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
903
|
+
ClassDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: ClassDialogComponent, 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 <div class=\"sample\" matSuffix [style]=\"{backgroundClass: classControl.valid ? classControl.value : ''}\"></div>\n <mat-error *ngIf=\"classControl.hasError('pattern')\" i18n>Doit \u00EAtre un ou plusieurs nom de classe CSS</mat-error>\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\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-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:30em;display:grid}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.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: "directive", type: i6$1.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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ClassDialogComponent, decorators: [{
|
|
898
905
|
type: Component,
|
|
899
906
|
args: [{ 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 <div class=\"sample\" matSuffix [style]=\"{backgroundClass: classControl.valid ? classControl.value : ''}\"></div>\n <mat-error *ngIf=\"classControl.hasError('pattern')\" i18n>Doit \u00EAtre un ou plusieurs nom de classe CSS</mat-error>\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\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-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:30em;display:grid}\n"] }]
|
|
900
907
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
@@ -988,7 +995,10 @@ class ClassItem extends Item {
|
|
|
988
995
|
class IdDialogComponent {
|
|
989
996
|
constructor(data, dialogRef) {
|
|
990
997
|
this.dialogRef = dialogRef;
|
|
991
|
-
this.idControl = new FormControl('',
|
|
998
|
+
this.idControl = new FormControl('', {
|
|
999
|
+
validators: Validators.pattern(/(^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)+)/),
|
|
1000
|
+
nonNullable: true,
|
|
1001
|
+
});
|
|
992
1002
|
this.form = new FormGroup({
|
|
993
1003
|
id: this.idControl,
|
|
994
1004
|
});
|
|
@@ -998,12 +1008,12 @@ class IdDialogComponent {
|
|
|
998
1008
|
ifValid(this.form).subscribe(() => this.confirm());
|
|
999
1009
|
}
|
|
1000
1010
|
confirm() {
|
|
1001
|
-
this.dialogRef.close(this.form.
|
|
1011
|
+
this.dialogRef.close(this.form.getRawValue());
|
|
1002
1012
|
}
|
|
1003
1013
|
}
|
|
1004
|
-
IdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1005
|
-
IdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1006
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1014
|
+
IdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IdDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1015
|
+
IdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IdDialogComponent, 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>ID</mat-label>\n <input matInput [formControl]=\"idControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n <div class=\"sample\" matSuffix [style]=\"{backgroundClass: idControl.valid ? idControl.value : ''}\"></div>\n <mat-error *ngIf=\"idControl.hasError('pattern')\" i18n>Doit \u00EAtre un ID valide</mat-error>\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\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-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:30em;display:grid}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.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: "directive", type: i6$1.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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
1016
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IdDialogComponent, decorators: [{
|
|
1007
1017
|
type: Component,
|
|
1008
1018
|
args: [{ template: "<h2 i18n mat-dialog-title>Saisir le ID</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n <mat-form-field>\n <mat-label>ID</mat-label>\n <input matInput [formControl]=\"idControl\" (keydown.enter)=\"maybeConfirm()\" cdkFocusInitial />\n <div class=\"sample\" matSuffix [style]=\"{backgroundClass: idControl.valid ? idControl.value : ''}\"></div>\n <mat-error *ngIf=\"idControl.hasError('pattern')\" i18n>Doit \u00EAtre un ID valide</mat-error>\n </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\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-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:30em;display:grid}\n"] }]
|
|
1009
1019
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
@@ -1567,12 +1577,12 @@ class NaturalEditorComponent {
|
|
|
1567
1577
|
this.view.focus();
|
|
1568
1578
|
}
|
|
1569
1579
|
}
|
|
1570
|
-
NaturalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1571
|
-
NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NaturalEditorComponent, 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: "<div class=\"menu-container\" *ngIf=\"menu\">\n <div class=\"menu\">\n <button mat-button *ngIf=\"save.observed\" (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n <mat-icon>save</mat-icon>\n </button>\n\n <mat-button-toggle-group multiple>\n <mat-button-toggle\n *ngIf=\"menu.toggleStrong\"\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>format_bold</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleEm\"\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>format_italic</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleCode\"\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>code</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleLink\"\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>insert_link</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n <span i18n>Type</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #blockMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.makeParagraph\"\n [disabled]=\"menu.makeParagraph.disabled\"\n (click)=\"run($event, 'makeParagraph')\"\n i18n\n >Paragraphe\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeCodeBlock\"\n [disabled]=\"menu.makeCodeBlock.disabled\"\n (click)=\"run($event, 'makeCodeBlock')\"\n i18n\n >Code\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead1\"\n [disabled]=\"menu.makeHead1.disabled\"\n (click)=\"run($event, 'makeHead1')\"\n i18n\n >Titre 1\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead2\"\n [disabled]=\"menu.makeHead2.disabled\"\n (click)=\"run($event, 'makeHead2')\"\n i18n\n >Titre 2\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead3\"\n [disabled]=\"menu.makeHead3.disabled\"\n (click)=\"run($event, 'makeHead3')\"\n i18n\n >Titre 3\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead4\"\n [disabled]=\"menu.makeHead4.disabled\"\n (click)=\"run($event, 'makeHead4')\"\n i18n\n >Titre 4\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead5\"\n [disabled]=\"menu.makeHead5.disabled\"\n (click)=\"run($event, 'makeHead5')\"\n i18n\n >Titre 5\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead6\"\n [disabled]=\"menu.makeHead6.disabled\"\n (click)=\"run($event, 'makeHead6')\"\n i18n\n >Titre 6\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.paragraphClass\"\n [disabled]=\"menu.paragraphClass.disabled\"\n (click)=\"run($event, 'paragraphClass')\"\n i18n\n >Classe...\n </button>\n </mat-menu>\n\n <button mat-button [matMenuTriggerFor]=\"tableMenu\" *ngIf=\"menu.addColumnBefore\">\n <span i18n>Tableau</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #tableMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.insertTable\"\n [disabled]=\"menu.insertTable.disabled\"\n (click)=\"run($event, 'insertTable')\"\n i18n\n >Ins\u00E9rer un tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteTable\"\n [disabled]=\"menu.deleteTable.disabled\"\n (click)=\"run($event, 'deleteTable')\"\n i18n\n >Supprimer le tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.mergeCells\"\n [disabled]=\"menu.mergeCells.disabled\"\n (click)=\"run($event, 'mergeCells')\"\n i18n\n >Fusionner les cellules\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.splitCell\"\n [disabled]=\"menu.splitCell.disabled\"\n (click)=\"run($event, 'splitCell')\"\n i18n\n >Scinder les cellules\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.cellBackgroundColor\"\n [disabled]=\"menu.cellBackgroundColor.disabled\"\n (click)=\"run($event, 'cellBackgroundColor')\"\n i18n\n >Couleur de fond...\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.tableClass\"\n [disabled]=\"menu.tableClass.disabled\"\n (click)=\"run($event, 'tableClass')\"\n i18n\n >Classe...\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.tableId\"\n [disabled]=\"menu.tableId.disabled\"\n (click)=\"run($event, 'tableId')\"\n >ID...\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnBefore\"\n [disabled]=\"menu.addColumnBefore.disabled\"\n (click)=\"run($event, 'addColumnBefore')\"\n i18n\n >Ins\u00E9rer une colonne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnAfter\"\n [disabled]=\"menu.addColumnAfter.disabled\"\n (click)=\"run($event, 'addColumnAfter')\"\n i18n\n >Ins\u00E9rer une colonne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteColumn\"\n [disabled]=\"menu.deleteColumn.disabled\"\n (click)=\"run($event, 'deleteColumn')\"\n i18n\n >Supprimer la colonne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addRowBefore\"\n [disabled]=\"menu.addRowBefore.disabled\"\n (click)=\"run($event, 'addRowBefore')\"\n i18n\n >Ins\u00E9rer une ligne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addRowAfter\"\n [disabled]=\"menu.addRowAfter.disabled\"\n (click)=\"run($event, 'addRowAfter')\"\n i18n\n >Ins\u00E9rer une ligne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteRow\"\n [disabled]=\"menu.deleteRow.disabled\"\n (click)=\"run($event, 'deleteRow')\"\n i18n\n >Supprimer la ligne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderColumn\"\n [disabled]=\"menu.toggleHeaderColumn.disabled\"\n (click)=\"run($event, 'toggleHeaderColumn')\"\n i18n\n >Ent\u00EAte de colonne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderRow\"\n [disabled]=\"menu.toggleHeaderRow.disabled\"\n (click)=\"run($event, 'toggleHeaderRow')\"\n i18n\n >Ent\u00EAte de ligne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderCell\"\n [disabled]=\"menu.toggleHeaderCell.disabled\"\n (click)=\"run($event, 'toggleHeaderCell')\"\n i18n\n >Ent\u00EAte de cellule\n </button>\n </mat-menu>\n\n <button\n mat-button\n *ngIf=\"imageUploader\"\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>insert_photo</mat-icon>\n </button>\n\n <mat-button-toggle-group *ngIf=\"menu.alignLeft\">\n <mat-button-toggle\n *ngIf=\"menu.alignLeft\"\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>format_align_left</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignCenter\"\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>format_align_center</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignRight\"\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>format_align_right</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignJustify\"\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>format_align_justify</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button\n mat-button\n *ngIf=\"menu.undo\"\n [disabled]=\"menu.undo.disabled\"\n (click)=\"run($event, 'undo')\"\n i18n-matTooltip\n matTooltip=\"Annuler\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.redo\"\n [disabled]=\"menu.redo.disabled\"\n (click)=\"run($event, 'redo')\"\n i18n-matTooltip\n matTooltip=\"Refaire\"\n >\n <mat-icon>redo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n [disabled]=\"menu.wrapBulletList.disabled\"\n (click)=\"run($event, 'wrapBulletList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 puce\"\n >\n <mat-icon>format_list_bulleted</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n [disabled]=\"menu.wrapOrderedList.disabled\"\n (click)=\"run($event, 'wrapOrderedList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 num\u00E9ro\"\n >\n <mat-icon>format_list_numbered</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n [disabled]=\"menu.wrapBlockQuote.disabled\"\n (click)=\"run($event, 'wrapBlockQuote')\"\n i18n-matTooltip\n matTooltip=\"Citation\"\n >\n <mat-icon>format_quote</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.joinUp && menu.joinUp.show\"\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>move_up</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.lift && menu.lift.show\"\n [disabled]=\"menu.lift.disabled\"\n (click)=\"run($event, 'lift')\"\n i18n-matTooltip\n matTooltip=\"D\u00E9sindenter\"\n >\n <mat-icon>format_indent_decrease</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\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>select_all</mat-icon>\n </button>\n </div>\n</div>\n<div class=\"editor-container\" #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::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{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::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{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;width:50px;height:50px;background-size:500% 100%!important;animation:gradient 3s none infinite}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
|
|
1572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1580
|
+
NaturalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEditorComponent, deps: [{ token: i6$1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i1.MatDialog }, { token: ImagePlugin }], target: i0.ɵɵFactoryTarget.Component });
|
|
1581
|
+
NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalEditorComponent, 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: "<div class=\"menu-container\" *ngIf=\"menu\">\n <div class=\"menu\">\n <button mat-button *ngIf=\"save.observed\" (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n <mat-icon>save</mat-icon>\n </button>\n\n <mat-button-toggle-group multiple>\n <mat-button-toggle\n *ngIf=\"menu.toggleStrong\"\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>format_bold</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleEm\"\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>format_italic</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleCode\"\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>code</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleLink\"\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>insert_link</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n <span i18n>Type</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #blockMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.makeParagraph\"\n [disabled]=\"menu.makeParagraph.disabled\"\n (click)=\"run($event, 'makeParagraph')\"\n i18n\n >Paragraphe\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeCodeBlock\"\n [disabled]=\"menu.makeCodeBlock.disabled\"\n (click)=\"run($event, 'makeCodeBlock')\"\n i18n\n >Code\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead1\"\n [disabled]=\"menu.makeHead1.disabled\"\n (click)=\"run($event, 'makeHead1')\"\n i18n\n >Titre 1\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead2\"\n [disabled]=\"menu.makeHead2.disabled\"\n (click)=\"run($event, 'makeHead2')\"\n i18n\n >Titre 2\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead3\"\n [disabled]=\"menu.makeHead3.disabled\"\n (click)=\"run($event, 'makeHead3')\"\n i18n\n >Titre 3\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead4\"\n [disabled]=\"menu.makeHead4.disabled\"\n (click)=\"run($event, 'makeHead4')\"\n i18n\n >Titre 4\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead5\"\n [disabled]=\"menu.makeHead5.disabled\"\n (click)=\"run($event, 'makeHead5')\"\n i18n\n >Titre 5\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead6\"\n [disabled]=\"menu.makeHead6.disabled\"\n (click)=\"run($event, 'makeHead6')\"\n i18n\n >Titre 6\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.paragraphClass\"\n [disabled]=\"menu.paragraphClass.disabled\"\n (click)=\"run($event, 'paragraphClass')\"\n i18n\n >Classe...\n </button>\n </mat-menu>\n\n <button mat-button [matMenuTriggerFor]=\"tableMenu\" *ngIf=\"menu.addColumnBefore\">\n <span i18n>Tableau</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #tableMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.insertTable\"\n [disabled]=\"menu.insertTable.disabled\"\n (click)=\"run($event, 'insertTable')\"\n i18n\n >Ins\u00E9rer un tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteTable\"\n [disabled]=\"menu.deleteTable.disabled\"\n (click)=\"run($event, 'deleteTable')\"\n i18n\n >Supprimer le tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.mergeCells\"\n [disabled]=\"menu.mergeCells.disabled\"\n (click)=\"run($event, 'mergeCells')\"\n i18n\n >Fusionner les cellules\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.splitCell\"\n [disabled]=\"menu.splitCell.disabled\"\n (click)=\"run($event, 'splitCell')\"\n i18n\n >Scinder les cellules\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.cellBackgroundColor\"\n [disabled]=\"menu.cellBackgroundColor.disabled\"\n (click)=\"run($event, 'cellBackgroundColor')\"\n i18n\n >Couleur de fond...\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.tableClass\"\n [disabled]=\"menu.tableClass.disabled\"\n (click)=\"run($event, 'tableClass')\"\n i18n\n >Classe...\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.tableId\"\n [disabled]=\"menu.tableId.disabled\"\n (click)=\"run($event, 'tableId')\"\n >ID...\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnBefore\"\n [disabled]=\"menu.addColumnBefore.disabled\"\n (click)=\"run($event, 'addColumnBefore')\"\n i18n\n >Ins\u00E9rer une colonne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnAfter\"\n [disabled]=\"menu.addColumnAfter.disabled\"\n (click)=\"run($event, 'addColumnAfter')\"\n i18n\n >Ins\u00E9rer une colonne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteColumn\"\n [disabled]=\"menu.deleteColumn.disabled\"\n (click)=\"run($event, 'deleteColumn')\"\n i18n\n >Supprimer la colonne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addRowBefore\"\n [disabled]=\"menu.addRowBefore.disabled\"\n (click)=\"run($event, 'addRowBefore')\"\n i18n\n >Ins\u00E9rer une ligne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addRowAfter\"\n [disabled]=\"menu.addRowAfter.disabled\"\n (click)=\"run($event, 'addRowAfter')\"\n i18n\n >Ins\u00E9rer une ligne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteRow\"\n [disabled]=\"menu.deleteRow.disabled\"\n (click)=\"run($event, 'deleteRow')\"\n i18n\n >Supprimer la ligne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderColumn\"\n [disabled]=\"menu.toggleHeaderColumn.disabled\"\n (click)=\"run($event, 'toggleHeaderColumn')\"\n i18n\n >Ent\u00EAte de colonne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderRow\"\n [disabled]=\"menu.toggleHeaderRow.disabled\"\n (click)=\"run($event, 'toggleHeaderRow')\"\n i18n\n >Ent\u00EAte de ligne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderCell\"\n [disabled]=\"menu.toggleHeaderCell.disabled\"\n (click)=\"run($event, 'toggleHeaderCell')\"\n i18n\n >Ent\u00EAte de cellule\n </button>\n </mat-menu>\n\n <button\n mat-button\n *ngIf=\"imageUploader\"\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>insert_photo</mat-icon>\n </button>\n\n <mat-button-toggle-group *ngIf=\"menu.alignLeft\">\n <mat-button-toggle\n *ngIf=\"menu.alignLeft\"\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>format_align_left</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignCenter\"\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>format_align_center</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignRight\"\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>format_align_right</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignJustify\"\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>format_align_justify</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button\n mat-button\n *ngIf=\"menu.undo\"\n [disabled]=\"menu.undo.disabled\"\n (click)=\"run($event, 'undo')\"\n i18n-matTooltip\n matTooltip=\"Annuler\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.redo\"\n [disabled]=\"menu.redo.disabled\"\n (click)=\"run($event, 'redo')\"\n i18n-matTooltip\n matTooltip=\"Refaire\"\n >\n <mat-icon>redo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n [disabled]=\"menu.wrapBulletList.disabled\"\n (click)=\"run($event, 'wrapBulletList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 puce\"\n >\n <mat-icon>format_list_bulleted</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n [disabled]=\"menu.wrapOrderedList.disabled\"\n (click)=\"run($event, 'wrapOrderedList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 num\u00E9ro\"\n >\n <mat-icon>format_list_numbered</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n [disabled]=\"menu.wrapBlockQuote.disabled\"\n (click)=\"run($event, 'wrapBlockQuote')\"\n i18n-matTooltip\n matTooltip=\"Citation\"\n >\n <mat-icon>format_quote</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.joinUp && menu.joinUp.show\"\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>move_up</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.lift && menu.lift.show\"\n [disabled]=\"menu.lift.disabled\"\n (click)=\"run($event, 'lift')\"\n i18n-matTooltip\n matTooltip=\"D\u00E9sindenter\"\n >\n <mat-icon>format_indent_decrease</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\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>select_all</mat-icon>\n </button>\n </div>\n</div>\n<div class=\"editor-container\" #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::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{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::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{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;width:50px;height:50px;background-size:500% 100%!important;animation:gradient 3s none infinite}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i6.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
|
|
1582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEditorComponent, decorators: [{
|
|
1573
1583
|
type: Component,
|
|
1574
1584
|
args: [{ selector: 'natural-editor', providers: [ImagePlugin], template: "<div class=\"menu-container\" *ngIf=\"menu\">\n <div class=\"menu\">\n <button mat-button *ngIf=\"save.observed\" (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n <mat-icon>save</mat-icon>\n </button>\n\n <mat-button-toggle-group multiple>\n <mat-button-toggle\n *ngIf=\"menu.toggleStrong\"\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>format_bold</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleEm\"\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>format_italic</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleCode\"\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>code</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleLink\"\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>insert_link</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n <span i18n>Type</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #blockMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.makeParagraph\"\n [disabled]=\"menu.makeParagraph.disabled\"\n (click)=\"run($event, 'makeParagraph')\"\n i18n\n >Paragraphe\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeCodeBlock\"\n [disabled]=\"menu.makeCodeBlock.disabled\"\n (click)=\"run($event, 'makeCodeBlock')\"\n i18n\n >Code\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead1\"\n [disabled]=\"menu.makeHead1.disabled\"\n (click)=\"run($event, 'makeHead1')\"\n i18n\n >Titre 1\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead2\"\n [disabled]=\"menu.makeHead2.disabled\"\n (click)=\"run($event, 'makeHead2')\"\n i18n\n >Titre 2\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead3\"\n [disabled]=\"menu.makeHead3.disabled\"\n (click)=\"run($event, 'makeHead3')\"\n i18n\n >Titre 3\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead4\"\n [disabled]=\"menu.makeHead4.disabled\"\n (click)=\"run($event, 'makeHead4')\"\n i18n\n >Titre 4\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead5\"\n [disabled]=\"menu.makeHead5.disabled\"\n (click)=\"run($event, 'makeHead5')\"\n i18n\n >Titre 5\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead6\"\n [disabled]=\"menu.makeHead6.disabled\"\n (click)=\"run($event, 'makeHead6')\"\n i18n\n >Titre 6\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.paragraphClass\"\n [disabled]=\"menu.paragraphClass.disabled\"\n (click)=\"run($event, 'paragraphClass')\"\n i18n\n >Classe...\n </button>\n </mat-menu>\n\n <button mat-button [matMenuTriggerFor]=\"tableMenu\" *ngIf=\"menu.addColumnBefore\">\n <span i18n>Tableau</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #tableMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.insertTable\"\n [disabled]=\"menu.insertTable.disabled\"\n (click)=\"run($event, 'insertTable')\"\n i18n\n >Ins\u00E9rer un tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteTable\"\n [disabled]=\"menu.deleteTable.disabled\"\n (click)=\"run($event, 'deleteTable')\"\n i18n\n >Supprimer le tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.mergeCells\"\n [disabled]=\"menu.mergeCells.disabled\"\n (click)=\"run($event, 'mergeCells')\"\n i18n\n >Fusionner les cellules\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.splitCell\"\n [disabled]=\"menu.splitCell.disabled\"\n (click)=\"run($event, 'splitCell')\"\n i18n\n >Scinder les cellules\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.cellBackgroundColor\"\n [disabled]=\"menu.cellBackgroundColor.disabled\"\n (click)=\"run($event, 'cellBackgroundColor')\"\n i18n\n >Couleur de fond...\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.tableClass\"\n [disabled]=\"menu.tableClass.disabled\"\n (click)=\"run($event, 'tableClass')\"\n i18n\n >Classe...\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.tableId\"\n [disabled]=\"menu.tableId.disabled\"\n (click)=\"run($event, 'tableId')\"\n >ID...\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnBefore\"\n [disabled]=\"menu.addColumnBefore.disabled\"\n (click)=\"run($event, 'addColumnBefore')\"\n i18n\n >Ins\u00E9rer une colonne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnAfter\"\n [disabled]=\"menu.addColumnAfter.disabled\"\n (click)=\"run($event, 'addColumnAfter')\"\n i18n\n >Ins\u00E9rer une colonne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteColumn\"\n [disabled]=\"menu.deleteColumn.disabled\"\n (click)=\"run($event, 'deleteColumn')\"\n i18n\n >Supprimer la colonne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addRowBefore\"\n [disabled]=\"menu.addRowBefore.disabled\"\n (click)=\"run($event, 'addRowBefore')\"\n i18n\n >Ins\u00E9rer une ligne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addRowAfter\"\n [disabled]=\"menu.addRowAfter.disabled\"\n (click)=\"run($event, 'addRowAfter')\"\n i18n\n >Ins\u00E9rer une ligne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteRow\"\n [disabled]=\"menu.deleteRow.disabled\"\n (click)=\"run($event, 'deleteRow')\"\n i18n\n >Supprimer la ligne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderColumn\"\n [disabled]=\"menu.toggleHeaderColumn.disabled\"\n (click)=\"run($event, 'toggleHeaderColumn')\"\n i18n\n >Ent\u00EAte de colonne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderRow\"\n [disabled]=\"menu.toggleHeaderRow.disabled\"\n (click)=\"run($event, 'toggleHeaderRow')\"\n i18n\n >Ent\u00EAte de ligne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderCell\"\n [disabled]=\"menu.toggleHeaderCell.disabled\"\n (click)=\"run($event, 'toggleHeaderCell')\"\n i18n\n >Ent\u00EAte de cellule\n </button>\n </mat-menu>\n\n <button\n mat-button\n *ngIf=\"imageUploader\"\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>insert_photo</mat-icon>\n </button>\n\n <mat-button-toggle-group *ngIf=\"menu.alignLeft\">\n <mat-button-toggle\n *ngIf=\"menu.alignLeft\"\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>format_align_left</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignCenter\"\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>format_align_center</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignRight\"\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>format_align_right</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignJustify\"\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>format_align_justify</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button\n mat-button\n *ngIf=\"menu.undo\"\n [disabled]=\"menu.undo.disabled\"\n (click)=\"run($event, 'undo')\"\n i18n-matTooltip\n matTooltip=\"Annuler\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.redo\"\n [disabled]=\"menu.redo.disabled\"\n (click)=\"run($event, 'redo')\"\n i18n-matTooltip\n matTooltip=\"Refaire\"\n >\n <mat-icon>redo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n [disabled]=\"menu.wrapBulletList.disabled\"\n (click)=\"run($event, 'wrapBulletList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 puce\"\n >\n <mat-icon>format_list_bulleted</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n [disabled]=\"menu.wrapOrderedList.disabled\"\n (click)=\"run($event, 'wrapOrderedList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 num\u00E9ro\"\n >\n <mat-icon>format_list_numbered</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n [disabled]=\"menu.wrapBlockQuote.disabled\"\n (click)=\"run($event, 'wrapBlockQuote')\"\n i18n-matTooltip\n matTooltip=\"Citation\"\n >\n <mat-icon>format_quote</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.joinUp && menu.joinUp.show\"\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>move_up</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.lift && menu.lift.show\"\n [disabled]=\"menu.lift.disabled\"\n (click)=\"run($event, 'lift')\"\n i18n-matTooltip\n matTooltip=\"D\u00E9sindenter\"\n >\n <mat-icon>format_indent_decrease</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\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>select_all</mat-icon>\n </button>\n </div>\n</div>\n<div class=\"editor-container\" #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::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{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::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{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;width:50px;height:50px;background-size:500% 100%!important;animation:gradient 3s none infinite}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"] }]
|
|
1575
|
-
}], ctorParameters: function () { return [{ type:
|
|
1585
|
+
}], ctorParameters: function () { return [{ type: i6$1.NgControl, decorators: [{
|
|
1576
1586
|
type: Optional
|
|
1577
1587
|
}, {
|
|
1578
1588
|
type: Self
|
|
@@ -1609,8 +1619,8 @@ const imports = [
|
|
|
1609
1619
|
const declarationsToExport = [NaturalEditorComponent, NaturalCustomCssDirective];
|
|
1610
1620
|
class NaturalEditorModule {
|
|
1611
1621
|
}
|
|
1612
|
-
NaturalEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1613
|
-
NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
1622
|
+
NaturalEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1623
|
+
NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: NaturalEditorModule, declarations: [ClassDialogComponent,
|
|
1614
1624
|
ColorDialogComponent,
|
|
1615
1625
|
IdDialogComponent,
|
|
1616
1626
|
LinkDialogComponent, NaturalEditorComponent, NaturalCustomCssDirective], imports: [CommonModule,
|
|
@@ -1640,7 +1650,7 @@ NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
|
|
|
1640
1650
|
NaturalFileModule,
|
|
1641
1651
|
NaturalIconModule,
|
|
1642
1652
|
ReactiveFormsModule, NaturalEditorComponent, NaturalCustomCssDirective] });
|
|
1643
|
-
NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1653
|
+
NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEditorModule, imports: [imports, CommonModule,
|
|
1644
1654
|
MatButtonModule,
|
|
1645
1655
|
MatButtonToggleModule,
|
|
1646
1656
|
MatDialogModule,
|
|
@@ -1654,7 +1664,7 @@ NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
|
1654
1664
|
NaturalFileModule,
|
|
1655
1665
|
NaturalIconModule,
|
|
1656
1666
|
ReactiveFormsModule] });
|
|
1657
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEditorModule, decorators: [{
|
|
1658
1668
|
type: NgModule,
|
|
1659
1669
|
args: [{
|
|
1660
1670
|
declarations: [
|