Restructured Project Rep

components/noAutoLoad/EditorJsOwn.client.vue

@@ -0,0 +1,53 @@
+<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>