<template>
  <div class="border border-gray-300 p-3 rounded" >
    <EditorMenuBar :editor="editor" />
    <editor-content :editor="editor" class="editor__content" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Editor, EditorContent } from "@tiptap/vue-2";
import StarterKit from "@tiptap/starter-kit";
import { Image as Timage } from "@tiptap/extension-image";
import EditorMenuBar from "./editorMenuBar.vue";

export default Vue.extend({
  components: {
    EditorContent,
    EditorMenuBar,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    text: {
      type: String,
      required: true,
      default:''
    },
  },
  watch:{
    text(newV,oldV){
      this.editor.commands.insertContent(newV)
    }
  },
  data() {
    let editor: any = undefined;
    return {
      editor,
    };
  },
  mounted() {
    this.editor = new Editor({
      onUpdate: () => {
        const content = this.editor.getHTML();
        this.$emit("update:editorContent", content);
      },
      extensions: [StarterKit, Timage],
      autofocus: "start",
    });
  },
  beforeDestroy() {
    this.editor.destroy();
  },
});
</script>

<style lang="scss">
.editor__content {
  min-height: 400px;
  img {
    display: block;
    margin: 0 auto;
  }
}

/* Placeholder (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
  content: "请输入文章正文";
  float: left;
  color: #ced4da;
  pointer-events: none;
  height: 0;
  font-style: italic;
}
</style>
