1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-14 14:48:11 +09:00
elk/components/tiptap/TiptapCodeBlock.vue
2022-12-13 14:02:43 +01:00

57 lines
1.1 KiB
Vue

<script setup lang="ts">
import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
const props = defineProps(nodeViewProps)
const languages = [
'c',
'cpp',
'csharp',
'css',
'dart',
'go',
'html',
'java',
'javascript',
'jsx',
'kotlin',
'python',
'rust',
'svelte',
'swift',
'tsx',
'typescript',
'vue',
]
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
outline-none border="~ base"
>
<option :value="null">
plain
</option>
<option v-for="(language, index) in languages" :key="index" :value="language">
{{ language }}
</option>
</select>
<pre class="code-block"><code><NodeViewContent /></code></pre>
</div>
</NodeViewWrapper>
</template>