<template>
  <div id="editor"></div>
</template>

<script setup>
import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";

import { onMounted } from "vue";

const props = defineProps({
  modelValue: {
    default: {},
  },
});

const emit = defineEmits(["update:modelValue"]);
onMounted(() => {
  const editor = new EditorJS({
    holder: "editor",
    minHeight: 0,
    tools: {
      header: Header,
      list: List,
    },
    onChange: (api, event) => {
      api.saver.save().then(async (data) => {
        emit("update:modelValue", data);
      });
    },
    data: props.modelValue,
    logLevel: "ERROR",
  });
});
</script>

<style>
.codex-editor path {
  stroke: #69c350;
}

/*.ce-block {
  margin-bottom: 1em;
}

.ce-paragraph, .ce-header {
  outline: 1px solid #69c350 !important;
  border-radius: 5px;
  padding: .5em;

}*/
</style>