@ecodev/natural-editor 41.2.0 → 42.0.0

package/fesm2015/ecodev-natural-editor.js

@@ -1,673 +0,0 @@
-import '@angular/localize/init';
-import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, EventEmitter, ElementRef, Optional, Self, ViewChild, Output, Input, NgModule } from '@angular/core';
-import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
-import { Plugin, TextSelection, EditorState } from 'prosemirror-state';
-import { exampleSetup } from 'prosemirror-example-setup';
-import { Schema, DOMSerializer, DOMParser } from 'prosemirror-model';
-import * as i6 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import { tableNodes, tableNodeTypes, addColumnBefore, addColumnAfter, deleteColumn, addRowBefore, addRowAfter, deleteRow, deleteTable, mergeCells, splitCell, toggleHeaderColumn, toggleHeaderRow, toggleHeaderCell, columnResizing, tableEditing, goToNextCell } from 'prosemirror-tables';
-import { keymap } from 'prosemirror-keymap';
-import { nodes, marks } from 'prosemirror-schema-basic';
-import { addListNodes, wrapInList } from 'prosemirror-schema-list';
-import { joinUpItem, liftItem, selectParentNodeItem, undoItem, redoItem, wrapItem, blockTypeItem } from 'prosemirror-menu';
-import { toggleMark } from 'prosemirror-commands';
-import * as i1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i4 from '@angular/forms';
-import { FormControl, Validators, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import * as i11 from '@ecodev/natural';
-import { ifValid, NaturalFileModule } from '@ecodev/natural';
-import * as i2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6$1 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i7 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i8 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i10 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatToolbarModule } from '@angular/material/toolbar';
-
-class ImagePlugin {
-    constructor(document) {
-        this.document = document;
-        this.plugin = new Plugin({
-            state: {
-                init() {
-                    return DecorationSet.empty;
-                },
-                apply(tr, set) {
-                    // Adjust decoration positions to changes made by the transaction
-                    set = set.map(tr.mapping, tr.doc);
-                    // See if the transaction adds or removes any placeholders
-                    const action = tr.getMeta(this);
-                    if (action && action.add) {
-                        const widget = document.createElement('placeholder');
-                        const deco = Decoration.widget(action.add.pos, widget, { id: action.add.id });
-                        set = set.add(tr.doc, [deco]);
-                    }
-                    else if (action && action.remove) {
-                        set = set.remove(set.find(undefined, undefined, spec => spec.id === action.remove.id));
-                    }
-                    return set;
-                },
-            },
-            props: {
-                decorations(state) {
-                    return this.getState(state);
-                },
-            },
-        });
-    }
-    findPlaceholder(state, id) {
-        const decorators = this.plugin.getState(state);
-        const found = decorators.find(undefined, undefined, spec => spec.id === id);
-        return found.length ? found[0].from : null;
-    }
-    startImageUpload(view, file, uploader, schema) {
-        // A fresh object to act as the ID for this upload
-        const id = {};
-        // Replace the selection with a placeholder
-        const tr = view.state.tr;
-        if (!tr.selection.empty) {
-            tr.deleteSelection();
-        }
-        tr.setMeta(this.plugin, { add: { id, pos: tr.selection.from } });
-        view.dispatch(tr);
-        uploader(file).subscribe({
-            next: url => {
-                const pos = this.findPlaceholder(view.state, id);
-                // If the content around the placeholder has been deleted, drop
-                // the image
-                if (pos === null) {
-                    return;
-                }
-                // Otherwise, insert it at the placeholder's position, and remove
-                // the placeholder
-                view.dispatch(view.state.tr
-                    .replaceWith(pos, pos, schema.nodes.image.create({ src: url }))
-                    .setMeta(this.plugin, { remove: { id } }));
-            },
-            error: () => {
-                // On failure, just clean up the placeholder
-                view === null || view === void 0 ? void 0 : view.dispatch(tr.setMeta(this.plugin, { remove: { id } }));
-            },
-        });
-    }
-}
-ImagePlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: ImagePlugin, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-ImagePlugin.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: ImagePlugin });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: ImagePlugin, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
-
-const basicNodes = {
-    heading: nodes.heading,
-    doc: nodes.doc,
-    paragraph: nodes.paragraph,
-    text: nodes.text,
-    hard_break: nodes.hard_break,
-};
-const basicMarks = {
-    link: marks.link,
-    em: marks.em,
-    strong: marks.strong,
-};
-const tmpSchema = new Schema({ nodes: basicNodes, marks: basicMarks });
-const basicSchema = new Schema({
-    nodes: addListNodes(tmpSchema.spec.nodes, 'paragraph block*', 'block'),
-    marks: tmpSchema.spec.marks,
-});
-const tmpSchema2 = new Schema({
-    nodes: Object.assign(Object.assign({}, nodes), tableNodes({
-        tableGroup: 'block',
-        cellContent: 'block+',
-        cellAttributes: {
-            background: {
-                default: null,
-                getFromDOM(dom) {
-                    return dom.style.backgroundColor || null;
-                },
-                setDOMAttr(value, attrs) {
-                    if (value) {
-                        attrs.style = (attrs.style || '') + `background-color: ${value};`;
-                    }
-                },
-            },
-        },
-    })),
-    marks: basicMarks,
-});
-const advancedSchema = new Schema({
-    nodes: addListNodes(tmpSchema2.spec.nodes, 'paragraph block*', 'block'),
-    marks: basicMarks,
-});
-
-class LinkDialogComponent {
-    constructor(data, dialogRef) {
-        this.dialogRef = dialogRef;
-        this.hrefControl = new FormControl('', Validators.required);
-        this.titleControl = new FormControl('');
-        this.form = new FormGroup({
-            href: this.hrefControl,
-            title: this.titleControl,
-        });
-        this.form.setValue(data);
-    }
-    maybeConfirm() {
-        ifValid(this.form).subscribe(() => this.confirm());
-    }
-    confirm() {
-        this.dialogRef.close(this.form.value);
-    }
-}
-LinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: LinkDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.9", type: LinkDialogComponent, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>Ins\u00E9rer un lien</h2>\n\n<mat-dialog-content [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n>URL</mat-label>\n        <input matInput [formControl]=\"hrefControl\" (keydown.enter)=\"maybeConfirm()\" />\n        <mat-error *ngIf=\"hrefControl.hasError('required')\" i18n>Ce champ est requis</mat-error>\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label i18n>Titre</mat-label>\n        <input matInput [formControl]=\"titleControl\" (keydown.enter)=\"maybeConfirm()\" />\n    </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-button [mat-dialog-close] i18n>Annuler</button>\n    <button mat-stroked-button (click)=\"maybeConfirm()\" [disabled]=\"!form.valid\"><span i18n>Valider</span></button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;flex-direction:row;justify-content:flex-end}mat-dialog-content{width:70vw;max-width:60em;display:grid}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: LinkDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './link-dialog.component.html',
-                    styleUrls: ['./link-dialog.component.scss'],
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }]; } });
-
-function createCell(cellType, cellContent) {
-    return cellContent ? cellType.createChecked(null, cellContent) : cellType.createAndFill();
-}
-function createTable(state, rowsCount, colsCount, withHeaderRow, cellContent) {
-    const types = tableNodeTypes(state.schema);
-    const headerCells = [];
-    const cells = [];
-    for (let index = 0; index < colsCount; index += 1) {
-        const cell = createCell(types.cell, cellContent);
-        if (cell) {
-            cells.push(cell);
-        }
-        if (withHeaderRow) {
-            const headerCell = createCell(types.header_cell, cellContent);
-            if (headerCell) {
-                headerCells.push(headerCell);
-            }
-        }
-    }
-    const rows = [];
-    for (let index = 0; index < rowsCount; index += 1) {
-        rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells));
-    }
-    return types.table.createChecked(null, rows);
-}
-function addTable(state, dispatch, { rowsCount = 3, colsCount = 3, withHeaderRow = true, cellContent, } = {}) {
-    const offset = state.tr.selection.anchor + 1;
-    const nodes = createTable(state, rowsCount, colsCount, withHeaderRow, cellContent);
-    const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
-    const resolvedPos = tr.doc.resolve(offset);
-    // move cursor into table
-    tr.setSelection(TextSelection.near(resolvedPos));
-    dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
-}
-
-/**
- * One item of the menu.
- *
- * This is the equivalent of `MenuItem` but without all the rendering logic since we use Angular
- * templates for rendering. Also it caches the state of the item everytime the editor state changes,
- * so Angular can query the state as often as needed without performance hit.
- */
-class Item {
-    constructor(spec) {
-        this.spec = spec;
-        /**
-         * Whether the item is 'active' (for example, the item for toggling the strong mark might be active when the cursor is in strong text).
-         */
-        this.active = false;
-        /**
-         * Button is shown but disabled, because the item cannot be (un-)applied
-         */
-        this.disabled = false;
-        /**
-         * Whether the item is shown at the moment
-         */
-        this.show = true;
-    }
-    /**
-     * Update the item state according to the editor state
-     */
-    update(view, state) {
-        if (this.spec.active) {
-            this.active = this.spec.active(state);
-        }
-        if (this.spec.enable) {
-            this.disabled = !this.spec.enable(state);
-        }
-        if (this.spec.select) {
-            this.show = this.spec.select(state);
-        }
-    }
-}
-/**
- * Convert built-in `MenuItem` into our Angular specific `Item`
- */
-function toItem(item) {
-    return new Item(item.spec);
-}
-function canInsert(state, nodeType) {
-    const $from = state.selection.$from;
-    for (let d = $from.depth; d >= 0; d--) {
-        const index = $from.index(d);
-        if ($from.node(d).canReplaceWith(index, index, nodeType)) {
-            return true;
-        }
-    }
-    return false;
-}
-function cmdItem(cmd, options = {}, useEnable = false) {
-    const passedOptions = Object.assign({ run: cmd }, options);
-    if ((!options.enable || useEnable) && !options.select) {
-        passedOptions[options.enable ? 'enable' : 'select'] = (state) => cmd(state);
-    }
-    return new Item(passedOptions);
-}
-function markActive(state, type) {
-    const { from, $from, to, empty } = state.selection;
-    if (empty) {
-        return !!type.isInSet(state.storedMarks || $from.marks());
-    }
-    else {
-        return state.doc.rangeHasMark(from, to, type);
-    }
-}
-function markItem(markType, options = {}) {
-    const passedOptions = Object.assign({ active(state) {
-            return markActive(state, markType);
-        } }, options);
-    return cmdItem(toggleMark(markType), passedOptions, true);
-}
-function linkItem(markType, dialog) {
-    return new Item({
-        active(state) {
-            return markActive(state, markType);
-        },
-        enable(state) {
-            return !state.selection.empty;
-        },
-        run(state, dispatch, view) {
-            if (markActive(state, markType)) {
-                toggleMark(markType)(state, dispatch);
-                return true;
-            }
-            dialog
-                .open(LinkDialogComponent, {
-                data: {
-                    href: '',
-                    title: '',
-                },
-            })
-                .afterClosed()
-                .subscribe(result => {
-                if (result) {
-                    if (!result.title) {
-                        delete result.title;
-                    }
-                    toggleMark(markType, result)(view.state, view.dispatch);
-                }
-                view.focus();
-            });
-        },
-    });
-}
-function wrapListItem(nodeType) {
-    return cmdItem(wrapInList(nodeType));
-}
-/**
- * Given a schema, look for default mark and node types in it and
- * return an object with relevant menu items relating to those marks:
- */
-function buildMenuItems(schema, dialog) {
-    const r = {
-        joinUp: toItem(joinUpItem),
-        lift: toItem(liftItem),
-        selectParentNode: toItem(selectParentNodeItem),
-        undo: toItem(undoItem),
-        redo: toItem(redoItem),
-    };
-    let type;
-    type = schema.marks.strong;
-    if (type) {
-        r.toggleStrong = markItem(type);
-    }
-    type = schema.marks.em;
-    if (type) {
-        r.toggleEm = markItem(type);
-    }
-    type = schema.marks.code;
-    if (type) {
-        r.toggleCode = markItem(type);
-    }
-    type = schema.marks.link;
-    if (type) {
-        r.toggleLink = linkItem(type, dialog);
-    }
-    type = schema.nodes.bullet_list;
-    if (type) {
-        r.wrapBulletList = wrapListItem(type);
-    }
-    type = schema.nodes.ordered_list;
-    if (type) {
-        r.wrapOrderedList = wrapListItem(type);
-    }
-    type = schema.nodes.blockquote;
-    if (type) {
-        r.wrapBlockQuote = toItem(wrapItem(type, {}));
-    }
-    type = schema.nodes.paragraph;
-    if (type) {
-        r.makeParagraph = toItem(blockTypeItem(type, {}));
-    }
-    type = schema.nodes.code_block;
-    if (type) {
-        r.makeCodeBlock = toItem(blockTypeItem(type, {}));
-    }
-    type = schema.nodes.heading;
-    if (type) {
-        r.makeHead1 = toItem(blockTypeItem(type, { attrs: { level: 1 } }));
-        r.makeHead2 = toItem(blockTypeItem(type, { attrs: { level: 2 } }));
-        r.makeHead3 = toItem(blockTypeItem(type, { attrs: { level: 3 } }));
-        r.makeHead4 = toItem(blockTypeItem(type, { attrs: { level: 4 } }));
-        r.makeHead5 = toItem(blockTypeItem(type, { attrs: { level: 5 } }));
-        r.makeHead6 = toItem(blockTypeItem(type, { attrs: { level: 6 } }));
-    }
-    type = schema.nodes.horizontal_rule;
-    if (type) {
-        const hr = type;
-        r.insertHorizontalRule = new Item({
-            enable(state) {
-                return canInsert(state, hr);
-            },
-            run(state, dispatch) {
-                dispatch(state.tr.replaceSelectionWith(hr.create()));
-            },
-        });
-    }
-    type = schema.nodes.table;
-    if (type) {
-        r.insertTable = new Item({ run: (e, tr) => addTable(e, tr) });
-        r.addColumnBefore = new Item({ run: addColumnBefore });
-        r.addColumnAfter = new Item({ run: addColumnAfter });
-        r.deleteColumn = new Item({ run: deleteColumn });
-        r.addRowBefore = new Item({ run: addRowBefore });
-        r.addRowAfter = new Item({ run: addRowAfter });
-        r.deleteRow = new Item({ run: deleteRow });
-        r.deleteTable = new Item({ run: deleteTable });
-        r.mergeCells = new Item({ run: mergeCells });
-        r.splitCell = new Item({ run: splitCell });
-        r.toggleHeaderColumn = new Item({ run: toggleHeaderColumn });
-        r.toggleHeaderRow = new Item({ run: toggleHeaderRow });
-        r.toggleHeaderCell = new Item({ run: toggleHeaderCell });
-    }
-    return r;
-}
-
-/**
- * Prosemirror component
- *
- * Usage :
- *
- * ```html
- * <natural-editor [(ngModel)]="htmlString"></natural-editor>
- * ```
- */
-// @dynamic
-class NaturalEditorComponent {
-    constructor(ngControl, document, dialog, imagePlugin) {
-        this.ngControl = ngControl;
-        this.document = document;
-        this.dialog = dialog;
-        this.imagePlugin = imagePlugin;
-        this.view = null;
-        this.contentChange = new EventEmitter();
-        /**
-         * Callback to upload an image.
-         *
-         * If given it will enable advanced schema, including image and tables.
-         * It must be given on initialization and cannot be changed later on.
-         */
-        this.imageUploader = null;
-        this.schema = basicSchema;
-        /**
-         * HTML string
-         */
-        this.content = '';
-        this.menu = null;
-        /**
-         * If subscribed to, then the save button will be shown and click events forwarded
-         */
-        this.save = new EventEmitter();
-        if (this.ngControl !== null) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    ngOnInit() {
-        this.schema = this.imageUploader ? advancedSchema : basicSchema;
-        this.menu = buildMenuItems(this.schema, this.dialog);
-        const serializer = DOMSerializer.fromSchema(this.schema);
-        const state = this.createState();
-        this.view = new EditorView(this.editor.nativeElement, {
-            state: state,
-            dispatchTransaction: (transaction) => {
-                if (!this.view) {
-                    return;
-                }
-                const newState = this.view.state.apply(transaction);
-                this.view.updateState(newState);
-                // Transform doc into HTML string
-                const dom = serializer.serializeFragment(this.view.state.doc);
-                const el = this.document.createElement('_');
-                el.appendChild(dom);
-                const newContent = el.innerHTML;
-                if (this.content === newContent) {
-                    return;
-                }
-                this.content = el.innerHTML;
-                if (this.onChange) {
-                    this.onChange(this.content);
-                }
-                this.contentChange.emit(this.content);
-            },
-        });
-        this.update();
-    }
-    writeValue(val) {
-        if (typeof val === 'string' && val !== this.content) {
-            this.content = val;
-        }
-        if (this.view !== null) {
-            const state = this.createState();
-            this.view.updateState(state);
-        }
-    }
-    createState() {
-        const template = this.document.createElement('_');
-        template.innerHTML = '<div>' + this.content + '</div>';
-        if (!template.firstChild) {
-            throw new Error('child of template element could not be created');
-        }
-        const parser = DOMParser.fromSchema(this.schema);
-        const doc = parser.parse(template.firstChild);
-        const plugins = [
-            ...exampleSetup({ schema: this.schema, menuBar: false }),
-            new Plugin({
-                view: () => this,
-            }),
-        ];
-        if (this.schema === advancedSchema) {
-            plugins.push(this.imagePlugin.plugin, columnResizing(undefined), tableEditing(), keymap({
-                Tab: goToNextCell(1),
-                'Shift-Tab': goToNextCell(-1),
-            }));
-        }
-        return EditorState.create({
-            doc: doc,
-            plugins: plugins,
-        });
-    }
-    /**
-     * Called by Prosemirror whenever the editor state changes. So we update our menu states.
-     */
-    update() {
-        if (!this.view || !this.menu) {
-            return;
-        }
-        for (const item of Object.values(this.menu)) {
-            item.update(this.view, this.view.state);
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) { }
-    setDisabledState(isDisabled) {
-        // TODO disable editor ?
-    }
-    ngOnDestroy() {
-        if (this.view) {
-            this.view.destroy();
-            this.view = null;
-        }
-    }
-    run(event, key) {
-        if (!this.view || !this.menu) {
-            return;
-        }
-        const item = this.menu[key];
-        if (!item || item.disabled || !item.show) {
-            return;
-        }
-        item.spec.run(this.view.state, this.view.dispatch, this.view, event);
-        this.view.focus();
-    }
-    upload(file) {
-        if (!this.view || !this.imageUploader) {
-            return;
-        }
-        if (this.view.state.selection.$from.parent.inlineContent) {
-            this.imagePlugin.startImageUpload(this.view, file, this.imageUploader, this.schema);
-        }
-        this.view.focus();
-    }
-}
-NaturalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i1.MatDialog }, { token: ImagePlugin }], target: i0.ɵɵFactoryTarget.Component });
-NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.9", type: NaturalEditorComponent, selector: "natural-editor", inputs: { imageUploader: "imageUploader" }, outputs: { contentChange: "contentChange", save: "save" }, providers: [ImagePlugin], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"menu-container\" *ngIf=\"menu\">\n    <div class=\"menu\">\n        <button mat-button *ngIf=\"save.observed\" (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n            <mat-icon>save</mat-icon>\n        </button>\n\n        <mat-button-toggle-group multiple>\n            <mat-button-toggle\n                *ngIf=\"menu.toggleStrong\"\n                [disabled]=\"menu.toggleStrong.disabled\"\n                [checked]=\"menu.toggleStrong.active\"\n                (click)=\"run($event, 'toggleStrong')\"\n                i18n-matTooltip\n                matTooltip=\"Gras\"\n            >\n                <mat-icon>format_bold</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleEm\"\n                [disabled]=\"menu.toggleEm.disabled\"\n                [checked]=\"menu.toggleEm.active\"\n                (click)=\"run($event, 'toggleEm')\"\n                i18n-matTooltip\n                matTooltip=\"Italique\"\n            >\n                <mat-icon>format_italic</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleCode\"\n                [disabled]=\"menu.toggleCode.disabled\"\n                [checked]=\"menu.toggleCode.active\"\n                (click)=\"run($event, 'toggleCode')\"\n                i18n-matTooltip\n                matTooltip=\"Code\"\n            >\n                <mat-icon>code</mat-icon>\n            </mat-button-toggle>\n\n            <mat-button-toggle\n                *ngIf=\"menu.toggleLink\"\n                [disabled]=\"menu.toggleLink.disabled\"\n                [checked]=\"menu.toggleLink.active\"\n                (click)=\"run($event, 'toggleLink')\"\n                i18n-matTooltip\n                matTooltip=\"Ins\u00E9rer un lien...\"\n            >\n                <mat-icon>insert_link</mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n\n        <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n            <span i18n>Type</span>\n            <mat-icon>arrow_drop_down</mat-icon>\n        </button>\n\n        <mat-menu #blockMenu=\"matMenu\">\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeParagraph\"\n                [disabled]=\"menu.makeParagraph.disabled\"\n                (click)=\"run($event, 'makeParagraph')\"\n                i18n\n                >Paragraphe\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeCodeBlock\"\n                [disabled]=\"menu.makeCodeBlock.disabled\"\n                (click)=\"run($event, 'makeCodeBlock')\"\n                i18n\n                >Code\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead1\"\n                [disabled]=\"menu.makeHead1.disabled\"\n                (click)=\"run($event, 'makeHead1')\"\n                i18n\n                >Titre 1\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead2\"\n                [disabled]=\"menu.makeHead2.disabled\"\n                (click)=\"run($event, 'makeHead2')\"\n                i18n\n                >Titre 2\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead3\"\n                [disabled]=\"menu.makeHead3.disabled\"\n                (click)=\"run($event, 'makeHead3')\"\n                i18n\n                >Titre 3\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead4\"\n                [disabled]=\"menu.makeHead4.disabled\"\n                (click)=\"run($event, 'makeHead4')\"\n                i18n\n                >Titre 4\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead5\"\n                [disabled]=\"menu.makeHead5.disabled\"\n                (click)=\"run($event, 'makeHead5')\"\n                i18n\n                >Titre 5\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.makeHead6\"\n                [disabled]=\"menu.makeHead6.disabled\"\n                (click)=\"run($event, 'makeHead6')\"\n                i18n\n                >Titre 6\n            </button>\n        </mat-menu>\n\n        <button mat-button [matMenuTriggerFor]=\"tableMenu\" *ngIf=\"menu.addColumnBefore\">\n            <span i18n>Tableau</span>\n            <mat-icon>arrow_drop_down</mat-icon>\n        </button>\n\n        <mat-menu #tableMenu=\"matMenu\">\n            <button\n                mat-menu-item\n                *ngIf=\"menu.insertTable\"\n                [disabled]=\"menu.insertTable.disabled\"\n                (click)=\"run($event, 'insertTable')\"\n                i18n\n                >Ins\u00E9rer un tableau\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteTable\"\n                [disabled]=\"menu.deleteTable.disabled\"\n                (click)=\"run($event, 'deleteTable')\"\n                i18n\n                >Supprimer le tableau\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.mergeCells\"\n                [disabled]=\"menu.mergeCells.disabled\"\n                (click)=\"run($event, 'mergeCells')\"\n                i18n\n                >Fusionner les cellules\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.splitCell\"\n                [disabled]=\"menu.splitCell.disabled\"\n                (click)=\"run($event, 'splitCell')\"\n                i18n\n                >Scinder les cellules\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addColumnBefore\"\n                [disabled]=\"menu.addColumnBefore.disabled\"\n                (click)=\"run($event, 'addColumnBefore')\"\n                i18n\n                >Ins\u00E9rer une colonne avant\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addColumnAfter\"\n                [disabled]=\"menu.addColumnAfter.disabled\"\n                (click)=\"run($event, 'addColumnAfter')\"\n                i18n\n                >Ins\u00E9rer une colonne apr\u00E8s\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteColumn\"\n                [disabled]=\"menu.deleteColumn.disabled\"\n                (click)=\"run($event, 'deleteColumn')\"\n                i18n\n                >Supprimer la colonne\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addRowBefore\"\n                [disabled]=\"menu.addRowBefore.disabled\"\n                (click)=\"run($event, 'addRowBefore')\"\n                i18n\n                >Ins\u00E9rer une ligne avant\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.addRowAfter\"\n                [disabled]=\"menu.addRowAfter.disabled\"\n                (click)=\"run($event, 'addRowAfter')\"\n                i18n\n                >Ins\u00E9rer une ligne apr\u00E8s\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.deleteRow\"\n                [disabled]=\"menu.deleteRow.disabled\"\n                (click)=\"run($event, 'deleteRow')\"\n                i18n\n                >Supprimer la ligne\n            </button>\n\n            <mat-divider></mat-divider>\n\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderColumn\"\n                [disabled]=\"menu.toggleHeaderColumn.disabled\"\n                (click)=\"run($event, 'toggleHeaderColumn')\"\n                i18n\n                >Ent\u00EAte de colonne\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderRow\"\n                [disabled]=\"menu.toggleHeaderRow.disabled\"\n                (click)=\"run($event, 'toggleHeaderRow')\"\n                i18n\n                >Ent\u00EAte de ligne\n            </button>\n            <button\n                mat-menu-item\n                *ngIf=\"menu.toggleHeaderCell\"\n                [disabled]=\"menu.toggleHeaderCell.disabled\"\n                (click)=\"run($event, 'toggleHeaderCell')\"\n                i18n\n                >Ent\u00EAte de cellule\n            </button>\n        </mat-menu>\n\n        <button\n            mat-button\n            *ngIf=\"imageUploader\"\n            naturalFileDrop\n            [selectable]=\"true\"\n            [broadcast]=\"false\"\n            i18n-matTooltip\n            matTooltip=\"Ins\u00E9rer une image\"\n            (fileChange)=\"upload($event)\"\n        >\n            <mat-icon>insert_photo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.undo\"\n            [disabled]=\"menu.undo.disabled\"\n            (click)=\"run($event, 'undo')\"\n            i18n-matTooltip\n            matTooltip=\"Annuler\"\n        >\n            <mat-icon>undo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.redo\"\n            [disabled]=\"menu.redo.disabled\"\n            (click)=\"run($event, 'redo')\"\n            i18n-matTooltip\n            matTooltip=\"Refaire\"\n        >\n            <mat-icon>redo</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n            [disabled]=\"menu.wrapBulletList.disabled\"\n            (click)=\"run($event, 'wrapBulletList')\"\n            i18n-matTooltip\n            matTooltip=\"Liste \u00E0 puce\"\n        >\n            <mat-icon>format_list_bulleted</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n            [disabled]=\"menu.wrapOrderedList.disabled\"\n            (click)=\"run($event, 'wrapOrderedList')\"\n            i18n-matTooltip\n            matTooltip=\"Liste \u00E0 num\u00E9ro\"\n        >\n            <mat-icon>format_list_numbered</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n            [disabled]=\"menu.wrapBlockQuote.disabled\"\n            (click)=\"run($event, 'wrapBlockQuote')\"\n            i18n-matTooltip\n            matTooltip=\"Citation\"\n        >\n            <mat-icon>format_quote</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.joinUp && menu.joinUp.show\"\n            [disabled]=\"menu.joinUp.disabled\"\n            (click)=\"run($event, 'joinUp')\"\n            i18n-matTooltip\n            matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n        >\n            <mat-icon>move_up</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.lift && menu.lift.show\"\n            [disabled]=\"menu.lift.disabled\"\n            (click)=\"run($event, 'lift')\"\n            i18n-matTooltip\n            matTooltip=\"D\u00E9sindenter\"\n        >\n            <mat-icon>format_indent_decrease</mat-icon>\n        </button>\n\n        <button\n            mat-button\n            *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\n            [disabled]=\"menu.selectParentNode.disabled\"\n            (click)=\"run($event, 'selectParentNode')\"\n            i18n-matTooltip\n            matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n        >\n            <mat-icon>select_all</mat-icon>\n        </button>\n    </div>\n</div>\n<div #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:bold;text-align:left}::ng-deep placeholder{display:block;width:50px;height:50px;background-size:500% 100%!important;animation:gradient 3s none infinite}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'natural-editor',
-                    templateUrl: './editor.component.html',
-                    styleUrls: ['./editor.component.scss'],
-                    providers: [ImagePlugin],
-                }]
-        }], ctorParameters: function () { return [{ type: i4.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i1.MatDialog }, { type: ImagePlugin }]; }, propDecorators: { editor: [{
-                type: ViewChild,
-                args: ['editor', { read: ElementRef, static: true }]
-            }], contentChange: [{
-                type: Output
-            }], imageUploader: [{
-                type: Input
-            }], save: [{
-                type: Output
-            }] } });
-
-const imports = [
-    CommonModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-    MatMenuModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    ReactiveFormsModule,
-    NaturalFileModule,
-    MatDividerModule,
-];
-class NaturalEditorModule {
-}
-NaturalEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NaturalEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorModule, declarations: [NaturalEditorComponent, LinkDialogComponent], imports: [CommonModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        NaturalFileModule,
-        MatDividerModule], exports: [CommonModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        NaturalFileModule,
-        MatDividerModule, NaturalEditorComponent] });
-NaturalEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorModule, imports: [[...imports], CommonModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        NaturalFileModule,
-        MatDividerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalEditorComponent, LinkDialogComponent],
-                    imports: [...imports],
-                    exports: [...imports, NaturalEditorComponent],
-                }]
-        }] });
-
-// Load `$localize` onto the global scope - to be able to use that function to translate strings in components/services.
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NaturalEditorComponent, NaturalEditorModule };
-//# sourceMappingURL=ecodev-natural-editor.js.map