1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-15 07:08:11 +09:00
elk/components/tiptap/TiptapCodeBlock.vue

57 lines
1.1 KiB
Vue
Raw Normal View History

2022-11-30 07:47:24 +09:00
<script setup lang="ts">
import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
const props = defineProps(nodeViewProps)
const languages = [
2022-12-13 22:02:43 +09:00
'c',
'cpp',
'csharp',
'css',
'dart',
'go',
'html',
'java',
'javascript',
'jsx',
'kotlin',
'python',
'rust',
'svelte',
'swift',
'tsx',
'typescript',
'vue',
2022-11-30 07:47:24 +09:00
]
const selectedLanguage = computed({
get() {
return props.node.attrs.language
},
set(language) {
props.updateAttributes({ language })
},
})
</script>
<template>
<NodeViewWrapper>
2022-12-13 22:02:43 +09:00
<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"
>
2022-11-30 07:47:24 +09:00
<option :value="null">
plain
</option>
<option v-for="(language, index) in languages" :key="index" :value="language">
{{ language }}
</option>
</select>
2022-12-13 22:02:43 +09:00
<pre class="code-block"><code><NodeViewContent /></code></pre>
2022-11-30 07:47:24 +09:00
</div>
</NodeViewWrapper>
</template>