@ecodev/natural-editor 45.2.0 → 45.4.0

package/fesm2020/ecodev-natural-editor.mjs

@@ -242,6 +242,70 @@ const paragraphWithAlignment = {
     },
 };
 
+const getAttrsForLevel = function (level) {
+    return (dom) => {
+        if (!(dom instanceof HTMLElement)) {
+            return null;
+        }
+        const id = dom.getAttribute('id') || null;
+        const attrs = { level: level, class: dom.className, id: id };
+        return attrs;
+    };
+};
+/**
+ * A heading textblock, with a `level` attribute that should hold the number 1 to 6,
+ * with optional ID and class attributes. Parsed and serialized as `<h1>` to <h6>`
+ *
+ * https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
+ */
+const heading = {
+    attrs: {
+        level: { default: 1 },
+        class: { default: null },
+        id: { default: null },
+    },
+    content: 'inline*',
+    group: 'block',
+    defining: true,
+    parseDOM: [
+        {
+            tag: 'h1',
+            getAttrs: getAttrsForLevel(1),
+        },
+        {
+            tag: 'h2',
+            getAttrs: getAttrsForLevel(2),
+        },
+        {
+            tag: 'h3',
+            getAttrs: getAttrsForLevel(3),
+        },
+        {
+            tag: 'h4',
+            getAttrs: getAttrsForLevel(4),
+        },
+        {
+            tag: 'h5',
+            getAttrs: getAttrsForLevel(5),
+        },
+        {
+            tag: 'h6',
+            getAttrs: getAttrsForLevel(6),
+        },
+    ],
+    toDOM: node => {
+        const { id } = node.attrs;
+        const attrs = {};
+        if (id) {
+            attrs.id = id;
+        }
+        if (node.attrs.class) {
+            attrs.class = node.attrs.class;
+        }
+        return ['h' + node.attrs.level, attrs, 0];
+    },
+};
+
 function getCellAttrs(dom, extraAttrs) {
     if (!(dom instanceof HTMLElement)) {
         return null;
@@ -382,6 +446,7 @@ const basicSchema = new Schema({
 const tmpSchema2 = new Schema({
     nodes: {
         ...nodes,
+        heading: heading,
         ...tableNodes({
             tableGroup: 'block',
             cellContent: 'block+',
@@ -816,6 +881,20 @@ function markTypeToItem(markType) {
         },
     });
 }
+function selectionContainsNodeType(state, allowedNodeTypes) {
+    const { selection, doc } = state;
+    const { from, to } = selection;
+    let keepLooking = true;
+    let found = false;
+    doc.nodesBetween(from, to, node => {
+        if (keepLooking && allowedNodeTypes.includes(node.type.name)) {
+            keepLooking = false;
+            found = true;
+        }
+        return keepLooking;
+    });
+    return found;
+}
 
 class LinkItem extends Item {
     constructor(markType, dialog) {
@@ -909,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1.MatDialogRef }]; } });
 
-function setClass(tr, classValue, allowedNodeType) {
+function setClass(tr, classValue, allowedNodeTypes) {
     const { selection, doc } = tr;
     if (!selection || !doc) {
         return tr;
@@ -919,7 +998,7 @@ function setClass(tr, classValue, allowedNodeType) {
     doc.nodesBetween(from, to, (node, pos) => {
         const nodeType = node.type;
         const currentClass = node.attrs.class || null;
-        if (currentClass !== classValue && allowedNodeType === nodeType) {
+        if (currentClass !== classValue && allowedNodeTypes.includes(nodeType.name)) {
             tasks.push({
                 node,
                 pos,
@@ -945,13 +1024,13 @@ function setClass(tr, classValue, allowedNodeType) {
  * Returns the first `class` attribute that is non-empty in the selection.
  * If not found, return empty string.
  */
-function findFirstClassInSelection(state, allowedNodeType) {
+function findFirstClassInSelection(state, allowedNodeTypes) {
     const { selection, doc } = state;
     const { from, to } = selection;
     let keepLooking = true;
     let foundClass = '';
     doc.nodesBetween(from, to, node => {
-        if (keepLooking && node.type === allowedNodeType && node.attrs.class) {
+        if (keepLooking && allowedNodeTypes.includes(node.type.name) && node.attrs.class) {
             keepLooking = false;
             foundClass = node.attrs.class;
         }
@@ -960,27 +1039,26 @@ function findFirstClassInSelection(state, allowedNodeType) {
     return foundClass;
 }
 class ClassItem extends Item {
-    constructor(dialog, nodeType) {
+    constructor(dialog, nodeTypes) {
         super({
             active: state => {
-                return !!findFirstClassInSelection(state, nodeType);
+                return !!findFirstClassInSelection(state, nodeTypes);
             },
             enable: state => {
-                const { selection } = state;
-                return selection instanceof TextSelection || selection instanceof AllSelection;
+                return selectionContainsNodeType(state, nodeTypes);
             },
             run: (state, dispatch, view) => {
                 dialog
                     .open(ClassDialogComponent, {
                     data: {
-                        class: findFirstClassInSelection(state, nodeType),
+                        class: findFirstClassInSelection(state, nodeTypes),
                     },
                 })
                     .afterClosed()
                     .subscribe(result => {
                     if (dispatch && result) {
                         const { selection } = state;
-                        const tr = setClass(state.tr.setSelection(selection), result.class, nodeType);
+                        const tr = setClass(state.tr.setSelection(selection), result.class, nodeTypes);
                         if (tr.docChanged) {
                             dispatch?.(tr);
                         }
@@ -1021,7 +1099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1.MatDialogRef }]; } });
 
-function setId(tr, idValue, allowedNodeType) {
+function setId(tr, idValue, allowedNodeTypes) {
     const { selection, doc } = tr;
     if (!selection || !doc) {
         return tr;
@@ -1031,7 +1109,7 @@ function setId(tr, idValue, allowedNodeType) {
     doc.nodesBetween(from, to, (node, pos) => {
         const nodeType = node.type;
         const currentId = node.attrs.id || null;
-        if (currentId !== idValue && allowedNodeType === nodeType) {
+        if (currentId !== idValue && allowedNodeTypes.includes(nodeType.name)) {
             tasks.push({
                 node,
                 pos,
@@ -1057,42 +1135,41 @@ function setId(tr, idValue, allowedNodeType) {
  * Returns the first `id` attribute that is non-empty in the selection.
  * If not found, return empty string.
  */
-function findFirstIdInSelection(state, allowedNodeType) {
+function findFirstIdInSelection(state, allowedNodeTypes) {
     const { selection, doc } = state;
     const { from, to } = selection;
     let keepLooking = true;
-    let foundClass = '';
+    let foundId = '';
     doc.nodesBetween(from, to, node => {
-        if (keepLooking && node.type === allowedNodeType && node.attrs.id) {
+        if (keepLooking && allowedNodeTypes.includes(node.type.name) && node.attrs.id) {
             keepLooking = false;
-            foundClass = node.attrs.id;
+            foundId = node.attrs.id;
         }
         return keepLooking;
     });
-    return foundClass;
+    return foundId;
 }
 class IdItem extends Item {
-    constructor(dialog, nodeType) {
+    constructor(dialog, nodeTypes) {
         super({
             active: state => {
-                return !!findFirstIdInSelection(state, nodeType);
+                return !!findFirstIdInSelection(state, nodeTypes);
             },
             enable: state => {
-                const { selection } = state;
-                return selection instanceof TextSelection || selection instanceof AllSelection;
+                return selectionContainsNodeType(state, nodeTypes);
             },
             run: (state, dispatch, view) => {
                 dialog
                     .open(IdDialogComponent, {
                     data: {
-                        id: findFirstIdInSelection(state, nodeType),
+                        id: findFirstIdInSelection(state, nodeTypes),
                     },
                 })
                     .afterClosed()
                     .subscribe(result => {
                     if (dispatch && result) {
                         const { selection } = state;
-                        const tr = setId(state.tr.setSelection(selection), result.id, nodeType);
+                        const tr = setId(state.tr.setSelection(selection), result.id, nodeTypes);
                         if (tr.docChanged) {
                             dispatch?.(tr);
                         }
@@ -1193,7 +1270,6 @@ function buildMenuItems(schema, dialog) {
             r.alignRight = new TextAlignItem('right');
             r.alignCenter = new TextAlignItem('center');
             r.alignJustify = new TextAlignItem('justify');
-            r.paragraphClass = new ClassItem(dialog, type);
         }
     }
     type = schema.nodes.code_block;
@@ -1209,6 +1285,10 @@ function buildMenuItems(schema, dialog) {
         r.makeHead5 = menuItemToItem(blockTypeItem(type, { attrs: { level: 5 } }));
         r.makeHead6 = menuItemToItem(blockTypeItem(type, { attrs: { level: 6 } }));
     }
+    if (schema.nodes.paragraph?.spec === paragraphWithAlignment) {
+        r.blockId = new IdItem(dialog, ['heading', 'paragraph']);
+        r.blockClass = new ClassItem(dialog, ['heading', 'paragraph']);
+    }
     type = schema.nodes.horizontal_rule;
     if (type) {
         r.insertHorizontalRule = new HorizontalRuleItem(type);
@@ -1229,8 +1309,8 @@ function buildMenuItems(schema, dialog) {
         r.toggleHeaderRow = cmdToItem(toggleHeaderRow);
         r.toggleHeaderCell = cmdToItem(toggleHeaderCell);
         r.cellBackgroundColor = new CellBackgroundColorItem(dialog);
-        r.tableClass = new ClassItem(dialog, type);
-        r.tableId = new IdItem(dialog, type);
+        r.tableClass = new ClassItem(dialog, ['table']);
+        r.tableId = new IdItem(dialog, ['table']);
     }
     return r;
 }
@@ -1578,10 +1658,10 @@ class NaturalEditorComponent {
     }
 }
 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 });
-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"] }] });
+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.blockClass\"\n                [disabled]=\"menu.blockClass.disabled\"\n                (click)=\"run($event, 'blockClass')\"\n                i18n\n                >Classe...\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.blockId\"\n                [disabled]=\"menu.blockId.disabled\"\n                (click)=\"run($event, 'blockId')\"\n                >ID...\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEditorComponent, decorators: [{
             type: Component,
-            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"] }]
+            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.blockClass\"\n                [disabled]=\"menu.blockClass.disabled\"\n                (click)=\"run($event, 'blockClass')\"\n                i18n\n                >Classe...\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.blockId\"\n                [disabled]=\"menu.blockId.disabled\"\n                (click)=\"run($event, 'blockId')\"\n                >ID...\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"] }]
         }], ctorParameters: function () { return [{ type: i6$1.NgControl, decorators: [{
                     type: Optional
                 }, {