@tiptap/core 2.0.0-beta.153 → 2.0.0-beta.157

package/dist/tiptap-core.cjs.js

@@ -234,23 +234,27 @@ var clearContent$1 = /*#__PURE__*/Object.freeze({
 const clearNodes = () => ({ state, tr, dispatch }) => {
     const { selection } = tr;
     const { ranges } = selection;
-    ranges.forEach(range => {
-        state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
+    if (!dispatch) {
+        return true;
+    }
+    ranges.forEach(({ $from, $to }) => {
+        state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
             if (node.type.isText) {
                 return;
             }
-            const $fromPos = tr.doc.resolve(tr.mapping.map(pos));
-            const $toPos = tr.doc.resolve(tr.mapping.map(pos + node.nodeSize));
-            const nodeRange = $fromPos.blockRange($toPos);
+            const { doc, mapping } = tr;
+            const $mappedFrom = doc.resolve(mapping.map(pos));
+            const $mappedTo = doc.resolve(mapping.map(pos + node.nodeSize));
+            const nodeRange = $mappedFrom.blockRange($mappedTo);
             if (!nodeRange) {
                 return;
             }
             const targetLiftDepth = prosemirrorTransform.liftTarget(nodeRange);
-            if (node.type.isTextblock && dispatch) {
-                const { defaultType } = $fromPos.parent.contentMatchAt($fromPos.index());
+            if (node.type.isTextblock) {
+                const { defaultType } = $mappedFrom.parent.contentMatchAt($mappedFrom.index());
                 tr.setNodeMarkup(nodeRange.start, defaultType);
             }
-            if ((targetLiftDepth || targetLiftDepth === 0) && dispatch) {
+            if (targetLiftDepth || targetLiftDepth === 0) {
                 tr.lift(nodeRange, targetLiftDepth);
             }
         });
@@ -1110,12 +1114,15 @@ const setNode = (typeOrName, attributes = {}) => ({ state, dispatch, chain }) =>
         console.warn('[tiptap warn]: Currently "setNode()" only supports text block nodes.');
         return false;
     }
-    const canSetBlock = prosemirrorCommands.setBlockType(type, attributes)(state);
-    if (canSetBlock) {
-        return prosemirrorCommands.setBlockType(type, attributes)(state, dispatch);
-    }
     return chain()
-        .clearNodes()
+        // try to convert node to default node if needed
+        .command(({ commands }) => {
+        const canSetBlock = prosemirrorCommands.setBlockType(type, attributes)(state);
+        if (canSetBlock) {
+            return true;
+        }
+        return commands.clearNodes();
+    })
         .command(({ state: updatedState }) => {
         return prosemirrorCommands.setBlockType(type, attributes)(updatedState, dispatch);
     })
@@ -1419,6 +1426,9 @@ const joinListBackwards = (tr, listType) => {
         return true;
     }
     const before = tr.doc.resolve(Math.max(0, list.pos - 1)).before(list.depth);
+    if (before === undefined) {
+        return true;
+    }
     const nodeBefore = tr.doc.nodeAt(before);
     const canJoinBackwards = list.node.type === (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type)
         && prosemirrorTransform.canJoin(tr.doc, list.pos);
@@ -1434,6 +1444,9 @@ const joinListForwards = (tr, listType) => {
         return true;
     }
     const after = tr.doc.resolve(list.start).after(list.depth);
+    if (after === undefined) {
+        return true;
+    }
     const nodeAfter = tr.doc.nodeAt(after);
     const canJoinForwards = list.node.type === (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.type)
         && prosemirrorTransform.canJoin(tr.doc, after);
@@ -1860,144 +1873,6 @@ const FocusEvents = Extension.create({
     },
 });
 
-const Keymap = Extension.create({
-    name: 'keymap',
-    addKeyboardShortcuts() {
-        const handleBackspace = () => this.editor.commands.first(({ commands }) => [
-            () => commands.undoInputRule(),
-            () => commands.deleteSelection(),
-            () => commands.joinBackward(),
-            () => commands.selectNodeBackward(),
-        ]);
-        const handleDelete = () => this.editor.commands.first(({ commands }) => [
-            () => commands.deleteSelection(),
-            () => commands.joinForward(),
-            () => commands.selectNodeForward(),
-        ]);
-        return {
-            Enter: () => this.editor.commands.first(({ commands }) => [
-                () => commands.newlineInCode(),
-                () => commands.createParagraphNear(),
-                () => commands.liftEmptyBlock(),
-                () => commands.splitBlock(),
-            ]),
-            'Mod-Enter': () => this.editor.commands.exitCode(),
-            Backspace: handleBackspace,
-            'Mod-Backspace': handleBackspace,
-            'Shift-Backspace': handleBackspace,
-            Delete: handleDelete,
-            'Mod-Delete': handleDelete,
-            'Mod-a': () => this.editor.commands.selectAll(),
-        };
-    },
-});
-
-const Tabindex = Extension.create({
-    name: 'tabindex',
-    addProseMirrorPlugins() {
-        return [
-            new prosemirrorState.Plugin({
-                key: new prosemirrorState.PluginKey('tabindex'),
-                props: {
-                    attributes: {
-                        tabindex: '0',
-                    },
-                },
-            }),
-        ];
-    },
-});
-
-var extensions = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ClipboardTextSerializer: ClipboardTextSerializer,
-  Commands: Commands,
-  Editable: Editable,
-  FocusEvents: FocusEvents,
-  Keymap: Keymap,
-  Tabindex: Tabindex
-});
-
-function getNodeAttributes(state, typeOrName) {
-    const type = getNodeType(typeOrName, state.schema);
-    const { from, to } = state.selection;
-    const nodes = [];
-    state.doc.nodesBetween(from, to, node => {
-        nodes.push(node);
-    });
-    const node = nodes
-        .reverse()
-        .find(nodeItem => nodeItem.type.name === type.name);
-    if (!node) {
-        return {};
-    }
-    return { ...node.attrs };
-}
-
-function getAttributes(state, typeOrName) {
-    const schemaType = getSchemaTypeNameByName(typeof typeOrName === 'string'
-        ? typeOrName
-        : typeOrName.name, state.schema);
-    if (schemaType === 'node') {
-        return getNodeAttributes(state, typeOrName);
-    }
-    if (schemaType === 'mark') {
-        return getMarkAttributes(state, typeOrName);
-    }
-    return {};
-}
-
-function isActive(state, name, attributes = {}) {
-    if (!name) {
-        return isNodeActive(state, null, attributes) || isMarkActive(state, null, attributes);
-    }
-    const schemaType = getSchemaTypeNameByName(name, state.schema);
-    if (schemaType === 'node') {
-        return isNodeActive(state, name, attributes);
-    }
-    if (schemaType === 'mark') {
-        return isMarkActive(state, name, attributes);
-    }
-    return false;
-}
-
-function getHTMLFromFragment(fragment, schema) {
-    const documentFragment = prosemirrorModel.DOMSerializer
-        .fromSchema(schema)
-        .serializeFragment(fragment);
-    const temporaryDocument = document.implementation.createHTMLDocument();
-    const container = temporaryDocument.createElement('div');
-    container.appendChild(documentFragment);
-    return container.innerHTML;
-}
-
-function getText(node, options) {
-    const range = {
-        from: 0,
-        to: node.content.size,
-    };
-    return getTextBetween(node, range, options);
-}
-
-function isNodeEmpty(node) {
-    var _a;
-    const defaultContent = (_a = node.type.createAndFill()) === null || _a === void 0 ? void 0 : _a.toJSON();
-    const content = node.toJSON();
-    return JSON.stringify(defaultContent) === JSON.stringify(content);
-}
-
-function createStyleTag(style) {
-    const tipTapStyleTag = document.querySelector('style[data-tiptap-style]');
-    if (tipTapStyleTag !== null) {
-        return tipTapStyleTag;
-    }
-    const styleNode = document.createElement('style');
-    styleNode.setAttribute('data-tiptap-style', '');
-    styleNode.innerHTML = style;
-    document.getElementsByTagName('head')[0].appendChild(styleNode);
-    return styleNode;
-}
-
 function createChainableState(config) {
     const { state, transaction } = config;
     let { selection } = transaction;
@@ -2140,6 +2015,199 @@ class CommandManager {
     }
 }
 
+const Keymap = Extension.create({
+    name: 'keymap',
+    addKeyboardShortcuts() {
+        const handleBackspace = () => this.editor.commands.first(({ commands }) => [
+            () => commands.undoInputRule(),
+            // maybe convert first text block node to default node
+            () => commands.command(({ tr }) => {
+                const { selection, doc } = tr;
+                const { empty, $anchor } = selection;
+                const { pos, parent } = $anchor;
+                const isAtStart = prosemirrorState.Selection.atStart(doc).from === pos;
+                if (!empty
+                    || !isAtStart
+                    || !parent.type.isTextblock
+                    || parent.textContent.length) {
+                    return false;
+                }
+                return commands.clearNodes();
+            }),
+            () => commands.deleteSelection(),
+            () => commands.joinBackward(),
+            () => commands.selectNodeBackward(),
+        ]);
+        const handleDelete = () => this.editor.commands.first(({ commands }) => [
+            () => commands.deleteSelection(),
+            () => commands.joinForward(),
+            () => commands.selectNodeForward(),
+        ]);
+        return {
+            Enter: () => this.editor.commands.first(({ commands }) => [
+                () => commands.newlineInCode(),
+                () => commands.createParagraphNear(),
+                () => commands.liftEmptyBlock(),
+                () => commands.splitBlock(),
+            ]),
+            'Mod-Enter': () => this.editor.commands.exitCode(),
+            Backspace: handleBackspace,
+            'Mod-Backspace': handleBackspace,
+            'Shift-Backspace': handleBackspace,
+            Delete: handleDelete,
+            'Mod-Delete': handleDelete,
+            'Mod-a': () => this.editor.commands.selectAll(),
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            // With this plugin we check if the whole document was selected and deleted.
+            // In this case we will additionally call `clearNodes()` to convert e.g. a heading
+            // to a paragraph if necessary.
+            // This is an alternative to ProseMirror's `AllSelection`, which doesn’t work well
+            // with many other commands.
+            new prosemirrorState.Plugin({
+                key: new prosemirrorState.PluginKey('clearDocument'),
+                appendTransaction: (transactions, oldState, newState) => {
+                    const docChanges = transactions.some(transaction => transaction.docChanged)
+                        && !oldState.doc.eq(newState.doc);
+                    if (!docChanges) {
+                        return;
+                    }
+                    const { empty, from, to } = oldState.selection;
+                    const allFrom = prosemirrorState.Selection.atStart(oldState.doc).from;
+                    const allEnd = prosemirrorState.Selection.atEnd(oldState.doc).to;
+                    const allWasSelected = from === allFrom && to === allEnd;
+                    const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0;
+                    if (empty || !allWasSelected || !isEmpty) {
+                        return;
+                    }
+                    const tr = newState.tr;
+                    const state = createChainableState({
+                        state: newState,
+                        transaction: tr,
+                    });
+                    const { commands } = new CommandManager({
+                        editor: this.editor,
+                        state,
+                    });
+                    commands.clearNodes();
+                    if (!tr.steps.length) {
+                        return;
+                    }
+                    return tr;
+                },
+            }),
+        ];
+    },
+});
+
+const Tabindex = Extension.create({
+    name: 'tabindex',
+    addProseMirrorPlugins() {
+        return [
+            new prosemirrorState.Plugin({
+                key: new prosemirrorState.PluginKey('tabindex'),
+                props: {
+                    attributes: {
+                        tabindex: '0',
+                    },
+                },
+            }),
+        ];
+    },
+});
+
+var extensions = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ClipboardTextSerializer: ClipboardTextSerializer,
+  Commands: Commands,
+  Editable: Editable,
+  FocusEvents: FocusEvents,
+  Keymap: Keymap,
+  Tabindex: Tabindex
+});
+
+function getNodeAttributes(state, typeOrName) {
+    const type = getNodeType(typeOrName, state.schema);
+    const { from, to } = state.selection;
+    const nodes = [];
+    state.doc.nodesBetween(from, to, node => {
+        nodes.push(node);
+    });
+    const node = nodes
+        .reverse()
+        .find(nodeItem => nodeItem.type.name === type.name);
+    if (!node) {
+        return {};
+    }
+    return { ...node.attrs };
+}
+
+function getAttributes(state, typeOrName) {
+    const schemaType = getSchemaTypeNameByName(typeof typeOrName === 'string'
+        ? typeOrName
+        : typeOrName.name, state.schema);
+    if (schemaType === 'node') {
+        return getNodeAttributes(state, typeOrName);
+    }
+    if (schemaType === 'mark') {
+        return getMarkAttributes(state, typeOrName);
+    }
+    return {};
+}
+
+function isActive(state, name, attributes = {}) {
+    if (!name) {
+        return isNodeActive(state, null, attributes) || isMarkActive(state, null, attributes);
+    }
+    const schemaType = getSchemaTypeNameByName(name, state.schema);
+    if (schemaType === 'node') {
+        return isNodeActive(state, name, attributes);
+    }
+    if (schemaType === 'mark') {
+        return isMarkActive(state, name, attributes);
+    }
+    return false;
+}
+
+function getHTMLFromFragment(fragment, schema) {
+    const documentFragment = prosemirrorModel.DOMSerializer
+        .fromSchema(schema)
+        .serializeFragment(fragment);
+    const temporaryDocument = document.implementation.createHTMLDocument();
+    const container = temporaryDocument.createElement('div');
+    container.appendChild(documentFragment);
+    return container.innerHTML;
+}
+
+function getText(node, options) {
+    const range = {
+        from: 0,
+        to: node.content.size,
+    };
+    return getTextBetween(node, range, options);
+}
+
+function isNodeEmpty(node) {
+    var _a;
+    const defaultContent = (_a = node.type.createAndFill()) === null || _a === void 0 ? void 0 : _a.toJSON();
+    const content = node.toJSON();
+    return JSON.stringify(defaultContent) === JSON.stringify(content);
+}
+
+function createStyleTag(style) {
+    const tipTapStyleTag = document.querySelector('style[data-tiptap-style]');
+    if (tipTapStyleTag !== null) {
+        return tipTapStyleTag;
+    }
+    const styleNode = document.createElement('style');
+    styleNode.setAttribute('data-tiptap-style', '');
+    styleNode.innerHTML = style;
+    document.getElementsByTagName('head')[0].appendChild(styleNode);
+    return styleNode;
+}
+
 class InputRule {
     constructor(config) {
         this.find = config.find;