@ecodev/natural-editor 41.2.0 → 41.2.1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/localize/init'), require('@angular/core'), require('prosemirror-view'), require('prosemirror-state'), require('prosemirror-example-setup'), require('prosemirror-model'), require('@angular/common'), require('prosemirror-tables'), require('prosemirror-keymap'), require('prosemirror-schema-basic'), require('prosemirror-schema-list'), require('prosemirror-menu'), require('prosemirror-commands'), require('@angular/material/dialog'), require('@angular/forms'), require('@ecodev/natural'), require('@angular/material/form-field'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/button-toggle'), require('@angular/material/menu'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/toolbar')) :
-    typeof define === 'function' && define.amd ? define('@ecodev/natural-editor', ['exports', '@angular/localize/init', '@angular/core', 'prosemirror-view', 'prosemirror-state', 'prosemirror-example-setup', 'prosemirror-model', '@angular/common', 'prosemirror-tables', 'prosemirror-keymap', 'prosemirror-schema-basic', 'prosemirror-schema-list', 'prosemirror-menu', 'prosemirror-commands', '@angular/material/dialog', '@angular/forms', '@ecodev/natural', '@angular/material/form-field', '@angular/material/button', '@angular/material/input', '@angular/material/icon', '@angular/material/button-toggle', '@angular/material/menu', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/toolbar'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ecodev = global.ecodev || {}, global.ecodev["natural-editor"] = {}), global.ng.localize.init, global.ng.core, global["prosemirror-view"], global["prosemirror-state"], global["prosemirror-example-setup"], global["prosemirror-model"], global.ng.common, global.prosemirrorTables, global.prosemirrorKeymap, global["prosemirror-schema-basic"], global["prosemirror-schema-list"], global["prosemirror-menu"], global["prosemirror-commands"], global.ng.material.dialog, global.ng.forms, global.i11, global.ng.material.formField, global.ng.material.button, global.ng.material.input, global.ng.material.icon, global.ng.material.buttonToggle, global.ng.material.menu, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.toolbar));
-})(this, (function (exports, init, i0, prosemirrorView, prosemirrorState, prosemirrorExampleSetup, prosemirrorModel, i6, prosemirrorTables, prosemirrorKeymap, prosemirrorSchemaBasic, prosemirrorSchemaList, prosemirrorMenu, prosemirrorCommands, i1, i4, i11, i2, i3, i5, i5$1, i6$1, i7, i8, i10, toolbar) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/localize/init'), require('@angular/core'), require('prosemirror-view'), require('prosemirror-state'), require('prosemirror-model'), require('@angular/common'), require('prosemirror-tables'), require('prosemirror-keymap'), require('prosemirror-schema-basic'), require('prosemirror-schema-list'), require('prosemirror-menu'), require('prosemirror-commands'), require('@angular/material/dialog'), require('@angular/forms'), require('@ecodev/natural'), require('@angular/material/form-field'), require('@angular/material/button'), require('@angular/material/input'), require('prosemirror-history'), require('prosemirror-dropcursor'), require('prosemirror-gapcursor'), require('prosemirror-inputrules'), require('@angular/material/icon'), require('@angular/material/button-toggle'), require('@angular/material/menu'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/toolbar')) :
+    typeof define === 'function' && define.amd ? define('@ecodev/natural-editor', ['exports', '@angular/localize/init', '@angular/core', 'prosemirror-view', 'prosemirror-state', 'prosemirror-model', '@angular/common', 'prosemirror-tables', 'prosemirror-keymap', 'prosemirror-schema-basic', 'prosemirror-schema-list', 'prosemirror-menu', 'prosemirror-commands', '@angular/material/dialog', '@angular/forms', '@ecodev/natural', '@angular/material/form-field', '@angular/material/button', '@angular/material/input', 'prosemirror-history', 'prosemirror-dropcursor', 'prosemirror-gapcursor', 'prosemirror-inputrules', '@angular/material/icon', '@angular/material/button-toggle', '@angular/material/menu', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/toolbar'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ecodev = global.ecodev || {}, global.ecodev["natural-editor"] = {}), global.ng.localize.init, global.ng.core, global["prosemirror-view"], global["prosemirror-state"], global["prosemirror-model"], global.ng.common, global.prosemirrorTables, global.prosemirrorKeymap, global["prosemirror-schema-basic"], global["prosemirror-schema-list"], global["prosemirror-menu"], global["prosemirror-commands"], global.ng.material.dialog, global.ng.forms, global.i11, global.ng.material.formField, global.ng.material.button, global.ng.material.input, global.prosemirrorHistory, global.prosemirrorDropcursor, global.prosemirrorGapcursor, global.prosemirrorInputrules, global.ng.material.icon, global.ng.material.buttonToggle, global.ng.material.menu, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.toolbar));
+})(this, (function (exports, init, i0, prosemirrorView, prosemirrorState, prosemirrorModel, i6, prosemirrorTables, prosemirrorKeymap, prosemirrorSchemaBasic, prosemirrorSchemaList, prosemirrorMenu, prosemirrorCommands, i1, i4, i11, i2, i3, i5, prosemirrorHistory, prosemirrorDropcursor, prosemirrorGapcursor, prosemirrorInputrules, i5$1, i6$1, i7, i8, i10, toolbar) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -752,6 +752,186 @@
         return r;
     }
 
+    /**
+     * Given a blockquote node type, returns an input rule that turns `"> "`
+     * at the start of a textblock into a blockquote.
+     */
+    function blockQuoteRule(nodeType) {
+        return prosemirrorInputrules.wrappingInputRule(/^\s*>\s$/, nodeType);
+    }
+    /**
+     * Given a list node type, returns an input rule that turns a number
+     * followed by a dot at the start of a textblock into an ordered list.
+     */
+    function orderedListRule(nodeType) {
+        return prosemirrorInputrules.wrappingInputRule(/^(\d+)\.\s$/, nodeType, function (match) { return ({ order: +match[1] }); }, function (match, node) { return node.childCount + node.attrs.order === +match[1]; });
+    }
+    /**
+     * Given a list node type, returns an input rule that turns a bullet
+     * (dash, plush, or asterisk) at the start of a textblock into a
+     * bullet list.
+     */
+    function bulletListRule(nodeType) {
+        return prosemirrorInputrules.wrappingInputRule(/^\s*([-+*])\s$/, nodeType);
+    }
+    /**
+     * Given a code block node type, returns an input rule that turns a
+     * textblock starting with three backticks into a code block.
+     */
+    function codeBlockRule(nodeType) {
+        return prosemirrorInputrules.textblockTypeInputRule(/^```$/, nodeType);
+    }
+    /**
+     * Given a node type and a maximum level, creates an input rule that
+     * turns up to that number of `#` characters followed by a space at
+     * the start of a textblock into a heading whose level corresponds to
+     * the number of `#` signs.
+     */
+    function headingRule(nodeType, maxLevel) {
+        return prosemirrorInputrules.textblockTypeInputRule(new RegExp('^(#{1,' + maxLevel + '})\\s$'), nodeType, function (match) { return ({
+            level: match[1].length,
+        }); });
+    }
+    /**
+     * A set of input rules for creating the basic block quotes, lists,
+     * code blocks, and heading.
+     */
+    function buildInputRules(schema) {
+        var rules = [prosemirrorInputrules.ellipsis, prosemirrorInputrules.emDash];
+        var type = schema.nodes.blockquote;
+        if (type) {
+            rules.push(blockQuoteRule(type));
+        }
+        type = schema.nodes.ordered_list;
+        if (type) {
+            rules.push(orderedListRule(type));
+        }
+        type = schema.nodes.bullet_list;
+        if (type) {
+            rules.push(bulletListRule(type));
+        }
+        type = schema.nodes.code_block;
+        if (type) {
+            rules.push(codeBlockRule(type));
+        }
+        type = schema.nodes.heading;
+        if (type) {
+            rules.push(headingRule(type, 6));
+        }
+        return prosemirrorInputrules.inputRules({ rules: rules });
+    }
+
+    /**
+     * Inspect the given schema looking for marks and nodes from the
+     * basic schema, and if found, add key bindings related to them.
+     * This will add:
+     *
+     * * **Mod-b** for toggling [strong](#schema-basic.StrongMark)
+     * * **Mod-i** for toggling [emphasis](#schema-basic.EmMark)
+     * * **Mod-`** for toggling [code font](#schema-basic.CodeMark)
+     * * **Ctrl-Shift-0** for making the current textblock a paragraph
+     * * **Ctrl-Shift-1** to **Ctrl-Shift-Digit6** for making the current
+     *   textblock a heading of the corresponding level
+     * * **Ctrl-Shift-Backslash** to make the current textblock a code block
+     * * **Ctrl-Shift-8** to wrap the selection in an ordered list
+     * * **Ctrl-Shift-9** to wrap the selection in a bullet list
+     * * **Ctrl->** to wrap the selection in a block quote
+     * * **Enter** to split a non-empty textblock in a list item while at
+     *   the same time splitting the list item
+     * * **Mod-Enter** to insert a hard break
+     * * **Mod-_** to insert a horizontal rule
+     * * **Backspace** to undo an input rule
+     * * **Alt-ArrowUp** to `joinUp`
+     * * **Alt-ArrowDown** to `joinDown`
+     * * **Mod-BracketLeft** to `lift`
+     * * **Escape** to `selectParentNode`
+     *
+     * You can suppress or map these bindings by passing a `mapKeys`
+     * argument, which maps key names (say `"Mod-B"` to either `false`, to
+     * remove the binding, or a new key name string.
+     */
+    function buildKeymap(schema, isMac) {
+        var keys = {};
+        keys['Mod-z'] = prosemirrorHistory.undo;
+        keys['Shift-Mod-z'] = prosemirrorHistory.redo;
+        keys['Backspace'] = prosemirrorInputrules.undoInputRule;
+        if (!isMac) {
+            keys['Mod-y'] = prosemirrorHistory.redo;
+        }
+        keys['Alt-ArrowUp'] = prosemirrorCommands.joinUp;
+        keys['Alt-ArrowDown'] = prosemirrorCommands.joinDown;
+        keys['Mod-BracketLeft'] = prosemirrorCommands.lift;
+        keys['Escape'] = prosemirrorCommands.selectParentNode;
+        var type = schema.marks.strong;
+        if (type) {
+            keys['Mod-b'] = prosemirrorCommands.toggleMark(type);
+            keys['Mod-B'] = prosemirrorCommands.toggleMark(type);
+        }
+        type = schema.marks.em;
+        if (type) {
+            keys['Mod-i'] = prosemirrorCommands.toggleMark(type);
+            keys['Mod-I'] = prosemirrorCommands.toggleMark(type);
+        }
+        type = schema.marks.code;
+        if (type) {
+            keys['Mod-`'] = prosemirrorCommands.toggleMark(type);
+        }
+        type = schema.nodes.bullet_list;
+        if (type) {
+            keys['Shift-Ctrl-8'] = prosemirrorSchemaList.wrapInList(type);
+        }
+        type = schema.nodes.ordered_list;
+        if (type) {
+            keys['Shift-Ctrl-9'] = prosemirrorSchemaList.wrapInList(type);
+        }
+        type = schema.nodes.blockquote;
+        if (type) {
+            keys['Ctrl->'] = prosemirrorCommands.wrapIn(type);
+        }
+        type = schema.nodes.hard_break;
+        if (type) {
+            var br_1 = type;
+            var cmd = prosemirrorCommands.chainCommands(prosemirrorCommands.exitCode, function (state, dispatch) {
+                dispatch === null || dispatch === void 0 ? void 0 : dispatch(state.tr.replaceSelectionWith(br_1.create()).scrollIntoView());
+                return true;
+            });
+            keys['Mod-Enter'] = cmd;
+            keys['Shift-Enter'] = cmd;
+            if (isMac) {
+                keys['Ctrl-Enter'] = cmd;
+            }
+        }
+        type = schema.nodes.list_item;
+        if (type) {
+            keys['Enter'] = prosemirrorSchemaList.splitListItem(type);
+            keys['Mod-['] = prosemirrorSchemaList.liftListItem(type);
+            keys['Mod-]'] = prosemirrorSchemaList.sinkListItem(type);
+        }
+        type = schema.nodes.paragraph;
+        if (type) {
+            keys['Shift-Ctrl-0'] = prosemirrorCommands.setBlockType(type);
+        }
+        type = schema.nodes.code_block;
+        if (type) {
+            keys['Shift-Ctrl-\\'] = prosemirrorCommands.setBlockType(type);
+        }
+        type = schema.nodes.heading;
+        if (type) {
+            for (var i = 1; i <= 6; i++) {
+                keys['Shift-Ctrl-' + i] = prosemirrorCommands.setBlockType(type, { level: i });
+            }
+        }
+        type = schema.nodes.horizontal_rule;
+        if (type) {
+            var hr_1 = type;
+            keys['Mod-_'] = function (state, dispatch) {
+                dispatch === null || dispatch === void 0 ? void 0 : dispatch(state.tr.replaceSelectionWith(hr_1.create()).scrollIntoView());
+                return true;
+            };
+        }
+        return keys;
+    }
+
     /**
      * Prosemirror component
      *
@@ -832,7 +1012,6 @@
             }
         };
         NaturalEditorComponent.prototype.createState = function () {
-            var _this = this;
             var template = this.document.createElement('_');
             template.innerHTML = '<div>' + this.content + '</div>';
             if (!template.firstChild) {
@@ -840,40 +1019,57 @@
             }
             var parser = prosemirrorModel.DOMParser.fromSchema(this.schema);
             var doc = parser.parse(template.firstChild);
-            var plugins = __spreadArray(__spreadArray([], __read(prosemirrorExampleSetup.exampleSetup({ schema: this.schema, menuBar: false }))), [
+            return prosemirrorState.EditorState.create({
+                doc: doc,
+                plugins: this.createPlugins(),
+            });
+        };
+        NaturalEditorComponent.prototype.createPlugins = function () {
+            var _this = this;
+            var _a;
+            var isMac = !!((_a = this.document.defaultView) === null || _a === void 0 ? void 0 : _a.navigator.platform.match(/Mac/));
+            var plugins = [
+                buildInputRules(this.schema),
+                prosemirrorKeymap.keymap(buildKeymap(this.schema, isMac)),
+                prosemirrorKeymap.keymap(prosemirrorCommands.baseKeymap),
+                prosemirrorDropcursor.dropCursor(),
+                prosemirrorGapcursor.gapCursor(),
+                prosemirrorHistory.history(),
+                new prosemirrorState.Plugin({
+                    props: {
+                        attributes: { class: 'ProseMirror-example-setup-style' },
+                    },
+                }),
                 new prosemirrorState.Plugin({
                     view: function () { return _this; },
                 }),
-            ]);
+            ];
             if (this.schema === advancedSchema) {
                 plugins.push(this.imagePlugin.plugin, prosemirrorTables.columnResizing(undefined), prosemirrorTables.tableEditing(), prosemirrorKeymap.keymap({
                     Tab: prosemirrorTables.goToNextCell(1),
                     'Shift-Tab': prosemirrorTables.goToNextCell(-1),
                 }));
             }
-            return prosemirrorState.EditorState.create({
-                doc: doc,
-                plugins: plugins,
-            });
+            return plugins;
         };
         /**
          * Called by Prosemirror whenever the editor state changes. So we update our menu states.
          */
         NaturalEditorComponent.prototype.update = function () {
-            var e_1, _a;
+            var e_1, _b;
             if (!this.view || !this.menu) {
                 return;
             }
             try {
-                for (var _b = __values(Object.values(this.menu)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var item = _c.value;
+                for (var _c = __values(Object.values(this.menu)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var item = _d.value;
                     item.update(this.view, this.view.state);
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
                 finally { if (e_1) throw e_1.error; }
             }