<template>
  <div ref="preview" class="markdown-preview" style="min-height: 192px;"></div>
</template>

<script>
import Vditor from 'vditor'

export default {
  name: 'MarkdownPreview',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.renderMarkdown();
  },
  watch: {
    value() {
      this.renderMarkdown();
    }
  },
  methods: {
    renderMarkdown() {
      Vditor.preview(this.$refs.preview, this.value || '', {
        anchor: 1,
        hl: true,
        math: { inlineDigit: true },
        mermaid: true,
      });
    }
  }
}
</script>

<style scoped>
.markdown-preview {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 8px;
  background: #fff;
}
</style>
