mirror of
https://gitlab.com/bramw/baserow.git
synced 2024-11-21 23:37:55 +00:00
57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
<!-- eslint-disable-next-line vue/no-v-html vue/no-v-text-v-html-on-component -->
|
|
<component :is="tag" class="markdown" v-html="htmlContent" />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'MarkdownIt',
|
|
props: {
|
|
content: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
tag: {
|
|
required: false,
|
|
type: String,
|
|
default: 'div',
|
|
},
|
|
rules: {
|
|
required: false,
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
htmlContent: '',
|
|
}
|
|
},
|
|
async fetch() {
|
|
await this.render(this.content)
|
|
},
|
|
computed: {
|
|
// Makes content watchable
|
|
localContent() {
|
|
return this.content
|
|
},
|
|
},
|
|
watch: {
|
|
localContent(newValue) {
|
|
this.render(newValue)
|
|
},
|
|
},
|
|
methods: {
|
|
async render(value) {
|
|
if (!this.md) {
|
|
const Markdown = (await import('markdown-it')).default
|
|
this.md = new Markdown()
|
|
this.md.renderer.rules = { ...this.md.renderer.rules, ...this.rules }
|
|
}
|
|
|
|
this.htmlContent = this.md.render(value)
|
|
},
|
|
},
|
|
}
|
|
</script>
|