feat(editor): select language

components/tiptap/TiptapCodeBlock.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+
+const languages = [
+  'js',
+  'ts',
+]
+
+const selectedLanguage = computed({
+  get() {
+    return props.node.attrs.language
+  },
+  set(language) {
+    props.updateAttributes({ language })
+  },
+})
+</script>
+
+<template>
+  <NodeViewWrapper>
+    <div relative my2>
+      <select v-model="selectedLanguage" contenteditable="false" absolute top-1 right-1 rounded px2 op0 hover:op100 focus:op100 transition>
+        <option :value="null">
+          plain
+        </option>
+        <option v-for="(language, index) in languages" :key="index" :value="language">
+          {{ language }}
+        </option>
+      </select>
+      <pre><code><NodeViewContent /></code></pre>
+    </div>
+  </NodeViewWrapper>
+</template>