@tiptap/extension-code-block 2.0.0-beta.3 → 2.0.0-beta.33

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020, überdosis GbR
+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

package/README.md

@@ -7,8 +7,8 @@
 ## Introduction
 tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
 
-## Offical Documentation
+## Official Documentation
 Documentation can be found on the [tiptap website](https://tiptap.dev).
 
 ## License
-tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
+tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

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

@@ -1,28 +1,26 @@
-import { Command, Node } from '@tiptap/core';
+import { Node } from '@tiptap/core';
 export interface CodeBlockOptions {
     languageClassPrefix: string;
-    HTMLAttributes: {
-        [key: string]: any;
-    };
+    HTMLAttributes: Record<string, any>;
 }
 declare module '@tiptap/core' {
-    interface Commands {
+    interface Commands<ReturnType> {
         codeBlock: {
             /**
              * Set a code block
              */
             setCodeBlock: (attributes?: {
                 language: string;
-            }) => Command;
+            }) => ReturnType;
             /**
              * Toggle a code block
              */
             toggleCodeBlock: (attributes?: {
                 language: string;
-            }) => Command;
+            }) => ReturnType;
         };
     }
 }
 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,15 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@tiptap/core');
-var prosemirrorInputrules = require('prosemirror-inputrules');
+var prosemirrorState = require('prosemirror-state');
 
-const backtickInputRegex = /^```(?<language>[a-z]*)? $/;
-const tildeInputRegex = /^~~~(?<language>[a-z]*)? $/;
+const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
+const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
 const CodeBlock = core.Node.create({
     name: 'codeBlock',
-    defaultOptions: {
-        languageClassPrefix: 'language-',
-        HTMLAttributes: {},
+    addOptions() {
+        return {
+            languageClassPrefix: 'language-',
+            HTMLAttributes: {},
+        };
     },
     content: 'text*',
     marks: '',
@@ -24,14 +26,16 @@ const CodeBlock = core.Node.create({
                 default: null,
                 parseHTML: element => {
                     var _a;
-                    const classAttribute = (_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute('class');
-                    if (!classAttribute) {
+                    const { languageClassPrefix } = this.options;
+                    const classNames = [...((_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList) || []];
+                    const languages = classNames
+                        .filter(className => className.startsWith(languageClassPrefix))
+                        .map(className => className.replace(languageClassPrefix, ''));
+                    const language = languages[0];
+                    if (!language) {
                         return null;
                     }
-                    const regexLanguageClassPrefix = new RegExp(`^(${this.options.languageClassPrefix})`);
-                    return {
-                        language: classAttribute.replace(regexLanguageClassPrefix, ''),
-                    };
+                    return language;
                 },
                 renderHTML: attributes => {
                     if (!attributes.language) {
@@ -58,10 +62,10 @@ const CodeBlock = core.Node.create({
     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);
             },
         };
     },
@@ -69,10 +73,10 @@ const CodeBlock = core.Node.create({
         return {
             'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),
             // remove code block when at start of document or code block is empty
-            Backspace: state => {
-                const { empty, $anchor } = state.selection;
+            Backspace: () => {
+                const { empty, $anchor } = this.editor.state.selection;
                 const isAtStart = $anchor.pos === 1;
-                if (!empty || $anchor.parent.type.name !== 'codeBlock') {
+                if (!empty || $anchor.parent.type.name !== this.name) {
                     return false;
                 }
                 if (isAtStart || !$anchor.parent.textContent.length) {
@@ -80,18 +84,114 @@ const CodeBlock = core.Node.create({
                 }
                 return false;
             },
+            // escape node on triple enter
+            Enter: ({ editor }) => {
+                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();
+            },
+            // escape node on arrow down
+            ArrowDown: ({ editor }) => {
+                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() {
         return [
-            prosemirrorInputrules.textblockTypeInputRule(backtickInputRegex, this.type, ({ groups }) => groups),
-            prosemirrorInputrules.textblockTypeInputRule(tildeInputRegex, this.type, ({ groups }) => groups),
+            core.textblockTypeInputRule({
+                find: backtickInputRegex,
+                type: this.type,
+                getAttributes: ({ groups }) => groups,
+            }),
+            core.textblockTypeInputRule({
+                find: tildeInputRegex,
+                type: this.type,
+                getAttributes: ({ groups }) => groups,
+            }),
+        ];
+    },
+    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;
+                    },
+                },
+            }),
         ];
     },
 });
 
 exports.CodeBlock = CodeBlock;
 exports.backtickInputRegex = backtickInputRegex;
-exports.default = CodeBlock;
+exports["default"] = CodeBlock;
 exports.tildeInputRegex = tildeInputRegex;
 //# sourceMappingURL=tiptap-extension-code-block.cjs.js.map

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 { Command, Node } from '@tiptap/core'\nimport { textblockTypeInputRule } from 'prosemirror-inputrules'\n\nexport interface CodeBlockOptions {\n  languageClassPrefix: string,\n  HTMLAttributes: {\n    [key: string]: any\n  },\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands {\n    codeBlock: {\n      /**\n       * Set a code block\n       */\n      setCodeBlock: (attributes?: { language: string }) => Command,\n      /**\n       * Toggle a code block\n       */\n      toggleCodeBlock: (attributes?: { language: string }) => Command,\n    }\n  }\n}\n\nexport const backtickInputRegex = /^```(?<language>[a-z]*)? $/\nexport const tildeInputRegex = /^~~~(?<language>[a-z]*)? $/\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 classAttribute = element.firstElementChild?.getAttribute('class')\n\n          if (!classAttribute) {\n            return null\n          }\n\n          const regexLanguageClassPrefix = new RegExp(`^(${this.options.languageClassPrefix})`)\n\n          return {\n            language: classAttribute.replace(regexLanguageClassPrefix, ''),\n          }\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: state => {\n        const { empty, $anchor } = state.selection\n        const isAtStart = $anchor.pos === 1\n\n        if (!empty || $anchor.parent.type.name !== 'codeBlock') {\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(backtickInputRegex, this.type, ({ groups }: any) => groups),\n      textblockTypeInputRule(tildeInputRegex, this.type, ({ groups }: any) => groups),\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 { Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\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  addOptions() {\n    return {\n      languageClassPrefix: 'language-',\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        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(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      // escape node on triple enter\n      Enter: ({ editor }) => {\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      // escape node on arrow down\n      ArrowDown: ({ editor }) => {\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: ({ groups }) => groups,\n      }),\n      textblockTypeInputRule({\n        find: tildeInputRegex,\n        type: this.type,\n        getAttributes: ({ groups }) => groups,\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","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":";;;;;;;MAuBa,kBAAkB,GAAG,kCAAiC;MACtD,eAAe,GAAG,kCAAiC;MAEnD,SAAS,GAAGA,SAAI,CAAC,MAAM,CAAmB;IACrD,IAAI,EAAE,WAAW;IAEjB,UAAU;QACR,OAAO;YACL,mBAAmB,EAAE,WAAW;YAChC,cAAc,EAAE,EAAE;SACnB,CAAA;KACF;IAED,OAAO,EAAE,OAAO;IAEhB,KAAK,EAAE,EAAE;IAET,KAAK,EAAE,OAAO;IAEd,IAAI,EAAE,IAAI;IAEV,QAAQ,EAAE,IAAI;IAEd,aAAa;QACX,OAAO;YACL,QAAQ,EAAE;gBACR,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,OAAO;;oBAChB,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;oBAC5C,MAAM,UAAU,GAAG,CAAC,GAAG,CAAA,MAAA,OAAO,CAAC,iBAAiB,0CAAE,SAAS,KAAI,EAAE,CAAC,CAAA;oBAClE,MAAM,SAAS,GAAG,UAAU;yBACzB,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;yBAC9D,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAA;oBAC/D,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;oBAE7B,IAAI,CAAC,QAAQ,EAAE;wBACb,OAAO,IAAI,CAAA;qBACZ;oBAED,OAAO,QAAQ,CAAA;iBAChB;gBACD,UAAU,EAAE,UAAU;oBACpB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE;wBACxB,OAAO,IAAI,CAAA;qBACZ;oBAED,OAAO;wBACL,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ;qBAC9D,CAAA;iBACF;aACF;SACF,CAAA;KACF;IAED,SAAS;QACP,OAAO;YACL;gBACE,GAAG,EAAE,KAAK;gBACV,kBAAkB,EAAE,MAAM;aAC3B;SACF,CAAA;KACF;IAED,UAAU,CAAC,EAAE,cAAc,EAAE;QAC3B,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,CAAA;KACzE;IAED,WAAW;QACT,OAAO;YACL,YAAY,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE;gBACvC,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;aAC/C;YACD,eAAe,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE;gBAC1C,OAAO,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,CAAA;aAC/D;SACF,CAAA;KACF;IAED,oBAAoB;QAClB,OAAO;YACL,WAAW,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE;;YAGzD,SAAS,EAAE;gBACT,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAA;gBACtD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,KAAK,CAAC,CAAA;gBAEnC,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;oBACpD,OAAO,KAAK,CAAA;iBACb;gBAED,IAAI,SAAS,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE;oBACnD,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;iBACzC;gBAED,OAAO,KAAK,CAAA;aACb;;YAGD,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE;gBAChB,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;gBACxB,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;gBAC3B,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAA;gBAElC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;oBAC7C,OAAO,KAAK,CAAA;iBACb;gBAED,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAA;gBAChE,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;gBAEvE,IAAI,CAAC,OAAO,IAAI,CAAC,qBAAqB,EAAE;oBACtC,OAAO,KAAK,CAAA;iBACb;gBAED,OAAO,MAAM;qBACV,KAAK,EAAE;qBACP,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;oBACd,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;oBAEnC,OAAO,IAAI,CAAA;iBACZ,CAAC;qBACD,QAAQ,EAAE;qBACV,GAAG,EAAE,CAAA;aACT;;YAGD,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE;gBACpB,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;gBACxB,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,CAAA;gBAChC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAA;gBAElC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;oBAC7C,OAAO,KAAK,CAAA;iBACb;gBAED,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAA;gBAEhE,IAAI,CAAC,OAAO,EAAE;oBACZ,OAAO,KAAK,CAAA;iBACb;gBAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;gBAE3B,IAAI,KAAK,KAAK,SAAS,EAAE;oBACvB,OAAO,KAAK,CAAA;iBACb;gBAED,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBAEnC,IAAI,SAAS,EAAE;oBACb,OAAO,KAAK,CAAA;iBACb;gBAED,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAA;aAClC;SACF,CAAA;KACF;IAED,aAAa;QACX,OAAO;YACLC,2BAAsB,CAAC;gBACrB,IAAI,EAAE,kBAAkB;gBACxB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM;aACtC,CAAC;YACFA,2BAAsB,CAAC;gBACrB,IAAI,EAAE,eAAe;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM;aACtC,CAAC;SACH,CAAA;KACF;IAED,qBAAqB;QACnB,OAAO;;;YAGL,IAAIC,uBAAM,CAAC;gBACT,GAAG,EAAE,IAAIC,0BAAS,CAAC,wBAAwB,CAAC;gBAC5C,KAAK,EAAE;oBACL,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK;wBACvB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;4BACxB,OAAO,KAAK,CAAA;yBACb;;wBAGD,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;4BACxC,OAAO,KAAK,CAAA;yBACb;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;8BACrB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;8BAClB,SAAS,CAAA;wBACb,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,CAAA;wBAEjC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;4BACtB,OAAO,KAAK,CAAA;yBACb;wBAED,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;;wBAGzB,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;;wBAGvD,EAAE,CAAC,YAAY,CAACC,8BAAa,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;;;;wBAKvF,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAA;;;;wBAK3C,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;wBAEzB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;wBAEjB,OAAO,IAAI,CAAA;qBACZ;iBACF;aACF,CAAC;SACH,CAAA;KACF;CACF;;;;;;;"}

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

@@ -1,13 +1,15 @@
-import { Node } from '@tiptap/core';
-import { textblockTypeInputRule } from 'prosemirror-inputrules';
+import { Node, textblockTypeInputRule } from '@tiptap/core';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 
-const backtickInputRegex = /^```(?<language>[a-z]*)? $/;
-const tildeInputRegex = /^~~~(?<language>[a-z]*)? $/;
+const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
+const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
 const CodeBlock = Node.create({
     name: 'codeBlock',
-    defaultOptions: {
-        languageClassPrefix: 'language-',
-        HTMLAttributes: {},
+    addOptions() {
+        return {
+            languageClassPrefix: 'language-',
+            HTMLAttributes: {},
+        };
     },
     content: 'text*',
     marks: '',
@@ -20,14 +22,16 @@ const CodeBlock = Node.create({
                 default: null,
                 parseHTML: element => {
                     var _a;
-                    const classAttribute = (_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute('class');
-                    if (!classAttribute) {
+                    const { languageClassPrefix } = this.options;
+                    const classNames = [...((_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList) || []];
+                    const languages = classNames
+                        .filter(className => className.startsWith(languageClassPrefix))
+                        .map(className => className.replace(languageClassPrefix, ''));
+                    const language = languages[0];
+                    if (!language) {
                         return null;
                     }
-                    const regexLanguageClassPrefix = new RegExp(`^(${this.options.languageClassPrefix})`);
-                    return {
-                        language: classAttribute.replace(regexLanguageClassPrefix, ''),
-                    };
+                    return language;
                 },
                 renderHTML: attributes => {
                     if (!attributes.language) {
@@ -54,10 +58,10 @@ const CodeBlock = Node.create({
     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);
             },
         };
     },
@@ -65,10 +69,10 @@ const CodeBlock = Node.create({
         return {
             'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),
             // remove code block when at start of document or code block is empty
-            Backspace: state => {
-                const { empty, $anchor } = state.selection;
+            Backspace: () => {
+                const { empty, $anchor } = this.editor.state.selection;
                 const isAtStart = $anchor.pos === 1;
-                if (!empty || $anchor.parent.type.name !== 'codeBlock') {
+                if (!empty || $anchor.parent.type.name !== this.name) {
                     return false;
                 }
                 if (isAtStart || !$anchor.parent.textContent.length) {
@@ -76,16 +80,111 @@ const CodeBlock = Node.create({
                 }
                 return false;
             },
+            // escape node on triple enter
+            Enter: ({ editor }) => {
+                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();
+            },
+            // escape node on arrow down
+            ArrowDown: ({ editor }) => {
+                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() {
         return [
-            textblockTypeInputRule(backtickInputRegex, this.type, ({ groups }) => groups),
-            textblockTypeInputRule(tildeInputRegex, this.type, ({ groups }) => groups),
+            textblockTypeInputRule({
+                find: backtickInputRegex,
+                type: this.type,
+                getAttributes: ({ groups }) => groups,
+            }),
+            textblockTypeInputRule({
+                find: tildeInputRegex,
+                type: this.type,
+                getAttributes: ({ groups }) => groups,
+            }),
+        ];
+    },
+    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;
+                    },
+                },
+            }),
         ];
     },
 });
 
-export default CodeBlock;
-export { CodeBlock, backtickInputRegex, tildeInputRegex };
+export { CodeBlock, backtickInputRegex, CodeBlock as default, tildeInputRegex };
 //# sourceMappingURL=tiptap-extension-code-block.esm.js.map

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 { Command, Node } from '@tiptap/core'\nimport { textblockTypeInputRule } from 'prosemirror-inputrules'\n\nexport interface CodeBlockOptions {\n  languageClassPrefix: string,\n  HTMLAttributes: {\n    [key: string]: any\n  },\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands {\n    codeBlock: {\n      /**\n       * Set a code block\n       */\n      setCodeBlock: (attributes?: { language: string }) => Command,\n      /**\n       * Toggle a code block\n       */\n      toggleCodeBlock: (attributes?: { language: string }) => Command,\n    }\n  }\n}\n\nexport const backtickInputRegex = /^```(?<language>[a-z]*)? $/\nexport const tildeInputRegex = /^~~~(?<language>[a-z]*)? $/\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 classAttribute = element.firstElementChild?.getAttribute('class')\n\n          if (!classAttribute) {\n            return null\n          }\n\n          const regexLanguageClassPrefix = new RegExp(`^(${this.options.languageClassPrefix})`)\n\n          return {\n            language: classAttribute.replace(regexLanguageClassPrefix, ''),\n          }\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: state => {\n        const { empty, $anchor } = state.selection\n        const isAtStart = $anchor.pos === 1\n\n        if (!empty || $anchor.parent.type.name !== 'codeBlock') {\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(backtickInputRegex, this.type, ({ groups }: any) => groups),\n      textblockTypeInputRule(tildeInputRegex, this.type, ({ groups }: any) => groups),\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 { Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\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  addOptions() {\n    return {\n      languageClassPrefix: 'language-',\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        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(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      // escape node on triple enter\n      Enter: ({ editor }) => {\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      // escape node on arrow down\n      ArrowDown: ({ editor }) => {\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: ({ groups }) => groups,\n      }),\n      textblockTypeInputRule({\n        find: tildeInputRegex,\n        type: this.type,\n        getAttributes: ({ groups }) => groups,\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":"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"}