feat(editor): select language

composables/tiptap.ts

@@ -1,23 +1,24 @@
-import { Extension, useEditor } from '@tiptap/vue-3'
+import { Extension, VueNodeViewRenderer, useEditor } from '@tiptap/vue-3'
 import Placeholder from '@tiptap/extension-placeholder'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Mention from '@tiptap/extension-mention'
-import CodeBlock from '@tiptap/extension-code-block'
 import CharacterCount from '@tiptap/extension-character-count'
 import HardBreak from '@tiptap/extension-hard-break'
 import Bold from '@tiptap/extension-bold'
 import Italic from '@tiptap/extension-italic'
 import Code from '@tiptap/extension-code'
 import { Plugin } from 'prosemirror-state'
+import CodeBlock from '@tiptap/extension-code-block'
 
 import type { Ref } from 'vue'
 import { HashSuggestion, MentionSuggestion } from './tiptap/suggestion'
+import TiptapCodeBlock from '~/components/tiptap/TiptapCodeBlock.vue'
 
 export interface UseTiptapOptions {
   content: Ref<string | undefined>
-  placeholder: string
+  placeholder: Ref<string | undefined>
   onSubmit: () => void
   onFocus: () => void
   onPaste: (event: ClipboardEvent) => void
@@ -50,12 +51,17 @@ export function useTiptap(options: UseTiptapOptions) {
           suggestion: HashSuggestion,
         }),
       Placeholder.configure({
-        placeholder,
+        placeholder: placeholder.value,
       }),
       CharacterCount.configure({
         limit: characterLimit.value,
       }),
-      CodeBlock,
+      CodeBlock
+        .extend({
+          addNodeView() {
+            return VueNodeViewRenderer(TiptapCodeBlock)
+          },
+        }),
       Extension.create({
         name: 'api',
         addKeyboardShortcuts() {