<script setup lang="ts">
import { Editor } from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

const editorRef = ref();
const instance = ref();
const emit = defineEmits(['change']);
const props = defineProps<{ initialValue: string }>();

onMounted(() => {
  instance.value = new Editor({
    el: editorRef.value,
    initialValue: props.initialValue ?? '',
    initialEditType: 'wysiwyg',
    hideModeSwitch: true,
    usageStatistics: false,
    events: {
      keyup: () => {
        if (instance.value) {
          emit('change', instance.value.getHTML());
        }
      }
    }
  });
});
</script>

<template>
  <div ref="editorRef"></div>
</template>

<style scoped></style>
