elk/components/tiptap/TiptapCodeBlock.vue
2022-11-30 12:50:29 +08:00

36 lines
871 B
Vue

<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 class="code-block">
<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>