Restructured Project Rep

components/noAutoLoad/BlockEditor.vue

@@ -0,0 +1,64 @@
+<script setup>
+
+const props = defineProps({
+  data: {
+    required: true,
+    type: Object
+  }
+})
+
+const {data} = props
+
+const changesSaved = ref(true)
+
+
+
+
+const default_data = {
+  time: 1660335428612,
+  blocks: [
+    {
+      id: "MnGi61oxdF",
+      type: "header",
+      data: {
+        text: "Willkommen im Dokumentations Editor",
+        level: 1,
+      },
+    }
+
+  ],
+  version: "1.0.0",
+};
+const newProjectDescription = ref(data|| default_data.value);
+
+const saveProjectDescription = async () => {
+  //Update Project Description
+  /*const {data:updateData,error:updateError} = await supabase
+      .from("projects")
+      .update({description: newProjectDescription.value})
+      .eq('id',currentProject.id)
+      .select()
+
+  console.log(updateData)
+  console.log(updateError)*/
+
+
+
+};
+</script>
+
+<template>
+  <UButton
+      :disabled="false/*newProjectDescription.time === currentProject.description.time*/"
+      @click="saveProjectDescription"
+  >
+    Speichern
+  </UButton>
+  <client-only><EditorJsOwn v-model="newProjectDescription" /></client-only>
+
+
+</template>
+
+<style scoped>
+
+</style>

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>