elk/components/tiptap/TiptapCodeBlock.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>