8c6751f0c6
* chore: add precommit hook for eslint fixes, fix linting issues * chore: add eslint import sort plugin
59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<template>
|
|
<node-view-wrapper class="code-block">
|
|
<select contenteditable="false" v-model="selectedLanguage">
|
|
<option :value="null">
|
|
auto
|
|
</option>
|
|
<option disabled>
|
|
—
|
|
</option>
|
|
<option v-for="(language, index) in languages" :value="language" :key="index">
|
|
{{ language }}
|
|
</option>
|
|
</select>
|
|
<pre><code><node-view-content /></code></pre>
|
|
</node-view-wrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
|
|
|
|
export default {
|
|
components: {
|
|
NodeViewWrapper,
|
|
NodeViewContent,
|
|
},
|
|
|
|
props: nodeViewProps,
|
|
|
|
data() {
|
|
return {
|
|
languages: this.extension.options.lowlight.listLanguages(),
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
selectedLanguage: {
|
|
get() {
|
|
return this.node.attrs.language
|
|
},
|
|
set(language) {
|
|
this.updateAttributes({ language })
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.code-block {
|
|
position: relative;
|
|
|
|
select {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|