@ecodev/natural-editor 42.0.0 → 42.3.0

package/fesm2020/ecodev-natural-editor.mjs

@@ -1,29 +1,29 @@
 import '@angular/localize/init';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, EventEmitter, ElementRef, Optional, Self, ViewChild, Output, Input, NgModule } from '@angular/core';
+import { Directive, Inject, HostBinding, Input, Injectable, Component, EventEmitter, ElementRef, Optional, Self, ViewChild, Output, NgModule } from '@angular/core';
+import * as i6 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
 import { Plugin, TextSelection, AllSelection, EditorState } from 'prosemirror-state';
 import { Schema, DOMSerializer, DOMParser } from 'prosemirror-model';
-import * as i6 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import { tableNodes, tableNodeTypes, addColumnBefore, addColumnAfter, deleteColumn, addRowBefore, addRowAfter, deleteRow, deleteTable, mergeCells, splitCell, toggleHeaderColumn, toggleHeaderRow, toggleHeaderCell, columnResizing, tableEditing, goToNextCell } from 'prosemirror-tables';
+import { setCellAttr, isInTable, selectionCell, CellSelection, tableNodeTypes, addColumnBefore, addColumnAfter, deleteColumn, addRowBefore, addRowAfter, deleteRow, deleteTable, mergeCells, splitCell, toggleHeaderColumn, toggleHeaderRow, toggleHeaderCell, tableEditing, goToNextCell } from 'prosemirror-tables';
 import { keymap } from 'prosemirror-keymap';
 import { nodes, marks } from 'prosemirror-schema-basic';
 import { addListNodes, wrapInList, splitListItem, liftListItem, sinkListItem } from 'prosemirror-schema-list';
 import { joinUpItem, liftItem, selectParentNodeItem, undoItem, redoItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
-import { toggleMark, joinUp, joinDown, lift, selectParentNode, wrapIn, chainCommands, exitCode, setBlockType, baseKeymap } from 'prosemirror-commands';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i4 from '@angular/forms';
 import { FormControl, Validators, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import * as i11 from '@ecodev/natural';
-import { ifValid, NaturalFileModule } from '@ecodev/natural';
-import * as i2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@ecodev/natural';
+import { ifValid, NaturalFileModule, NaturalIconModule } from '@ecodev/natural';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import { toggleMark, joinUp, joinDown, lift, selectParentNode, wrapIn, chainCommands, exitCode, setBlockType, baseKeymap } from 'prosemirror-commands';
 import { undo, redo, history } from 'prosemirror-history';
 import { dropCursor } from 'prosemirror-dropcursor';
 import { gapCursor } from 'prosemirror-gapcursor';
@@ -40,6 +40,81 @@ import * as i10 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
+/**
+ * Prefix all CSS selectors with the given selector
+ *
+ * This is meant to be relatively simple and might not cover advanced CSS syntax
+ */
+function prefixCss(prefix, css) {
+    prefix = '\n' + prefix + ' ';
+    return css
+        .replace(/([^{}]*){/gs, selectors => selectors
+        .split(',')
+        .map(selector => {
+        if (selector.trim().startsWith('@media')) {
+            return selector.trim();
+        }
+        else {
+            return prefix + selector.trim();
+        }
+    })
+        .join(','))
+        .trim();
+}
+let uniqueId = 0;
+let componentCount = 0;
+/**
+ * Inject custom CSS into component and scope the CSS only to this component
+ *
+ * Usage :
+ *
+ * ```html
+ * <div [naturalCustomCss]=".my-class {background: red}">
+ *     <p class="my-class">foo bar</p>
+ * </div>
+ * ```
+ */
+class NaturalCustomCssDirective {
+    constructor(document) {
+        this.document = document;
+        this.style = null;
+        this.id = 'n' + ++uniqueId;
+    }
+    set naturalCustomCss(value) {
+        if (value && !this.style) {
+            this.style = this.document.createElement('style');
+            this.document.head.appendChild(this.style);
+        }
+        if (this.style) {
+            this.style.innerHTML = value ? prefixCss(`[data-natural-id=${this.id}]`, value) : '';
+        }
+    }
+    ngOnDestroy() {
+        this.style?.remove();
+        // Reset uniqueId if we have no component alive anymore, so that we never reach max int
+        componentCount--;
+        if (componentCount <= 0) {
+            uniqueId = 0;
+        }
+    }
+}
+NaturalCustomCssDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalCustomCssDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+NaturalCustomCssDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: NaturalCustomCssDirective, selector: "[naturalCustomCss]", inputs: { naturalCustomCss: "naturalCustomCss" }, host: { properties: { "attr.data-natural-id": "this.id" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalCustomCssDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[naturalCustomCss]',
+                }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.data-natural-id']
+            }], naturalCustomCss: [{
+                type: Input
+            }] } });
+
 class ImagePlugin {
     constructor(document) {
         this.document = document;
@@ -107,9 +182,9 @@ class ImagePlugin {
         });
     }
 }
-ImagePlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ImagePlugin, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-ImagePlugin.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ImagePlugin });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ImagePlugin, decorators: [{
+ImagePlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ImagePlugin, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+ImagePlugin.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ImagePlugin });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ImagePlugin, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
@@ -117,12 +192,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                 }] }]; } });
 
 const ALIGN_PATTERN = /(left|right|center|justify)/;
-// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
-// :: NodeSpec A plain paragraph textblock. Represented in the DOM
-// as a `<p>` element.
+/**
+ * A plain paragraph textblock. Represented in the DOM
+ * as a `<p>` element.
+ *
+ * https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
+ */
 const paragraphWithAlignment = {
     attrs: {
         align: { default: null },
+        class: { default: null },
         id: { default: null },
     },
     content: 'inline*',
@@ -138,7 +217,7 @@ const paragraphWithAlignment = {
                 let align = dom.getAttribute('align') || textAlign || '';
                 align = ALIGN_PATTERN.test(align) ? align : null;
                 const id = dom.getAttribute('id') || '';
-                return { align, id };
+                return { align, class: dom.className, id };
             },
         },
     ],
@@ -155,10 +234,126 @@ const paragraphWithAlignment = {
         if (id) {
             attrs.id = id;
         }
+        if (node.attrs.class) {
+            attrs.class = node.attrs.class;
+        }
         return ['p', attrs, 0];
     },
 };
 
+function getCellAttrs(dom, extraAttrs) {
+    if (!(dom instanceof HTMLElement)) {
+        return;
+    }
+    const widthAttr = dom.getAttribute('data-colwidth');
+    const widths = widthAttr && /^\d+(,\d+)*$/.test(widthAttr) ? widthAttr.split(',').map(s => Number(s)) : null;
+    const colspan = Number(dom.getAttribute('colspan') || 1);
+    const result = {
+        colspan,
+        rowspan: Number(dom.getAttribute('rowspan') || 1),
+        colwidth: widths && widths.length == colspan ? widths : null,
+    };
+    for (const prop in extraAttrs) {
+        const getter = extraAttrs[prop].getFromDOM;
+        const value = getter && getter(dom);
+        if (value != null)
+            result[prop] = value;
+    }
+    return result;
+}
+function setCellAttrs(node, extraAttrs) {
+    const attrs = {};
+    if (node.attrs.colspan != 1)
+        attrs.colspan = node.attrs.colspan;
+    if (node.attrs.rowspan != 1)
+        attrs.rowspan = node.attrs.rowspan;
+    if (node.attrs.colwidth)
+        attrs['data-colwidth'] = node.attrs.colwidth.join(',');
+    for (const prop in extraAttrs) {
+        const setter = extraAttrs[prop].setDOMAttr;
+        if (setter)
+            setter(node.attrs[prop], attrs);
+    }
+    return attrs;
+}
+/**
+ * This function creates a set of [node
+ * specs](http://prosemirror.net/docs/ref/#model.SchemaSpec.nodes) for
+ * `table`, `table_row`, and `table_cell` nodes types.
+ *
+ * It is very directly inspired by prosemirror-table
+ */
+function tableNodes(options) {
+    const extraAttrs = options.cellAttributes || {};
+    const cellAttrs = {
+        colspan: { default: 1 },
+        rowspan: { default: 1 },
+        colwidth: { default: null },
+    };
+    for (const prop in extraAttrs) {
+        cellAttrs[prop] = {
+            default: extraAttrs[prop].default,
+        };
+    }
+    return {
+        table: {
+            attrs: {
+                class: { default: null },
+            },
+            content: 'table_row+',
+            tableRole: 'table',
+            isolating: true,
+            group: options.tableGroup,
+            parseDOM: [
+                {
+                    tag: 'table',
+                    getAttrs: (dom) => {
+                        if (!(dom instanceof HTMLElement)) {
+                            return;
+                        }
+                        return { class: dom.className };
+                    },
+                },
+            ],
+            toDOM: node => {
+                const attrs = {};
+                if (node.attrs.class) {
+                    attrs.class = node.attrs.class;
+                }
+                return ['table', attrs, ['tbody', 0]];
+            },
+        },
+        table_row: {
+            content: '(table_cell | table_header)*',
+            tableRole: 'row',
+            parseDOM: [{ tag: 'tr' }],
+            toDOM: () => {
+                return ['tr', 0];
+            },
+        },
+        table_cell: {
+            content: options.cellContent,
+            attrs: cellAttrs,
+            tableRole: 'cell',
+            isolating: true,
+            parseDOM: [{ tag: 'td', getAttrs: dom => getCellAttrs(dom, extraAttrs) }],
+            toDOM: node => {
+                return ['td', setCellAttrs(node, extraAttrs), 0];
+            },
+        },
+        table_header: {
+            content: options.cellContent,
+            attrs: cellAttrs,
+            tableRole: 'header_cell',
+            isolating: true,
+            parseDOM: [{ tag: 'th', getAttrs: dom => getCellAttrs(dom, extraAttrs) }],
+            toDOM: node => {
+                return ['th', setCellAttrs(node, extraAttrs), 0];
+            },
+        },
+    };
+}
+
 const basicNodes = {
     heading: nodes.heading,
     doc: nodes.doc,
@@ -205,69 +400,6 @@ const advancedSchema = new Schema({
     marks: basicMarks,
 });
 
-class LinkDialogComponent {
-    constructor(data, dialogRef) {
-        this.dialogRef = dialogRef;
-        this.hrefControl = new FormControl('', Validators.required);
-        this.titleControl = new FormControl('');
-        this.form = new FormGroup({
-            href: this.hrefControl,
-            title: this.titleControl,
-        });
-        this.form.setValue(data);
-    }
-    maybeConfirm() {
-        ifValid(this.form).subscribe(() => this.confirm());
-    }
-    confirm() {
-        this.dialogRef.close(this.form.value);
-    }
-}
-LinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LinkDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", 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"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.MatLabel, selector: "mat-label" }, { 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"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LinkDialogComponent, decorators: [{
-            type: Component,
-            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"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }]; } });
-
-function createCell(cellType, cellContent) {
-    return cellContent ? cellType.createChecked(null, cellContent) : cellType.createAndFill();
-}
-function createTable(state, rowsCount, colsCount, withHeaderRow, cellContent) {
-    const types = tableNodeTypes(state.schema);
-    const headerCells = [];
-    const cells = [];
-    for (let index = 0; index < colsCount; index += 1) {
-        const cell = createCell(types.cell, cellContent);
-        if (cell) {
-            cells.push(cell);
-        }
-        if (withHeaderRow) {
-            const headerCell = createCell(types.header_cell, cellContent);
-            if (headerCell) {
-                headerCells.push(headerCell);
-            }
-        }
-    }
-    const rows = [];
-    for (let index = 0; index < rowsCount; index += 1) {
-        rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells));
-    }
-    return types.table.createChecked(null, rows);
-}
-function addTable(state, dispatch, { rowsCount = 3, colsCount = 3, withHeaderRow = true, cellContent, } = {}) {
-    const offset = state.tr.selection.anchor + 1;
-    const nodes = createTable(state, rowsCount, colsCount, withHeaderRow, cellContent);
-    const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
-    const resolvedPos = tr.doc.resolve(offset);
-    // move cursor into table
-    tr.setSelection(TextSelection.near(resolvedPos));
-    dispatch?.(tr);
-}
-
 /**
  * One item of the menu.
  *
@@ -308,7 +440,6 @@ class Item {
 }
 
 function setTextAlign(tr, schema, alignment) {
-    console.log('setTextAlign', alignment);
     const { selection, doc } = tr;
     if (!selection || !doc) {
         return tr;
@@ -344,7 +475,6 @@ function setTextAlign(tr, schema, alignment) {
             ...node.attrs,
             align: alignment ? alignment : null,
         };
-        console.log('newAttrs', newAttrs);
         tr = tr.setNodeMarkup(pos, nodeType, newAttrs, node.marks);
     });
     return tr;
@@ -372,7 +502,6 @@ class TextAlignItem extends Item {
             },
             run: (state, dispatch) => {
                 const { schema, selection } = state;
-                console.log(this);
                 const tr = setTextAlign(state.tr.setSelection(selection), schema, this.active ? null : alignment);
                 if (tr.docChanged) {
                     dispatch?.(tr);
@@ -386,32 +515,258 @@ class TextAlignItem extends Item {
     }
 }
 
-/**
- * Convert built-in `MenuItem` into our Angular specific `Item`
- */
-function toItem(item) {
-    return new Item(item.spec);
+class ColorDialogComponent {
+    constructor(data, dialogRef) {
+        this.dialogRef = dialogRef;
+        this.colors = [
+            [
+                '#000000',
+                '#111111',
+                '#1c1c1c',
+                '#333333',
+                '#666666',
+                '#808080',
+                '#999999',
+                '#b2b2b2',
+                '#cccccc',
+                '#dddddd',
+                '#eeeeee',
+                '#ffffff',
+            ],
+            [
+                '#ffff00',
+                '#ffbf00',
+                '#ff8000',
+                '#ff4000',
+                '#ff0000',
+                '#bf0041',
+                '#800080',
+                '#55308d',
+                '#2a6099',
+                '#158466',
+                '#00a933',
+                '#81d41a',
+            ],
+            [
+                '#ffffd7',
+                '#fff5ce',
+                '#ffdbb6',
+                '#ffd8ce',
+                '#ffd7d7',
+                '#f7d1d5',
+                '#e0c2cd',
+                '#dedce6',
+                '#dee6ef',
+                '#dee7e5',
+                '#dde8cb',
+                '#f6f9d4',
+            ],
+            [
+                '#ffffa6',
+                '#ffe994',
+                '#ffb66c',
+                '#ffaa95',
+                '#ffa6a6',
+                '#ec9ba4',
+                '#bf819e',
+                '#b7b3ca',
+                '#b4c7dc',
+                '#b3cac7',
+                '#afd095',
+                '#e8f2a1',
+            ],
+            [
+                '#ffff6d',
+                '#ffde59',
+                '#ff972f',
+                '#ff7b59',
+                '#ff6d6d',
+                '#e16173',
+                '#a1467e',
+                '#8e86ae',
+                '#729fcf',
+                '#81aca6',
+                '#77bc65',
+                '#d4ea6b',
+            ],
+            [
+                '#ffff38',
+                '#ffd428',
+                '#ff860d',
+                '#ff5429',
+                '#ff3838',
+                '#d62e4e',
+                '#8d1d75',
+                '#6b5e9b',
+                '#5983b0',
+                '#50938a',
+                '#3faf46',
+                '#bbe33d',
+            ],
+            [
+                '#e6e905',
+                '#e8a202',
+                '#ea7500',
+                '#ed4c05',
+                '#f10d0c',
+                '#a7074b',
+                '#780373',
+                '#5b277d',
+                '#3465a4',
+                '#168253',
+                '#069a2e',
+                '#5eb91e',
+            ],
+            [
+                '#acb20c',
+                '#b47804',
+                '#b85c00',
+                '#be480a',
+                '#c9211e',
+                '#861141',
+                '#650953',
+                '#55215b',
+                '#355269',
+                '#1e6a39',
+                '#127622',
+                '#468a1a',
+            ],
+            [
+                '#706e0c',
+                '#784b04',
+                '#7b3d00',
+                '#813709',
+                '#8d281e',
+                '#611729',
+                '#4e102d',
+                '#481d32',
+                '#383d3c',
+                '#28471f',
+                '#224b12',
+                '#395511',
+            ],
+            [
+                '#443205',
+                '#472702',
+                '#492300',
+                '#4b2204',
+                '#50200c',
+                '#41190d',
+                '#3b160e',
+                '#3a1a0f',
+                '#362413',
+                '#302709',
+                '#2e2706',
+                '#342a06',
+            ],
+        ];
+        this.colorControl = new FormControl('', Validators.pattern(/^#\p{Hex_Digit}{6}/u));
+        this.form = new FormGroup({
+            color: this.colorControl,
+        });
+        this.form.setValue(data);
+    }
+    maybeConfirm() {
+        ifValid(this.form).subscribe(() => this.confirm());
+    }
+    confirm() {
+        this.dialogRef.close(this.form.value);
+    }
+    selectColor(color) {
+        this.colorControl.setValue(color);
+        this.maybeConfirm();
+    }
 }
-function canInsert(state, nodeType) {
-    const $from = state.selection.$from;
-    for (let d = $from.depth; d >= 0; d--) {
-        const index = $from.index(d);
-        if ($from.node(d).canReplaceWith(index, index, nodeType)) {
-            return true;
-        }
+ColorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ColorDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ColorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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"], 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: i3$1.NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatLabel, selector: "mat-label" }, { 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"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ColorDialogComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }]; } });
+
+const setCellBackgroundColor = setCellAttr.bind(null, 'background');
+function findFirstClassInSelection$1(state) {
+    if (!isInTable(state)) {
+        return '';
     }
-    return false;
+    // For single cell selection
+    const $cell = selectionCell(state);
+    let foundColor = $cell?.nodeAfter?.attrs.background ?? '';
+    if (foundColor) {
+        return foundColor;
+    }
+    // For multiple cells selection
+    let keepLooking = true;
+    if (state.selection instanceof CellSelection) {
+        state.selection.forEachCell(node => {
+            const color = node.attrs.background;
+            if (keepLooking && color) {
+                keepLooking = false;
+                foundColor = color;
+            }
+        });
+    }
+    return foundColor;
 }
-function cmdItem(cmd, options = {}, useEnable = false) {
-    const passedOptions = {
-        run: cmd,
-        ...options,
-    };
-    if ((!options.enable || useEnable) && !options.select) {
-        passedOptions[options.enable ? 'enable' : 'select'] = (state) => cmd(state);
+class CellBackgroundColorItem extends Item {
+    constructor(dialog) {
+        super({
+            enable(state) {
+                // Pretend to set a unique color that is not already set, to test if we can any color at all
+                const cmd = setCellBackgroundColor('#000001');
+                return cmd(state);
+            },
+            run(state, dispatch, view) {
+                dialog
+                    .open(ColorDialogComponent, {
+                    data: {
+                        color: findFirstClassInSelection$1(state),
+                    },
+                })
+                    .afterClosed()
+                    .subscribe(result => {
+                    if (dispatch && result) {
+                        const cmd = setCellBackgroundColor(result.color);
+                        cmd(state, dispatch);
+                    }
+                    view.focus();
+                });
+            },
+        });
+    }
+}
+
+class LinkDialogComponent {
+    constructor(data, dialogRef) {
+        this.dialogRef = dialogRef;
+        this.hrefControl = new FormControl('', Validators.required);
+        this.titleControl = new FormControl('');
+        this.form = new FormGroup({
+            href: this.hrefControl,
+            title: this.titleControl,
+        });
+        this.form.setValue(data);
+    }
+    maybeConfirm() {
+        ifValid(this.form).subscribe(() => this.confirm());
+    }
+    confirm() {
+        this.dialogRef.close(this.form.value);
     }
-    return new Item(passedOptions);
 }
+LinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: LinkDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.MatLabel, selector: "mat-label" }, { 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"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: LinkDialogComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }]; } });
+
 function markActive(state, type) {
     const { from, $from, to, empty } = state.selection;
     if (empty) {
@@ -421,79 +776,276 @@ function markActive(state, type) {
         return state.doc.rangeHasMark(from, to, type);
     }
 }
-function markItem(markType, options = {}) {
+/**
+ * Convert built-in `MenuItem` into our Angular specific `Item`
+ */
+function menuItemToItem(item) {
+    return new Item(item.spec);
+}
+/**
+ * From a `Command`, creates a new `Item` that will have an automatic `enable` spec
+ */
+function cmdToItem(cmd, options = {}) {
     const passedOptions = {
-        active(state) {
-            return markActive(state, markType);
-        },
+        run: cmd,
         ...options,
     };
-    return cmdItem(toggleMark(markType), passedOptions, true);
+    if (!options.enable && !options.select) {
+        passedOptions.enable = state => cmd(state);
+    }
+    return new Item(passedOptions);
 }
-function linkItem(markType, dialog) {
-    return new Item({
+/**
+ * From a `MarkType`, creates a new `Item` that will have an automatic `active` and `enable` spec
+ */
+function markTypeToItem(markType) {
+    return cmdToItem(toggleMark(markType), {
         active(state) {
             return markActive(state, markType);
         },
-        enable(state) {
-            return !state.selection.empty;
-        },
-        run(state, dispatch, view) {
-            if (markActive(state, markType)) {
-                toggleMark(markType)(state, dispatch);
-                return true;
-            }
-            dialog
-                .open(LinkDialogComponent, {
-                data: {
-                    href: '',
-                    title: '',
-                },
-            })
-                .afterClosed()
-                .subscribe(result => {
-                if (result) {
-                    if (!result.title) {
-                        delete result.title;
-                    }
-                    toggleMark(markType, result)(view.state, view.dispatch);
+    });
+}
+
+class LinkItem extends Item {
+    constructor(markType, dialog) {
+        super({
+            active(state) {
+                return markActive(state, markType);
+            },
+            enable(state) {
+                return !state.selection.empty;
+            },
+            run(state, dispatch, view) {
+                if (markActive(state, markType)) {
+                    toggleMark(markType)(state, dispatch);
+                    return;
                 }
-                view.focus();
+                dialog
+                    .open(LinkDialogComponent, {
+                    data: {
+                        href: '',
+                        title: '',
+                    },
+                })
+                    .afterClosed()
+                    .subscribe(result => {
+                    if (result) {
+                        if (!result.title) {
+                            delete result.title;
+                        }
+                        toggleMark(markType, result)(view.state, view.dispatch);
+                    }
+                    view.focus();
+                });
+            },
+        });
+    }
+}
+
+function canInsert(state, nodeType) {
+    const $from = state.selection.$from;
+    for (let d = $from.depth; d >= 0; d--) {
+        const index = $from.index(d);
+        if ($from.node(d).canReplaceWith(index, index, nodeType)) {
+            return true;
+        }
+    }
+    return false;
+}
+class HorizontalRuleItem extends Item {
+    constructor(hr) {
+        super({
+            enable(state) {
+                return canInsert(state, hr);
+            },
+            run(state, dispatch) {
+                dispatch(state.tr.replaceSelectionWith(hr.create()));
+            },
+        });
+    }
+}
+
+function wrapListItem(nodeType) {
+    return cmdToItem(wrapInList(nodeType));
+}
+
+class ClassDialogComponent {
+    constructor(data, dialogRef) {
+        this.dialogRef = dialogRef;
+        this.classControl = new FormControl('', Validators.pattern(/(^\s*(-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*)+)/));
+        this.form = new FormGroup({
+            class: this.classControl,
+        });
+        this.form.setValue(data);
+    }
+    maybeConfirm() {
+        ifValid(this.form).subscribe(() => this.confirm());
+    }
+    confirm() {
+        this.dialogRef.close(this.form.value);
+    }
+}
+ClassDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ClassDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ClassDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.MatLabel, selector: "mat-label" }, { 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"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ClassDialogComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }]; } });
+
+function setClass(tr, classValue, allowedNodeType) {
+    const { selection, doc } = tr;
+    if (!selection || !doc) {
+        return tr;
+    }
+    const { from, to } = selection;
+    const tasks = [];
+    doc.nodesBetween(from, to, (node, pos) => {
+        const nodeType = node.type;
+        const currentClass = node.attrs.class || null;
+        if (currentClass !== classValue && allowedNodeType === nodeType) {
+            tasks.push({
+                node,
+                pos,
+                nodeType,
             });
-        },
+        }
+        return true;
+    });
+    if (!tasks.length) {
+        return tr;
+    }
+    tasks.forEach(job => {
+        const { node, pos, nodeType } = job;
+        const newAttrs = {
+            ...node.attrs,
+            class: classValue ? classValue : null,
+        };
+        tr = tr.setNodeMarkup(pos, nodeType, newAttrs, node.marks);
     });
+    return tr;
 }
-function wrapListItem(nodeType) {
-    return cmdItem(wrapInList(nodeType));
+/**
+ * Returns the first `class` attribute that is non-empty in the selection.
+ * If not found, return empty string.
+ */
+function findFirstClassInSelection(state, allowedNodeType) {
+    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) {
+            keepLooking = false;
+            foundClass = node.attrs.class;
+        }
+        return keepLooking;
+    });
+    return foundClass;
+}
+class ClassItem extends Item {
+    constructor(dialog, nodeType) {
+        super({
+            active: state => {
+                return !!findFirstClassInSelection(state, nodeType);
+            },
+            enable: state => {
+                const { selection } = state;
+                return selection instanceof TextSelection || selection instanceof AllSelection;
+            },
+            run: (state, dispatch, view) => {
+                dialog
+                    .open(ClassDialogComponent, {
+                    data: {
+                        class: findFirstClassInSelection(state, nodeType),
+                    },
+                })
+                    .afterClosed()
+                    .subscribe(result => {
+                    if (dispatch && result) {
+                        const { selection } = state;
+                        const tr = setClass(state.tr.setSelection(selection), result.class, nodeType);
+                        if (tr.docChanged) {
+                            dispatch?.(tr);
+                        }
+                    }
+                    view.focus();
+                });
+            },
+        });
+    }
+}
+
+function createCell(cellType, cellContent) {
+    return cellContent ? cellType.createChecked(null, cellContent) : cellType.createAndFill();
+}
+function createTable(state, rowsCount, colsCount, withHeaderRow, cellContent) {
+    const types = tableNodeTypes(state.schema);
+    const headerCells = [];
+    const cells = [];
+    for (let index = 0; index < colsCount; index += 1) {
+        const cell = createCell(types.cell, cellContent);
+        if (cell) {
+            cells.push(cell);
+        }
+        if (withHeaderRow) {
+            const headerCell = createCell(types.header_cell, cellContent);
+            if (headerCell) {
+                headerCells.push(headerCell);
+            }
+        }
+    }
+    const rows = [];
+    for (let index = 0; index < rowsCount; index += 1) {
+        rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells));
+    }
+    return types.table.createChecked(null, rows);
 }
+function addTable(state, dispatch, { rowsCount = 3, colsCount = 3, withHeaderRow = true, cellContent, } = {}) {
+    const offset = state.tr.selection.anchor + 1;
+    const nodes = createTable(state, rowsCount, colsCount, withHeaderRow, cellContent);
+    const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
+    const resolvedPos = tr.doc.resolve(offset);
+    // move cursor into table
+    tr.setSelection(TextSelection.near(resolvedPos));
+    dispatch?.(tr);
+}
+class AddTableItem extends Item {
+    constructor() {
+        super({ run: (editor, tr) => addTable(editor, tr) });
+    }
+}
+
 /**
  * Given a schema, look for default mark and node types in it and
  * return an object with relevant menu items relating to those marks:
  */
 function buildMenuItems(schema, dialog) {
     const r = {
-        joinUp: toItem(joinUpItem),
-        lift: toItem(liftItem),
-        selectParentNode: toItem(selectParentNodeItem),
-        undo: toItem(undoItem),
-        redo: toItem(redoItem),
+        joinUp: menuItemToItem(joinUpItem),
+        lift: menuItemToItem(liftItem),
+        selectParentNode: menuItemToItem(selectParentNodeItem),
+        undo: menuItemToItem(undoItem),
+        redo: menuItemToItem(redoItem),
     };
     let type;
     type = schema.marks.strong;
     if (type) {
-        r.toggleStrong = markItem(type);
+        r.toggleStrong = markTypeToItem(type);
     }
     type = schema.marks.em;
     if (type) {
-        r.toggleEm = markItem(type);
+        r.toggleEm = markTypeToItem(type);
     }
     type = schema.marks.code;
     if (type) {
-        r.toggleCode = markItem(type);
+        r.toggleCode = markTypeToItem(type);
     }
     type = schema.marks.link;
     if (type) {
-        r.toggleLink = linkItem(type, dialog);
+        r.toggleLink = new LinkItem(type, dialog);
     }
     type = schema.nodes.bullet_list;
     if (type) {
@@ -505,58 +1057,53 @@ function buildMenuItems(schema, dialog) {
     }
     type = schema.nodes.blockquote;
     if (type) {
-        r.wrapBlockQuote = toItem(wrapItem(type, {}));
+        r.wrapBlockQuote = menuItemToItem(wrapItem(type, {}));
     }
     type = schema.nodes.paragraph;
     if (type) {
-        r.makeParagraph = toItem(blockTypeItem(type, {}));
+        r.makeParagraph = menuItemToItem(blockTypeItem(type, {}));
         if (type.spec === paragraphWithAlignment) {
             r.alignLeft = new TextAlignItem('left');
             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;
     if (type) {
-        r.makeCodeBlock = toItem(blockTypeItem(type, {}));
+        r.makeCodeBlock = menuItemToItem(blockTypeItem(type, {}));
     }
     type = schema.nodes.heading;
     if (type) {
-        r.makeHead1 = toItem(blockTypeItem(type, { attrs: { level: 1 } }));
-        r.makeHead2 = toItem(blockTypeItem(type, { attrs: { level: 2 } }));
-        r.makeHead3 = toItem(blockTypeItem(type, { attrs: { level: 3 } }));
-        r.makeHead4 = toItem(blockTypeItem(type, { attrs: { level: 4 } }));
-        r.makeHead5 = toItem(blockTypeItem(type, { attrs: { level: 5 } }));
-        r.makeHead6 = toItem(blockTypeItem(type, { attrs: { level: 6 } }));
+        r.makeHead1 = menuItemToItem(blockTypeItem(type, { attrs: { level: 1 } }));
+        r.makeHead2 = menuItemToItem(blockTypeItem(type, { attrs: { level: 2 } }));
+        r.makeHead3 = menuItemToItem(blockTypeItem(type, { attrs: { level: 3 } }));
+        r.makeHead4 = menuItemToItem(blockTypeItem(type, { attrs: { level: 4 } }));
+        r.makeHead5 = menuItemToItem(blockTypeItem(type, { attrs: { level: 5 } }));
+        r.makeHead6 = menuItemToItem(blockTypeItem(type, { attrs: { level: 6 } }));
     }
     type = schema.nodes.horizontal_rule;
     if (type) {
-        const hr = type;
-        r.insertHorizontalRule = new Item({
-            enable(state) {
-                return canInsert(state, hr);
-            },
-            run(state, dispatch) {
-                dispatch(state.tr.replaceSelectionWith(hr.create()));
-            },
-        });
+        r.insertHorizontalRule = new HorizontalRuleItem(type);
     }
     type = schema.nodes.table;
     if (type) {
-        r.insertTable = new Item({ run: (e, tr) => addTable(e, tr) });
-        r.addColumnBefore = new Item({ run: addColumnBefore });
-        r.addColumnAfter = new Item({ run: addColumnAfter });
-        r.deleteColumn = new Item({ run: deleteColumn });
-        r.addRowBefore = new Item({ run: addRowBefore });
-        r.addRowAfter = new Item({ run: addRowAfter });
-        r.deleteRow = new Item({ run: deleteRow });
-        r.deleteTable = new Item({ run: deleteTable });
-        r.mergeCells = new Item({ run: mergeCells });
-        r.splitCell = new Item({ run: splitCell });
-        r.toggleHeaderColumn = new Item({ run: toggleHeaderColumn });
-        r.toggleHeaderRow = new Item({ run: toggleHeaderRow });
-        r.toggleHeaderCell = new Item({ run: toggleHeaderCell });
+        r.insertTable = new AddTableItem();
+        r.addColumnBefore = cmdToItem(addColumnBefore);
+        r.addColumnAfter = cmdToItem(addColumnAfter);
+        r.deleteColumn = cmdToItem(deleteColumn);
+        r.addRowBefore = cmdToItem(addRowBefore);
+        r.addRowAfter = cmdToItem(addRowAfter);
+        r.deleteRow = cmdToItem(deleteRow);
+        r.deleteTable = cmdToItem(deleteTable);
+        r.mergeCells = cmdToItem(mergeCells);
+        r.splitCell = cmdToItem(splitCell);
+        r.toggleHeaderColumn = cmdToItem(toggleHeaderColumn);
+        r.toggleHeaderRow = cmdToItem(toggleHeaderRow);
+        r.toggleHeaderCell = cmdToItem(toggleHeaderCell);
+        r.cellBackgroundColor = new CellBackgroundColorItem(dialog);
+        r.tableClass = new ClassItem(dialog, type);
     }
     return r;
 }
@@ -851,7 +1398,7 @@ class NaturalEditorComponent {
             }),
         ];
         if (this.schema === advancedSchema) {
-            plugins.push(this.imagePlugin.plugin, columnResizing(undefined), tableEditing(), keymap({
+            plugins.push(this.imagePlugin.plugin, tableEditing(), keymap({
                 Tab: goToNextCell(1),
                 'Shift-Tab': goToNextCell(-1),
             }));
@@ -903,11 +1450,11 @@ class NaturalEditorComponent {
         this.view.focus();
     }
 }
-NaturalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i1.MatDialog }, { token: ImagePlugin }], target: i0.ɵɵFactoryTarget.Component });
-NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", 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        </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\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 #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: i11.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorComponent, decorators: [{
+NaturalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalEditorComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i1.MatDialog }, { token: ImagePlugin }], target: i0.ɵɵFactoryTarget.Component });
+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\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 #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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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        </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\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 #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.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\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 #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: i4.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -931,63 +1478,68 @@ const imports = [
     MatButtonModule,
     MatButtonToggleModule,
     MatDialogModule,
+    MatDividerModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
     MatMenuModule,
     MatToolbarModule,
     MatTooltipModule,
-    ReactiveFormsModule,
     NaturalFileModule,
-    MatDividerModule,
+    NaturalIconModule,
+    ReactiveFormsModule,
 ];
+const declarationsToExport = [NaturalEditorComponent, NaturalCustomCssDirective];
 class NaturalEditorModule {
 }
-NaturalEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorModule, declarations: [NaturalEditorComponent, LinkDialogComponent], imports: [CommonModule,
+NaturalEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalEditorModule, declarations: [ClassDialogComponent, ColorDialogComponent, LinkDialogComponent, NaturalEditorComponent, NaturalCustomCssDirective], imports: [CommonModule,
         MatButtonModule,
         MatButtonToggleModule,
         MatDialogModule,
+        MatDividerModule,
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
         MatMenuModule,
         MatToolbarModule,
         MatTooltipModule,
-        ReactiveFormsModule,
         NaturalFileModule,
-        MatDividerModule], exports: [CommonModule,
+        NaturalIconModule,
+        ReactiveFormsModule], exports: [CommonModule,
         MatButtonModule,
         MatButtonToggleModule,
         MatDialogModule,
+        MatDividerModule,
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
         MatMenuModule,
         MatToolbarModule,
         MatTooltipModule,
-        ReactiveFormsModule,
         NaturalFileModule,
-        MatDividerModule, NaturalEditorComponent] });
-NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorModule, imports: [[...imports], CommonModule,
+        NaturalIconModule,
+        ReactiveFormsModule, NaturalEditorComponent, NaturalCustomCssDirective] });
+NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalEditorModule, imports: [[...imports], CommonModule,
         MatButtonModule,
         MatButtonToggleModule,
         MatDialogModule,
+        MatDividerModule,
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
         MatMenuModule,
         MatToolbarModule,
         MatTooltipModule,
-        ReactiveFormsModule,
         NaturalFileModule,
-        MatDividerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorModule, decorators: [{
+        NaturalIconModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalEditorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NaturalEditorComponent, LinkDialogComponent],
+                    declarations: [ClassDialogComponent, ColorDialogComponent, LinkDialogComponent, ...declarationsToExport],
                     imports: [...imports],
-                    exports: [...imports, NaturalEditorComponent],
+                    exports: [...imports, ...declarationsToExport],
                 }]
         }] });
 
@@ -997,5 +1549,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NaturalEditorComponent, NaturalEditorModule };
+export { NaturalCustomCssDirective, NaturalEditorComponent, NaturalEditorModule };
 //# sourceMappingURL=ecodev-natural-editor.mjs.map