<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: ''
    }
  },
  data() {
    return {
      vditor: null,
      loading: false
    }
  },
  mounted() {
    this.renderMarkdown();
  },
  watch: {
    value() {
      this.renderMarkdown();
    }
  },
  methods: {
    async renderMarkdown() {
      this.loading = true;
      await Vditor.preview(this.$refs.preview, this.value || '', {
        anchor: 1,
        hl: true,
        theme: 'dark',
        math: { inlineDigit: true },
        mermaid: true,
      });
      this.loading = false;
      console.log(this.$refs.preview, p);
    }
  }
}
</script>

<style scoped>
.markdown-preview {
  border-radius: 4px;
  padding: 8px;
  background: var(--color-background);
  color: var(--color-text-primary);
}
</style>
