47d1d3425c
* Docs: Syntax highlighting - add react example * Docs: Clean up syntax highlighting demo, make use of functional component * fix: focus view asynchronously, fix #1520 Co-authored-by: Sven Adlung <info@svenadlung.de> Co-authored-by: Philipp Kühn <kontakt@philipp-kuehn.com>
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><node-view-content as="code" /></pre>
|
|
</node-view-wrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'
|
|
|
|
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" scoped>
|
|
.code-block {
|
|
position: relative;
|
|
|
|
select {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|