@ecodev/natural-editor 41.2.0 → 42.0.0

package/fesm2015/ecodev-natural-editor.mjs

@@ -0,0 +1,995 @@
+import '@angular/localize/init';
+import * as i0 from '@angular/core';
+import { Injectable, Inject, Component, EventEmitter, ElementRef, Optional, Self, ViewChild, Output, Input, NgModule } from '@angular/core';
+import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
+import { Plugin, TextSelection, AllSelection, EditorState } from 'prosemirror-state';
+import { Schema, DOMSerializer, DOMParser } from 'prosemirror-model';
+import * as i6 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { tableNodes, tableNodeTypes, addColumnBefore, addColumnAfter, deleteColumn, addRowBefore, addRowAfter, deleteRow, deleteTable, mergeCells, splitCell, toggleHeaderColumn, toggleHeaderRow, toggleHeaderCell, columnResizing, tableEditing, goToNextCell } from 'prosemirror-tables';
+import { keymap } from 'prosemirror-keymap';
+import { nodes, marks } from 'prosemirror-schema-basic';
+import { addListNodes, wrapInList, splitListItem, liftListItem, sinkListItem } from 'prosemirror-schema-list';
+import { joinUpItem, liftItem, selectParentNodeItem, undoItem, redoItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
+import { toggleMark, joinUp, joinDown, lift, selectParentNode, wrapIn, chainCommands, exitCode, setBlockType, baseKeymap } from 'prosemirror-commands';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i4 from '@angular/forms';
+import { FormControl, Validators, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i11 from '@ecodev/natural';
+import { ifValid, NaturalFileModule } from '@ecodev/natural';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+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';
+
+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 === null || view === void 0 ? void 0 : view.dispatch(tr.setMeta(this.plugin, { remove: { id } }));
+            },
+        });
+    }
+}
+ImagePlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ImagePlugin, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+ImagePlugin.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ImagePlugin });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ImagePlugin, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    } });
+
+const ALIGN_PATTERN = /(left|right|center|justify)/;
+// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
+// :: NodeSpec A plain paragraph textblock. Represented in the DOM
+// as a `<p>` element.
+const paragraphWithAlignment = {
+    attrs: {
+        align: { 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, 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;
+        }
+        return ['p', attrs, 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: Object.assign(Object.assign(Object.assign({}, 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,
+});
+
+class LinkDialogComponent {
+    constructor(data, dialogRef) {
+        this.dialogRef = dialogRef;
+        this.hrefControl = new FormControl('', Validators.required);
+        this.titleControl = new FormControl('');
+        this.form = new FormGroup({
+            href: this.hrefControl,
+            title: this.titleControl,
+        });
+        this.form.setValue(data);
+    }
+    maybeConfirm() {
+        ifValid(this.form).subscribe(() => this.confirm());
+    }
+    confirm() {
+        this.dialogRef.close(this.form.value);
+    }
+}
+LinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LinkDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: LinkDialogComponent, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>URL</mat-label>\n        <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n        <mat-error *ngIf=\"hrefControl.hasError('required')\" i18n>Ce champ est requis</mat-error>\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label i18n>Titre</mat-label>\n        <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-button [mat-dialog-close] i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:60em;display:grid}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LinkDialogComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>URL</mat-label>\n        <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n        <mat-error *ngIf=\"hrefControl.hasError('required')\" i18n>Ce champ est requis</mat-error>\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label i18n>Titre</mat-label>\n        <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-button [mat-dialog-close] i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:60em;display:grid}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: i1.MatDialogRef }];
+    } });
+
+function createCell(cellType, cellContent) {
+    return cellContent ? cellType.createChecked(null, cellContent) : cellType.createAndFill();
+}
+function createTable(state, rowsCount, colsCount, withHeaderRow, cellContent) {
+    const types = tableNodeTypes(state.schema);
+    const headerCells = [];
+    const cells = [];
+    for (let index = 0; index < colsCount; index += 1) {
+        const cell = createCell(types.cell, cellContent);
+        if (cell) {
+            cells.push(cell);
+        }
+        if (withHeaderRow) {
+            const headerCell = createCell(types.header_cell, cellContent);
+            if (headerCell) {
+                headerCells.push(headerCell);
+            }
+        }
+    }
+    const rows = [];
+    for (let index = 0; index < rowsCount; index += 1) {
+        rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells));
+    }
+    return types.table.createChecked(null, rows);
+}
+function addTable(state, dispatch, { rowsCount = 3, colsCount = 3, withHeaderRow = true, cellContent, } = {}) {
+    const offset = state.tr.selection.anchor + 1;
+    const nodes = createTable(state, rowsCount, colsCount, withHeaderRow, cellContent);
+    const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
+    const resolvedPos = tr.doc.resolve(offset);
+    // move cursor into table
+    tr.setSelection(TextSelection.near(resolvedPos));
+    dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
+}
+
+/**
+ * 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) {
+    console.log('setTextAlign', 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 = Object.assign(Object.assign({}, node.attrs), { align: alignment ? alignment : null });
+        console.log('newAttrs', newAttrs);
+        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;
+                console.log(this);
+                const tr = setTextAlign(state.tr.setSelection(selection), schema, this.active ? null : alignment);
+                if (tr.docChanged) {
+                    dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            },
+        });
+    }
+}
+
+/**
+ * Convert built-in `MenuItem` into our Angular specific `Item`
+ */
+function toItem(item) {
+    return new Item(item.spec);
+}
+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;
+}
+function cmdItem(cmd, options = {}, useEnable = false) {
+    const passedOptions = Object.assign({ run: cmd }, options);
+    if ((!options.enable || useEnable) && !options.select) {
+        passedOptions[options.enable ? 'enable' : 'select'] = (state) => cmd(state);
+    }
+    return new Item(passedOptions);
+}
+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);
+    }
+}
+function markItem(markType, options = {}) {
+    const passedOptions = Object.assign({ active(state) {
+            return markActive(state, markType);
+        } }, options);
+    return cmdItem(toggleMark(markType), passedOptions, true);
+}
+function linkItem(markType, dialog) {
+    return new Item({
+        active(state) {
+            return markActive(state, markType);
+        },
+        enable(state) {
+            return !state.selection.empty;
+        },
+        run(state, dispatch, view) {
+            if (markActive(state, markType)) {
+                toggleMark(markType)(state, dispatch);
+                return true;
+            }
+            dialog
+                .open(LinkDialogComponent, {
+                data: {
+                    href: '',
+                    title: '',
+                },
+            })
+                .afterClosed()
+                .subscribe(result => {
+                if (result) {
+                    if (!result.title) {
+                        delete result.title;
+                    }
+                    toggleMark(markType, result)(view.state, view.dispatch);
+                }
+                view.focus();
+            });
+        },
+    });
+}
+function wrapListItem(nodeType) {
+    return cmdItem(wrapInList(nodeType));
+}
+/**
+ * Given a schema, look for default mark and node types in it and
+ * return an object with relevant menu items relating to those marks:
+ */
+function buildMenuItems(schema, dialog) {
+    const r = {
+        joinUp: toItem(joinUpItem),
+        lift: toItem(liftItem),
+        selectParentNode: toItem(selectParentNodeItem),
+        undo: toItem(undoItem),
+        redo: toItem(redoItem),
+    };
+    let type;
+    type = schema.marks.strong;
+    if (type) {
+        r.toggleStrong = markItem(type);
+    }
+    type = schema.marks.em;
+    if (type) {
+        r.toggleEm = markItem(type);
+    }
+    type = schema.marks.code;
+    if (type) {
+        r.toggleCode = markItem(type);
+    }
+    type = schema.marks.link;
+    if (type) {
+        r.toggleLink = 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 = toItem(wrapItem(type, {}));
+    }
+    type = schema.nodes.paragraph;
+    if (type) {
+        r.makeParagraph = toItem(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');
+        }
+    }
+    type = schema.nodes.code_block;
+    if (type) {
+        r.makeCodeBlock = toItem(blockTypeItem(type, {}));
+    }
+    type = schema.nodes.heading;
+    if (type) {
+        r.makeHead1 = toItem(blockTypeItem(type, { attrs: { level: 1 } }));
+        r.makeHead2 = toItem(blockTypeItem(type, { attrs: { level: 2 } }));
+        r.makeHead3 = toItem(blockTypeItem(type, { attrs: { level: 3 } }));
+        r.makeHead4 = toItem(blockTypeItem(type, { attrs: { level: 4 } }));
+        r.makeHead5 = toItem(blockTypeItem(type, { attrs: { level: 5 } }));
+        r.makeHead6 = toItem(blockTypeItem(type, { attrs: { level: 6 } }));
+    }
+    type = schema.nodes.horizontal_rule;
+    if (type) {
+        const hr = type;
+        r.insertHorizontalRule = new Item({
+            enable(state) {
+                return canInsert(state, hr);
+            },
+            run(state, dispatch) {
+                dispatch(state.tr.replaceSelectionWith(hr.create()));
+            },
+        });
+    }
+    type = schema.nodes.table;
+    if (type) {
+        r.insertTable = new Item({ run: (e, tr) => addTable(e, tr) });
+        r.addColumnBefore = new Item({ run: addColumnBefore });
+        r.addColumnAfter = new Item({ run: addColumnAfter });
+        r.deleteColumn = new Item({ run: deleteColumn });
+        r.addRowBefore = new Item({ run: addRowBefore });
+        r.addRowAfter = new Item({ run: addRowAfter });
+        r.deleteRow = new Item({ run: deleteRow });
+        r.deleteTable = new Item({ run: deleteTable });
+        r.mergeCells = new Item({ run: mergeCells });
+        r.splitCell = new Item({ run: splitCell });
+        r.toggleHeaderColumn = new Item({ run: toggleHeaderColumn });
+        r.toggleHeaderRow = new Item({ run: toggleHeaderRow });
+        r.toggleHeaderCell = new Item({ run: toggleHeaderCell });
+    }
+    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 === null || dispatch === void 0 ? void 0 : 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 === null || dispatch === void 0 ? void 0 : 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() {
+        var _a;
+        const isMac = !!((_a = this.document.defaultView) === null || _a === void 0 ? void 0 : _a.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, columnResizing(undefined), 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.2.5", ngImport: i0, type: NaturalEditorComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i1.MatDialog }, { token: ImagePlugin }], target: i0.ɵɵFactoryTarget.Component });
+NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NaturalEditorComponent, selector: "natural-editor", inputs: { imageUploader: "imageUploader" }, outputs: { contentChange: "contentChange", save: "save" }, providers: [ImagePlugin], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"menu-container\" *ngIf=\"menu\">\n    <div class=\"menu\">\n        <button mat-button *ngIf=\"save.observed\" (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n            <mat-icon>save</mat-icon>\n        </button>\n\n        <mat-button-toggle-group multiple>\n            <mat-button-toggle\n                *ngIf=\"menu.toggleStrong\"\n                [disabled]=\"menu.toggleStrong.disabled\"\n                [checked]=\"menu.toggleStrong.active\"\n                (click)=\"run($event, 'toggleStrong')\"\n                i18n-matTooltip\n                matTooltip=\"Gras\"\n            >\n                <mat-icon>format_bold</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleEm\"\n                [disabled]=\"menu.toggleEm.disabled\"\n                [checked]=\"menu.toggleEm.active\"\n                (click)=\"run($event, 'toggleEm')\"\n                i18n-matTooltip\n                matTooltip=\"Italique\"\n            >\n                <mat-icon>format_italic</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleCode\"\n                [disabled]=\"menu.toggleCode.disabled\"\n                [checked]=\"menu.toggleCode.active\"\n                (click)=\"run($event, 'toggleCode')\"\n                i18n-matTooltip\n                matTooltip=\"Code\"\n            >\n                <mat-icon>code</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleLink\"\n                [disabled]=\"menu.toggleLink.disabled\"\n                [checked]=\"menu.toggleLink.active\"\n                (click)=\"run($event, 'toggleLink')\"\n                i18n-matTooltip\n                matTooltip=\"Ins\u00E9rer un lien...\"\n            >\n                <mat-icon>insert_link</mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n\n        <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n            <span i18n>Type</span>\n            <mat-icon>arrow_drop_down</mat-icon>\n        </button>\n\n        <mat-menu #blockMenu=\"matMenu\">\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeParagraph\"\n                [disabled]=\"menu.makeParagraph.disabled\"\n                (click)=\"run($event, 'makeParagraph')\"\n                i18n\n                >Paragraphe\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeCodeBlock\"\n                [disabled]=\"menu.makeCodeBlock.disabled\"\n                (click)=\"run($event, 'makeCodeBlock')\"\n                i18n\n                >Code\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead1\"\n                [disabled]=\"menu.makeHead1.disabled\"\n                (click)=\"run($event, 'makeHead1')\"\n                i18n\n                >Titre 1\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead2\"\n                [disabled]=\"menu.makeHead2.disabled\"\n                (click)=\"run($event, 'makeHead2')\"\n                i18n\n                >Titre 2\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead3\"\n                [disabled]=\"menu.makeHead3.disabled\"\n                (click)=\"run($event, 'makeHead3')\"\n                i18n\n                >Titre 3\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead4\"\n                [disabled]=\"menu.makeHead4.disabled\"\n                (click)=\"run($event, 'makeHead4')\"\n                i18n\n                >Titre 4\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead5\"\n                [disabled]=\"menu.makeHead5.disabled\"\n                (click)=\"run($event, 'makeHead5')\"\n                i18n\n                >Titre 5\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead6\"\n                [disabled]=\"menu.makeHead6.disabled\"\n                (click)=\"run($event, 'makeHead6')\"\n                i18n\n                >Titre 6\n            </button>\n        </mat-menu>\n\n        <button mat-button [matMenuTriggerFor]=\"tableMenu\" *ngIf=\"menu.addColumnBefore\">\n            <span i18n>Tableau</span>\n            <mat-icon>arrow_drop_down</mat-icon>\n        </button>\n\n        <mat-menu #tableMenu=\"matMenu\">\n            <button\n                mat-menu-item\n                *ngIf=\"menu.insertTable\"\n                [disabled]=\"menu.insertTable.disabled\"\n                (click)=\"run($event, 'insertTable')\"\n                i18n\n                >Ins\u00E9rer un tableau\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteTable\"\n                [disabled]=\"menu.deleteTable.disabled\"\n                (click)=\"run($event, 'deleteTable')\"\n                i18n\n                >Supprimer le tableau\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.mergeCells\"\n                [disabled]=\"menu.mergeCells.disabled\"\n                (click)=\"run($event, 'mergeCells')\"\n                i18n\n                >Fusionner les cellules\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.splitCell\"\n                [disabled]=\"menu.splitCell.disabled\"\n                (click)=\"run($event, 'splitCell')\"\n                i18n\n                >Scinder les cellules\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addColumnBefore\"\n                [disabled]=\"menu.addColumnBefore.disabled\"\n                (click)=\"run($event, 'addColumnBefore')\"\n                i18n\n                >Ins\u00E9rer une colonne avant\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addColumnAfter\"\n                [disabled]=\"menu.addColumnAfter.disabled\"\n                (click)=\"run($event, 'addColumnAfter')\"\n                i18n\n                >Ins\u00E9rer une colonne apr\u00E8s\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteColumn\"\n                [disabled]=\"menu.deleteColumn.disabled\"\n                (click)=\"run($event, 'deleteColumn')\"\n                i18n\n                >Supprimer la colonne\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addRowBefore\"\n                [disabled]=\"menu.addRowBefore.disabled\"\n                (click)=\"run($event, 'addRowBefore')\"\n                i18n\n                >Ins\u00E9rer une ligne avant\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addRowAfter\"\n                [disabled]=\"menu.addRowAfter.disabled\"\n                (click)=\"run($event, 'addRowAfter')\"\n                i18n\n                >Ins\u00E9rer une ligne apr\u00E8s\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteRow\"\n                [disabled]=\"menu.deleteRow.disabled\"\n                (click)=\"run($event, 'deleteRow')\"\n                i18n\n                >Supprimer la ligne\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderColumn\"\n                [disabled]=\"menu.toggleHeaderColumn.disabled\"\n                (click)=\"run($event, 'toggleHeaderColumn')\"\n                i18n\n                >Ent\u00EAte de colonne\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderRow\"\n                [disabled]=\"menu.toggleHeaderRow.disabled\"\n                (click)=\"run($event, 'toggleHeaderRow')\"\n                i18n\n                >Ent\u00EAte de ligne\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderCell\"\n                [disabled]=\"menu.toggleHeaderCell.disabled\"\n                (click)=\"run($event, 'toggleHeaderCell')\"\n                i18n\n                >Ent\u00EAte de cellule\n            </button>\n        </mat-menu>\n\n        <button\n            mat-button\n            *ngIf=\"imageUploader\"\n            naturalFileDrop\n            [selectable]=\"true\"\n            [broadcast]=\"false\"\n            i18n-matTooltip\n            matTooltip=\"Ins\u00E9rer une image\"\n            (fileChange)=\"upload($event)\"\n        >\n            <mat-icon>insert_photo</mat-icon>\n        </button>\n\n        <mat-button-toggle-group *ngIf=\"menu.alignLeft\">\n            <mat-button-toggle\n                *ngIf=\"menu.alignLeft\"\n                [disabled]=\"menu.alignLeft.disabled\"\n                [checked]=\"menu.alignLeft.active\"\n                (click)=\"run($event, 'alignLeft')\"\n                i18n-matTooltip\n                matTooltip=\"Aligner gauche\"\n            >\n                <mat-icon>format_align_left</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignCenter\"\n                [disabled]=\"menu.alignCenter.disabled\"\n                [checked]=\"menu.alignCenter.active\"\n                (click)=\"run($event, 'alignCenter')\"\n                i18n-matTooltip\n                matTooltip=\"Centrer\"\n            >\n                <mat-icon>format_align_center</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignRight\"\n                [disabled]=\"menu.alignRight.disabled\"\n                [checked]=\"menu.alignRight.active\"\n                (click)=\"run($event, 'alignRight')\"\n                i18n-matTooltip\n                matTooltip=\"Aligner droite\"\n            >\n                <mat-icon>format_align_right</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignJustify\"\n                [disabled]=\"menu.alignJustify.disabled\"\n                [checked]=\"menu.alignJustify.active\"\n                (click)=\"run($event, 'alignJustify')\"\n                i18n-matTooltip\n                matTooltip=\"Justifier\"\n            >\n                <mat-icon>format_align_justify</mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n\n        <button\n            mat-button\n            *ngIf=\"menu.undo\"\n            [disabled]=\"menu.undo.disabled\"\n            (click)=\"run($event, 'undo')\"\n            i18n-matTooltip\n            matTooltip=\"Annuler\"\n        >\n            <mat-icon>undo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.redo\"\n            [disabled]=\"menu.redo.disabled\"\n            (click)=\"run($event, 'redo')\"\n            i18n-matTooltip\n            matTooltip=\"Refaire\"\n        >\n            <mat-icon>redo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n            [disabled]=\"menu.wrapBulletList.disabled\"\n            (click)=\"run($event, 'wrapBulletList')\"\n            i18n-matTooltip\n            matTooltip=\"Liste \u00E0 puce\"\n        >\n            <mat-icon>format_list_bulleted</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n            [disabled]=\"menu.wrapOrderedList.disabled\"\n            (click)=\"run($event, 'wrapOrderedList')\"\n            i18n-matTooltip\n            matTooltip=\"Liste \u00E0 num\u00E9ro\"\n        >\n            <mat-icon>format_list_numbered</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n            [disabled]=\"menu.wrapBlockQuote.disabled\"\n            (click)=\"run($event, 'wrapBlockQuote')\"\n            i18n-matTooltip\n            matTooltip=\"Citation\"\n        >\n            <mat-icon>format_quote</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.joinUp && menu.joinUp.show\"\n            [disabled]=\"menu.joinUp.disabled\"\n            (click)=\"run($event, 'joinUp')\"\n            i18n-matTooltip\n            matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n        >\n            <mat-icon>move_up</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.lift && menu.lift.show\"\n            [disabled]=\"menu.lift.disabled\"\n            (click)=\"run($event, 'lift')\"\n            i18n-matTooltip\n            matTooltip=\"D\u00E9sindenter\"\n        >\n            <mat-icon>format_indent_decrease</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\n            [disabled]=\"menu.selectParentNode.disabled\"\n            (click)=\"run($event, 'selectParentNode')\"\n            i18n-matTooltip\n            matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n        >\n            <mat-icon>select_all</mat-icon>\n        </button>\n    </div>\n</div>\n<div #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;width:50px;height:50px;background-size:500% 100%!important;animation:gradient 3s none infinite}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'natural-editor', providers: [ImagePlugin], template: "<div class=\"menu-container\" *ngIf=\"menu\">\n    <div class=\"menu\">\n        <button mat-button *ngIf=\"save.observed\" (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n            <mat-icon>save</mat-icon>\n        </button>\n\n        <mat-button-toggle-group multiple>\n            <mat-button-toggle\n                *ngIf=\"menu.toggleStrong\"\n                [disabled]=\"menu.toggleStrong.disabled\"\n                [checked]=\"menu.toggleStrong.active\"\n                (click)=\"run($event, 'toggleStrong')\"\n                i18n-matTooltip\n                matTooltip=\"Gras\"\n            >\n                <mat-icon>format_bold</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleEm\"\n                [disabled]=\"menu.toggleEm.disabled\"\n                [checked]=\"menu.toggleEm.active\"\n                (click)=\"run($event, 'toggleEm')\"\n                i18n-matTooltip\n                matTooltip=\"Italique\"\n            >\n                <mat-icon>format_italic</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleCode\"\n                [disabled]=\"menu.toggleCode.disabled\"\n                [checked]=\"menu.toggleCode.active\"\n                (click)=\"run($event, 'toggleCode')\"\n                i18n-matTooltip\n                matTooltip=\"Code\"\n            >\n                <mat-icon>code</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleLink\"\n                [disabled]=\"menu.toggleLink.disabled\"\n                [checked]=\"menu.toggleLink.active\"\n                (click)=\"run($event, 'toggleLink')\"\n                i18n-matTooltip\n                matTooltip=\"Ins\u00E9rer un lien...\"\n            >\n                <mat-icon>insert_link</mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n\n        <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n            <span i18n>Type</span>\n            <mat-icon>arrow_drop_down</mat-icon>\n        </button>\n\n        <mat-menu #blockMenu=\"matMenu\">\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeParagraph\"\n                [disabled]=\"menu.makeParagraph.disabled\"\n                (click)=\"run($event, 'makeParagraph')\"\n                i18n\n                >Paragraphe\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeCodeBlock\"\n                [disabled]=\"menu.makeCodeBlock.disabled\"\n                (click)=\"run($event, 'makeCodeBlock')\"\n                i18n\n                >Code\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead1\"\n                [disabled]=\"menu.makeHead1.disabled\"\n                (click)=\"run($event, 'makeHead1')\"\n                i18n\n                >Titre 1\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead2\"\n                [disabled]=\"menu.makeHead2.disabled\"\n                (click)=\"run($event, 'makeHead2')\"\n                i18n\n                >Titre 2\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead3\"\n                [disabled]=\"menu.makeHead3.disabled\"\n                (click)=\"run($event, 'makeHead3')\"\n                i18n\n                >Titre 3\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead4\"\n                [disabled]=\"menu.makeHead4.disabled\"\n                (click)=\"run($event, 'makeHead4')\"\n                i18n\n                >Titre 4\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead5\"\n                [disabled]=\"menu.makeHead5.disabled\"\n                (click)=\"run($event, 'makeHead5')\"\n                i18n\n                >Titre 5\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead6\"\n                [disabled]=\"menu.makeHead6.disabled\"\n                (click)=\"run($event, 'makeHead6')\"\n                i18n\n                >Titre 6\n            </button>\n        </mat-menu>\n\n        <button mat-button [matMenuTriggerFor]=\"tableMenu\" *ngIf=\"menu.addColumnBefore\">\n            <span i18n>Tableau</span>\n            <mat-icon>arrow_drop_down</mat-icon>\n        </button>\n\n        <mat-menu #tableMenu=\"matMenu\">\n            <button\n                mat-menu-item\n                *ngIf=\"menu.insertTable\"\n                [disabled]=\"menu.insertTable.disabled\"\n                (click)=\"run($event, 'insertTable')\"\n                i18n\n                >Ins\u00E9rer un tableau\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteTable\"\n                [disabled]=\"menu.deleteTable.disabled\"\n                (click)=\"run($event, 'deleteTable')\"\n                i18n\n                >Supprimer le tableau\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.mergeCells\"\n                [disabled]=\"menu.mergeCells.disabled\"\n                (click)=\"run($event, 'mergeCells')\"\n                i18n\n                >Fusionner les cellules\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.splitCell\"\n                [disabled]=\"menu.splitCell.disabled\"\n                (click)=\"run($event, 'splitCell')\"\n                i18n\n                >Scinder les cellules\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addColumnBefore\"\n                [disabled]=\"menu.addColumnBefore.disabled\"\n                (click)=\"run($event, 'addColumnBefore')\"\n                i18n\n                >Ins\u00E9rer une colonne avant\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addColumnAfter\"\n                [disabled]=\"menu.addColumnAfter.disabled\"\n                (click)=\"run($event, 'addColumnAfter')\"\n                i18n\n                >Ins\u00E9rer une colonne apr\u00E8s\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteColumn\"\n                [disabled]=\"menu.deleteColumn.disabled\"\n                (click)=\"run($event, 'deleteColumn')\"\n                i18n\n                >Supprimer la colonne\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addRowBefore\"\n                [disabled]=\"menu.addRowBefore.disabled\"\n                (click)=\"run($event, 'addRowBefore')\"\n                i18n\n                >Ins\u00E9rer une ligne avant\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addRowAfter\"\n                [disabled]=\"menu.addRowAfter.disabled\"\n                (click)=\"run($event, 'addRowAfter')\"\n                i18n\n                >Ins\u00E9rer une ligne apr\u00E8s\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteRow\"\n                [disabled]=\"menu.deleteRow.disabled\"\n                (click)=\"run($event, 'deleteRow')\"\n                i18n\n                >Supprimer la ligne\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderColumn\"\n                [disabled]=\"menu.toggleHeaderColumn.disabled\"\n                (click)=\"run($event, 'toggleHeaderColumn')\"\n                i18n\n                >Ent\u00EAte de colonne\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderRow\"\n                [disabled]=\"menu.toggleHeaderRow.disabled\"\n                (click)=\"run($event, 'toggleHeaderRow')\"\n                i18n\n                >Ent\u00EAte de ligne\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderCell\"\n                [disabled]=\"menu.toggleHeaderCell.disabled\"\n                (click)=\"run($event, 'toggleHeaderCell')\"\n                i18n\n                >Ent\u00EAte de cellule\n            </button>\n        </mat-menu>\n\n        <button\n            mat-button\n            *ngIf=\"imageUploader\"\n            naturalFileDrop\n            [selectable]=\"true\"\n            [broadcast]=\"false\"\n            i18n-matTooltip\n            matTooltip=\"Ins\u00E9rer une image\"\n            (fileChange)=\"upload($event)\"\n        >\n            <mat-icon>insert_photo</mat-icon>\n        </button>\n\n        <mat-button-toggle-group *ngIf=\"menu.alignLeft\">\n            <mat-button-toggle\n                *ngIf=\"menu.alignLeft\"\n                [disabled]=\"menu.alignLeft.disabled\"\n                [checked]=\"menu.alignLeft.active\"\n                (click)=\"run($event, 'alignLeft')\"\n                i18n-matTooltip\n                matTooltip=\"Aligner gauche\"\n            >\n                <mat-icon>format_align_left</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignCenter\"\n                [disabled]=\"menu.alignCenter.disabled\"\n                [checked]=\"menu.alignCenter.active\"\n                (click)=\"run($event, 'alignCenter')\"\n                i18n-matTooltip\n                matTooltip=\"Centrer\"\n            >\n                <mat-icon>format_align_center</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignRight\"\n                [disabled]=\"menu.alignRight.disabled\"\n                [checked]=\"menu.alignRight.active\"\n                (click)=\"run($event, 'alignRight')\"\n                i18n-matTooltip\n                matTooltip=\"Aligner droite\"\n            >\n                <mat-icon>format_align_right</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignJustify\"\n                [disabled]=\"menu.alignJustify.disabled\"\n                [checked]=\"menu.alignJustify.active\"\n                (click)=\"run($event, 'alignJustify')\"\n                i18n-matTooltip\n                matTooltip=\"Justifier\"\n            >\n                <mat-icon>format_align_justify</mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n\n        <button\n            mat-button\n            *ngIf=\"menu.undo\"\n            [disabled]=\"menu.undo.disabled\"\n            (click)=\"run($event, 'undo')\"\n            i18n-matTooltip\n            matTooltip=\"Annuler\"\n        >\n            <mat-icon>undo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.redo\"\n            [disabled]=\"menu.redo.disabled\"\n            (click)=\"run($event, 'redo')\"\n            i18n-matTooltip\n            matTooltip=\"Refaire\"\n        >\n            <mat-icon>redo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n            [disabled]=\"menu.wrapBulletList.disabled\"\n            (click)=\"run($event, 'wrapBulletList')\"\n            i18n-matTooltip\n            matTooltip=\"Liste \u00E0 puce\"\n        >\n            <mat-icon>format_list_bulleted</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n            [disabled]=\"menu.wrapOrderedList.disabled\"\n            (click)=\"run($event, 'wrapOrderedList')\"\n            i18n-matTooltip\n            matTooltip=\"Liste \u00E0 num\u00E9ro\"\n        >\n            <mat-icon>format_list_numbered</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n            [disabled]=\"menu.wrapBlockQuote.disabled\"\n            (click)=\"run($event, 'wrapBlockQuote')\"\n            i18n-matTooltip\n            matTooltip=\"Citation\"\n        >\n            <mat-icon>format_quote</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.joinUp && menu.joinUp.show\"\n            [disabled]=\"menu.joinUp.disabled\"\n            (click)=\"run($event, 'joinUp')\"\n            i18n-matTooltip\n            matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n        >\n            <mat-icon>move_up</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.lift && menu.lift.show\"\n            [disabled]=\"menu.lift.disabled\"\n            (click)=\"run($event, 'lift')\"\n            i18n-matTooltip\n            matTooltip=\"D\u00E9sindenter\"\n        >\n            <mat-icon>format_indent_decrease</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\n            [disabled]=\"menu.selectParentNode.disabled\"\n            (click)=\"run($event, 'selectParentNode')\"\n            i18n-matTooltip\n            matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n        >\n            <mat-icon>select_all</mat-icon>\n        </button>\n    </div>\n</div>\n<div #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:700;text-align:left}::ng-deep placeholder{display:block;width:50px;height:50px;background-size:500% 100%!important;animation:gradient 3s none infinite}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"] }]
+        }], 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,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    NaturalFileModule,
+    MatDividerModule,
+];
+class NaturalEditorModule {
+}
+NaturalEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorModule, declarations: [NaturalEditorComponent, LinkDialogComponent], imports: [CommonModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        NaturalFileModule,
+        MatDividerModule], exports: [CommonModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        NaturalFileModule,
+        MatDividerModule, NaturalEditorComponent] });
+NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorModule, imports: [[...imports], CommonModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        NaturalFileModule,
+        MatDividerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NaturalEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NaturalEditorComponent, LinkDialogComponent],
+                    imports: [...imports],
+                    exports: [...imports, NaturalEditorComponent],
+                }]
+        }] });
+
+// 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 { NaturalEditorComponent, NaturalEditorModule };
+//# sourceMappingURL=ecodev-natural-editor.mjs.map