feat: add codeBlock extension

Author: byodian

package.json

@@ -37,6 +37,7 @@
     "@tiptap/extension-bold": "^2.6.4",
     "@tiptap/extension-bullet-list": "^2.6.4",
     "@tiptap/extension-code": "^2.8.0",
+    "@tiptap/extension-code-block": "^2.10.2",
     "@tiptap/extension-document": "^2.6.4",
     "@tiptap/extension-hard-break": "^2.8.0",
     "@tiptap/extension-history": "^2.7.2",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ import HardBreak from '@tiptap/extension-hard-break'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import Blockquote from '@tiptap/extension-blockquote'
 import Code from '@tiptap/extension-code'
+import CodeBlock from '@tiptap/extension-code-block'
 import { EditorContent, useEditor } from '@tiptap/react'
 import { forwardRef, useEffect, useImperativeHandle } from 'react'
 import { TrailingNode } from './tailing-node'
@@ -67,6 +68,7 @@ const EditorContainer = forwardRef<EditorMethods, EditorProps>(
         HorizontalRule,
         Blockquote,
         Code,
+        CodeBlock,
         Placeholder.configure({
           placeholder: contentPlaceholder || '正文',
         }),

src/components/editor/editor-container.tsx

@@ -64,10 +64,10 @@ export const simpleTemplate: ArticleModuleTemplate = {
         marginBottom: '8px',
       },
       '& :where(hr)': {
-        borderTopColor: 'var(--main-content-foreground)',
+        borderTopColor: 'var(--main-content-secondary-background)',
       },
       '& :where(blockquote)': {
-        borderLeftColor: 'var(--main-content-foreground)',
+        borderLeftColor: 'var(--main-content-secondary-background)',
       },
       '& :where(code):not(pre code)': {
         backgroundColor: 'var(--main-content-secondary-background)',