@ecodev/natural-editor 41.3.0 → 42.2.0

package/fesm2020/ecodev-natural-editor.mjs

@@ -0,0 +1,1546 @@
+import '@angular/localize/init';
+import * as i0 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 { 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 * 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 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';
+import { wrappingInputRule, textblockTypeInputRule, ellipsis, emDash, inputRules, undoInputRule } from 'prosemirror-inputrules';
+import * as i5$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i8 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+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 => 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;
+        this.plugin = new Plugin({
+            state: {
+                init() {
+                    return DecorationSet.empty;
+                },
+                apply(tr, set) {
+                    // Adjust decoration positions to changes made by the transaction
+                    set = set.map(tr.mapping, tr.doc);
+                    // See if the transaction adds or removes any placeholders
+                    const action = tr.getMeta(this);
+                    if (action && action.add) {
+                        const widget = document.createElement('placeholder');
+                        const deco = Decoration.widget(action.add.pos, widget, { id: action.add.id });
+                        set = set.add(tr.doc, [deco]);
+                    }
+                    else if (action && action.remove) {
+                        set = set.remove(set.find(undefined, undefined, spec => spec.id === action.remove.id));
+                    }
+                    return set;
+                },
+            },
+            props: {
+                decorations(state) {
+                    return this.getState(state);
+                },
+            },
+        });
+    }
+    findPlaceholder(state, id) {
+        const decorators = this.plugin.getState(state);
+        const found = decorators.find(undefined, undefined, spec => spec.id === id);
+        return found.length ? found[0].from : null;
+    }
+    startImageUpload(view, file, uploader, schema) {
+        // A fresh object to act as the ID for this upload
+        const id = {};
+        // Replace the selection with a placeholder
+        const tr = view.state.tr;
+        if (!tr.selection.empty) {
+            tr.deleteSelection();
+        }
+        tr.setMeta(this.plugin, { add: { id, pos: tr.selection.from } });
+        view.dispatch(tr);
+        uploader(file).subscribe({
+            next: url => {
+                const pos = this.findPlaceholder(view.state, id);
+                // If the content around the placeholder has been deleted, drop
+                // the image
+                if (pos === null) {
+                    return;
+                }
+                // Otherwise, insert it at the placeholder's position, and remove
+                // the placeholder
+                view.dispatch(view.state.tr
+                    .replaceWith(pos, pos, schema.nodes.image.create({ src: url }))
+                    .setMeta(this.plugin, { remove: { id } }));
+            },
+            error: () => {
+                // On failure, just clean up the placeholder
+                view?.dispatch(tr.setMeta(this.plugin, { remove: { id } }));
+            },
+        });
+    }
+}
+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,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+const ALIGN_PATTERN = /(left|right|center|justify)/;
+/**
+ * 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*',
+    group: 'block',
+    parseDOM: [
+        {
+            tag: 'p',
+            getAttrs: (dom) => {
+                if (!(dom instanceof HTMLElement)) {
+                    return;
+                }
+                const { textAlign } = dom.style;
+                let align = dom.getAttribute('align') || textAlign || '';
+                align = ALIGN_PATTERN.test(align) ? align : null;
+                const id = dom.getAttribute('id') || '';
+                return { align, class: dom.className, id };
+            },
+        },
+    ],
+    toDOM: node => {
+        const { align, id } = node.attrs;
+        const attrs = {};
+        let style = '';
+        if (align && align !== 'left') {
+            style += `text-align: ${align};`;
+        }
+        if (style) {
+            attrs.style = style;
+        }
+        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,
+    paragraph: nodes.paragraph,
+    text: nodes.text,
+    hard_break: nodes.hard_break,
+};
+const basicMarks = {
+    link: marks.link,
+    em: marks.em,
+    strong: marks.strong,
+};
+const tmpSchema = new Schema({ nodes: basicNodes, marks: basicMarks });
+const basicSchema = new Schema({
+    nodes: addListNodes(tmpSchema.spec.nodes, 'paragraph block*', 'block'),
+    marks: tmpSchema.spec.marks,
+});
+const tmpSchema2 = new Schema({
+    nodes: {
+        ...nodes,
+        ...tableNodes({
+            tableGroup: 'block',
+            cellContent: 'block+',
+            cellAttributes: {
+                background: {
+                    default: null,
+                    getFromDOM(dom) {
+                        return dom.style.backgroundColor || null;
+                    },
+                    setDOMAttr(value, attrs) {
+                        if (value) {
+                            attrs.style = (attrs.style || '') + `background-color: ${value};`;
+                        }
+                    },
+                },
+            },
+        }),
+        paragraph: paragraphWithAlignment,
+    },
+    marks: basicMarks,
+});
+const advancedSchema = new Schema({
+    nodes: addListNodes(tmpSchema2.spec.nodes, 'paragraph block*', 'block'),
+    marks: basicMarks,
+});
+
+/**
+ * One item of the menu.
+ *
+ * This is the equivalent of `MenuItem` but without all the rendering logic since we use Angular
+ * templates for rendering. Also it caches the state of the item everytime the editor state changes,
+ * so Angular can query the state as often as needed without performance hit.
+ */
+class Item {
+    constructor(spec) {
+        this.spec = spec;
+        /**
+         * Whether the item is 'active' (for example, the item for toggling the strong mark might be active when the cursor is in strong text).
+         */
+        this.active = false;
+        /**
+         * Button is shown but disabled, because the item cannot be (un-)applied
+         */
+        this.disabled = false;
+        /**
+         * Whether the item is shown at the moment
+         */
+        this.show = true;
+    }
+    /**
+     * Update the item state according to the editor state
+     */
+    update(view, state) {
+        if (this.spec.active) {
+            this.active = this.spec.active(state);
+        }
+        if (this.spec.enable) {
+            this.disabled = !this.spec.enable(state);
+        }
+        if (this.spec.select) {
+            this.show = this.spec.select(state);
+        }
+    }
+}
+
+function setTextAlign(tr, schema, alignment) {
+    const { selection, doc } = tr;
+    if (!selection || !doc) {
+        return tr;
+    }
+    const { from, to } = selection;
+    const { nodes } = schema;
+    const tasks = [];
+    alignment = alignment || null;
+    const allowedNodeTypes = new Set([
+        nodes.paragraph,
+        // nodes['blockquote'],
+        // nodes['listItem'],
+        // nodes['heading'],
+    ]);
+    doc.nodesBetween(from, to, (node, pos) => {
+        const nodeType = node.type;
+        const align = node.attrs.align || null;
+        if (align !== alignment && allowedNodeTypes.has(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,
+            align: alignment ? alignment : null,
+        };
+        tr = tr.setNodeMarkup(pos, nodeType, newAttrs, node.marks);
+    });
+    return tr;
+}
+class TextAlignItem extends Item {
+    constructor(alignment) {
+        super({
+            active: state => {
+                const { selection, doc } = state;
+                const { from, to } = selection;
+                let keepLooking = true;
+                let active = false;
+                doc.nodesBetween(from, to, node => {
+                    if (keepLooking && node.attrs.align === alignment) {
+                        keepLooking = false;
+                        active = true;
+                    }
+                    return keepLooking;
+                });
+                return active;
+            },
+            enable: state => {
+                const { selection } = state;
+                return selection instanceof TextSelection || selection instanceof AllSelection;
+            },
+            run: (state, dispatch) => {
+                const { schema, selection } = state;
+                const tr = setTextAlign(state.tr.setSelection(selection), schema, this.active ? null : alignment);
+                if (tr.docChanged) {
+                    dispatch?.(tr);
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            },
+        });
+    }
+}
+
+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();
+    }
+}
+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 '';
+    }
+    // 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;
+}
+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);
+    }
+}
+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) {
+        return !!type.isInSet(state.storedMarks || $from.marks());
+    }
+    else {
+        return state.doc.rangeHasMark(from, to, type);
+    }
+}
+/**
+ * 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 = {
+        run: cmd,
+        ...options,
+    };
+    if (!options.enable && !options.select) {
+        passedOptions.enable = state => cmd(state);
+    }
+    return new Item(passedOptions);
+}
+/**
+ * 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);
+        },
+    });
+}
+
+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;
+                }
+                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;
+}
+/**
+ * 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: menuItemToItem(joinUpItem),
+        lift: menuItemToItem(liftItem),
+        selectParentNode: menuItemToItem(selectParentNodeItem),
+        undo: menuItemToItem(undoItem),
+        redo: menuItemToItem(redoItem),
+    };
+    let type;
+    type = schema.marks.strong;
+    if (type) {
+        r.toggleStrong = markTypeToItem(type);
+    }
+    type = schema.marks.em;
+    if (type) {
+        r.toggleEm = markTypeToItem(type);
+    }
+    type = schema.marks.code;
+    if (type) {
+        r.toggleCode = markTypeToItem(type);
+    }
+    type = schema.marks.link;
+    if (type) {
+        r.toggleLink = new LinkItem(type, dialog);
+    }
+    type = schema.nodes.bullet_list;
+    if (type) {
+        r.wrapBulletList = wrapListItem(type);
+    }
+    type = schema.nodes.ordered_list;
+    if (type) {
+        r.wrapOrderedList = wrapListItem(type);
+    }
+    type = schema.nodes.blockquote;
+    if (type) {
+        r.wrapBlockQuote = menuItemToItem(wrapItem(type, {}));
+    }
+    type = schema.nodes.paragraph;
+    if (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 = menuItemToItem(blockTypeItem(type, {}));
+    }
+    type = schema.nodes.heading;
+    if (type) {
+        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) {
+        r.insertHorizontalRule = new HorizontalRuleItem(type);
+    }
+    type = schema.nodes.table;
+    if (type) {
+        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;
+}
+
+/**
+ * Given a blockquote node type, returns an input rule that turns `"> "`
+ * at the start of a textblock into a blockquote.
+ */
+function blockQuoteRule(nodeType) {
+    return wrappingInputRule(/^\s*>\s$/, nodeType);
+}
+/**
+ * Given a list node type, returns an input rule that turns a number
+ * followed by a dot at the start of a textblock into an ordered list.
+ */
+function orderedListRule(nodeType) {
+    return wrappingInputRule(/^(\d+)\.\s$/, nodeType, match => ({ order: +match[1] }), (match, node) => node.childCount + node.attrs.order === +match[1]);
+}
+/**
+ * Given a list node type, returns an input rule that turns a bullet
+ * (dash, plush, or asterisk) at the start of a textblock into a
+ * bullet list.
+ */
+function bulletListRule(nodeType) {
+    return wrappingInputRule(/^\s*([-+*])\s$/, nodeType);
+}
+/**
+ * Given a code block node type, returns an input rule that turns a
+ * textblock starting with three backticks into a code block.
+ */
+function codeBlockRule(nodeType) {
+    return textblockTypeInputRule(/^```$/, nodeType);
+}
+/**
+ * Given a node type and a maximum level, creates an input rule that
+ * turns up to that number of `#` characters followed by a space at
+ * the start of a textblock into a heading whose level corresponds to
+ * the number of `#` signs.
+ */
+function headingRule(nodeType, maxLevel) {
+    return textblockTypeInputRule(new RegExp('^(#{1,' + maxLevel + '})\\s$'), nodeType, match => ({
+        level: match[1].length,
+    }));
+}
+/**
+ * A set of input rules for creating the basic block quotes, lists,
+ * code blocks, and heading.
+ */
+function buildInputRules(schema) {
+    const rules = [ellipsis, emDash];
+    let type = schema.nodes.blockquote;
+    if (type) {
+        rules.push(blockQuoteRule(type));
+    }
+    type = schema.nodes.ordered_list;
+    if (type) {
+        rules.push(orderedListRule(type));
+    }
+    type = schema.nodes.bullet_list;
+    if (type) {
+        rules.push(bulletListRule(type));
+    }
+    type = schema.nodes.code_block;
+    if (type) {
+        rules.push(codeBlockRule(type));
+    }
+    type = schema.nodes.heading;
+    if (type) {
+        rules.push(headingRule(type, 6));
+    }
+    return inputRules({ rules });
+}
+
+/**
+ * Inspect the given schema looking for marks and nodes from the
+ * basic schema, and if found, add key bindings related to them.
+ * This will add:
+ *
+ * * **Mod-b** for toggling [strong](#schema-basic.StrongMark)
+ * * **Mod-i** for toggling [emphasis](#schema-basic.EmMark)
+ * * **Mod-`** for toggling [code font](#schema-basic.CodeMark)
+ * * **Ctrl-Shift-0** for making the current textblock a paragraph
+ * * **Ctrl-Shift-1** to **Ctrl-Shift-Digit6** for making the current
+ *   textblock a heading of the corresponding level
+ * * **Ctrl-Shift-Backslash** to make the current textblock a code block
+ * * **Ctrl-Shift-8** to wrap the selection in an ordered list
+ * * **Ctrl-Shift-9** to wrap the selection in a bullet list
+ * * **Ctrl->** to wrap the selection in a block quote
+ * * **Enter** to split a non-empty textblock in a list item while at
+ *   the same time splitting the list item
+ * * **Mod-Enter** to insert a hard break
+ * * **Mod-_** to insert a horizontal rule
+ * * **Backspace** to undo an input rule
+ * * **Alt-ArrowUp** to `joinUp`
+ * * **Alt-ArrowDown** to `joinDown`
+ * * **Mod-BracketLeft** to `lift`
+ * * **Escape** to `selectParentNode`
+ *
+ * You can suppress or map these bindings by passing a `mapKeys`
+ * argument, which maps key names (say `"Mod-B"` to either `false`, to
+ * remove the binding, or a new key name string.
+ */
+function buildKeymap(schema, isMac) {
+    const keys = {};
+    keys['Mod-z'] = undo;
+    keys['Shift-Mod-z'] = redo;
+    keys['Backspace'] = undoInputRule;
+    if (!isMac) {
+        keys['Mod-y'] = redo;
+    }
+    keys['Alt-ArrowUp'] = joinUp;
+    keys['Alt-ArrowDown'] = joinDown;
+    keys['Mod-BracketLeft'] = lift;
+    keys['Escape'] = selectParentNode;
+    let type = schema.marks.strong;
+    if (type) {
+        keys['Mod-b'] = toggleMark(type);
+        keys['Mod-B'] = toggleMark(type);
+    }
+    type = schema.marks.em;
+    if (type) {
+        keys['Mod-i'] = toggleMark(type);
+        keys['Mod-I'] = toggleMark(type);
+    }
+    type = schema.marks.code;
+    if (type) {
+        keys['Mod-`'] = toggleMark(type);
+    }
+    type = schema.nodes.bullet_list;
+    if (type) {
+        keys['Shift-Ctrl-8'] = wrapInList(type);
+    }
+    type = schema.nodes.ordered_list;
+    if (type) {
+        keys['Shift-Ctrl-9'] = wrapInList(type);
+    }
+    type = schema.nodes.blockquote;
+    if (type) {
+        keys['Ctrl->'] = wrapIn(type);
+    }
+    type = schema.nodes.hard_break;
+    if (type) {
+        const br = type;
+        const cmd = chainCommands(exitCode, (state, dispatch) => {
+            dispatch?.(state.tr.replaceSelectionWith(br.create()).scrollIntoView());
+            return true;
+        });
+        keys['Mod-Enter'] = cmd;
+        keys['Shift-Enter'] = cmd;
+        if (isMac) {
+            keys['Ctrl-Enter'] = cmd;
+        }
+    }
+    type = schema.nodes.list_item;
+    if (type) {
+        keys['Enter'] = splitListItem(type);
+        keys['Mod-['] = liftListItem(type);
+        keys['Mod-]'] = sinkListItem(type);
+    }
+    type = schema.nodes.paragraph;
+    if (type) {
+        keys['Shift-Ctrl-0'] = setBlockType(type);
+    }
+    type = schema.nodes.code_block;
+    if (type) {
+        keys['Shift-Ctrl-\\'] = setBlockType(type);
+    }
+    type = schema.nodes.heading;
+    if (type) {
+        for (let i = 1; i <= 6; i++) {
+            keys['Shift-Ctrl-' + i] = setBlockType(type, { level: i });
+        }
+    }
+    type = schema.nodes.horizontal_rule;
+    if (type) {
+        const hr = type;
+        keys['Mod-_'] = (state, dispatch) => {
+            dispatch?.(state.tr.replaceSelectionWith(hr.create()).scrollIntoView());
+            return true;
+        };
+    }
+    return keys;
+}
+
+/**
+ * Prosemirror component
+ *
+ * Usage :
+ *
+ * ```html
+ * <natural-editor [(ngModel)]="htmlString"></natural-editor>
+ * ```
+ */
+// @dynamic
+class NaturalEditorComponent {
+    constructor(ngControl, document, dialog, imagePlugin) {
+        this.ngControl = ngControl;
+        this.document = document;
+        this.dialog = dialog;
+        this.imagePlugin = imagePlugin;
+        this.view = null;
+        this.contentChange = new EventEmitter();
+        /**
+         * Callback to upload an image.
+         *
+         * If given it will enable advanced schema, including image and tables.
+         * It must be given on initialization and cannot be changed later on.
+         */
+        this.imageUploader = null;
+        this.schema = basicSchema;
+        /**
+         * HTML string
+         */
+        this.content = '';
+        this.menu = null;
+        /**
+         * If subscribed to, then the save button will be shown and click events forwarded
+         */
+        this.save = new EventEmitter();
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.schema = this.imageUploader ? advancedSchema : basicSchema;
+        this.menu = buildMenuItems(this.schema, this.dialog);
+        const serializer = DOMSerializer.fromSchema(this.schema);
+        const state = this.createState();
+        this.view = new EditorView(this.editor.nativeElement, {
+            state: state,
+            dispatchTransaction: (transaction) => {
+                if (!this.view) {
+                    return;
+                }
+                const newState = this.view.state.apply(transaction);
+                this.view.updateState(newState);
+                // Transform doc into HTML string
+                const dom = serializer.serializeFragment(this.view.state.doc);
+                const el = this.document.createElement('_');
+                el.appendChild(dom);
+                const newContent = el.innerHTML;
+                if (this.content === newContent) {
+                    return;
+                }
+                this.content = el.innerHTML;
+                if (this.onChange) {
+                    this.onChange(this.content);
+                }
+                this.contentChange.emit(this.content);
+            },
+        });
+        this.update();
+    }
+    writeValue(val) {
+        if (typeof val === 'string' && val !== this.content) {
+            this.content = val;
+        }
+        if (this.view !== null) {
+            const state = this.createState();
+            this.view.updateState(state);
+        }
+    }
+    createState() {
+        const template = this.document.createElement('_');
+        template.innerHTML = '<div>' + this.content + '</div>';
+        if (!template.firstChild) {
+            throw new Error('child of template element could not be created');
+        }
+        const parser = DOMParser.fromSchema(this.schema);
+        const doc = parser.parse(template.firstChild);
+        return EditorState.create({
+            doc: doc,
+            plugins: this.createPlugins(),
+        });
+    }
+    createPlugins() {
+        const isMac = !!this.document.defaultView?.navigator.platform.match(/Mac/);
+        const plugins = [
+            buildInputRules(this.schema),
+            keymap(buildKeymap(this.schema, isMac)),
+            keymap(baseKeymap),
+            dropCursor(),
+            gapCursor(),
+            history(),
+            new Plugin({
+                props: {
+                    attributes: { class: 'ProseMirror-example-setup-style' },
+                },
+            }),
+            new Plugin({
+                view: () => this,
+            }),
+        ];
+        if (this.schema === advancedSchema) {
+            plugins.push(this.imagePlugin.plugin, tableEditing(), keymap({
+                Tab: goToNextCell(1),
+                'Shift-Tab': goToNextCell(-1),
+            }));
+        }
+        return plugins;
+    }
+    /**
+     * Called by Prosemirror whenever the editor state changes. So we update our menu states.
+     */
+    update() {
+        if (!this.view || !this.menu) {
+            return;
+        }
+        for (const item of Object.values(this.menu)) {
+            item.update(this.view, this.view.state);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        // TODO disable editor ?
+    }
+    ngOnDestroy() {
+        if (this.view) {
+            this.view.destroy();
+            this.view = null;
+        }
+    }
+    run(event, key) {
+        if (!this.view || !this.menu) {
+            return;
+        }
+        const item = this.menu[key];
+        if (!item || item.disabled || !item.show) {
+            return;
+        }
+        item.spec.run(this.view.state, this.view.dispatch, this.view, event);
+        this.view.focus();
+    }
+    upload(file) {
+        if (!this.view || !this.imageUploader) {
+            return;
+        }
+        if (this.view.state.selection.$from.parent.inlineContent) {
+            this.imagePlugin.startImageUpload(this.view, file, this.imageUploader, this.schema);
+        }
+        this.view.focus();
+    }
+}
+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\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
+                }, {
+                    type: Self
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1.MatDialog }, { type: ImagePlugin }]; }, propDecorators: { editor: [{
+                type: ViewChild,
+                args: ['editor', { read: ElementRef, static: true }]
+            }], contentChange: [{
+                type: Output
+            }], imageUploader: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }] } });
+
+const imports = [
+    CommonModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    NaturalFileModule,
+    NaturalIconModule,
+    ReactiveFormsModule,
+];
+const declarationsToExport = [NaturalEditorComponent, NaturalCustomCssDirective];
+class NaturalEditorModule {
+}
+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,
+        NaturalFileModule,
+        NaturalIconModule,
+        ReactiveFormsModule], exports: [CommonModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatDialogModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        NaturalFileModule,
+        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,
+        NaturalFileModule,
+        NaturalIconModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClassDialogComponent, ColorDialogComponent, LinkDialogComponent, ...declarationsToExport],
+                    imports: [...imports],
+                    exports: [...imports, ...declarationsToExport],
+                }]
+        }] });
+
+// Load `$localize` onto the global scope - to be able to use that function to translate strings in components/services.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NaturalCustomCssDirective, NaturalEditorComponent, NaturalEditorModule };
+//# sourceMappingURL=ecodev-natural-editor.mjs.map