@ecodev/natural-editor 1.1.0 → 41.1.3

package/README.md

@@ -1,42 +1,18 @@
-# Natural
+# Natural Editor
 
 [![Build Status](https://github.com/Ecodev/natural/workflows/main/badge.svg)](https://github.com/Ecodev/natural/actions)
-[![Total Downloads](https://img.shields.io/npm/dt/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
-[![Latest Stable Version](https://img.shields.io/npm/v/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
-[![License](https://img.shields.io/npm/l/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
-[![Join the chat at https://gitter.im/Ecodev/natural](https://badges.gitter.im/Ecodev/natural.svg)](https://gitter.im/Ecodev/natural)
+[![Total Downloads](https://img.shields.io/npm/dt/@ecodev/natural-editor.svg)](https://www.npmjs.com/package/@ecodev/natural-editor)
+[![Latest Stable Version](https://img.shields.io/npm/v/@ecodev/natural-editor.svg)](https://www.npmjs.com/package/@ecodev/natural-editor)
+[![License](https://img.shields.io/npm/l/@ecodev/natural-editor.svg)](https://www.npmjs.com/package/@ecodev/natural-editor)
 
-This project is a collection of Angular Material components and various utilities classes for Angular projects.
+Prosemirror editor for Angular projects.
 
 ## Install
 
 ```bash
-yarn add @ecodev/natural
+yarn add @ecodev/natural-editor
 ```
 
 ## Development
 
-The most useful commands for development are:
-
-- `yarn dev` to start a development server
-- `yarn build-demo` to build the docs locally (it will be published automatically by GitHub Actions)
-- `git tag -am 1.2.3 1.2.3 && git push` to publish the lib to npm (via GitHub Actions `release` job)
-
-### i18n
-
-This library is ready to be translated, but it does not ship translations. It is up to the consuming
-application to extract and translate strings.
-
-## Components
-
-### Natural Search
-
-This is an Angular component to search for things via configurable facets. Facets may be
-configured to use one of the built-in component, or a custom component to input values.
-
-See the component in action on [the demo page](https://ecodev.github.io/natural).
-
-#### Prior work
-
-While the implementation is entirely different, [VisualSearch.js
-](https://github.com/documentcloud/visualsearch/) was an important inspiration.
+See [main README](../../README.md).

package/bundles/ecodev-natural-editor.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/localize/init'), require('@angular/core'), require('prosemirror-view'), require('prosemirror-state'), require('prosemirror-example-setup'), require('prosemirror-model'), require('prosemirror-schema-basic'), require('prosemirror-schema-list'), require('@angular/common'), require('prosemirror-menu'), require('prosemirror-commands'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/toolbar'), require('@angular/material/button-toggle'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/tooltip')) :
-    typeof define === 'function' && define.amd ? define('@ecodev/natural-editor', ['exports', '@angular/localize/init', '@angular/core', 'prosemirror-view', 'prosemirror-state', 'prosemirror-example-setup', 'prosemirror-model', 'prosemirror-schema-basic', 'prosemirror-schema-list', '@angular/common', 'prosemirror-menu', 'prosemirror-commands', '@angular/material/dialog', '@angular/forms', '@angular/material/form-field', '@angular/material/button', '@angular/material/input', '@angular/material/toolbar', '@angular/material/button-toggle', '@angular/material/icon', '@angular/material/menu', '@angular/material/tooltip'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ecodev = global.ecodev || {}, global.ecodev["natural-editor"] = {}), global.ng.localize.init, global.ng.core, global["prosemirror-view"], global["prosemirror-state"], global["prosemirror-example-setup"], global["prosemirror-model"], global["prosemirror-schema-basic"], global["prosemirror-schema-list"], global.ng.common, global["prosemirror-menu"], global["prosemirror-commands"], global.ng.material.dialog, global.ng.forms, global.ng.material.formField, global.ng.material.button, global.ng.material.input, global.ng.material.toolbar, global.ng.material.buttonToggle, global.ng.material.icon, global.ng.material.menu, global.ng.material.tooltip));
-})(this, (function (exports, init, i0, prosemirrorView, prosemirrorState, prosemirrorExampleSetup, prosemirrorModel, prosemirrorSchemaBasic, prosemirrorSchemaList, i6, prosemirrorMenu, prosemirrorCommands, i1, i4, i2, i3, i5, i3$1, i4$1, i5$1, i7, i9) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/localize/init'), require('@angular/core'), require('prosemirror-view'), require('prosemirror-state'), require('prosemirror-example-setup'), require('prosemirror-model'), require('@angular/common'), require('prosemirror-tables'), require('prosemirror-keymap'), require('prosemirror-schema-basic'), require('prosemirror-schema-list'), require('prosemirror-menu'), require('prosemirror-commands'), require('@angular/material/dialog'), require('@angular/forms'), require('@ecodev/natural'), require('@angular/material/form-field'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/button-toggle'), require('@angular/material/menu'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/toolbar')) :
+    typeof define === 'function' && define.amd ? define('@ecodev/natural-editor', ['exports', '@angular/localize/init', '@angular/core', 'prosemirror-view', 'prosemirror-state', 'prosemirror-example-setup', 'prosemirror-model', '@angular/common', 'prosemirror-tables', 'prosemirror-keymap', 'prosemirror-schema-basic', 'prosemirror-schema-list', 'prosemirror-menu', 'prosemirror-commands', '@angular/material/dialog', '@angular/forms', '@ecodev/natural', '@angular/material/form-field', '@angular/material/button', '@angular/material/input', '@angular/material/icon', '@angular/material/button-toggle', '@angular/material/menu', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/toolbar'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ecodev = global.ecodev || {}, global.ecodev["natural-editor"] = {}), global.ng.localize.init, global.ng.core, global["prosemirror-view"], global["prosemirror-state"], global["prosemirror-example-setup"], global["prosemirror-model"], global.ng.common, global.prosemirrorTables, global.prosemirrorKeymap, global["prosemirror-schema-basic"], global["prosemirror-schema-list"], global["prosemirror-menu"], global["prosemirror-commands"], global.ng.material.dialog, global.ng.forms, global.i11, global.ng.material.formField, global.ng.material.button, global.ng.material.input, global.ng.material.icon, global.ng.material.buttonToggle, global.ng.material.menu, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.toolbar));
+})(this, (function (exports, init, i0, prosemirrorView, prosemirrorState, prosemirrorExampleSetup, prosemirrorModel, i6, prosemirrorTables, prosemirrorKeymap, prosemirrorSchemaBasic, prosemirrorSchemaList, prosemirrorMenu, prosemirrorCommands, i1, i4, i11, i2, i3, i5, i5$1, i6$1, i7, i8, i10, toolbar) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,14 +26,15 @@
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
-    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -353,22 +354,126 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var myNodes = {
+    var ImagePlugin = /** @class */ (function () {
+        function ImagePlugin(document) {
+            this.document = document;
+            this.plugin = new prosemirrorState.Plugin({
+                state: {
+                    init: function () {
+                        return prosemirrorView.DecorationSet.empty;
+                    },
+                    apply: function (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
+                        var action = tr.getMeta(this);
+                        if (action && action.add) {
+                            var widget = document.createElement('placeholder');
+                            var deco = prosemirrorView.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, function (spec) { return spec.id === action.remove.id; }));
+                        }
+                        return set;
+                    },
+                },
+                props: {
+                    decorations: function (state) {
+                        return this.getState(state);
+                    },
+                },
+            });
+        }
+        ImagePlugin.prototype.findPlaceholder = function (state, id) {
+            var decorators = this.plugin.getState(state);
+            var found = decorators.find(undefined, undefined, function (spec) { return spec.id === id; });
+            return found.length ? found[0].from : null;
+        };
+        ImagePlugin.prototype.startImageUpload = function (view, file, uploader, schema) {
+            var _this = this;
+            // A fresh object to act as the ID for this upload
+            var id = {};
+            // Replace the selection with a placeholder
+            var tr = view.state.tr;
+            if (!tr.selection.empty) {
+                tr.deleteSelection();
+            }
+            tr.setMeta(this.plugin, { add: { id: id, pos: tr.selection.from } });
+            view.dispatch(tr);
+            uploader(file).subscribe({
+                next: function (url) {
+                    var 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: id } }));
+                },
+                error: function () {
+                    // On failure, just clean up the placeholder
+                    view === null || view === void 0 ? void 0 : view.dispatch(tr.setMeta(_this.plugin, { remove: { id: id } }));
+                },
+            });
+        };
+        return ImagePlugin;
+    }());
+    ImagePlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: ImagePlugin, deps: [{ token: i6.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ImagePlugin.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: ImagePlugin });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: ImagePlugin, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: Document, decorators: [{
+                            type: i0.Inject,
+                            args: [i6.DOCUMENT]
+                        }] }];
+        } });
+
+    var basicNodes = {
         heading: prosemirrorSchemaBasic.nodes.heading,
         doc: prosemirrorSchemaBasic.nodes.doc,
         paragraph: prosemirrorSchemaBasic.nodes.paragraph,
         text: prosemirrorSchemaBasic.nodes.text,
         hard_break: prosemirrorSchemaBasic.nodes.hard_break,
     };
-    var myMarks = {
+    var basicMarks = {
         link: prosemirrorSchemaBasic.marks.link,
         em: prosemirrorSchemaBasic.marks.em,
         strong: prosemirrorSchemaBasic.marks.strong,
     };
-    var basicSchema = new prosemirrorModel.Schema({ nodes: myNodes, marks: myMarks });
-    var schema = new prosemirrorModel.Schema({
-        nodes: prosemirrorSchemaList.addListNodes(basicSchema.spec.nodes, 'paragraph block*', 'block'),
-        marks: basicSchema.spec.marks,
+    var tmpSchema = new prosemirrorModel.Schema({ nodes: basicNodes, marks: basicMarks });
+    var basicSchema = new prosemirrorModel.Schema({
+        nodes: prosemirrorSchemaList.addListNodes(tmpSchema.spec.nodes, 'paragraph block*', 'block'),
+        marks: tmpSchema.spec.marks,
+    });
+    var tmpSchema2 = new prosemirrorModel.Schema({
+        nodes: Object.assign(Object.assign({}, prosemirrorSchemaBasic.nodes), prosemirrorTables.tableNodes({
+            tableGroup: 'block',
+            cellContent: 'block+',
+            cellAttributes: {
+                background: {
+                    default: null,
+                    getFromDOM: function (dom) {
+                        return dom.style.backgroundColor || null;
+                    },
+                    setDOMAttr: function (value, attrs) {
+                        if (value) {
+                            attrs.style = (attrs.style || '') + ("background-color: " + value + ";");
+                        }
+                    },
+                },
+            },
+        })),
+        marks: basicMarks,
+    });
+    var advancedSchema = new prosemirrorModel.Schema({
+        nodes: prosemirrorSchemaList.addListNodes(tmpSchema2.spec.nodes, 'paragraph block*', 'block'),
+        marks: basicMarks,
     });
 
     var LinkDialogComponent = /** @class */ (function () {
@@ -383,9 +488,8 @@
             this.form.setValue(data);
         }
         LinkDialogComponent.prototype.maybeConfirm = function () {
-            if (this.form.valid) {
-                this.confirm();
-            }
+            var _this = this;
+            i11.ifValid(this.form).subscribe(function () { return _this.confirm(); });
         };
         LinkDialogComponent.prototype.confirm = function () {
             this.dialogRef.close(this.form.value);
@@ -407,6 +511,42 @@
                         }] }, { type: i1__namespace.MatDialogRef }];
         } });
 
+    function createCell(cellType, cellContent) {
+        return cellContent ? cellType.createChecked(null, cellContent) : cellType.createAndFill();
+    }
+    function createTable(state, rowsCount, colsCount, withHeaderRow, cellContent) {
+        var types = prosemirrorTables.tableNodeTypes(state.schema);
+        var headerCells = [];
+        var cells = [];
+        for (var index = 0; index < colsCount; index += 1) {
+            var cell = createCell(types.cell, cellContent);
+            if (cell) {
+                cells.push(cell);
+            }
+            if (withHeaderRow) {
+                var headerCell = createCell(types.header_cell, cellContent);
+                if (headerCell) {
+                    headerCells.push(headerCell);
+                }
+            }
+        }
+        var rows = [];
+        for (var 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, _a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.rowsCount, rowsCount = _c === void 0 ? 3 : _c, _d = _b.colsCount, colsCount = _d === void 0 ? 3 : _d, _e = _b.withHeaderRow, withHeaderRow = _e === void 0 ? true : _e, cellContent = _b.cellContent;
+        var offset = state.tr.selection.anchor + 1;
+        var nodes = createTable(state, rowsCount, colsCount, withHeaderRow, cellContent);
+        var tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
+        var resolvedPos = tr.doc.resolve(offset);
+        // move cursor into table
+        tr.setSelection(prosemirrorState.TextSelection.near(resolvedPos));
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
+    }
+
     /**
      * One item of the menu.
      *
@@ -462,35 +602,6 @@
         }
         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) {
         if (options === void 0) { options = {}; }
         if (useEnable === void 0) { useEnable = false; }
@@ -538,10 +649,12 @@
                 })
                     .afterClosed()
                     .subscribe(function (result) {
-                    if (result && !result.title) {
-                        delete result.title;
+                    if (result) {
+                        if (!result.title) {
+                            delete result.title;
+                        }
+                        prosemirrorCommands.toggleMark(markType, result)(view.state, view.dispatch);
                     }
-                    prosemirrorCommands.toggleMark(markType, result)(view.state, view.dispatch);
                     view.focus();
                 });
             },
@@ -579,10 +692,6 @@
         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);
@@ -624,6 +733,22 @@
                 },
             });
         }
+        type = schema.nodes.table;
+        if (type) {
+            r.insertTable = new Item({ run: function (e, tr) { return addTable(e, tr); } });
+            r.addColumnBefore = new Item({ run: prosemirrorTables.addColumnBefore });
+            r.addColumnAfter = new Item({ run: prosemirrorTables.addColumnAfter });
+            r.deleteColumn = new Item({ run: prosemirrorTables.deleteColumn });
+            r.addRowBefore = new Item({ run: prosemirrorTables.addRowBefore });
+            r.addRowAfter = new Item({ run: prosemirrorTables.addRowAfter });
+            r.deleteRow = new Item({ run: prosemirrorTables.deleteRow });
+            r.deleteTable = new Item({ run: prosemirrorTables.deleteTable });
+            r.mergeCells = new Item({ run: prosemirrorTables.mergeCells });
+            r.splitCell = new Item({ run: prosemirrorTables.splitCell });
+            r.toggleHeaderColumn = new Item({ run: prosemirrorTables.toggleHeaderColumn });
+            r.toggleHeaderRow = new Item({ run: prosemirrorTables.toggleHeaderRow });
+            r.toggleHeaderCell = new Item({ run: prosemirrorTables.toggleHeaderCell });
+        }
         return r;
     }
 
@@ -638,25 +763,39 @@
      */
     // @dynamic
     var NaturalEditorComponent = /** @class */ (function () {
-        function NaturalEditorComponent(ngControl, document, dialog) {
+        function NaturalEditorComponent(ngControl, document, dialog, imagePlugin) {
             this.ngControl = ngControl;
             this.document = document;
             this.dialog = dialog;
+            this.imagePlugin = imagePlugin;
             this.view = null;
             this.contentChange = new i0.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 i0.EventEmitter();
             if (this.ngControl !== null) {
                 this.ngControl.valueAccessor = this;
             }
         }
         NaturalEditorComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.menu = buildMenuItems(schema, this.dialog);
-            var serializer = prosemirrorModel.DOMSerializer.fromSchema(schema);
+            this.schema = this.imageUploader ? advancedSchema : basicSchema;
+            this.menu = buildMenuItems(this.schema, this.dialog);
+            var serializer = prosemirrorModel.DOMSerializer.fromSchema(this.schema);
             var state = this.createState();
             this.view = new prosemirrorView.EditorView(this.editor.nativeElement, {
                 state: state,
@@ -693,21 +832,28 @@
             }
         };
         NaturalEditorComponent.prototype.createState = function () {
+            var _this = this;
             var template = this.document.createElement('_');
             template.innerHTML = '<div>' + this.content + '</div>';
             if (!template.firstChild) {
                 throw new Error('child of template element could not be created');
             }
-            var parser = prosemirrorModel.DOMParser.fromSchema(schema);
+            var parser = prosemirrorModel.DOMParser.fromSchema(this.schema);
             var doc = parser.parse(template.firstChild);
-            var self = this;
+            var plugins = __spreadArray(__spreadArray([], __read(prosemirrorExampleSetup.exampleSetup({ schema: this.schema, menuBar: false }))), [
+                new prosemirrorState.Plugin({
+                    view: function () { return _this; },
+                }),
+            ]);
+            if (this.schema === advancedSchema) {
+                plugins.push(this.imagePlugin.plugin, prosemirrorTables.columnResizing(undefined), prosemirrorTables.tableEditing(), prosemirrorKeymap.keymap({
+                    Tab: prosemirrorTables.goToNextCell(1),
+                    'Shift-Tab': prosemirrorTables.goToNextCell(-1),
+                }));
+            }
             return prosemirrorState.EditorState.create({
                 doc: doc,
-                plugins: __spreadArray(__spreadArray([], __read(prosemirrorExampleSetup.exampleSetup({ schema: schema, menuBar: false }))), [
-                    new prosemirrorState.Plugin({
-                        view: function () { return self; },
-                    }),
-                ]),
+                plugins: plugins,
             });
         };
         /**
@@ -756,16 +902,26 @@
             item.spec.run(this.view.state, this.view.dispatch, this.view, event);
             this.view.focus();
         };
+        NaturalEditorComponent.prototype.upload = function (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();
+        };
         return NaturalEditorComponent;
     }());
-    NaturalEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorComponent, deps: [{ token: i4__namespace.NgControl, optional: true, self: true }, { token: i6.DOCUMENT }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NaturalEditorComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<mat-toolbar *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</mat-toolbar>\n<div #editor></div>\n", styles: ["::ng-deep .ProseMirror{position:relative;background:rgba(0,0,0,.1)}::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 #editor,::ng-deep .editor{background:white;color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::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__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace.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: i7__namespace.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7__namespace.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i9__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7__namespace.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+    NaturalEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorComponent, deps: [{ token: i4__namespace.NgControl, optional: true, self: true }, { token: i6.DOCUMENT }, { token: i1__namespace.MatDialog }, { token: ImagePlugin }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NaturalEditorComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }], ngImport: i0__namespace, 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__namespace.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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace$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__namespace.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7__namespace.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7__namespace.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11__namespace.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'natural-editor',
                         templateUrl: './editor.component.html',
                         styleUrls: ['./editor.component.scss'],
+                        providers: [ImagePlugin],
                     }]
             }], ctorParameters: function () {
             return [{ type: i4__namespace.NgControl, decorators: [{
@@ -775,26 +931,32 @@
                         }] }, { type: Document, decorators: [{
                             type: i0.Inject,
                             args: [i6.DOCUMENT]
-                        }] }, { type: i1__namespace.MatDialog }];
+                        }] }, { type: i1__namespace.MatDialog }, { type: ImagePlugin }];
         }, propDecorators: { editor: [{
                     type: i0.ViewChild,
                     args: ['editor', { read: i0.ElementRef, static: true }]
                 }], contentChange: [{
                     type: i0.Output
+                }], imageUploader: [{
+                    type: i0.Input
+                }], save: [{
+                    type: i0.Output
                 }] } });
 
     var imports = [
         i6.CommonModule,
         i3.MatButtonModule,
-        i4$1.MatButtonToggleModule,
+        i6$1.MatButtonToggleModule,
         i1.MatDialogModule,
         i2.MatFormFieldModule,
         i5$1.MatIconModule,
         i5.MatInputModule,
         i7.MatMenuModule,
-        i3$1.MatToolbarModule,
-        i9.MatTooltipModule,
+        toolbar.MatToolbarModule,
+        i10.MatTooltipModule,
         i4.ReactiveFormsModule,
+        i11.NaturalFileModule,
+        i8.MatDividerModule,
     ];
     var NaturalEditorModule = /** @class */ (function () {
         function NaturalEditorModule() {
@@ -804,36 +966,42 @@
     NaturalEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     NaturalEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorModule, declarations: [NaturalEditorComponent, LinkDialogComponent], imports: [i6.CommonModule,
             i3.MatButtonModule,
-            i4$1.MatButtonToggleModule,
+            i6$1.MatButtonToggleModule,
             i1.MatDialogModule,
             i2.MatFormFieldModule,
             i5$1.MatIconModule,
             i5.MatInputModule,
             i7.MatMenuModule,
-            i3$1.MatToolbarModule,
-            i9.MatTooltipModule,
-            i4.ReactiveFormsModule], exports: [i6.CommonModule,
+            toolbar.MatToolbarModule,
+            i10.MatTooltipModule,
+            i4.ReactiveFormsModule,
+            i11.NaturalFileModule,
+            i8.MatDividerModule], exports: [i6.CommonModule,
             i3.MatButtonModule,
-            i4$1.MatButtonToggleModule,
+            i6$1.MatButtonToggleModule,
             i1.MatDialogModule,
             i2.MatFormFieldModule,
             i5$1.MatIconModule,
             i5.MatInputModule,
             i7.MatMenuModule,
-            i3$1.MatToolbarModule,
-            i9.MatTooltipModule,
-            i4.ReactiveFormsModule, NaturalEditorComponent] });
+            toolbar.MatToolbarModule,
+            i10.MatTooltipModule,
+            i4.ReactiveFormsModule,
+            i11.NaturalFileModule,
+            i8.MatDividerModule, NaturalEditorComponent] });
     NaturalEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorModule, imports: [__spreadArray([], __read(imports)), i6.CommonModule,
             i3.MatButtonModule,
-            i4$1.MatButtonToggleModule,
+            i6$1.MatButtonToggleModule,
             i1.MatDialogModule,
             i2.MatFormFieldModule,
             i5$1.MatIconModule,
             i5.MatInputModule,
             i7.MatMenuModule,
-            i3$1.MatToolbarModule,
-            i9.MatTooltipModule,
-            i4.ReactiveFormsModule] });
+            toolbar.MatToolbarModule,
+            i10.MatTooltipModule,
+            i4.ReactiveFormsModule,
+            i11.NaturalFileModule,
+            i8.MatDividerModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{