<template>
  <div style="flex: 1">
    <toolbar :editor="editorRef" :default-config="toolbarConfig" />
    <editor v-model="modelValue" :style="{ height, 'overflow-y': 'hidden' }" @on-created="fnEditorCreated" />
  </div>
</template>

<script setup>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import { shallowRef, onBeforeUnmount } from "vue";

defineOptions({
  name: "AppEditor",
});
defineProps({
  height: { type: String, default: "350px" },
});
const modelValue = defineModel({ type: String, required: true });
const editorRef = shallowRef();
const toolbarConfig = {
  excludeKeys: [
    "color",
    "bgColor",
    "group-image",
    "group-video",
    "insertLink",
    "codeBlock",
    "emotion",
    "todo",
  ],
};
const fnEditorCreated = (editor) => {
  editorRef.value = editor;
};
onBeforeUnmount(() => {
  editorRef.value && editorRef.value.destroy();
});
</script>

<style scoped></style>
