@ecodev/natural-editor 41.0.0 → 41.2.0

package/fesm2015/ecodev-natural-editor.js

@@ -1,52 +1,158 @@
 import '@angular/localize/init';
 import * as i0 from '@angular/core';
-import { Component, Inject, EventEmitter, ElementRef, Optional, Self, ViewChild, Output, NgModule } from '@angular/core';
-import { EditorView } from 'prosemirror-view';
-import { EditorState, Plugin } from 'prosemirror-state';
+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, EditorState } from 'prosemirror-state';
 import { exampleSetup } from 'prosemirror-example-setup';
 import { Schema, DOMSerializer, DOMParser } from 'prosemirror-model';
-import { nodes, marks } from 'prosemirror-schema-basic';
-import { addListNodes, wrapInList } from 'prosemirror-schema-list';
 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 } from 'prosemirror-schema-list';
 import { joinUpItem, liftItem, selectParentNodeItem, undoItem, redoItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
 import { toggleMark } 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 * as i3$1 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i4$1 from '@angular/material/icon';
+import * as i5$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6$1 from '@angular/material/menu';
+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/tooltip';
+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';
 
-const myNodes = {
+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: "12.2.9", ngImport: i0, type: ImagePlugin, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+ImagePlugin.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: ImagePlugin });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: ImagePlugin, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+const basicNodes = {
     heading: nodes.heading,
     doc: nodes.doc,
     paragraph: nodes.paragraph,
     text: nodes.text,
     hard_break: nodes.hard_break,
 };
-const myMarks = {
+const basicMarks = {
     link: marks.link,
     em: marks.em,
     strong: marks.strong,
 };
-const basicSchema = new Schema({ nodes: myNodes, marks: myMarks });
-const schema = new Schema({
-    nodes: addListNodes(basicSchema.spec.nodes, 'paragraph block*', 'block'),
-    marks: basicSchema.spec.marks,
+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({}, 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};`;
+                    }
+                },
+            },
+        },
+    })),
+    marks: basicMarks,
+});
+const advancedSchema = new Schema({
+    nodes: addListNodes(tmpSchema2.spec.nodes, 'paragraph block*', 'block'),
+    marks: basicMarks,
 });
 
 class LinkDialogComponent {
@@ -61,9 +167,7 @@ class LinkDialogComponent {
         this.form.setValue(data);
     }
     maybeConfirm() {
-        if (this.form.valid) {
-            this.confirm();
-        }
+        ifValid(this.form).subscribe(() => this.confirm());
     }
     confirm() {
         this.dialogRef.close(this.form.value);
@@ -82,6 +186,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImpor
                     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.
  *
@@ -136,35 +275,6 @@ function canInsert(state, nodeType) {
     }
     return false;
 }
-// function insertImageItem(nodeType: NodeType) {
-//     return new MenuItem({
-//         enable(state): boolean {
-//             return canInsert(state, nodeType);
-//         },
-//         run(state, _, view) {
-//             let {from, to} = state.selection,
-//                 attrs = null;
-//             if (state.selection instanceof NodeSelection && state.selection.node.type == nodeType) {
-//                 attrs = state.selection.node.attrs;
-//             }
-//             openPrompt({
-//                 title: 'Insert image',
-//                 fields: {
-//                     src: new TextField({label: 'Location', required: true, value: attrs && attrs.src}),
-//                     title: new TextField({label: 'Title', value: attrs && attrs.title}),
-//                     alt: new TextField({
-//                         label: 'Description',
-//                         value: attrs ? attrs.alt : state.doc.textBetween(from, to, ' '),
-//                     }),
-//                 },
-//                 callback(attrs) {
-//                     view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(attrs)));
-//                     view.focus();
-//                 },
-//             });
-//         },
-//     });
-// }
 function cmdItem(cmd, options = {}, useEnable = false) {
     const passedOptions = Object.assign({ run: cmd }, options);
     if ((!options.enable || useEnable) && !options.select) {
@@ -252,10 +362,6 @@ function buildMenuItems(schema, dialog) {
     if (type) {
         r.toggleLink = linkItem(type, dialog);
     }
-    type = schema.nodes.image;
-    if (type) {
-        // r.insertImage = insertImageItem(type);
-    }
     type = schema.nodes.bullet_list;
     if (type) {
         r.wrapBulletList = wrapListItem(type);
@@ -297,6 +403,22 @@ function buildMenuItems(schema, dialog) {
             },
         });
     }
+    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;
 }
 
@@ -311,24 +433,38 @@ function buildMenuItems(schema, dialog) {
  */
 // @dynamic
 class NaturalEditorComponent {
-    constructor(ngControl, document, dialog) {
+    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.menu = buildMenuItems(schema, this.dialog);
-        const serializer = DOMSerializer.fromSchema(schema);
+        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,
@@ -370,17 +506,23 @@ class NaturalEditorComponent {
         if (!template.firstChild) {
             throw new Error('child of template element could not be created');
         }
-        const parser = DOMParser.fromSchema(schema);
+        const parser = DOMParser.fromSchema(this.schema);
         const doc = parser.parse(template.firstChild);
-        const self = this;
+        const plugins = [
+            ...exampleSetup({ schema: this.schema, menuBar: false }),
+            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 EditorState.create({
             doc: doc,
-            plugins: [
-                ...exampleSetup({ schema, menuBar: false }),
-                new Plugin({
-                    view: () => self,
-                }),
-            ],
+            plugins: plugins,
         });
     }
     /**
@@ -418,15 +560,25 @@ class NaturalEditorComponent {
         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: "12.2.9", ngImport: i0, type: NaturalEditorComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.9", type: NaturalEditorComponent, selector: "natural-editor", outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"menu\" *ngIf=\"menu\">\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\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 #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}::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}\n"], components: [{ type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+NaturalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", 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: "12.2.9", 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        <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:bold;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-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], 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: "12.2.9", ngImport: i0, type: NaturalEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'natural-editor',
                     templateUrl: './editor.component.html',
                     styleUrls: ['./editor.component.scss'],
+                    providers: [ImagePlugin],
                 }]
         }], ctorParameters: function () { return [{ type: i4.NgControl, decorators: [{
                     type: Optional
@@ -435,11 +587,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImpor
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i1.MatDialog }]; }, propDecorators: { editor: [{
+                }] }, { 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 = [
@@ -454,6 +610,8 @@ const imports = [
     MatToolbarModule,
     MatTooltipModule,
     ReactiveFormsModule,
+    NaturalFileModule,
+    MatDividerModule,
 ];
 class NaturalEditorModule {
 }
@@ -468,7 +626,9 @@ NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         MatMenuModule,
         MatToolbarModule,
         MatTooltipModule,
-        ReactiveFormsModule], exports: [CommonModule,
+        ReactiveFormsModule,
+        NaturalFileModule,
+        MatDividerModule], exports: [CommonModule,
         MatButtonModule,
         MatButtonToggleModule,
         MatDialogModule,
@@ -478,7 +638,9 @@ NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         MatMenuModule,
         MatToolbarModule,
         MatTooltipModule,
-        ReactiveFormsModule, NaturalEditorComponent] });
+        ReactiveFormsModule,
+        NaturalFileModule,
+        MatDividerModule, NaturalEditorComponent] });
 NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorModule, imports: [[...imports], CommonModule,
         MatButtonModule,
         MatButtonToggleModule,
@@ -489,7 +651,9 @@ NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         MatMenuModule,
         MatToolbarModule,
         MatTooltipModule,
-        ReactiveFormsModule] });
+        ReactiveFormsModule,
+        NaturalFileModule,
+        MatDividerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorModule, decorators: [{
             type: NgModule,
             args: [{