feat: ✨ add codeblock for ext

packages/core/package.json

@@ -18,6 +18,7 @@
     "@tiptap/extension-bullet-list": "^2.9.1",
     "@tiptap/extension-character-count": "^2.9.1",
     "@tiptap/extension-code": "^2.9.1",
+    "@tiptap/extension-code-block": "^2.10.3",
     "@tiptap/extension-document": "^2.9.1",
     "@tiptap/extension-dropcursor": "^2.9.1",
     "@tiptap/extension-gapcursor": "^2.9.1",
@@ -38,6 +39,7 @@
     "@tiptap/suggestion": "^2.9.1",
     "i18next": "^23.16.5",
     "lodash": "^4.17.21",
+    "shiki": "^1.24.0",
     "uuid": "^11.0.2"
   },
   "files": [

packages/core/src/extensions/code-block.js

@@ -0,0 +1,142 @@
+import CodeBlock from "@tiptap/extension-code-block";
+
+export default CodeBlock.extend({
+  name: "codeBlock",
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      languageClassPrefix: "language-",
+      exitOnTripleEnter: true,
+      exitOnArrowDown: true,
+      defaultLanguage: null,
+      tabSize: 2, // 默认缩进2个空格
+      useTab: false, // 默认使用空格而不是制表符
+      nodeView: undefined,
+      HTMLAttributes: {},
+      slash: true,
+      name: "codeBlock",
+      desc: "```javascript",
+      command: ({ editor, range }) => {
+        range
+          ? editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+          : editor.commands.toggleCodeBlock();
+      },
+      isActive: ({ editor }) => editor.isActive("codeBlock"),
+      isDisabled: ({ editor }) => !editor.can().toggleCodeBlock(),
+      shortcutkeys: "Mod-Shift-C",
+    };
+  },
+
+  addNodeView() {
+    // 如果提供了自定义的 nodeView 函数，使用它
+    if (typeof this.options.nodeView === "function") {
+      return this.options.nodeView;
+    }
+
+    return () => undefined;
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Tab: ({ editor }) => {
+        // 只在代码块内处理
+        if (!editor.isActive(this.name)) {
+          return false;
+        }
+
+        const { selection } = editor.state;
+        const { $from, $to } = selection;
+
+        // 获取缩进字符
+        const indentChar = this.options.useTab ? "\t" : " ";
+        const indentSize = this.options.useTab ? 1 : this.options.tabSize;
+        const indent = indentChar.repeat(indentSize);
+
+        // 如果有选中文本，对选中的每一行进行缩进
+        if (!selection.empty) {
+          const lines = editor.state.doc
+            .textBetween($from.pos, $to.pos)
+            .split("\n");
+          const indentedText = lines.map((line) => indent + line).join("\n");
+
+          editor
+            .chain()
+            .focus()
+            .deleteSelection()
+            .insertContent(indentedText)
+            .run();
+
+          return true;
+        }
+
+        // 如果没有选中文本，直接插入缩进
+        editor.chain().focus().insertContent(indent).run();
+
+        return true;
+      },
+      // 支持 Shift-Tab 反向缩进
+      "Shift-Tab": ({ editor }) => {
+        if (!editor.isActive(this.name)) {
+          return false;
+        }
+
+        const { selection } = editor.state;
+        const { $from, $to } = selection;
+
+        // 获取缩进字符
+        const indentChar = this.options.useTab ? "\t" : " ";
+        const indentSize = this.options.useTab ? 1 : this.options.tabSize;
+
+        // 如果有选中文本，对选中的每一行进行反向缩进
+        if (!selection.empty) {
+          const lines = editor.state.doc
+            .textBetween($from.pos, $to.pos)
+            .split("\n");
+          const unindentedText = lines
+            .map((line) => {
+              // 移除行首的缩进字符
+              if (this.options.useTab) {
+                return line.replace(/^\t/, "");
+              }
+              return line.replace(new RegExp(`^ {1,${indentSize}}`), "");
+            })
+            .join("\n");
+
+          editor
+            .chain()
+            .focus()
+            .deleteSelection()
+            .insertContent(unindentedText)
+            .run();
+
+          return true;
+        }
+
+        // 如果没有选中文本，尝试移除当前行的缩进
+        const line = editor.state.doc.textBetween(
+          $from.before(),
+          $from.after(),
+        );
+
+        const pos = $from.pos - $from.parentOffset;
+        const currentIndent = line.match(/^[\t ]*/)?.[0];
+
+        if (currentIndent) {
+          const newIndent = this.options.useTab
+            ? currentIndent.replace(/^\t/, "")
+            : currentIndent.replace(new RegExp(` {1,${indentSize}}$`), "");
+
+          editor
+            .chain()
+            .focus()
+            .deleteRange({ from: pos, to: pos + currentIndent.length })
+            .insertContent(newIndent)
+            .run();
+        }
+
+        return true;
+      },
+    };
+  },
+});

packages/core/src/extensions/index.js

@@ -41,3 +41,4 @@ export { default as TaskList } from "./task-list.js";
 export { default as Blockquote } from "./blockquote.js";
 export { default as Divider } from "./divider.js";
 export { default as HardBreak } from "./hard-break.js";
+export { default as CodeBlock } from "./code-block.js";

packages/core/src/kit/notion-kit.js

@@ -25,6 +25,7 @@ import {
   Link,
   Background,
   TextStyle,
+  CodeBlock,
 } from "@/extensions";
 
 export default BasicKit.extend({
@@ -139,6 +140,10 @@ export default BasicKit.extend({
       extensions.push(Background.configure(this.options?.background));
     }
 
+    if (this.options.codeBlock !== false) {
+      extensions.push(CodeBlock.configure(this.options?.codeBlock));
+    }
+
     return extensions;
   },
 });

packages/core/src/locales/en.json

@@ -30,6 +30,7 @@
   "bulletList": "Bullet List",
   "orderedList": "Ordered List",
   "taskList": "Task List",
+  "codeBlock": "Code Block",
   "divider": "Divider",
   "indent": "Increase Indent",
   "outdent": "Decrease Indent",

packages/core/src/locales/zh.json

@@ -30,6 +30,7 @@
   "bulletList": "无序列表",
   "orderedList": "有序列表",
   "taskList": "任务列表",
+  "codeBlock": "代码块",
   "divider": "分割线",
   "indent": "增加缩进",
   "outdent": "减少缩进",

packages/vue3/src/components/bubble-menu/bubble-menu.js

@@ -121,7 +121,7 @@ export default defineComponent({
       //   console.log(selection.node)
       //   return !!node.attrs?.src
       // }
-      if (editor.isActive("codeblock") || isNodeSelection(selection)) {
+      if (editor.isActive("codeBlock") || isNodeSelection(selection)) {
         return false;
       }
 

packages/vue3/src/components/toolbar-menu/toolbar-menu.js

@@ -29,6 +29,7 @@ const TOOLBAR_MENU_SORT = [
   "background",
   "textAlign",
   "link",
+  "codeBlock",
   "|",
   "bulletList",
   "orderedList",

packages/vue3/src/styles/code-block.scss

@@ -0,0 +1,21 @@
+@use "config" as *;
+
+.#{$prefix}.ProseMirror {
+  pre {
+    white-space: pre-wrap;
+    color: var(--isle-editor-text-color-secondary);
+    background-color: rgba(var(--isle-editor-border-color-val), 0.2);
+    border-radius: 0.4rem;
+    border: 1px solid rgba(var(--isle-editor-border-color-val), 0.5);
+    font-weight: 500;
+    font-family: "JetBrainsMono", monospace;
+    padding: 1.25rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+}

packages/vue3/src/styles/code.scss

@@ -1,14 +1,13 @@
 @use "config" as *;
 
 .#{$prefix}.ProseMirror {
-  code,
-  .#{$prefix}__code {
+  code.#{$prefix}__code {
     padding: 0.2em 0.4em;
     line-height: normal;
     font-size: 90%;
     border-radius: 0.25rem;
     background-color: rgba(var(--#{$prefix}-border-color-val), 0.55);
-    color: var(--#{$prefix}-text-color);
+    color: var(--#{$prefix}-color-red);
     box-decoration-break: clone;
   }
 }

packages/vue3/src/styles/index.scss

@@ -11,6 +11,7 @@
 @use "code";
 @use "link";
 @use "selection";
+@use "code-block";
 
 @use "menu";
 @use "ui";

packages/vue3/src/utils/icon.js

@@ -39,6 +39,7 @@ import {
   Outdent,
   WrapText as HardBreak,
   ChevronDown as Down,
+  CodeXml as CodeBlock,
 } from "lucide-vue-next";
 const ICONS = {
   Bold,
@@ -81,6 +82,7 @@ const ICONS = {
   Outdent,
   HardBreak,
   Down,
+  CodeBlock,
 };
 
 export const getIcon = (name) => {