<template>
  <div id="vditor" style="min-height: 192px;"></div>
</template>

<script>
import Vditor from 'vditor'
import 'vditor/dist/index.css'

export default {
  name: 'VditorEditor',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      vditor: null
    }
  },
  mounted() {
    this.vditor = new Vditor('vditor', {
      value: this.value,
      height: 360,
      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: false,
      },
      after: () => {
        this.vditor.setValue(this.value || '')
      },
      input: (val) => {
        this.$emit('input', val)
      }
    })
  },
  watch: {
    value(val) {
      if (this.vditor && val !== this.vditor.getValue()) {
        this.vditor.setValue(val || '')
      }
    }
  }
}
</script>

<style scoped>
#vditor {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
</style>
