@tiptap/extension-code-block 2.0.0-beta.19 → 2.0.0-beta.195

package/dist/packages/extension-code-block/src/code-block.d.ts

@@ -1,6 +1,23 @@
 import { Node } from '@tiptap/core';
 export interface CodeBlockOptions {
+    /**
+     * Adds a prefix to language classes that are applied to code tags.
+     * Defaults to `'language-'`.
+     */
     languageClassPrefix: string;
+    /**
+     * Define whether the node should be exited on triple enter.
+     * Defaults to `true`.
+     */
+    exitOnTripleEnter: boolean;
+    /**
+     * Define whether the node should be exited on arrow down if there is no node after it.
+     * Defaults to `true`.
+     */
+    exitOnArrowDown: boolean;
+    /**
+     * Custom HTML attributes that should be added to the rendered HTML tag.
+     */
     HTMLAttributes: Record<string, any>;
 }
 declare module '@tiptap/core' {
@@ -23,4 +40,4 @@ declare module '@tiptap/core' {
 }
 export declare const backtickInputRegex: RegExp;
 export declare const tildeInputRegex: RegExp;
-export declare const CodeBlock: Node<CodeBlockOptions>;
+export declare const CodeBlock: Node<CodeBlockOptions, any>;

package/dist/tiptap-extension-code-block.cjs.js

@@ -3,14 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@tiptap/core');
+var prosemirrorState = require('prosemirror-state');
 
-const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
-const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
+const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
+const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
 const CodeBlock = core.Node.create({
     name: 'codeBlock',
-    defaultOptions: {
-        languageClassPrefix: 'language-',
-        HTMLAttributes: {},
+    addOptions() {
+        return {
+            languageClassPrefix: 'language-',
+            exitOnTripleEnter: true,
+            exitOnArrowDown: true,
+            HTMLAttributes: {},
+        };
     },
     content: 'text*',
     marks: '',
@@ -34,14 +39,7 @@ const CodeBlock = core.Node.create({
                     }
                     return language;
                 },
-                renderHTML: attributes => {
-                    if (!attributes.language) {
-                        return null;
-                    }
-                    return {
-                        class: this.options.languageClassPrefix + attributes.language,
-                    };
-                },
+                rendered: false,
             },
         };
     },
@@ -53,16 +51,28 @@ const CodeBlock = core.Node.create({
             },
         ];
     },
-    renderHTML({ HTMLAttributes }) {
-        return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]];
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            'pre',
+            core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+            [
+                'code',
+                {
+                    class: node.attrs.language
+                        ? this.options.languageClassPrefix + node.attrs.language
+                        : null,
+                },
+                0,
+            ],
+        ];
     },
     addCommands() {
         return {
             setCodeBlock: attributes => ({ commands }) => {
-                return commands.setNode('codeBlock', attributes);
+                return commands.setNode(this.name, attributes);
             },
             toggleCodeBlock: attributes => ({ commands }) => {
-                return commands.toggleNode('codeBlock', 'paragraph', attributes);
+                return commands.toggleNode(this.name, 'paragraph', attributes);
             },
         };
     },
@@ -81,6 +91,56 @@ const CodeBlock = core.Node.create({
                 }
                 return false;
             },
+            // exit node on triple enter
+            Enter: ({ editor }) => {
+                if (!this.options.exitOnTripleEnter) {
+                    return false;
+                }
+                const { state } = editor;
+                const { selection } = state;
+                const { $from, empty } = selection;
+                if (!empty || $from.parent.type !== this.type) {
+                    return false;
+                }
+                const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+                const endsWithDoubleNewline = $from.parent.textContent.endsWith('\n\n');
+                if (!isAtEnd || !endsWithDoubleNewline) {
+                    return false;
+                }
+                return editor
+                    .chain()
+                    .command(({ tr }) => {
+                    tr.delete($from.pos - 2, $from.pos);
+                    return true;
+                })
+                    .exitCode()
+                    .run();
+            },
+            // exit node on arrow down
+            ArrowDown: ({ editor }) => {
+                if (!this.options.exitOnArrowDown) {
+                    return false;
+                }
+                const { state } = editor;
+                const { selection, doc } = state;
+                const { $from, empty } = selection;
+                if (!empty || $from.parent.type !== this.type) {
+                    return false;
+                }
+                const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+                if (!isAtEnd) {
+                    return false;
+                }
+                const after = $from.after();
+                if (after === undefined) {
+                    return false;
+                }
+                const nodeAfter = doc.nodeAt(after);
+                if (nodeAfter) {
+                    return false;
+                }
+                return editor.commands.exitCode();
+            },
         };
     },
     addInputRules() {
@@ -88,12 +148,60 @@ const CodeBlock = core.Node.create({
             core.textblockTypeInputRule({
                 find: backtickInputRegex,
                 type: this.type,
-                getAttributes: ({ groups }) => groups,
+                getAttributes: match => ({
+                    language: match[1],
+                }),
             }),
             core.textblockTypeInputRule({
                 find: tildeInputRegex,
                 type: this.type,
-                getAttributes: ({ groups }) => groups,
+                getAttributes: match => ({
+                    language: match[1],
+                }),
+            }),
+        ];
+    },
+    addProseMirrorPlugins() {
+        return [
+            // this plugin creates a code block for pasted content from VS Code
+            // we can also detect the copied code language
+            new prosemirrorState.Plugin({
+                key: new prosemirrorState.PluginKey('codeBlockVSCodeHandler'),
+                props: {
+                    handlePaste: (view, event) => {
+                        if (!event.clipboardData) {
+                            return false;
+                        }
+                        // don’t create a new code block within code blocks
+                        if (this.editor.isActive(this.type.name)) {
+                            return false;
+                        }
+                        const text = event.clipboardData.getData('text/plain');
+                        const vscode = event.clipboardData.getData('vscode-editor-data');
+                        const vscodeData = vscode
+                            ? JSON.parse(vscode)
+                            : undefined;
+                        const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
+                        if (!text || !language) {
+                            return false;
+                        }
+                        const { tr } = view.state;
+                        // create an empty code block
+                        tr.replaceSelectionWith(this.type.create({ language }));
+                        // put cursor inside the newly created code block
+                        tr.setSelection(prosemirrorState.TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
+                        // add text to code block
+                        // strip carriage return chars from text pasted as code
+                        // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
+                        tr.insertText(text.replace(/\r\n?/g, '\n'));
+                        // store meta information
+                        // this is useful for other plugins that depends on the paste event
+                        // like the paste rule plugin
+                        tr.setMeta('paste', true);
+                        view.dispatch(tr);
+                        return true;
+                    },
+                },
             }),
         ];
     },

package/dist/tiptap-extension-code-block.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tiptap-extension-code-block.cjs.js","sources":["../src/code-block.ts"],"sourcesContent":["import { Node, textblockTypeInputRule } from '@tiptap/core'\n\nexport interface CodeBlockOptions {\n  languageClassPrefix: string,\n  HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    codeBlock: {\n      /**\n       * Set a code block\n       */\n      setCodeBlock: (attributes?: { language: string }) => ReturnType,\n      /**\n       * Toggle a code block\n       */\n      toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n    }\n  }\n}\n\nexport const backtickInputRegex = /^```(?<language>[a-z]*)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n  name: 'codeBlock',\n\n  defaultOptions: {\n    languageClassPrefix: 'language-',\n    HTMLAttributes: {},\n  },\n\n  content: 'text*',\n\n  marks: '',\n\n  group: 'block',\n\n  code: true,\n\n  defining: true,\n\n  addAttributes() {\n    return {\n      language: {\n        default: null,\n        parseHTML: element => {\n          const { languageClassPrefix } = this.options\n          const classNames = [...element.firstElementChild?.classList || []]\n          const languages = classNames\n            .filter(className => className.startsWith(languageClassPrefix))\n            .map(className => className.replace(languageClassPrefix, ''))\n          const language = languages[0]\n\n          if (!language) {\n            return null\n          }\n\n          return language\n        },\n        renderHTML: attributes => {\n          if (!attributes.language) {\n            return null\n          }\n\n          return {\n            class: this.options.languageClassPrefix + attributes.language,\n          }\n        },\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'pre',\n        preserveWhitespace: 'full',\n      },\n    ]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]]\n  },\n\n  addCommands() {\n    return {\n      setCodeBlock: attributes => ({ commands }) => {\n        return commands.setNode('codeBlock', attributes)\n      },\n      toggleCodeBlock: attributes => ({ commands }) => {\n        return commands.toggleNode('codeBlock', 'paragraph', attributes)\n      },\n    }\n  },\n\n  addKeyboardShortcuts() {\n    return {\n      'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n      // remove code block when at start of document or code block is empty\n      Backspace: () => {\n        const { empty, $anchor } = this.editor.state.selection\n        const isAtStart = $anchor.pos === 1\n\n        if (!empty || $anchor.parent.type.name !== this.name) {\n          return false\n        }\n\n        if (isAtStart || !$anchor.parent.textContent.length) {\n          return this.editor.commands.clearNodes()\n        }\n\n        return false\n      },\n    }\n  },\n\n  addInputRules() {\n    return [\n      textblockTypeInputRule({\n        find: backtickInputRegex,\n        type: this.type,\n        getAttributes: ({ groups }) => groups,\n      }),\n      textblockTypeInputRule({\n        find: tildeInputRegex,\n        type: this.type,\n        getAttributes: ({ groups }) => groups,\n      }),\n    ]\n  },\n})\n"],"names":["Node","textblockTypeInputRule"],"mappings":"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"}
+{"version":3,"file":"tiptap-extension-code-block.cjs.js","sources":["../src/code-block.ts"],"sourcesContent":["import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n  /**\n   * Adds a prefix to language classes that are applied to code tags.\n   * Defaults to `'language-'`.\n   */\n  languageClassPrefix: string,\n  /**\n   * Define whether the node should be exited on triple enter.\n   * Defaults to `true`.\n   */\n  exitOnTripleEnter: boolean,\n  /**\n   * Define whether the node should be exited on arrow down if there is no node after it.\n   * Defaults to `true`.\n   */\n  exitOnArrowDown: boolean,\n  /**\n   * Custom HTML attributes that should be added to the rendered HTML tag.\n   */\n  HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    codeBlock: {\n      /**\n       * Set a code block\n       */\n      setCodeBlock: (attributes?: { language: string }) => ReturnType,\n      /**\n       * Toggle a code block\n       */\n      toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n    }\n  }\n}\n\nexport const backtickInputRegex = /^```([a-z]+)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~([a-z]+)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n  name: 'codeBlock',\n\n  addOptions() {\n    return {\n      languageClassPrefix: 'language-',\n      exitOnTripleEnter: true,\n      exitOnArrowDown: true,\n      HTMLAttributes: {},\n    }\n  },\n\n  content: 'text*',\n\n  marks: '',\n\n  group: 'block',\n\n  code: true,\n\n  defining: true,\n\n  addAttributes() {\n    return {\n      language: {\n        default: null,\n        parseHTML: element => {\n          const { languageClassPrefix } = this.options\n          const classNames = [...element.firstElementChild?.classList || []]\n          const languages = classNames\n            .filter(className => className.startsWith(languageClassPrefix))\n            .map(className => className.replace(languageClassPrefix, ''))\n          const language = languages[0]\n\n          if (!language) {\n            return null\n          }\n\n          return language\n        },\n        rendered: false,\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'pre',\n        preserveWhitespace: 'full',\n      },\n    ]\n  },\n\n  renderHTML({ node, HTMLAttributes }) {\n    return [\n      'pre',\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n      [\n        'code',\n        {\n          class: node.attrs.language\n            ? this.options.languageClassPrefix + node.attrs.language\n            : null,\n        },\n        0,\n      ],\n    ]\n  },\n\n  addCommands() {\n    return {\n      setCodeBlock: attributes => ({ commands }) => {\n        return commands.setNode(this.name, attributes)\n      },\n      toggleCodeBlock: attributes => ({ commands }) => {\n        return commands.toggleNode(this.name, 'paragraph', attributes)\n      },\n    }\n  },\n\n  addKeyboardShortcuts() {\n    return {\n      'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n      // remove code block when at start of document or code block is empty\n      Backspace: () => {\n        const { empty, $anchor } = this.editor.state.selection\n        const isAtStart = $anchor.pos === 1\n\n        if (!empty || $anchor.parent.type.name !== this.name) {\n          return false\n        }\n\n        if (isAtStart || !$anchor.parent.textContent.length) {\n          return this.editor.commands.clearNodes()\n        }\n\n        return false\n      },\n\n      // exit node on triple enter\n      Enter: ({ editor }) => {\n        if (!this.options.exitOnTripleEnter) {\n          return false\n        }\n\n        const { state } = editor\n        const { selection } = state\n        const { $from, empty } = selection\n\n        if (!empty || $from.parent.type !== this.type) {\n          return false\n        }\n\n        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n        const endsWithDoubleNewline = $from.parent.textContent.endsWith('\\n\\n')\n\n        if (!isAtEnd || !endsWithDoubleNewline) {\n          return false\n        }\n\n        return editor\n          .chain()\n          .command(({ tr }) => {\n            tr.delete($from.pos - 2, $from.pos)\n\n            return true\n          })\n          .exitCode()\n          .run()\n      },\n\n      // exit node on arrow down\n      ArrowDown: ({ editor }) => {\n        if (!this.options.exitOnArrowDown) {\n          return false\n        }\n\n        const { state } = editor\n        const { selection, doc } = state\n        const { $from, empty } = selection\n\n        if (!empty || $from.parent.type !== this.type) {\n          return false\n        }\n\n        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n\n        if (!isAtEnd) {\n          return false\n        }\n\n        const after = $from.after()\n\n        if (after === undefined) {\n          return false\n        }\n\n        const nodeAfter = doc.nodeAt(after)\n\n        if (nodeAfter) {\n          return false\n        }\n\n        return editor.commands.exitCode()\n      },\n    }\n  },\n\n  addInputRules() {\n    return [\n      textblockTypeInputRule({\n        find: backtickInputRegex,\n        type: this.type,\n        getAttributes: match => ({\n          language: match[1],\n        }),\n      }),\n      textblockTypeInputRule({\n        find: tildeInputRegex,\n        type: this.type,\n        getAttributes: match => ({\n          language: match[1],\n        }),\n      }),\n    ]\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      // this plugin creates a code block for pasted content from VS Code\n      // we can also detect the copied code language\n      new Plugin({\n        key: new PluginKey('codeBlockVSCodeHandler'),\n        props: {\n          handlePaste: (view, event) => {\n            if (!event.clipboardData) {\n              return false\n            }\n\n            // don’t create a new code block within code blocks\n            if (this.editor.isActive(this.type.name)) {\n              return false\n            }\n\n            const text = event.clipboardData.getData('text/plain')\n            const vscode = event.clipboardData.getData('vscode-editor-data')\n            const vscodeData = vscode\n              ? JSON.parse(vscode)\n              : undefined\n            const language = vscodeData?.mode\n\n            if (!text || !language) {\n              return false\n            }\n\n            const { tr } = view.state\n\n            // create an empty code block\n            tr.replaceSelectionWith(this.type.create({ language }))\n\n            // put cursor inside the newly created code block\n            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n            // add text to code block\n            // strip carriage return chars from text pasted as code\n            // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd\n            tr.insertText(text.replace(/\\r\\n?/g, '\\n'))\n\n            // store meta information\n            // this is useful for other plugins that depends on the paste event\n            // like the paste rule plugin\n            tr.setMeta('paste', true)\n\n            view.dispatch(tr)\n\n            return true\n          },\n        },\n      }),\n    ]\n  },\n})\n"],"names":["Node","mergeAttributes","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":"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"}

package/dist/tiptap-extension-code-block.esm.js

@@ -1,12 +1,17 @@
-import { Node, textblockTypeInputRule } from '@tiptap/core';
+import { Node, mergeAttributes, textblockTypeInputRule } from '@tiptap/core';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 
-const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
-const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
+const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
+const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
 const CodeBlock = Node.create({
     name: 'codeBlock',
-    defaultOptions: {
-        languageClassPrefix: 'language-',
-        HTMLAttributes: {},
+    addOptions() {
+        return {
+            languageClassPrefix: 'language-',
+            exitOnTripleEnter: true,
+            exitOnArrowDown: true,
+            HTMLAttributes: {},
+        };
     },
     content: 'text*',
     marks: '',
@@ -30,14 +35,7 @@ const CodeBlock = Node.create({
                     }
                     return language;
                 },
-                renderHTML: attributes => {
-                    if (!attributes.language) {
-                        return null;
-                    }
-                    return {
-                        class: this.options.languageClassPrefix + attributes.language,
-                    };
-                },
+                rendered: false,
             },
         };
     },
@@ -49,16 +47,28 @@ const CodeBlock = Node.create({
             },
         ];
     },
-    renderHTML({ HTMLAttributes }) {
-        return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]];
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            'pre',
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+            [
+                'code',
+                {
+                    class: node.attrs.language
+                        ? this.options.languageClassPrefix + node.attrs.language
+                        : null,
+                },
+                0,
+            ],
+        ];
     },
     addCommands() {
         return {
             setCodeBlock: attributes => ({ commands }) => {
-                return commands.setNode('codeBlock', attributes);
+                return commands.setNode(this.name, attributes);
             },
             toggleCodeBlock: attributes => ({ commands }) => {
-                return commands.toggleNode('codeBlock', 'paragraph', attributes);
+                return commands.toggleNode(this.name, 'paragraph', attributes);
             },
         };
     },
@@ -77,6 +87,56 @@ const CodeBlock = Node.create({
                 }
                 return false;
             },
+            // exit node on triple enter
+            Enter: ({ editor }) => {
+                if (!this.options.exitOnTripleEnter) {
+                    return false;
+                }
+                const { state } = editor;
+                const { selection } = state;
+                const { $from, empty } = selection;
+                if (!empty || $from.parent.type !== this.type) {
+                    return false;
+                }
+                const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+                const endsWithDoubleNewline = $from.parent.textContent.endsWith('\n\n');
+                if (!isAtEnd || !endsWithDoubleNewline) {
+                    return false;
+                }
+                return editor
+                    .chain()
+                    .command(({ tr }) => {
+                    tr.delete($from.pos - 2, $from.pos);
+                    return true;
+                })
+                    .exitCode()
+                    .run();
+            },
+            // exit node on arrow down
+            ArrowDown: ({ editor }) => {
+                if (!this.options.exitOnArrowDown) {
+                    return false;
+                }
+                const { state } = editor;
+                const { selection, doc } = state;
+                const { $from, empty } = selection;
+                if (!empty || $from.parent.type !== this.type) {
+                    return false;
+                }
+                const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+                if (!isAtEnd) {
+                    return false;
+                }
+                const after = $from.after();
+                if (after === undefined) {
+                    return false;
+                }
+                const nodeAfter = doc.nodeAt(after);
+                if (nodeAfter) {
+                    return false;
+                }
+                return editor.commands.exitCode();
+            },
         };
     },
     addInputRules() {
@@ -84,12 +144,60 @@ const CodeBlock = Node.create({
             textblockTypeInputRule({
                 find: backtickInputRegex,
                 type: this.type,
-                getAttributes: ({ groups }) => groups,
+                getAttributes: match => ({
+                    language: match[1],
+                }),
             }),
             textblockTypeInputRule({
                 find: tildeInputRegex,
                 type: this.type,
-                getAttributes: ({ groups }) => groups,
+                getAttributes: match => ({
+                    language: match[1],
+                }),
+            }),
+        ];
+    },
+    addProseMirrorPlugins() {
+        return [
+            // this plugin creates a code block for pasted content from VS Code
+            // we can also detect the copied code language
+            new Plugin({
+                key: new PluginKey('codeBlockVSCodeHandler'),
+                props: {
+                    handlePaste: (view, event) => {
+                        if (!event.clipboardData) {
+                            return false;
+                        }
+                        // don’t create a new code block within code blocks
+                        if (this.editor.isActive(this.type.name)) {
+                            return false;
+                        }
+                        const text = event.clipboardData.getData('text/plain');
+                        const vscode = event.clipboardData.getData('vscode-editor-data');
+                        const vscodeData = vscode
+                            ? JSON.parse(vscode)
+                            : undefined;
+                        const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
+                        if (!text || !language) {
+                            return false;
+                        }
+                        const { tr } = view.state;
+                        // create an empty code block
+                        tr.replaceSelectionWith(this.type.create({ language }));
+                        // put cursor inside the newly created code block
+                        tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
+                        // add text to code block
+                        // strip carriage return chars from text pasted as code
+                        // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
+                        tr.insertText(text.replace(/\r\n?/g, '\n'));
+                        // store meta information
+                        // this is useful for other plugins that depends on the paste event
+                        // like the paste rule plugin
+                        tr.setMeta('paste', true);
+                        view.dispatch(tr);
+                        return true;
+                    },
+                },
             }),
         ];
     },

package/dist/tiptap-extension-code-block.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"tiptap-extension-code-block.esm.js","sources":["../src/code-block.ts"],"sourcesContent":["import { Node, textblockTypeInputRule } from '@tiptap/core'\n\nexport interface CodeBlockOptions {\n  languageClassPrefix: string,\n  HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    codeBlock: {\n      /**\n       * Set a code block\n       */\n      setCodeBlock: (attributes?: { language: string }) => ReturnType,\n      /**\n       * Toggle a code block\n       */\n      toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n    }\n  }\n}\n\nexport const backtickInputRegex = /^```(?<language>[a-z]*)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n  name: 'codeBlock',\n\n  defaultOptions: {\n    languageClassPrefix: 'language-',\n    HTMLAttributes: {},\n  },\n\n  content: 'text*',\n\n  marks: '',\n\n  group: 'block',\n\n  code: true,\n\n  defining: true,\n\n  addAttributes() {\n    return {\n      language: {\n        default: null,\n        parseHTML: element => {\n          const { languageClassPrefix } = this.options\n          const classNames = [...element.firstElementChild?.classList || []]\n          const languages = classNames\n            .filter(className => className.startsWith(languageClassPrefix))\n            .map(className => className.replace(languageClassPrefix, ''))\n          const language = languages[0]\n\n          if (!language) {\n            return null\n          }\n\n          return language\n        },\n        renderHTML: attributes => {\n          if (!attributes.language) {\n            return null\n          }\n\n          return {\n            class: this.options.languageClassPrefix + attributes.language,\n          }\n        },\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'pre',\n        preserveWhitespace: 'full',\n      },\n    ]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]]\n  },\n\n  addCommands() {\n    return {\n      setCodeBlock: attributes => ({ commands }) => {\n        return commands.setNode('codeBlock', attributes)\n      },\n      toggleCodeBlock: attributes => ({ commands }) => {\n        return commands.toggleNode('codeBlock', 'paragraph', attributes)\n      },\n    }\n  },\n\n  addKeyboardShortcuts() {\n    return {\n      'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n      // remove code block when at start of document or code block is empty\n      Backspace: () => {\n        const { empty, $anchor } = this.editor.state.selection\n        const isAtStart = $anchor.pos === 1\n\n        if (!empty || $anchor.parent.type.name !== this.name) {\n          return false\n        }\n\n        if (isAtStart || !$anchor.parent.textContent.length) {\n          return this.editor.commands.clearNodes()\n        }\n\n        return false\n      },\n    }\n  },\n\n  addInputRules() {\n    return [\n      textblockTypeInputRule({\n        find: backtickInputRegex,\n        type: this.type,\n        getAttributes: ({ groups }) => groups,\n      }),\n      textblockTypeInputRule({\n        find: tildeInputRegex,\n        type: this.type,\n        getAttributes: ({ groups }) => groups,\n      }),\n    ]\n  },\n})\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tiptap-extension-code-block.esm.js","sources":["../src/code-block.ts"],"sourcesContent":["import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n  /**\n   * Adds a prefix to language classes that are applied to code tags.\n   * Defaults to `'language-'`.\n   */\n  languageClassPrefix: string,\n  /**\n   * Define whether the node should be exited on triple enter.\n   * Defaults to `true`.\n   */\n  exitOnTripleEnter: boolean,\n  /**\n   * Define whether the node should be exited on arrow down if there is no node after it.\n   * Defaults to `true`.\n   */\n  exitOnArrowDown: boolean,\n  /**\n   * Custom HTML attributes that should be added to the rendered HTML tag.\n   */\n  HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    codeBlock: {\n      /**\n       * Set a code block\n       */\n      setCodeBlock: (attributes?: { language: string }) => ReturnType,\n      /**\n       * Toggle a code block\n       */\n      toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n    }\n  }\n}\n\nexport const backtickInputRegex = /^```([a-z]+)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~([a-z]+)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n  name: 'codeBlock',\n\n  addOptions() {\n    return {\n      languageClassPrefix: 'language-',\n      exitOnTripleEnter: true,\n      exitOnArrowDown: true,\n      HTMLAttributes: {},\n    }\n  },\n\n  content: 'text*',\n\n  marks: '',\n\n  group: 'block',\n\n  code: true,\n\n  defining: true,\n\n  addAttributes() {\n    return {\n      language: {\n        default: null,\n        parseHTML: element => {\n          const { languageClassPrefix } = this.options\n          const classNames = [...element.firstElementChild?.classList || []]\n          const languages = classNames\n            .filter(className => className.startsWith(languageClassPrefix))\n            .map(className => className.replace(languageClassPrefix, ''))\n          const language = languages[0]\n\n          if (!language) {\n            return null\n          }\n\n          return language\n        },\n        rendered: false,\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'pre',\n        preserveWhitespace: 'full',\n      },\n    ]\n  },\n\n  renderHTML({ node, HTMLAttributes }) {\n    return [\n      'pre',\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n      [\n        'code',\n        {\n          class: node.attrs.language\n            ? this.options.languageClassPrefix + node.attrs.language\n            : null,\n        },\n        0,\n      ],\n    ]\n  },\n\n  addCommands() {\n    return {\n      setCodeBlock: attributes => ({ commands }) => {\n        return commands.setNode(this.name, attributes)\n      },\n      toggleCodeBlock: attributes => ({ commands }) => {\n        return commands.toggleNode(this.name, 'paragraph', attributes)\n      },\n    }\n  },\n\n  addKeyboardShortcuts() {\n    return {\n      'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n      // remove code block when at start of document or code block is empty\n      Backspace: () => {\n        const { empty, $anchor } = this.editor.state.selection\n        const isAtStart = $anchor.pos === 1\n\n        if (!empty || $anchor.parent.type.name !== this.name) {\n          return false\n        }\n\n        if (isAtStart || !$anchor.parent.textContent.length) {\n          return this.editor.commands.clearNodes()\n        }\n\n        return false\n      },\n\n      // exit node on triple enter\n      Enter: ({ editor }) => {\n        if (!this.options.exitOnTripleEnter) {\n          return false\n        }\n\n        const { state } = editor\n        const { selection } = state\n        const { $from, empty } = selection\n\n        if (!empty || $from.parent.type !== this.type) {\n          return false\n        }\n\n        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n        const endsWithDoubleNewline = $from.parent.textContent.endsWith('\\n\\n')\n\n        if (!isAtEnd || !endsWithDoubleNewline) {\n          return false\n        }\n\n        return editor\n          .chain()\n          .command(({ tr }) => {\n            tr.delete($from.pos - 2, $from.pos)\n\n            return true\n          })\n          .exitCode()\n          .run()\n      },\n\n      // exit node on arrow down\n      ArrowDown: ({ editor }) => {\n        if (!this.options.exitOnArrowDown) {\n          return false\n        }\n\n        const { state } = editor\n        const { selection, doc } = state\n        const { $from, empty } = selection\n\n        if (!empty || $from.parent.type !== this.type) {\n          return false\n        }\n\n        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n\n        if (!isAtEnd) {\n          return false\n        }\n\n        const after = $from.after()\n\n        if (after === undefined) {\n          return false\n        }\n\n        const nodeAfter = doc.nodeAt(after)\n\n        if (nodeAfter) {\n          return false\n        }\n\n        return editor.commands.exitCode()\n      },\n    }\n  },\n\n  addInputRules() {\n    return [\n      textblockTypeInputRule({\n        find: backtickInputRegex,\n        type: this.type,\n        getAttributes: match => ({\n          language: match[1],\n        }),\n      }),\n      textblockTypeInputRule({\n        find: tildeInputRegex,\n        type: this.type,\n        getAttributes: match => ({\n          language: match[1],\n        }),\n      }),\n    ]\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      // this plugin creates a code block for pasted content from VS Code\n      // we can also detect the copied code language\n      new Plugin({\n        key: new PluginKey('codeBlockVSCodeHandler'),\n        props: {\n          handlePaste: (view, event) => {\n            if (!event.clipboardData) {\n              return false\n            }\n\n            // don’t create a new code block within code blocks\n            if (this.editor.isActive(this.type.name)) {\n              return false\n            }\n\n            const text = event.clipboardData.getData('text/plain')\n            const vscode = event.clipboardData.getData('vscode-editor-data')\n            const vscodeData = vscode\n              ? JSON.parse(vscode)\n              : undefined\n            const language = vscodeData?.mode\n\n            if (!text || !language) {\n              return false\n            }\n\n            const { tr } = view.state\n\n            // create an empty code block\n            tr.replaceSelectionWith(this.type.create({ language }))\n\n            // put cursor inside the newly created code block\n            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n            // add text to code block\n            // strip carriage return chars from text pasted as code\n            // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd\n            tr.insertText(text.replace(/\\r\\n?/g, '\\n'))\n\n            // store meta information\n            // this is useful for other plugins that depends on the paste event\n            // like the paste rule plugin\n            tr.setMeta('paste', true)\n\n            view.dispatch(tr)\n\n            return true\n          },\n        },\n      }),\n    ]\n  },\n})\n"],"names":[],"mappings":";;;AAwCO,MAAM,kBAAkB,GAAG,uBAAsB;AACjD,MAAM,eAAe,GAAG,uBAAsB;AAExC,MAAA,SAAS,GAAG,IAAI,CAAC,MAAM,CAAmB;AACrD,IAAA,IAAI,EAAE,WAAW;IAEjB,UAAU,GAAA;QACR,OAAO;AACL,YAAA,mBAAmB,EAAE,WAAW;AAChC,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,cAAc,EAAE,EAAE;SACnB,CAAA;KACF;AAED,IAAA,OAAO,EAAE,OAAO;AAEhB,IAAA,KAAK,EAAE,EAAE;AAET,IAAA,KAAK,EAAE,OAAO;AAEd,IAAA,IAAI,EAAE,IAAI;AAEV,IAAA,QAAQ,EAAE,IAAI;IAEd,aAAa,GAAA;QACX,OAAO;AACL,YAAA,QAAQ,EAAE;AACR,gBAAA,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,OAAO,IAAG;;AACnB,oBAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;AAC5C,oBAAA,MAAM,UAAU,GAAG,CAAC,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAS,KAAI,EAAE,CAAC,CAAA;oBAClE,MAAM,SAAS,GAAG,UAAU;yBACzB,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;AAC9D,yBAAA,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAA;AAC/D,oBAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;oBAE7B,IAAI,CAAC,QAAQ,EAAE;AACb,wBAAA,OAAO,IAAI,CAAA;AACZ,qBAAA;AAED,oBAAA,OAAO,QAAQ,CAAA;iBAChB;AACD,gBAAA,QAAQ,EAAE,KAAK;AAChB,aAAA;SACF,CAAA;KACF;IAED,SAAS,GAAA;QACP,OAAO;AACL,YAAA;AACE,gBAAA,GAAG,EAAE,KAAK;AACV,gBAAA,kBAAkB,EAAE,MAAM;AAC3B,aAAA;SACF,CAAA;KACF;AAED,IAAA,UAAU,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,EAAA;QACjC,OAAO;YACL,KAAK;YACL,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,cAAc,CAAC;AAC5D,YAAA;gBACE,MAAM;AACN,gBAAA;AACE,oBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;0BACtB,IAAI,CAAC,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ;AACxD,0BAAE,IAAI;AACT,iBAAA;gBACD,CAAC;AACF,aAAA;SACF,CAAA;KACF;IAED,WAAW,GAAA;QACT,OAAO;YACL,YAAY,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;gBAC3C,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;aAC/C;YACD,eAAe,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;AAC9C,gBAAA,OAAO,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,CAAA;aAC/D;SACF,CAAA;KACF;IAED,oBAAoB,GAAA;QAClB,OAAO;YACL,WAAW,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE;;YAGzD,SAAS,EAAE,MAAK;AACd,gBAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAA;AACtD,gBAAA,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,KAAK,CAAC,CAAA;AAEnC,gBAAA,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;AACpD,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;gBAED,IAAI,SAAS,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE;oBACnD,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;AACzC,iBAAA;AAED,gBAAA,OAAO,KAAK,CAAA;aACb;;AAGD,YAAA,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,KAAI;AACpB,gBAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE;AACnC,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;AACxB,gBAAA,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;AAC3B,gBAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAA;AAElC,gBAAA,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;AAC7C,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAA;AAChE,gBAAA,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;AAEvE,gBAAA,IAAI,CAAC,OAAO,IAAI,CAAC,qBAAqB,EAAE;AACtC,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,OAAO,MAAM;AACV,qBAAA,KAAK,EAAE;AACP,qBAAA,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,KAAI;AAClB,oBAAA,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;AAEnC,oBAAA,OAAO,IAAI,CAAA;AACb,iBAAC,CAAC;AACD,qBAAA,QAAQ,EAAE;AACV,qBAAA,GAAG,EAAE,CAAA;aACT;;AAGD,YAAA,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,KAAI;AACxB,gBAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE;AACjC,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;AACxB,gBAAA,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,CAAA;AAChC,gBAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAA;AAElC,gBAAA,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;AAC7C,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAA;gBAEhE,IAAI,CAAC,OAAO,EAAE;AACZ,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;gBAE3B,IAAI,KAAK,KAAK,SAAS,EAAE;AACvB,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;gBAED,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAEnC,gBAAA,IAAI,SAAS,EAAE;AACb,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAA;aAClC;SACF,CAAA;KACF;IAED,aAAa,GAAA;QACX,OAAO;AACL,YAAA,sBAAsB,CAAC;AACrB,gBAAA,IAAI,EAAE,kBAAkB;gBACxB,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,aAAa,EAAE,KAAK,KAAK;AACvB,oBAAA,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;iBACnB,CAAC;aACH,CAAC;AACF,YAAA,sBAAsB,CAAC;AACrB,gBAAA,IAAI,EAAE,eAAe;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,aAAa,EAAE,KAAK,KAAK;AACvB,oBAAA,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;iBACnB,CAAC;aACH,CAAC;SACH,CAAA;KACF;IAED,qBAAqB,GAAA;QACnB,OAAO;;;AAGL,YAAA,IAAI,MAAM,CAAC;AACT,gBAAA,GAAG,EAAE,IAAI,SAAS,CAAC,wBAAwB,CAAC;AAC5C,gBAAA,KAAK,EAAE;AACL,oBAAA,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;AAC3B,wBAAA,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;AACxB,4BAAA,OAAO,KAAK,CAAA;AACb,yBAAA;;AAGD,wBAAA,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AACxC,4BAAA,OAAO,KAAK,CAAA;AACb,yBAAA;wBAED,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;wBACtD,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAA;wBAChE,MAAM,UAAU,GAAG,MAAM;AACvB,8BAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;8BAClB,SAAS,CAAA;wBACb,MAAM,QAAQ,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,IAAI,CAAA;AAEjC,wBAAA,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;AACtB,4BAAA,OAAO,KAAK,CAAA;AACb,yBAAA;AAED,wBAAA,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;;AAGzB,wBAAA,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;;AAGvD,wBAAA,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;;;;AAKvF,wBAAA,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAA;;;;AAK3C,wBAAA,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;AAEzB,wBAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;AAEjB,wBAAA,OAAO,IAAI,CAAA;qBACZ;AACF,iBAAA;aACF,CAAC;SACH,CAAA;KACF;AACF,CAAA;;;;"}

package/dist/tiptap-extension-code-block.umd.js

@@ -1,16 +1,20 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-code-block"] = {}, global.core));
-})(this, (function (exports, core) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('prosemirror-state')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', 'prosemirror-state'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-code-block"] = {}, global.core, global.prosemirrorState));
+})(this, (function (exports, core, prosemirrorState) { 'use strict';
 
-  const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
-  const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
+  const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
+  const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
   const CodeBlock = core.Node.create({
       name: 'codeBlock',
-      defaultOptions: {
-          languageClassPrefix: 'language-',
-          HTMLAttributes: {},
+      addOptions() {
+          return {
+              languageClassPrefix: 'language-',
+              exitOnTripleEnter: true,
+              exitOnArrowDown: true,
+              HTMLAttributes: {},
+          };
       },
       content: 'text*',
       marks: '',
@@ -34,14 +38,7 @@
                       }
                       return language;
                   },
-                  renderHTML: attributes => {
-                      if (!attributes.language) {
-                          return null;
-                      }
-                      return {
-                          class: this.options.languageClassPrefix + attributes.language,
-                      };
-                  },
+                  rendered: false,
               },
           };
       },
@@ -53,16 +50,28 @@
               },
           ];
       },
-      renderHTML({ HTMLAttributes }) {
-          return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]];
+      renderHTML({ node, HTMLAttributes }) {
+          return [
+              'pre',
+              core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+              [
+                  'code',
+                  {
+                      class: node.attrs.language
+                          ? this.options.languageClassPrefix + node.attrs.language
+                          : null,
+                  },
+                  0,
+              ],
+          ];
       },
       addCommands() {
           return {
               setCodeBlock: attributes => ({ commands }) => {
-                  return commands.setNode('codeBlock', attributes);
+                  return commands.setNode(this.name, attributes);
               },
               toggleCodeBlock: attributes => ({ commands }) => {
-                  return commands.toggleNode('codeBlock', 'paragraph', attributes);
+                  return commands.toggleNode(this.name, 'paragraph', attributes);
               },
           };
       },
@@ -81,6 +90,56 @@
                   }
                   return false;
               },
+              // exit node on triple enter
+              Enter: ({ editor }) => {
+                  if (!this.options.exitOnTripleEnter) {
+                      return false;
+                  }
+                  const { state } = editor;
+                  const { selection } = state;
+                  const { $from, empty } = selection;
+                  if (!empty || $from.parent.type !== this.type) {
+                      return false;
+                  }
+                  const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+                  const endsWithDoubleNewline = $from.parent.textContent.endsWith('\n\n');
+                  if (!isAtEnd || !endsWithDoubleNewline) {
+                      return false;
+                  }
+                  return editor
+                      .chain()
+                      .command(({ tr }) => {
+                      tr.delete($from.pos - 2, $from.pos);
+                      return true;
+                  })
+                      .exitCode()
+                      .run();
+              },
+              // exit node on arrow down
+              ArrowDown: ({ editor }) => {
+                  if (!this.options.exitOnArrowDown) {
+                      return false;
+                  }
+                  const { state } = editor;
+                  const { selection, doc } = state;
+                  const { $from, empty } = selection;
+                  if (!empty || $from.parent.type !== this.type) {
+                      return false;
+                  }
+                  const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+                  if (!isAtEnd) {
+                      return false;
+                  }
+                  const after = $from.after();
+                  if (after === undefined) {
+                      return false;
+                  }
+                  const nodeAfter = doc.nodeAt(after);
+                  if (nodeAfter) {
+                      return false;
+                  }
+                  return editor.commands.exitCode();
+              },
           };
       },
       addInputRules() {
@@ -88,12 +147,60 @@
               core.textblockTypeInputRule({
                   find: backtickInputRegex,
                   type: this.type,
-                  getAttributes: ({ groups }) => groups,
+                  getAttributes: match => ({
+                      language: match[1],
+                  }),
               }),
               core.textblockTypeInputRule({
                   find: tildeInputRegex,
                   type: this.type,
-                  getAttributes: ({ groups }) => groups,
+                  getAttributes: match => ({
+                      language: match[1],
+                  }),
+              }),
+          ];
+      },
+      addProseMirrorPlugins() {
+          return [
+              // this plugin creates a code block for pasted content from VS Code
+              // we can also detect the copied code language
+              new prosemirrorState.Plugin({
+                  key: new prosemirrorState.PluginKey('codeBlockVSCodeHandler'),
+                  props: {
+                      handlePaste: (view, event) => {
+                          if (!event.clipboardData) {
+                              return false;
+                          }
+                          // don’t create a new code block within code blocks
+                          if (this.editor.isActive(this.type.name)) {
+                              return false;
+                          }
+                          const text = event.clipboardData.getData('text/plain');
+                          const vscode = event.clipboardData.getData('vscode-editor-data');
+                          const vscodeData = vscode
+                              ? JSON.parse(vscode)
+                              : undefined;
+                          const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
+                          if (!text || !language) {
+                              return false;
+                          }
+                          const { tr } = view.state;
+                          // create an empty code block
+                          tr.replaceSelectionWith(this.type.create({ language }));
+                          // put cursor inside the newly created code block
+                          tr.setSelection(prosemirrorState.TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
+                          // add text to code block
+                          // strip carriage return chars from text pasted as code
+                          // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
+                          tr.insertText(text.replace(/\r\n?/g, '\n'));
+                          // store meta information
+                          // this is useful for other plugins that depends on the paste event
+                          // like the paste rule plugin
+                          tr.setMeta('paste', true);
+                          view.dispatch(tr);
+                          return true;
+                      },
+                  },
               }),
           ];
       },

package/dist/tiptap-extension-code-block.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"tiptap-extension-code-block.umd.js","sources":["../src/code-block.ts"],"sourcesContent":["import { Node, textblockTypeInputRule } from '@tiptap/core'\n\nexport interface CodeBlockOptions {\n  languageClassPrefix: string,\n  HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    codeBlock: {\n      /**\n       * Set a code block\n       */\n      setCodeBlock: (attributes?: { language: string }) => ReturnType,\n      /**\n       * Toggle a code block\n       */\n      toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n    }\n  }\n}\n\nexport const backtickInputRegex = /^```(?<language>[a-z]*)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n  name: 'codeBlock',\n\n  defaultOptions: {\n    languageClassPrefix: 'language-',\n    HTMLAttributes: {},\n  },\n\n  content: 'text*',\n\n  marks: '',\n\n  group: 'block',\n\n  code: true,\n\n  defining: true,\n\n  addAttributes() {\n    return {\n      language: {\n        default: null,\n        parseHTML: element => {\n          const { languageClassPrefix } = this.options\n          const classNames = [...element.firstElementChild?.classList || []]\n          const languages = classNames\n            .filter(className => className.startsWith(languageClassPrefix))\n            .map(className => className.replace(languageClassPrefix, ''))\n          const language = languages[0]\n\n          if (!language) {\n            return null\n          }\n\n          return language\n        },\n        renderHTML: attributes => {\n          if (!attributes.language) {\n            return null\n          }\n\n          return {\n            class: this.options.languageClassPrefix + attributes.language,\n          }\n        },\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'pre',\n        preserveWhitespace: 'full',\n      },\n    ]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]]\n  },\n\n  addCommands() {\n    return {\n      setCodeBlock: attributes => ({ commands }) => {\n        return commands.setNode('codeBlock', attributes)\n      },\n      toggleCodeBlock: attributes => ({ commands }) => {\n        return commands.toggleNode('codeBlock', 'paragraph', attributes)\n      },\n    }\n  },\n\n  addKeyboardShortcuts() {\n    return {\n      'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n      // remove code block when at start of document or code block is empty\n      Backspace: () => {\n        const { empty, $anchor } = this.editor.state.selection\n        const isAtStart = $anchor.pos === 1\n\n        if (!empty || $anchor.parent.type.name !== this.name) {\n          return false\n        }\n\n        if (isAtStart || !$anchor.parent.textContent.length) {\n          return this.editor.commands.clearNodes()\n        }\n\n        return false\n      },\n    }\n  },\n\n  addInputRules() {\n    return [\n      textblockTypeInputRule({\n        find: backtickInputRegex,\n        type: this.type,\n        getAttributes: ({ groups }) => groups,\n      }),\n      textblockTypeInputRule({\n        find: tildeInputRegex,\n        type: this.type,\n        getAttributes: ({ groups }) => groups,\n      }),\n    ]\n  },\n})\n"],"names":["Node","textblockTypeInputRule"],"mappings":"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"}
+{"version":3,"file":"tiptap-extension-code-block.umd.js","sources":["../src/code-block.ts"],"sourcesContent":["import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n  /**\n   * Adds a prefix to language classes that are applied to code tags.\n   * Defaults to `'language-'`.\n   */\n  languageClassPrefix: string,\n  /**\n   * Define whether the node should be exited on triple enter.\n   * Defaults to `true`.\n   */\n  exitOnTripleEnter: boolean,\n  /**\n   * Define whether the node should be exited on arrow down if there is no node after it.\n   * Defaults to `true`.\n   */\n  exitOnArrowDown: boolean,\n  /**\n   * Custom HTML attributes that should be added to the rendered HTML tag.\n   */\n  HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    codeBlock: {\n      /**\n       * Set a code block\n       */\n      setCodeBlock: (attributes?: { language: string }) => ReturnType,\n      /**\n       * Toggle a code block\n       */\n      toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n    }\n  }\n}\n\nexport const backtickInputRegex = /^```([a-z]+)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~([a-z]+)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n  name: 'codeBlock',\n\n  addOptions() {\n    return {\n      languageClassPrefix: 'language-',\n      exitOnTripleEnter: true,\n      exitOnArrowDown: true,\n      HTMLAttributes: {},\n    }\n  },\n\n  content: 'text*',\n\n  marks: '',\n\n  group: 'block',\n\n  code: true,\n\n  defining: true,\n\n  addAttributes() {\n    return {\n      language: {\n        default: null,\n        parseHTML: element => {\n          const { languageClassPrefix } = this.options\n          const classNames = [...element.firstElementChild?.classList || []]\n          const languages = classNames\n            .filter(className => className.startsWith(languageClassPrefix))\n            .map(className => className.replace(languageClassPrefix, ''))\n          const language = languages[0]\n\n          if (!language) {\n            return null\n          }\n\n          return language\n        },\n        rendered: false,\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'pre',\n        preserveWhitespace: 'full',\n      },\n    ]\n  },\n\n  renderHTML({ node, HTMLAttributes }) {\n    return [\n      'pre',\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n      [\n        'code',\n        {\n          class: node.attrs.language\n            ? this.options.languageClassPrefix + node.attrs.language\n            : null,\n        },\n        0,\n      ],\n    ]\n  },\n\n  addCommands() {\n    return {\n      setCodeBlock: attributes => ({ commands }) => {\n        return commands.setNode(this.name, attributes)\n      },\n      toggleCodeBlock: attributes => ({ commands }) => {\n        return commands.toggleNode(this.name, 'paragraph', attributes)\n      },\n    }\n  },\n\n  addKeyboardShortcuts() {\n    return {\n      'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n      // remove code block when at start of document or code block is empty\n      Backspace: () => {\n        const { empty, $anchor } = this.editor.state.selection\n        const isAtStart = $anchor.pos === 1\n\n        if (!empty || $anchor.parent.type.name !== this.name) {\n          return false\n        }\n\n        if (isAtStart || !$anchor.parent.textContent.length) {\n          return this.editor.commands.clearNodes()\n        }\n\n        return false\n      },\n\n      // exit node on triple enter\n      Enter: ({ editor }) => {\n        if (!this.options.exitOnTripleEnter) {\n          return false\n        }\n\n        const { state } = editor\n        const { selection } = state\n        const { $from, empty } = selection\n\n        if (!empty || $from.parent.type !== this.type) {\n          return false\n        }\n\n        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n        const endsWithDoubleNewline = $from.parent.textContent.endsWith('\\n\\n')\n\n        if (!isAtEnd || !endsWithDoubleNewline) {\n          return false\n        }\n\n        return editor\n          .chain()\n          .command(({ tr }) => {\n            tr.delete($from.pos - 2, $from.pos)\n\n            return true\n          })\n          .exitCode()\n          .run()\n      },\n\n      // exit node on arrow down\n      ArrowDown: ({ editor }) => {\n        if (!this.options.exitOnArrowDown) {\n          return false\n        }\n\n        const { state } = editor\n        const { selection, doc } = state\n        const { $from, empty } = selection\n\n        if (!empty || $from.parent.type !== this.type) {\n          return false\n        }\n\n        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n\n        if (!isAtEnd) {\n          return false\n        }\n\n        const after = $from.after()\n\n        if (after === undefined) {\n          return false\n        }\n\n        const nodeAfter = doc.nodeAt(after)\n\n        if (nodeAfter) {\n          return false\n        }\n\n        return editor.commands.exitCode()\n      },\n    }\n  },\n\n  addInputRules() {\n    return [\n      textblockTypeInputRule({\n        find: backtickInputRegex,\n        type: this.type,\n        getAttributes: match => ({\n          language: match[1],\n        }),\n      }),\n      textblockTypeInputRule({\n        find: tildeInputRegex,\n        type: this.type,\n        getAttributes: match => ({\n          language: match[1],\n        }),\n      }),\n    ]\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      // this plugin creates a code block for pasted content from VS Code\n      // we can also detect the copied code language\n      new Plugin({\n        key: new PluginKey('codeBlockVSCodeHandler'),\n        props: {\n          handlePaste: (view, event) => {\n            if (!event.clipboardData) {\n              return false\n            }\n\n            // don’t create a new code block within code blocks\n            if (this.editor.isActive(this.type.name)) {\n              return false\n            }\n\n            const text = event.clipboardData.getData('text/plain')\n            const vscode = event.clipboardData.getData('vscode-editor-data')\n            const vscodeData = vscode\n              ? JSON.parse(vscode)\n              : undefined\n            const language = vscodeData?.mode\n\n            if (!text || !language) {\n              return false\n            }\n\n            const { tr } = view.state\n\n            // create an empty code block\n            tr.replaceSelectionWith(this.type.create({ language }))\n\n            // put cursor inside the newly created code block\n            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n            // add text to code block\n            // strip carriage return chars from text pasted as code\n            // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd\n            tr.insertText(text.replace(/\\r\\n?/g, '\\n'))\n\n            // store meta information\n            // this is useful for other plugins that depends on the paste event\n            // like the paste rule plugin\n            tr.setMeta('paste', true)\n\n            view.dispatch(tr)\n\n            return true\n          },\n        },\n      }),\n    ]\n  },\n})\n"],"names":["Node","mergeAttributes","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-code-block",
   "description": "code block extension for tiptap",
-  "version": "2.0.0-beta.19",
+  "version": "2.0.0-beta.195",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -21,12 +21,14 @@
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1"
+    "@tiptap/core": "^2.0.0-beta.193"
+  },
+  "dependencies": {
+    "prosemirror-state": "1.4.1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/extension-code-block"
-  },
-  "gitHead": "ed00dbbe56d7a31dbfcf02594c4ce5f54c7bc27a"
+  }
 }

package/src/code-block.ts

@@ -1,7 +1,25 @@
-import { Node, textblockTypeInputRule } from '@tiptap/core'
+import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
 
 export interface CodeBlockOptions {
+  /**
+   * Adds a prefix to language classes that are applied to code tags.
+   * Defaults to `'language-'`.
+   */
   languageClassPrefix: string,
+  /**
+   * Define whether the node should be exited on triple enter.
+   * Defaults to `true`.
+   */
+  exitOnTripleEnter: boolean,
+  /**
+   * Define whether the node should be exited on arrow down if there is no node after it.
+   * Defaults to `true`.
+   */
+  exitOnArrowDown: boolean,
+  /**
+   * Custom HTML attributes that should be added to the rendered HTML tag.
+   */
   HTMLAttributes: Record<string, any>,
 }
 
@@ -20,15 +38,19 @@ declare module '@tiptap/core' {
   }
 }
 
-export const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/
-export const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/
+export const backtickInputRegex = /^```([a-z]+)?[\s\n]$/
+export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/
 
 export const CodeBlock = Node.create<CodeBlockOptions>({
   name: 'codeBlock',
 
-  defaultOptions: {
-    languageClassPrefix: 'language-',
-    HTMLAttributes: {},
+  addOptions() {
+    return {
+      languageClassPrefix: 'language-',
+      exitOnTripleEnter: true,
+      exitOnArrowDown: true,
+      HTMLAttributes: {},
+    }
   },
 
   content: 'text*',
@@ -59,15 +81,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
 
           return language
         },
-        renderHTML: attributes => {
-          if (!attributes.language) {
-            return null
-          }
-
-          return {
-            class: this.options.languageClassPrefix + attributes.language,
-          }
-        },
+        rendered: false,
       },
     }
   },
@@ -81,17 +95,29 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
     ]
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]]
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      'pre',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      [
+        'code',
+        {
+          class: node.attrs.language
+            ? this.options.languageClassPrefix + node.attrs.language
+            : null,
+        },
+        0,
+      ],
+    ]
   },
 
   addCommands() {
     return {
       setCodeBlock: attributes => ({ commands }) => {
-        return commands.setNode('codeBlock', attributes)
+        return commands.setNode(this.name, attributes)
       },
       toggleCodeBlock: attributes => ({ commands }) => {
-        return commands.toggleNode('codeBlock', 'paragraph', attributes)
+        return commands.toggleNode(this.name, 'paragraph', attributes)
       },
     }
   },
@@ -115,6 +141,73 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
 
         return false
       },
+
+      // exit node on triple enter
+      Enter: ({ editor }) => {
+        if (!this.options.exitOnTripleEnter) {
+          return false
+        }
+
+        const { state } = editor
+        const { selection } = state
+        const { $from, empty } = selection
+
+        if (!empty || $from.parent.type !== this.type) {
+          return false
+        }
+
+        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2
+        const endsWithDoubleNewline = $from.parent.textContent.endsWith('\n\n')
+
+        if (!isAtEnd || !endsWithDoubleNewline) {
+          return false
+        }
+
+        return editor
+          .chain()
+          .command(({ tr }) => {
+            tr.delete($from.pos - 2, $from.pos)
+
+            return true
+          })
+          .exitCode()
+          .run()
+      },
+
+      // exit node on arrow down
+      ArrowDown: ({ editor }) => {
+        if (!this.options.exitOnArrowDown) {
+          return false
+        }
+
+        const { state } = editor
+        const { selection, doc } = state
+        const { $from, empty } = selection
+
+        if (!empty || $from.parent.type !== this.type) {
+          return false
+        }
+
+        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2
+
+        if (!isAtEnd) {
+          return false
+        }
+
+        const after = $from.after()
+
+        if (after === undefined) {
+          return false
+        }
+
+        const nodeAfter = doc.nodeAt(after)
+
+        if (nodeAfter) {
+          return false
+        }
+
+        return editor.commands.exitCode()
+      },
     }
   },
 
@@ -123,12 +216,71 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
       textblockTypeInputRule({
         find: backtickInputRegex,
         type: this.type,
-        getAttributes: ({ groups }) => groups,
+        getAttributes: match => ({
+          language: match[1],
+        }),
       }),
       textblockTypeInputRule({
         find: tildeInputRegex,
         type: this.type,
-        getAttributes: ({ groups }) => groups,
+        getAttributes: match => ({
+          language: match[1],
+        }),
+      }),
+    ]
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      // this plugin creates a code block for pasted content from VS Code
+      // we can also detect the copied code language
+      new Plugin({
+        key: new PluginKey('codeBlockVSCodeHandler'),
+        props: {
+          handlePaste: (view, event) => {
+            if (!event.clipboardData) {
+              return false
+            }
+
+            // don’t create a new code block within code blocks
+            if (this.editor.isActive(this.type.name)) {
+              return false
+            }
+
+            const text = event.clipboardData.getData('text/plain')
+            const vscode = event.clipboardData.getData('vscode-editor-data')
+            const vscodeData = vscode
+              ? JSON.parse(vscode)
+              : undefined
+            const language = vscodeData?.mode
+
+            if (!text || !language) {
+              return false
+            }
+
+            const { tr } = view.state
+
+            // create an empty code block
+            tr.replaceSelectionWith(this.type.create({ language }))
+
+            // put cursor inside the newly created code block
+            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))
+
+            // add text to code block
+            // strip carriage return chars from text pasted as code
+            // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
+            tr.insertText(text.replace(/\r\n?/g, '\n'))
+
+            // store meta information
+            // this is useful for other plugins that depends on the paste event
+            // like the paste rule plugin
+            tr.setMeta('paste', true)
+
+            view.dispatch(tr)
+
+            return true
+          },
+        },
       }),
     ]
   },

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021, überdosis GbR
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.