@tiptap/extension-code-block 2.0.0-beta.209 → 2.0.0-beta.210

package/dist/index.cjs

@@ -0,0 +1,189 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/code-block.ts
+var _core = require('@tiptap/core');
+var _state = require('@tiptap/pm/state');
+var backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
+var tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
+var CodeBlock = _core.Node.create({
+  name: "codeBlock",
+  addOptions() {
+    return {
+      languageClassPrefix: "language-",
+      exitOnTripleEnter: true,
+      exitOnArrowDown: true,
+      HTMLAttributes: {}
+    };
+  },
+  content: "text*",
+  marks: "",
+  group: "block",
+  code: true,
+  defining: true,
+  addAttributes() {
+    return {
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          var _a;
+          const { languageClassPrefix } = this.options;
+          const classNames = [...((_a = element.firstElementChild) == null ? 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;
+          }
+          return language;
+        },
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "pre",
+        preserveWhitespace: "full"
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "pre",
+      _core.mergeAttributes.call(void 0, 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(this.name, attributes);
+      },
+      toggleCodeBlock: (attributes) => ({ commands }) => {
+        return commands.toggleNode(this.name, "paragraph", attributes);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-c": () => this.editor.commands.toggleCodeBlock(),
+      Backspace: () => {
+        const { empty, $anchor } = this.editor.state.selection;
+        const isAtStart = $anchor.pos === 1;
+        if (!empty || $anchor.parent.type.name !== this.name) {
+          return false;
+        }
+        if (isAtStart || !$anchor.parent.textContent.length) {
+          return this.editor.commands.clearNodes();
+        }
+        return false;
+      },
+      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();
+      },
+      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 === void 0) {
+          return false;
+        }
+        const nodeAfter = doc.nodeAt(after);
+        if (nodeAfter) {
+          return false;
+        }
+        return editor.commands.exitCode();
+      }
+    };
+  },
+  addInputRules() {
+    return [
+      _core.textblockTypeInputRule.call(void 0, {
+        find: backtickInputRegex,
+        type: this.type,
+        getAttributes: (match) => ({
+          language: match[1]
+        })
+      }),
+      _core.textblockTypeInputRule.call(void 0, {
+        find: tildeInputRegex,
+        type: this.type,
+        getAttributes: (match) => ({
+          language: match[1]
+        })
+      })
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [
+      new (0, _state.Plugin)({
+        key: new (0, _state.PluginKey)("codeBlockVSCodeHandler"),
+        props: {
+          handlePaste: (view, event) => {
+            if (!event.clipboardData) {
+              return false;
+            }
+            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) : void 0;
+            const language = vscodeData == null ? void 0 : vscodeData.mode;
+            if (!text || !language) {
+              return false;
+            }
+            const { tr } = view.state;
+            tr.replaceSelectionWith(this.type.create({ language }));
+            tr.setSelection(_state.TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
+            tr.insertText(text.replace(/\r\n?/g, "\n"));
+            tr.setMeta("paste", true);
+            view.dispatch(tr);
+            return true;
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/index.ts
+var src_default = CodeBlock;
+
+
+
+
+
+exports.CodeBlock = CodeBlock; exports.backtickInputRegex = backtickInputRegex; exports.default = src_default; exports.tildeInputRegex = tildeInputRegex;

package/dist/{packages/extension-code-block/src/code-block.d.ts → index.d.ts}

@@ -1,43 +1,46 @@
-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' {
-    interface Commands<ReturnType> {
-        codeBlock: {
-            /**
-             * Set a code block
-             */
-            setCodeBlock: (attributes?: {
-                language: string;
-            }) => ReturnType;
-            /**
-             * Toggle a code block
-             */
-            toggleCodeBlock: (attributes?: {
-                language: string;
-            }) => ReturnType;
-        };
-    }
-}
-export declare const backtickInputRegex: RegExp;
-export declare const tildeInputRegex: RegExp;
-export declare const CodeBlock: Node<CodeBlockOptions, any>;
+import { Node } from '@tiptap/core';
+
+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' {
+    interface Commands<ReturnType> {
+        codeBlock: {
+            /**
+             * Set a code block
+             */
+            setCodeBlock: (attributes?: {
+                language: string;
+            }) => ReturnType;
+            /**
+             * Toggle a code block
+             */
+            toggleCodeBlock: (attributes?: {
+                language: string;
+            }) => ReturnType;
+        };
+    }
+}
+declare const backtickInputRegex: RegExp;
+declare const tildeInputRegex: RegExp;
+declare const CodeBlock: Node<CodeBlockOptions, any>;
+
+export { CodeBlock, CodeBlockOptions, backtickInputRegex, CodeBlock as default, tildeInputRegex };

package/dist/index.js

@@ -0,0 +1,189 @@
+// src/code-block.ts
+import { mergeAttributes, Node, textblockTypeInputRule } from "@tiptap/core";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+var backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
+var tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
+var CodeBlock = Node.create({
+  name: "codeBlock",
+  addOptions() {
+    return {
+      languageClassPrefix: "language-",
+      exitOnTripleEnter: true,
+      exitOnArrowDown: true,
+      HTMLAttributes: {}
+    };
+  },
+  content: "text*",
+  marks: "",
+  group: "block",
+  code: true,
+  defining: true,
+  addAttributes() {
+    return {
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          var _a;
+          const { languageClassPrefix } = this.options;
+          const classNames = [...((_a = element.firstElementChild) == null ? 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;
+          }
+          return language;
+        },
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "pre",
+        preserveWhitespace: "full"
+      }
+    ];
+  },
+  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(this.name, attributes);
+      },
+      toggleCodeBlock: (attributes) => ({ commands }) => {
+        return commands.toggleNode(this.name, "paragraph", attributes);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-c": () => this.editor.commands.toggleCodeBlock(),
+      Backspace: () => {
+        const { empty, $anchor } = this.editor.state.selection;
+        const isAtStart = $anchor.pos === 1;
+        if (!empty || $anchor.parent.type.name !== this.name) {
+          return false;
+        }
+        if (isAtStart || !$anchor.parent.textContent.length) {
+          return this.editor.commands.clearNodes();
+        }
+        return false;
+      },
+      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();
+      },
+      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 === void 0) {
+          return false;
+        }
+        const nodeAfter = doc.nodeAt(after);
+        if (nodeAfter) {
+          return false;
+        }
+        return editor.commands.exitCode();
+      }
+    };
+  },
+  addInputRules() {
+    return [
+      textblockTypeInputRule({
+        find: backtickInputRegex,
+        type: this.type,
+        getAttributes: (match) => ({
+          language: match[1]
+        })
+      }),
+      textblockTypeInputRule({
+        find: tildeInputRegex,
+        type: this.type,
+        getAttributes: (match) => ({
+          language: match[1]
+        })
+      })
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("codeBlockVSCodeHandler"),
+        props: {
+          handlePaste: (view, event) => {
+            if (!event.clipboardData) {
+              return false;
+            }
+            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) : void 0;
+            const language = vscodeData == null ? void 0 : vscodeData.mode;
+            if (!text || !language) {
+              return false;
+            }
+            const { tr } = view.state;
+            tr.replaceSelectionWith(this.type.create({ language }));
+            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
+            tr.insertText(text.replace(/\r\n?/g, "\n"));
+            tr.setMeta("paste", true);
+            view.dispatch(tr);
+            return true;
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/index.ts
+var src_default = CodeBlock;
+export {
+  CodeBlock,
+  backtickInputRegex,
+  src_default as default,
+  tildeInputRegex
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-code-block",
   "description": "code block extension for tiptap",
-  "version": "2.0.0-beta.209",
+  "version": "2.0.0-beta.210",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -15,30 +15,43 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/packages/extension-code-block/src/index.d.ts",
-      "import": "./dist/tiptap-extension-code-block.esm.js",
-      "require": "./dist/tiptap-extension-code-block.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
-  "main": "dist/tiptap-extension-code-block.cjs",
-  "umd": "dist/tiptap-extension-code-block.umd.js",
-  "module": "dist/tiptap-extension-code-block.esm.js",
-  "types": "dist/packages/extension-code-block/src/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.193",
-    "prosemirror-state": "^1.4.1"
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/pm": "^2.0.0-beta.209"
   },
   "devDependencies": {
-    "@tiptap/core": "^2.0.0-beta.209",
-    "prosemirror-state": "^1.4.1"
+    "@tiptap/core": "^2.0.0-beta.210",
+    "@tiptap/pm": "^2.0.0-beta.210"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/extension-code-block"
+  },
+  "scripts": {
+    "build": "tsup"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
   }
 }

package/src/code-block.ts

@@ -1,26 +1,26 @@
 import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'
-import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
+import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
 
 export interface CodeBlockOptions {
   /**
    * Adds a prefix to language classes that are applied to code tags.
    * Defaults to `'language-'`.
    */
-  languageClassPrefix: string,
+  languageClassPrefix: string
   /**
    * Define whether the node should be exited on triple enter.
    * Defaults to `true`.
    */
-  exitOnTripleEnter: boolean,
+  exitOnTripleEnter: boolean
   /**
    * Define whether the node should be exited on arrow down if there is no node after it.
    * Defaults to `true`.
    */
-  exitOnArrowDown: boolean,
+  exitOnArrowDown: boolean
   /**
    * Custom HTML attributes that should be added to the rendered HTML tag.
    */
-  HTMLAttributes: Record<string, any>,
+  HTMLAttributes: Record<string, any>
 }
 
 declare module '@tiptap/core' {
@@ -29,11 +29,11 @@ declare module '@tiptap/core' {
       /**
        * Set a code block
        */
-      setCodeBlock: (attributes?: { language: string }) => ReturnType,
+      setCodeBlock: (attributes?: { language: string }) => ReturnType
       /**
        * Toggle a code block
        */
-      toggleCodeBlock: (attributes?: { language: string }) => ReturnType,
+      toggleCodeBlock: (attributes?: { language: string }) => ReturnType
     }
   }
 }
@@ -69,7 +69,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
         default: null,
         parseHTML: element => {
           const { languageClassPrefix } = this.options
-          const classNames = [...element.firstElementChild?.classList || []]
+          const classNames = [...(element.firstElementChild?.classList || [])]
           const languages = classNames
             .filter(className => className.startsWith(languageClassPrefix))
             .map(className => className.replace(languageClassPrefix, ''))
@@ -113,12 +113,14 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
 
   addCommands() {
     return {
-      setCodeBlock: attributes => ({ commands }) => {
-        return commands.setNode(this.name, attributes)
-      },
-      toggleCodeBlock: attributes => ({ commands }) => {
-        return commands.toggleNode(this.name, 'paragraph', attributes)
-      },
+      setCodeBlock:
+        attributes => ({ commands }) => {
+          return commands.setNode(this.name, attributes)
+        },
+      toggleCodeBlock:
+        attributes => ({ commands }) => {
+          return commands.toggleNode(this.name, 'paragraph', attributes)
+        },
     }
   },
 
@@ -249,9 +251,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
 
             const text = event.clipboardData.getData('text/plain')
             const vscode = event.clipboardData.getData('vscode-editor-data')
-            const vscodeData = vscode
-              ? JSON.parse(vscode)
-              : undefined
+            const vscodeData = vscode ? JSON.parse(vscode) : undefined
             const language = vscodeData?.mode
 
             if (!text || !language) {

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

@@ -1,3 +0,0 @@
-import { CodeBlock } from './code-block';
-export * from './code-block';
-export default CodeBlock;