@ecodev/natural-editor 41.1.3 → 41.3.0

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('@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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/localize/init'), require('@angular/core'), require('prosemirror-view'), require('prosemirror-state'), 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('prosemirror-history'), require('prosemirror-dropcursor'), require('prosemirror-gapcursor'), require('prosemirror-inputrules'), 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-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', 'prosemirror-history', 'prosemirror-dropcursor', 'prosemirror-gapcursor', 'prosemirror-inputrules', '@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-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.prosemirrorHistory, global.prosemirrorDropcursor, global.prosemirrorGapcursor, global.prosemirrorInputrules, 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, prosemirrorModel, i6, prosemirrorTables, prosemirrorKeymap, prosemirrorSchemaBasic, prosemirrorSchemaList, prosemirrorMenu, prosemirrorCommands, i1, i4, i11, i2, i3, i5, prosemirrorHistory, prosemirrorDropcursor, prosemirrorGapcursor, prosemirrorInputrules, i5$1, i6$1, i7, i8, i10, toolbar) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -434,6 +434,49 @@
                         }] }];
         } });
 
+    var ALIGN_PATTERN = /(left|right|center|justify)/;
+    // https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
+    // :: NodeSpec A plain paragraph textblock. Represented in the DOM
+    // as a `<p>` element.
+    var paragraphWithAlignment = {
+        attrs: {
+            align: { default: null },
+            id: { default: null },
+        },
+        content: 'inline*',
+        group: 'block',
+        parseDOM: [
+            {
+                tag: 'p',
+                getAttrs: function (dom) {
+                    if (!(dom instanceof HTMLElement)) {
+                        return;
+                    }
+                    var textAlign = dom.style.textAlign;
+                    var align = dom.getAttribute('align') || textAlign || '';
+                    align = ALIGN_PATTERN.test(align) ? align : null;
+                    var id = dom.getAttribute('id') || '';
+                    return { align: align, id: id };
+                },
+            },
+        ],
+        toDOM: function (node) {
+            var _a = node.attrs, align = _a.align, id = _a.id;
+            var attrs = {};
+            var style = '';
+            if (align && align !== 'left') {
+                style += "text-align: " + align + ";";
+            }
+            if (style) {
+                attrs.style = style;
+            }
+            if (id) {
+                attrs.id = id;
+            }
+            return ['p', attrs, 0];
+        },
+    };
+
     var basicNodes = {
         heading: prosemirrorSchemaBasic.nodes.heading,
         doc: prosemirrorSchemaBasic.nodes.doc,
@@ -452,7 +495,7 @@
         marks: tmpSchema.spec.marks,
     });
     var tmpSchema2 = new prosemirrorModel.Schema({
-        nodes: Object.assign(Object.assign({}, prosemirrorSchemaBasic.nodes), prosemirrorTables.tableNodes({
+        nodes: Object.assign(Object.assign(Object.assign({}, prosemirrorSchemaBasic.nodes), prosemirrorTables.tableNodes({
             tableGroup: 'block',
             cellContent: 'block+',
             cellAttributes: {
@@ -468,7 +511,7 @@
                     },
                 },
             },
-        })),
+        })), { paragraph: paragraphWithAlignment }),
         marks: basicMarks,
     });
     var advancedSchema = new prosemirrorModel.Schema({
@@ -586,6 +629,86 @@
         };
         return Item;
     }());
+
+    function setTextAlign(tr, schema, alignment) {
+        console.log('setTextAlign', alignment);
+        var selection = tr.selection, doc = tr.doc;
+        if (!selection || !doc) {
+            return tr;
+        }
+        var from = selection.from, to = selection.to;
+        var nodes = schema.nodes;
+        var tasks = [];
+        alignment = alignment || null;
+        var allowedNodeTypes = new Set([
+            nodes.paragraph,
+            // nodes['blockquote'],
+            // nodes['listItem'],
+            // nodes['heading'],
+        ]);
+        doc.nodesBetween(from, to, function (node, pos) {
+            var nodeType = node.type;
+            var align = node.attrs.align || null;
+            if (align !== alignment && allowedNodeTypes.has(nodeType)) {
+                tasks.push({
+                    node: node,
+                    pos: pos,
+                    nodeType: nodeType,
+                });
+            }
+            return true;
+        });
+        if (!tasks.length) {
+            return tr;
+        }
+        tasks.forEach(function (job) {
+            var node = job.node, pos = job.pos, nodeType = job.nodeType;
+            var newAttrs = Object.assign(Object.assign({}, node.attrs), { align: alignment ? alignment : null });
+            console.log('newAttrs', newAttrs);
+            tr = tr.setNodeMarkup(pos, nodeType, newAttrs, node.marks);
+        });
+        return tr;
+    }
+    var TextAlignItem = /** @class */ (function (_super) {
+        __extends(TextAlignItem, _super);
+        function TextAlignItem(alignment) {
+            var _this = _super.call(this, {
+                active: function (state) {
+                    var selection = state.selection, doc = state.doc;
+                    var from = selection.from, to = selection.to;
+                    var keepLooking = true;
+                    var active = false;
+                    doc.nodesBetween(from, to, function (node) {
+                        if (keepLooking && node.attrs.align === alignment) {
+                            keepLooking = false;
+                            active = true;
+                        }
+                        return keepLooking;
+                    });
+                    return active;
+                },
+                enable: function (state) {
+                    var selection = state.selection;
+                    return selection instanceof prosemirrorState.TextSelection || selection instanceof prosemirrorState.AllSelection;
+                },
+                run: function (state, dispatch) {
+                    var schema = state.schema, selection = state.selection;
+                    console.log(_this);
+                    var tr = setTextAlign(state.tr.setSelection(selection), schema, _this.active ? null : alignment);
+                    if (tr.docChanged) {
+                        dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                },
+            }) || this;
+            return _this;
+        }
+        return TextAlignItem;
+    }(Item));
+
     /**
      * Convert built-in `MenuItem` into our Angular specific `Item`
      */
@@ -707,6 +830,12 @@
         type = schema.nodes.paragraph;
         if (type) {
             r.makeParagraph = toItem(prosemirrorMenu.blockTypeItem(type, {}));
+            if (type.spec === paragraphWithAlignment) {
+                r.alignLeft = new TextAlignItem('left');
+                r.alignRight = new TextAlignItem('right');
+                r.alignCenter = new TextAlignItem('center');
+                r.alignJustify = new TextAlignItem('justify');
+            }
         }
         type = schema.nodes.code_block;
         if (type) {
@@ -752,6 +881,186 @@
         return r;
     }
 
+    /**
+     * Given a blockquote node type, returns an input rule that turns `"> "`
+     * at the start of a textblock into a blockquote.
+     */
+    function blockQuoteRule(nodeType) {
+        return prosemirrorInputrules.wrappingInputRule(/^\s*>\s$/, nodeType);
+    }
+    /**
+     * Given a list node type, returns an input rule that turns a number
+     * followed by a dot at the start of a textblock into an ordered list.
+     */
+    function orderedListRule(nodeType) {
+        return prosemirrorInputrules.wrappingInputRule(/^(\d+)\.\s$/, nodeType, function (match) { return ({ order: +match[1] }); }, function (match, node) { return node.childCount + node.attrs.order === +match[1]; });
+    }
+    /**
+     * Given a list node type, returns an input rule that turns a bullet
+     * (dash, plush, or asterisk) at the start of a textblock into a
+     * bullet list.
+     */
+    function bulletListRule(nodeType) {
+        return prosemirrorInputrules.wrappingInputRule(/^\s*([-+*])\s$/, nodeType);
+    }
+    /**
+     * Given a code block node type, returns an input rule that turns a
+     * textblock starting with three backticks into a code block.
+     */
+    function codeBlockRule(nodeType) {
+        return prosemirrorInputrules.textblockTypeInputRule(/^```$/, nodeType);
+    }
+    /**
+     * Given a node type and a maximum level, creates an input rule that
+     * turns up to that number of `#` characters followed by a space at
+     * the start of a textblock into a heading whose level corresponds to
+     * the number of `#` signs.
+     */
+    function headingRule(nodeType, maxLevel) {
+        return prosemirrorInputrules.textblockTypeInputRule(new RegExp('^(#{1,' + maxLevel + '})\\s$'), nodeType, function (match) { return ({
+            level: match[1].length,
+        }); });
+    }
+    /**
+     * A set of input rules for creating the basic block quotes, lists,
+     * code blocks, and heading.
+     */
+    function buildInputRules(schema) {
+        var rules = [prosemirrorInputrules.ellipsis, prosemirrorInputrules.emDash];
+        var type = schema.nodes.blockquote;
+        if (type) {
+            rules.push(blockQuoteRule(type));
+        }
+        type = schema.nodes.ordered_list;
+        if (type) {
+            rules.push(orderedListRule(type));
+        }
+        type = schema.nodes.bullet_list;
+        if (type) {
+            rules.push(bulletListRule(type));
+        }
+        type = schema.nodes.code_block;
+        if (type) {
+            rules.push(codeBlockRule(type));
+        }
+        type = schema.nodes.heading;
+        if (type) {
+            rules.push(headingRule(type, 6));
+        }
+        return prosemirrorInputrules.inputRules({ rules: rules });
+    }
+
+    /**
+     * Inspect the given schema looking for marks and nodes from the
+     * basic schema, and if found, add key bindings related to them.
+     * This will add:
+     *
+     * * **Mod-b** for toggling [strong](#schema-basic.StrongMark)
+     * * **Mod-i** for toggling [emphasis](#schema-basic.EmMark)
+     * * **Mod-`** for toggling [code font](#schema-basic.CodeMark)
+     * * **Ctrl-Shift-0** for making the current textblock a paragraph
+     * * **Ctrl-Shift-1** to **Ctrl-Shift-Digit6** for making the current
+     *   textblock a heading of the corresponding level
+     * * **Ctrl-Shift-Backslash** to make the current textblock a code block
+     * * **Ctrl-Shift-8** to wrap the selection in an ordered list
+     * * **Ctrl-Shift-9** to wrap the selection in a bullet list
+     * * **Ctrl->** to wrap the selection in a block quote
+     * * **Enter** to split a non-empty textblock in a list item while at
+     *   the same time splitting the list item
+     * * **Mod-Enter** to insert a hard break
+     * * **Mod-_** to insert a horizontal rule
+     * * **Backspace** to undo an input rule
+     * * **Alt-ArrowUp** to `joinUp`
+     * * **Alt-ArrowDown** to `joinDown`
+     * * **Mod-BracketLeft** to `lift`
+     * * **Escape** to `selectParentNode`
+     *
+     * You can suppress or map these bindings by passing a `mapKeys`
+     * argument, which maps key names (say `"Mod-B"` to either `false`, to
+     * remove the binding, or a new key name string.
+     */
+    function buildKeymap(schema, isMac) {
+        var keys = {};
+        keys['Mod-z'] = prosemirrorHistory.undo;
+        keys['Shift-Mod-z'] = prosemirrorHistory.redo;
+        keys['Backspace'] = prosemirrorInputrules.undoInputRule;
+        if (!isMac) {
+            keys['Mod-y'] = prosemirrorHistory.redo;
+        }
+        keys['Alt-ArrowUp'] = prosemirrorCommands.joinUp;
+        keys['Alt-ArrowDown'] = prosemirrorCommands.joinDown;
+        keys['Mod-BracketLeft'] = prosemirrorCommands.lift;
+        keys['Escape'] = prosemirrorCommands.selectParentNode;
+        var type = schema.marks.strong;
+        if (type) {
+            keys['Mod-b'] = prosemirrorCommands.toggleMark(type);
+            keys['Mod-B'] = prosemirrorCommands.toggleMark(type);
+        }
+        type = schema.marks.em;
+        if (type) {
+            keys['Mod-i'] = prosemirrorCommands.toggleMark(type);
+            keys['Mod-I'] = prosemirrorCommands.toggleMark(type);
+        }
+        type = schema.marks.code;
+        if (type) {
+            keys['Mod-`'] = prosemirrorCommands.toggleMark(type);
+        }
+        type = schema.nodes.bullet_list;
+        if (type) {
+            keys['Shift-Ctrl-8'] = prosemirrorSchemaList.wrapInList(type);
+        }
+        type = schema.nodes.ordered_list;
+        if (type) {
+            keys['Shift-Ctrl-9'] = prosemirrorSchemaList.wrapInList(type);
+        }
+        type = schema.nodes.blockquote;
+        if (type) {
+            keys['Ctrl->'] = prosemirrorCommands.wrapIn(type);
+        }
+        type = schema.nodes.hard_break;
+        if (type) {
+            var br_1 = type;
+            var cmd = prosemirrorCommands.chainCommands(prosemirrorCommands.exitCode, function (state, dispatch) {
+                dispatch === null || dispatch === void 0 ? void 0 : dispatch(state.tr.replaceSelectionWith(br_1.create()).scrollIntoView());
+                return true;
+            });
+            keys['Mod-Enter'] = cmd;
+            keys['Shift-Enter'] = cmd;
+            if (isMac) {
+                keys['Ctrl-Enter'] = cmd;
+            }
+        }
+        type = schema.nodes.list_item;
+        if (type) {
+            keys['Enter'] = prosemirrorSchemaList.splitListItem(type);
+            keys['Mod-['] = prosemirrorSchemaList.liftListItem(type);
+            keys['Mod-]'] = prosemirrorSchemaList.sinkListItem(type);
+        }
+        type = schema.nodes.paragraph;
+        if (type) {
+            keys['Shift-Ctrl-0'] = prosemirrorCommands.setBlockType(type);
+        }
+        type = schema.nodes.code_block;
+        if (type) {
+            keys['Shift-Ctrl-\\'] = prosemirrorCommands.setBlockType(type);
+        }
+        type = schema.nodes.heading;
+        if (type) {
+            for (var i = 1; i <= 6; i++) {
+                keys['Shift-Ctrl-' + i] = prosemirrorCommands.setBlockType(type, { level: i });
+            }
+        }
+        type = schema.nodes.horizontal_rule;
+        if (type) {
+            var hr_1 = type;
+            keys['Mod-_'] = function (state, dispatch) {
+                dispatch === null || dispatch === void 0 ? void 0 : dispatch(state.tr.replaceSelectionWith(hr_1.create()).scrollIntoView());
+                return true;
+            };
+        }
+        return keys;
+    }
+
     /**
      * Prosemirror component
      *
@@ -832,7 +1141,6 @@
             }
         };
         NaturalEditorComponent.prototype.createState = function () {
-            var _this = this;
             var template = this.document.createElement('_');
             template.innerHTML = '<div>' + this.content + '</div>';
             if (!template.firstChild) {
@@ -840,40 +1148,57 @@
             }
             var parser = prosemirrorModel.DOMParser.fromSchema(this.schema);
             var doc = parser.parse(template.firstChild);
-            var plugins = __spreadArray(__spreadArray([], __read(prosemirrorExampleSetup.exampleSetup({ schema: this.schema, menuBar: false }))), [
+            return prosemirrorState.EditorState.create({
+                doc: doc,
+                plugins: this.createPlugins(),
+            });
+        };
+        NaturalEditorComponent.prototype.createPlugins = function () {
+            var _this = this;
+            var _a;
+            var isMac = !!((_a = this.document.defaultView) === null || _a === void 0 ? void 0 : _a.navigator.platform.match(/Mac/));
+            var plugins = [
+                buildInputRules(this.schema),
+                prosemirrorKeymap.keymap(buildKeymap(this.schema, isMac)),
+                prosemirrorKeymap.keymap(prosemirrorCommands.baseKeymap),
+                prosemirrorDropcursor.dropCursor(),
+                prosemirrorGapcursor.gapCursor(),
+                prosemirrorHistory.history(),
+                new prosemirrorState.Plugin({
+                    props: {
+                        attributes: { class: 'ProseMirror-example-setup-style' },
+                    },
+                }),
                 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: plugins,
-            });
+            return plugins;
         };
         /**
          * Called by Prosemirror whenever the editor state changes. So we update our menu states.
          */
         NaturalEditorComponent.prototype.update = function () {
-            var e_1, _a;
+            var e_1, _b;
             if (!this.view || !this.menu) {
                 return;
             }
             try {
-                for (var _b = __values(Object.values(this.menu)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var item = _c.value;
+                for (var _c = __values(Object.values(this.menu)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var item = _d.value;
                     item.update(this.view, this.view.state);
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
@@ -914,7 +1239,7 @@
         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 }, { 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"] }] });
+    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        <mat-button-toggle-group *ngIf=\"menu.alignLeft\">\n            <mat-button-toggle\n                *ngIf=\"menu.alignLeft\"\n                [disabled]=\"menu.alignLeft.disabled\"\n                [checked]=\"menu.alignLeft.active\"\n                (click)=\"run($event, 'alignLeft')\"\n                i18n-matTooltip\n                matTooltip=\"Aligner gauche\"\n            >\n                <mat-icon>format_align_left</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignCenter\"\n                [disabled]=\"menu.alignCenter.disabled\"\n                [checked]=\"menu.alignCenter.active\"\n                (click)=\"run($event, 'alignCenter')\"\n                i18n-matTooltip\n                matTooltip=\"Centrer\"\n            >\n                <mat-icon>format_align_center</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignRight\"\n                [disabled]=\"menu.alignRight.disabled\"\n                [checked]=\"menu.alignRight.active\"\n                (click)=\"run($event, 'alignRight')\"\n                i18n-matTooltip\n                matTooltip=\"Aligner droite\"\n            >\n                <mat-icon>format_align_right</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.alignJustify\"\n                [disabled]=\"menu.alignJustify.disabled\"\n                [checked]=\"menu.alignJustify.active\"\n                (click)=\"run($event, 'alignJustify')\"\n                i18n-matTooltip\n                matTooltip=\"Justifier\"\n            >\n                <mat-icon>format_align_justify</mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n\n        <button\n            mat-button\n            *ngIf=\"menu.undo\"\n            [disabled]=\"menu.undo.disabled\"\n            (click)=\"run($event, 'undo')\"\n            i18n-matTooltip\n            matTooltip=\"Annuler\"\n        >\n            <mat-icon>undo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.redo\"\n            [disabled]=\"menu.redo.disabled\"\n            (click)=\"run($event, 'redo')\"\n            i18n-matTooltip\n            matTooltip=\"Refaire\"\n        >\n            <mat-icon>redo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n            [disabled]=\"menu.wrapBulletList.disabled\"\n            (click)=\"run($event, 'wrapBulletList')\"\n            i18n-matTooltip\n            matTooltip=\"Liste \u00E0 puce\"\n        >\n            <mat-icon>format_list_bulleted</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n            [disabled]=\"menu.wrapOrderedList.disabled\"\n            (click)=\"run($event, 'wrapOrderedList')\"\n            i18n-matTooltip\n            matTooltip=\"Liste \u00E0 num\u00E9ro\"\n        >\n            <mat-icon>format_list_numbered</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n            [disabled]=\"menu.wrapBlockQuote.disabled\"\n            (click)=\"run($event, 'wrapBlockQuote')\"\n            i18n-matTooltip\n            matTooltip=\"Citation\"\n        >\n            <mat-icon>format_quote</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.joinUp && menu.joinUp.show\"\n            [disabled]=\"menu.joinUp.disabled\"\n            (click)=\"run($event, 'joinUp')\"\n            i18n-matTooltip\n            matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n        >\n            <mat-icon>move_up</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.lift && menu.lift.show\"\n            [disabled]=\"menu.lift.disabled\"\n            (click)=\"run($event, 'lift')\"\n            i18n-matTooltip\n            matTooltip=\"D\u00E9sindenter\"\n        >\n            <mat-icon>format_indent_decrease</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\n            [disabled]=\"menu.selectParentNode.disabled\"\n            (click)=\"run($event, 'selectParentNode')\"\n            i18n-matTooltip\n            matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n        >\n            <mat-icon>select_all</mat-icon>\n        </button>\n    </div>\n</div>\n<div #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight: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: [{