@ecodev/natural-editor 1.1.0

package/fesm2015/ecodev-natural-editor.js

@@ -0,0 +1,508 @@
+import '@angular/localize/init';
+import * as i0 from '@angular/core';
+import { Component, Inject, EventEmitter, ElementRef, Optional, Self, ViewChild, Output, NgModule } from '@angular/core';
+import { EditorView } from 'prosemirror-view';
+import { EditorState, Plugin } from 'prosemirror-state';
+import { exampleSetup } from 'prosemirror-example-setup';
+import { Schema, DOMSerializer, DOMParser } from 'prosemirror-model';
+import { nodes, marks } from 'prosemirror-schema-basic';
+import { addListNodes, wrapInList } from 'prosemirror-schema-list';
+import * as i6 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { 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 i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i4$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i5$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i9 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+const myNodes = {
+    heading: nodes.heading,
+    doc: nodes.doc,
+    paragraph: nodes.paragraph,
+    text: nodes.text,
+    hard_break: nodes.hard_break,
+};
+const myMarks = {
+    link: marks.link,
+    em: marks.em,
+    strong: marks.strong,
+};
+const basicSchema = new Schema({ nodes: myNodes, marks: myMarks });
+const schema = new Schema({
+    nodes: addListNodes(basicSchema.spec.nodes, 'paragraph block*', 'block'),
+    marks: basicSchema.spec.marks,
+});
+
+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() {
+        if (this.form.valid) {
+            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 }]; } });
+
+/**
+ * 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 insertImageItem(nodeType: NodeType) {
+//     return new MenuItem({
+//         enable(state): boolean {
+//             return canInsert(state, nodeType);
+//         },
+//         run(state, _, view) {
+//             let {from, to} = state.selection,
+//                 attrs = null;
+//             if (state.selection instanceof NodeSelection && state.selection.node.type == nodeType) {
+//                 attrs = state.selection.node.attrs;
+//             }
+//             openPrompt({
+//                 title: 'Insert image',
+//                 fields: {
+//                     src: new TextField({label: 'Location', required: true, value: attrs && attrs.src}),
+//                     title: new TextField({label: 'Title', value: attrs && attrs.title}),
+//                     alt: new TextField({
+//                         label: 'Description',
+//                         value: attrs ? attrs.alt : state.doc.textBetween(from, to, ' '),
+//                     }),
+//                 },
+//                 callback(attrs) {
+//                     view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(attrs)));
+//                     view.focus();
+//                 },
+//             });
+//         },
+//     });
+// }
+function cmdItem(cmd, options = {}, useEnable = false) {
+    const passedOptions = Object.assign({ run: cmd }, options);
+    if ((!options.enable || useEnable) && !options.select) {
+        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 && !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.image;
+    if (type) {
+        // r.insertImage = insertImageItem(type);
+    }
+    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()));
+            },
+        });
+    }
+    return r;
+}
+
+/**
+ * Prosemirror component
+ *
+ * Usage :
+ *
+ * ```html
+ * <natural-editor [(ngModel)]="htmlString"></natural-editor>
+ * ```
+ */
+// @dynamic
+class NaturalEditorComponent {
+    constructor(ngControl, document, dialog) {
+        this.ngControl = ngControl;
+        this.document = document;
+        this.dialog = dialog;
+        this.view = null;
+        this.contentChange = new EventEmitter();
+        /**
+         * HTML string
+         */
+        this.content = '';
+        this.menu = null;
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.menu = buildMenuItems(schema, this.dialog);
+        const serializer = DOMSerializer.fromSchema(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(schema);
+        const doc = parser.parse(template.firstChild);
+        const self = this;
+        return EditorState.create({
+            doc: doc,
+            plugins: [
+                ...exampleSetup({ schema, menuBar: false }),
+                new Plugin({
+                    view: () => self,
+                }),
+            ],
+        });
+    }
+    /**
+     * 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();
+    }
+}
+NaturalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.9", type: NaturalEditorComponent, selector: "natural-editor", outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar *ngIf=\"menu\">\n    <mat-button-toggle-group multiple>\n        <mat-button-toggle\n            *ngIf=\"menu.toggleStrong\"\n            [disabled]=\"menu.toggleStrong.disabled\"\n            [checked]=\"menu.toggleStrong.active\"\n            (click)=\"run($event, 'toggleStrong')\"\n            i18n-matTooltip\n            matTooltip=\"Gras\"\n        >\n            <mat-icon>format_bold</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle\n            *ngIf=\"menu.toggleEm\"\n            [disabled]=\"menu.toggleEm.disabled\"\n            [checked]=\"menu.toggleEm.active\"\n            (click)=\"run($event, 'toggleEm')\"\n            i18n-matTooltip\n            matTooltip=\"Italique\"\n        >\n            <mat-icon>format_italic</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle\n            *ngIf=\"menu.toggleCode\"\n            [disabled]=\"menu.toggleCode.disabled\"\n            [checked]=\"menu.toggleCode.active\"\n            (click)=\"run($event, 'toggleCode')\"\n            i18n-matTooltip\n            matTooltip=\"Code\"\n        >\n            <mat-icon>code</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle\n            *ngIf=\"menu.toggleLink\"\n            [disabled]=\"menu.toggleLink.disabled\"\n            [checked]=\"menu.toggleLink.active\"\n            (click)=\"run($event, 'toggleLink')\"\n            i18n-matTooltip\n            matTooltip=\"Ins\u00E9rer un lien...\"\n        >\n            <mat-icon>insert_link</mat-icon>\n        </mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n        <span i18n>Type</span>\n        <mat-icon>arrow_drop_down</mat-icon>\n    </button>\n\n    <mat-menu #blockMenu=\"matMenu\">\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeParagraph\"\n            [disabled]=\"menu.makeParagraph.disabled\"\n            (click)=\"run($event, 'makeParagraph')\"\n            i18n\n            >Paragraphe\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeCodeBlock\"\n            [disabled]=\"menu.makeCodeBlock.disabled\"\n            (click)=\"run($event, 'makeCodeBlock')\"\n            i18n\n            >Code\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead1\"\n            [disabled]=\"menu.makeHead1.disabled\"\n            (click)=\"run($event, 'makeHead1')\"\n            i18n\n            >Titre 1\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead2\"\n            [disabled]=\"menu.makeHead2.disabled\"\n            (click)=\"run($event, 'makeHead2')\"\n            i18n\n            >Titre 2\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead3\"\n            [disabled]=\"menu.makeHead3.disabled\"\n            (click)=\"run($event, 'makeHead3')\"\n            i18n\n            >Titre 3\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead4\"\n            [disabled]=\"menu.makeHead4.disabled\"\n            (click)=\"run($event, 'makeHead4')\"\n            i18n\n            >Titre 4\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead5\"\n            [disabled]=\"menu.makeHead5.disabled\"\n            (click)=\"run($event, 'makeHead5')\"\n            i18n\n            >Titre 5\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead6\"\n            [disabled]=\"menu.makeHead6.disabled\"\n            (click)=\"run($event, 'makeHead6')\"\n            i18n\n            >Titre 6\n        </button>\n    </mat-menu>\n\n    <button\n        mat-button\n        *ngIf=\"menu.undo\"\n        [disabled]=\"menu.undo.disabled\"\n        (click)=\"run($event, 'undo')\"\n        i18n-matTooltip\n        matTooltip=\"Annuler\"\n    >\n        <mat-icon>undo</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.redo\"\n        [disabled]=\"menu.redo.disabled\"\n        (click)=\"run($event, 'redo')\"\n        i18n-matTooltip\n        matTooltip=\"Refaire\"\n    >\n        <mat-icon>redo</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n        [disabled]=\"menu.wrapBulletList.disabled\"\n        (click)=\"run($event, 'wrapBulletList')\"\n        i18n-matTooltip\n        matTooltip=\"Liste \u00E0 puce\"\n    >\n        <mat-icon>format_list_bulleted</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n        [disabled]=\"menu.wrapOrderedList.disabled\"\n        (click)=\"run($event, 'wrapOrderedList')\"\n        i18n-matTooltip\n        matTooltip=\"Liste \u00E0 num\u00E9ro\"\n    >\n        <mat-icon>format_list_numbered</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n        [disabled]=\"menu.wrapBlockQuote.disabled\"\n        (click)=\"run($event, 'wrapBlockQuote')\"\n        i18n-matTooltip\n        matTooltip=\"Citation\"\n    >\n        <mat-icon>format_quote</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.joinUp && menu.joinUp.show\"\n        [disabled]=\"menu.joinUp.disabled\"\n        (click)=\"run($event, 'joinUp')\"\n        i18n-matTooltip\n        matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n    >\n        <mat-icon>move_up</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.lift && menu.lift.show\"\n        [disabled]=\"menu.lift.disabled\"\n        (click)=\"run($event, 'lift')\"\n        i18n-matTooltip\n        matTooltip=\"D\u00E9sindenter\"\n    >\n        <mat-icon>format_indent_decrease</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\n        [disabled]=\"menu.selectParentNode.disabled\"\n        (click)=\"run($event, 'selectParentNode')\"\n        i18n-matTooltip\n        matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n    >\n        <mat-icon>select_all</mat-icon>\n    </button>\n</mat-toolbar>\n<div #editor></div>\n", styles: ["::ng-deep .ProseMirror{position:relative;background:rgba(0,0,0,.1)}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep #editor,::ng-deep .editor{background:white;color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}\n"], components: [{ type: i3$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+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'],
+                }]
+        }], ctorParameters: function () { return [{ type: i4.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1.MatDialog }]; }, propDecorators: { editor: [{
+                type: ViewChild,
+                args: ['editor', { read: ElementRef, static: true }]
+            }], contentChange: [{
+                type: Output
+            }] } });
+
+const imports = [
+    CommonModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+];
+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], exports: [CommonModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        ReactiveFormsModule, 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] });
+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

package/fesm2015/ecodev-natural-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ecodev-natural-editor.js","sources":["../../../projects/natural-editor/src/lib/schema.ts","../../../projects/natural-editor/src/lib/link-dialog/link-dialog.component.ts","../../../projects/natural-editor/src/lib/link-dialog/link-dialog.component.html","../../../projects/natural-editor/src/lib/menu.ts","../../../projects/natural-editor/src/lib/editor.component.ts","../../../projects/natural-editor/src/lib/editor.component.html","../../../projects/natural-editor/src/lib/editor.module.ts","../../../projects/natural-editor/src/public-api.ts","../../../projects/natural-editor/src/ecodev-natural-editor.ts"],"sourcesContent":["import {marks, nodes} from 'prosemirror-schema-basic';\nimport {addListNodes} from 'prosemirror-schema-list';\nimport {Schema} from 'prosemirror-model';\n\n// Keep only basic elements\ntype BasicNodes = Omit<typeof nodes, 'image' | 'code_block' | 'blockquote' | 'horizontal_rule'>;\nconst myNodes: BasicNodes = {\n    heading: nodes.heading,\n    doc: nodes.doc,\n    paragraph: nodes.paragraph,\n    text: nodes.text,\n    hard_break: nodes.hard_break,\n};\n\ntype BasicMarks = Omit<typeof marks, 'code'>;\nconst myMarks: BasicMarks = {\n    link: marks.link,\n    em: marks.em,\n    strong: marks.strong,\n};\n\nconst basicSchema = new Schema({nodes: myNodes, marks: myMarks});\n\nexport const schema = new Schema({\n    nodes: addListNodes(basicSchema.spec.nodes as any, 'paragraph block*', 'block'),\n    marks: basicSchema.spec.marks,\n});\n","import {Component, Inject} from '@angular/core';\nimport {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';\nimport {FormControl, FormGroup, Validators} from '@angular/forms';\n\nexport interface LinkDialogData {\n    href: string;\n    title?: string;\n}\n\n@Component({\n    templateUrl: './link-dialog.component.html',\n    styleUrls: ['./link-dialog.component.scss'],\n})\nexport class LinkDialogComponent {\n    public readonly hrefControl = new FormControl('', Validators.required);\n    public readonly titleControl = new FormControl('');\n    public readonly form = new FormGroup({\n        href: this.hrefControl,\n        title: this.titleControl,\n    });\n\n    constructor(\n        @Inject(MAT_DIALOG_DATA) data: LinkDialogData,\n        private dialogRef: MatDialogRef<LinkDialogComponent, LinkDialogData>,\n    ) {\n        this.form.setValue(data);\n    }\n\n    public maybeConfirm(): void {\n        if (this.form.valid) {\n            this.confirm();\n        }\n    }\n\n    private confirm(): void {\n        this.dialogRef.close(this.form.value);\n    }\n}\n","<h2 i18n mat-dialog-title>Insérer 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","import {\n    blockTypeItem,\n    joinUpItem,\n    liftItem,\n    MenuItem,\n    MenuItemSpec,\n    redoItem,\n    selectParentNodeItem,\n    undoItem,\n    wrapItem,\n} from 'prosemirror-menu';\nimport {EditorState, Transaction} from 'prosemirror-state';\nimport {Command, toggleMark} from 'prosemirror-commands';\nimport {wrapInList} from 'prosemirror-schema-list';\nimport {MarkType, NodeType, Schema} from 'prosemirror-model';\nimport {MatDialog} from '@angular/material/dialog';\nimport {LinkDialogComponent, LinkDialogData} from './link-dialog/link-dialog.component';\nimport {EditorView} from 'prosemirror-view';\n\n/**\n * One item of the menu.\n *\n * This is the equivalent of `MenuItem` but without all the rendering logic since we use Angular\n * templates for rendering. Also it caches the state of the item everytime the editor state changes,\n * so Angular can query the state as often as needed without performance hit.\n */\nexport class Item {\n    /**\n     * Whether the item is 'active' (for example, the item for toggling the strong mark might be active when the cursor is in strong text).\n     */\n    public active = false;\n\n    /**\n     * Button is shown but disabled, because the item cannot be (un-)applied\n     */\n    public disabled = false;\n\n    /**\n     * Whether the item is shown at the moment\n     */\n    public show = true;\n\n    constructor(public readonly spec: MenuItemSpec) {}\n\n    /**\n     * Update the item state according to the editor state\n     */\n    public update(view: EditorView, state: EditorState): void {\n        if (this.spec.active) {\n            this.active = this.spec.active(state);\n        }\n\n        if (this.spec.enable) {\n            this.disabled = !this.spec.enable(state);\n        }\n\n        if (this.spec.select) {\n            this.show = this.spec.select(state);\n        }\n    }\n}\n\n/**\n * Convert built-in `MenuItem` into our Angular specific `Item`\n */\nfunction toItem(item: MenuItem): Item {\n    return new Item(item.spec);\n}\n\nfunction canInsert(state: EditorState, nodeType: NodeType): boolean {\n    const $from = state.selection.$from;\n    for (let d = $from.depth; d >= 0; d--) {\n        const index = $from.index(d);\n        if ($from.node(d).canReplaceWith(index, index, nodeType)) {\n            return true;\n        }\n    }\n\n    return false;\n}\n\n// function insertImageItem(nodeType: NodeType) {\n//     return new MenuItem({\n//         enable(state): boolean {\n//             return canInsert(state, nodeType);\n//         },\n//         run(state, _, view) {\n//             let {from, to} = state.selection,\n//                 attrs = null;\n//             if (state.selection instanceof NodeSelection && state.selection.node.type == nodeType) {\n//                 attrs = state.selection.node.attrs;\n//             }\n//             openPrompt({\n//                 title: 'Insert image',\n//                 fields: {\n//                     src: new TextField({label: 'Location', required: true, value: attrs && attrs.src}),\n//                     title: new TextField({label: 'Title', value: attrs && attrs.title}),\n//                     alt: new TextField({\n//                         label: 'Description',\n//                         value: attrs ? attrs.alt : state.doc.textBetween(from, to, ' '),\n//                     }),\n//                 },\n//                 callback(attrs) {\n//                     view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(attrs)));\n//                     view.focus();\n//                 },\n//             });\n//         },\n//     });\n// }\n\nfunction cmdItem(cmd: Command, options: Partial<MenuItemSpec> = {}, useEnable = false): Item {\n    const passedOptions: MenuItemSpec = {\n        run: cmd,\n        ...options,\n    };\n\n    if ((!options.enable || useEnable) && !options.select) {\n        passedOptions[options.enable ? 'enable' : 'select'] = (state: EditorState) => cmd(state);\n    }\n\n    return new Item(passedOptions);\n}\n\nfunction markActive(state: EditorState, type: MarkType): boolean {\n    const {from, $from, to, empty} = state.selection;\n    if (empty) {\n        return !!type.isInSet(state.storedMarks || $from.marks());\n    } else {\n        return state.doc.rangeHasMark(from, to, type);\n    }\n}\n\nfunction markItem(markType: MarkType, options: Partial<MenuItemSpec> = {}): Item {\n    const passedOptions: Partial<MenuItemSpec> = {\n        active(state: EditorState): boolean {\n            return markActive(state, markType);\n        },\n        ...options,\n    };\n\n    return cmdItem(toggleMark(markType), passedOptions, true);\n}\n\nfunction linkItem(markType: MarkType, dialog: MatDialog): Item {\n    return new Item({\n        active(state: EditorState): boolean {\n            return markActive(state, markType);\n        },\n        enable(state: EditorState): boolean {\n            return !state.selection.empty;\n        },\n        run(state: EditorState, dispatch: (p: Transaction) => void, view: EditorView): boolean | void {\n            if (markActive(state, markType)) {\n                toggleMark(markType)(state, dispatch);\n                return true;\n            }\n\n            dialog\n                .open<LinkDialogComponent, LinkDialogData, LinkDialogData>(LinkDialogComponent, {\n                    data: {\n                        href: '',\n                        title: '',\n                    },\n                })\n                .afterClosed()\n                .subscribe(result => {\n                    if (result && !result.title) {\n                        delete result.title;\n                    }\n\n                    toggleMark(markType, result)(view.state, view.dispatch);\n                    view.focus();\n                });\n        },\n    });\n}\n\nfunction wrapListItem(nodeType: NodeType): Item {\n    return cmdItem(wrapInList(nodeType));\n}\n\nexport type Key =\n    | 'toggleStrong'\n    | 'toggleEm'\n    | 'toggleCode'\n    | 'toggleLink'\n    | 'insertImage'\n    | 'wrapBulletList'\n    | 'wrapOrderedList'\n    | 'wrapBlockQuote'\n    | 'makeParagraph'\n    | 'makeCodeBlock'\n    | 'makeHead1'\n    | 'makeHead2'\n    | 'makeHead3'\n    | 'makeHead4'\n    | 'makeHead5'\n    | 'makeHead6'\n    | 'insertHorizontalRule'\n    | 'joinUp'\n    | 'lift'\n    | 'selectParentNode'\n    | 'undo'\n    | 'redo';\n\nexport type MenuItems = Partial<Record<Key, Item>>;\n\n/**\n * Given a schema, look for default mark and node types in it and\n * return an object with relevant menu items relating to those marks:\n */\nexport function buildMenuItems(schema: Schema, dialog: MatDialog): MenuItems {\n    const r: MenuItems = {\n        joinUp: toItem(joinUpItem),\n        lift: toItem(liftItem),\n        selectParentNode: toItem(selectParentNodeItem),\n        undo: toItem(undoItem as unknown as MenuItem), // Typing is incorrect, so we force it\n        redo: toItem(redoItem as unknown as MenuItem),\n    };\n\n    let type: MarkType | NodeType | undefined;\n    type = schema.marks.strong;\n    if (type) {\n        r.toggleStrong = markItem(type);\n    }\n\n    type = schema.marks.em;\n    if (type) {\n        r.toggleEm = markItem(type);\n    }\n\n    type = schema.marks.code;\n    if (type) {\n        r.toggleCode = markItem(type);\n    }\n\n    type = schema.marks.link;\n    if (type) {\n        r.toggleLink = linkItem(type, dialog);\n    }\n\n    type = schema.nodes.image;\n    if (type) {\n        // r.insertImage = insertImageItem(type);\n    }\n\n    type = schema.nodes.bullet_list;\n    if (type) {\n        r.wrapBulletList = wrapListItem(type);\n    }\n\n    type = schema.nodes.ordered_list;\n    if (type) {\n        r.wrapOrderedList = wrapListItem(type);\n    }\n\n    type = schema.nodes.blockquote;\n    if (type) {\n        r.wrapBlockQuote = toItem(wrapItem(type, {}));\n    }\n\n    type = schema.nodes.paragraph;\n    if (type) {\n        r.makeParagraph = toItem(blockTypeItem(type, {}));\n    }\n\n    type = schema.nodes.code_block;\n    if (type) {\n        r.makeCodeBlock = toItem(blockTypeItem(type, {}));\n    }\n\n    type = schema.nodes.heading;\n    if (type) {\n        r.makeHead1 = toItem(blockTypeItem(type, {attrs: {level: 1}}));\n        r.makeHead2 = toItem(blockTypeItem(type, {attrs: {level: 2}}));\n        r.makeHead3 = toItem(blockTypeItem(type, {attrs: {level: 3}}));\n        r.makeHead4 = toItem(blockTypeItem(type, {attrs: {level: 4}}));\n        r.makeHead5 = toItem(blockTypeItem(type, {attrs: {level: 5}}));\n        r.makeHead6 = toItem(blockTypeItem(type, {attrs: {level: 6}}));\n    }\n\n    type = schema.nodes.horizontal_rule;\n    if (type) {\n        const hr = type;\n        r.insertHorizontalRule = new Item({\n            enable(state): boolean {\n                return canInsert(state, hr);\n            },\n            run(state, dispatch): void {\n                dispatch(state.tr.replaceSelectionWith(hr.create()));\n            },\n        });\n    }\n\n    return r;\n}\n","import {\n    Component,\n    ElementRef,\n    EventEmitter,\n    Inject,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    Self,\n    ViewChild,\n} from '@angular/core';\nimport {ControlValueAccessor, NgControl} from '@angular/forms';\nimport {EditorView} from 'prosemirror-view';\nimport {EditorState, Plugin, Transaction} from 'prosemirror-state';\n// @ts-ignore\nimport {exampleSetup} from 'prosemirror-example-setup';\nimport {DOMParser, DOMSerializer} from 'prosemirror-model';\nimport {schema} from './schema';\nimport {DOCUMENT} from '@angular/common';\nimport {MatDialog} from '@angular/material/dialog';\nimport {buildMenuItems, Key, MenuItems} from './menu';\n\n/**\n * Prosemirror component\n *\n * Usage :\n *\n * ```html\n * <natural-editor [(ngModel)]=\"htmlString\"></natural-editor>\n * ```\n */\n// @dynamic\n@Component({\n    selector: 'natural-editor',\n    templateUrl: './editor.component.html',\n    styleUrls: ['./editor.component.scss'],\n})\nexport class NaturalEditorComponent implements OnInit, OnDestroy, ControlValueAccessor {\n    private view: EditorView | null = null;\n\n    @ViewChild('editor', {read: ElementRef, static: true}) private editor!: ElementRef;\n\n    @Output() public readonly contentChange = new EventEmitter<string>();\n\n    /**\n     * Interface with ControlValueAccessor\n     * Notifies parent model / form controller\n     */\n    private onChange?: (value: string | null) => void;\n\n    /**\n     * HTML string\n     */\n    private content = '';\n\n    public menu: MenuItems | null = null;\n\n    constructor(\n        @Optional() @Self() public readonly ngControl: NgControl,\n        @Inject(DOCUMENT) private readonly document: Document,\n        private readonly dialog: MatDialog,\n    ) {\n        if (this.ngControl !== null) {\n            this.ngControl.valueAccessor = this;\n        }\n    }\n\n    public ngOnInit(): void {\n        this.menu = buildMenuItems(schema, this.dialog);\n        const serializer = DOMSerializer.fromSchema(schema);\n        const state = this.createState();\n\n        this.view = new EditorView(this.editor.nativeElement, {\n            state: state,\n            dispatchTransaction: (transaction: Transaction) => {\n                if (!this.view) {\n                    return;\n                }\n\n                const newState = this.view.state.apply(transaction);\n                this.view.updateState(newState);\n\n                // Transform doc into HTML string\n                const dom = serializer.serializeFragment(this.view.state.doc as any);\n                const el = this.document.createElement('_');\n                el.appendChild(dom);\n\n                const newContent = el.innerHTML;\n                if (this.content === newContent) {\n                    return;\n                }\n\n                this.content = el.innerHTML;\n\n                if (this.onChange) {\n                    this.onChange(this.content);\n                }\n                this.contentChange.emit(this.content);\n            },\n        });\n        this.update();\n    }\n\n    public writeValue(val: string | undefined): void {\n        if (typeof val === 'string' && val !== this.content) {\n            this.content = val;\n        }\n\n        if (this.view !== null) {\n            const state = this.createState();\n            this.view.updateState(state);\n        }\n    }\n\n    private createState(): EditorState {\n        const template = this.document.createElement('_');\n        template.innerHTML = '<div>' + this.content + '</div>';\n        if (!template.firstChild) {\n            throw new Error('child of template element could not be created');\n        }\n\n        const parser = DOMParser.fromSchema(schema);\n        const doc = parser.parse(template.firstChild);\n        const self = this;\n\n        return EditorState.create({\n            doc: doc,\n            plugins: [\n                ...exampleSetup({schema, menuBar: false}),\n                new Plugin({\n                    view: () => self,\n                }),\n            ],\n        });\n    }\n\n    /**\n     * Called by Prosemirror whenever the editor state changes. So we update our menu states.\n     */\n    public update(): void {\n        if (!this.view || !this.menu) {\n            return;\n        }\n\n        for (const item of Object.values(this.menu)) {\n            item.update(this.view, this.view.state);\n        }\n    }\n\n    public registerOnChange(fn: any): void {\n        this.onChange = fn;\n    }\n\n    public registerOnTouched(fn: any): void {}\n\n    public setDisabledState(isDisabled: boolean): void {\n        // TODO disable editor ?\n    }\n\n    public ngOnDestroy(): void {\n        if (this.view) {\n            this.view.destroy();\n            this.view = null;\n        }\n    }\n\n    public run(event: Event, key: Key): void {\n        if (!this.view || !this.menu) {\n            return;\n        }\n\n        const item = this.menu[key];\n        if (!item || item.disabled || !item.show) {\n            return;\n        }\n\n        item.spec.run(this.view.state, this.view.dispatch, this.view, event);\n        this.view.focus();\n    }\n}\n","<mat-toolbar *ngIf=\"menu\">\n    <mat-button-toggle-group multiple>\n        <mat-button-toggle\n            *ngIf=\"menu.toggleStrong\"\n            [disabled]=\"menu.toggleStrong.disabled\"\n            [checked]=\"menu.toggleStrong.active\"\n            (click)=\"run($event, 'toggleStrong')\"\n            i18n-matTooltip\n            matTooltip=\"Gras\"\n        >\n            <mat-icon>format_bold</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle\n            *ngIf=\"menu.toggleEm\"\n            [disabled]=\"menu.toggleEm.disabled\"\n            [checked]=\"menu.toggleEm.active\"\n            (click)=\"run($event, 'toggleEm')\"\n            i18n-matTooltip\n            matTooltip=\"Italique\"\n        >\n            <mat-icon>format_italic</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle\n            *ngIf=\"menu.toggleCode\"\n            [disabled]=\"menu.toggleCode.disabled\"\n            [checked]=\"menu.toggleCode.active\"\n            (click)=\"run($event, 'toggleCode')\"\n            i18n-matTooltip\n            matTooltip=\"Code\"\n        >\n            <mat-icon>code</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle\n            *ngIf=\"menu.toggleLink\"\n            [disabled]=\"menu.toggleLink.disabled\"\n            [checked]=\"menu.toggleLink.active\"\n            (click)=\"run($event, 'toggleLink')\"\n            i18n-matTooltip\n            matTooltip=\"Insérer un lien...\"\n        >\n            <mat-icon>insert_link</mat-icon>\n        </mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n        <span i18n>Type</span>\n        <mat-icon>arrow_drop_down</mat-icon>\n    </button>\n\n    <mat-menu #blockMenu=\"matMenu\">\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeParagraph\"\n            [disabled]=\"menu.makeParagraph.disabled\"\n            (click)=\"run($event, 'makeParagraph')\"\n            i18n\n            >Paragraphe\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeCodeBlock\"\n            [disabled]=\"menu.makeCodeBlock.disabled\"\n            (click)=\"run($event, 'makeCodeBlock')\"\n            i18n\n            >Code\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead1\"\n            [disabled]=\"menu.makeHead1.disabled\"\n            (click)=\"run($event, 'makeHead1')\"\n            i18n\n            >Titre 1\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead2\"\n            [disabled]=\"menu.makeHead2.disabled\"\n            (click)=\"run($event, 'makeHead2')\"\n            i18n\n            >Titre 2\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead3\"\n            [disabled]=\"menu.makeHead3.disabled\"\n            (click)=\"run($event, 'makeHead3')\"\n            i18n\n            >Titre 3\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead4\"\n            [disabled]=\"menu.makeHead4.disabled\"\n            (click)=\"run($event, 'makeHead4')\"\n            i18n\n            >Titre 4\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead5\"\n            [disabled]=\"menu.makeHead5.disabled\"\n            (click)=\"run($event, 'makeHead5')\"\n            i18n\n            >Titre 5\n        </button>\n        <button\n            mat-menu-item\n            *ngIf=\"menu.makeHead6\"\n            [disabled]=\"menu.makeHead6.disabled\"\n            (click)=\"run($event, 'makeHead6')\"\n            i18n\n            >Titre 6\n        </button>\n    </mat-menu>\n\n    <button\n        mat-button\n        *ngIf=\"menu.undo\"\n        [disabled]=\"menu.undo.disabled\"\n        (click)=\"run($event, 'undo')\"\n        i18n-matTooltip\n        matTooltip=\"Annuler\"\n    >\n        <mat-icon>undo</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.redo\"\n        [disabled]=\"menu.redo.disabled\"\n        (click)=\"run($event, 'redo')\"\n        i18n-matTooltip\n        matTooltip=\"Refaire\"\n    >\n        <mat-icon>redo</mat-icon>\n    </button>\n\n    <button\n        mat-button\n        *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n        [disabled]=\"menu.wrapBulletList.disabled\"\n        (click)=\"run($event, 'wrapBulletList')\"\n        i18n-matTooltip\n        matTooltip=\"Liste à 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 à numéro\"\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'élément 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ésindenter\"\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électionner l'élément parent\"\n    >\n        <mat-icon>select_all</mat-icon>\n    </button>\n</mat-toolbar>\n<div #editor></div>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {NaturalEditorComponent} from './editor.component';\nimport {MatButtonModule} from '@angular/material/button';\nimport {MatButtonToggleModule} from '@angular/material/button-toggle';\nimport {MatToolbarModule} from '@angular/material/toolbar';\nimport {MatIconModule} from '@angular/material/icon';\nimport {MatMenuModule} from '@angular/material/menu';\nimport {LinkDialogComponent} from './link-dialog/link-dialog.component';\nimport {ReactiveFormsModule} from '@angular/forms';\nimport {MatDialogModule} from '@angular/material/dialog';\nimport {MatFormFieldModule} from '@angular/material/form-field';\nimport {MatInputModule} from '@angular/material/input';\nimport {MatTooltipModule} from '@angular/material/tooltip';\n\nconst imports = [\n    CommonModule,\n    MatButtonModule,\n    MatButtonToggleModule,\n    MatDialogModule,\n    MatFormFieldModule,\n    MatIconModule,\n    MatInputModule,\n    MatMenuModule,\n    MatToolbarModule,\n    MatTooltipModule,\n    ReactiveFormsModule,\n];\n\n@NgModule({\n    declarations: [NaturalEditorComponent, LinkDialogComponent],\n    imports: [...imports],\n    exports: [...imports, NaturalEditorComponent],\n})\nexport class NaturalEditorModule {}\n","// Load `$localize` onto the global scope - to be able to use that function to translate strings in components/services.\nimport '@angular/localize/init';\nimport {NaturalEditorComponent} from './lib/editor.component';\n\n/*\n * Public API Surface of natural-editor\n */\n\nexport {NaturalEditorComponent} from './lib/editor.component';\nexport {NaturalEditorModule} from './lib/editor.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}