<template>
  <div class="markdown-wrap" :style="{ width: props.width }">
    <div id="markdown-box">
      <strong v-html="modelValue"></strong>
    </div>
  </div>
</template>

<script setup>
import MKEditor from "@toast-ui/editor";
import "@toast-ui/editor/dist/toastui-editor.css";
import "@toast-ui/editor/dist/i18n/zh-cn.js";
import { defineProps, defineEmits, onMounted, watch } from "vue";
const props = defineProps({
  modelValue: {
    default: "",
    type: String
  },
  width: {
    default: "800px",
    type: String
  },
  savefil: {
    default: false,
    type: Boolean
  }
});

let mkEditor;
let el;
// 初始化
onMounted(() => {
  el = document.querySelector("#markdown-box");
  initEditor();
});
const emits = defineEmits(["update:modelValue", 'changeAddVi']);
const initEditor = () => {
  mkEditor = new MKEditor({
    el,
    height: "70vh",
    previewStyle: "vertical",
    language: "zh-CN",
    initiaValue: props.modelValue
  });
  mkEditor.getCurrentPreviewStyle();
};
watch(
  () => props.savefil,
  (newVal) => {
    if (newVal == true) {
      emits("changeAddVi", mkEditor.getHTML());
    }
  }
);
//回显
</script>
