update note content

src/components/Note.vue

@@ -20,13 +20,15 @@ const emit = defineEmits<{
 
 const noteTitle = ref(props.note.title)
 watch(noteTitle, () => {
-  const updatedNote: Note = {
-    ...props.note,
-    title: noteTitle.value,
-  }
+  const updatedNote: Note = { ...props.note, title: noteTitle.value }
   emit('update', updatedNote)
 })
 
+const updateNoteContent = (content: string) => {
+  const updatedNote: Note = { ...props.note, content }
+  emit('update', updatedNote)
+}
+
 const references = computed<Note[]>(() => {
   const relations = notesRelations.value[props.note.id]
   return relations
@@ -67,6 +69,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
     <NoteEditor
       class="h-100 flex-1 overflow-auto"
       :note="activeNote"
+      @update="updateNoteContent"
       v-if="activeNote"
     />
     <NoteReferences :references="references" />

src/components/Note/NoteEditor.vue

@@ -12,16 +12,20 @@ import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
 import ListPlugin from '@ckeditor/ckeditor5-list/src/list'
 import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
 import ContextedPlugin from '@/ckeditor/ContextedPlugin'
-import { mdToHtml } from '@/utils/markdown'
+import { mdToHtml, htmlToMd } from '@/utils/markdown'
 import { getNoteByTitle, setActiveNote } from '@/composables/useNotes'
 import Autocomplete from '@/components/Autocomplete.vue'
 
 const props = defineProps<{ note: Note }>()
 
+const emit = defineEmits<{
+  update: [mdText: string]
+}>()
+
 const html = mdToHtml(props.note.content)
 
 const editor = BalloonEditor
-const editorData = html
+const editorData = ref<string>(html)
 const editorConfig = {
   plugins: [
     EssentialsPlugin,
@@ -36,7 +40,6 @@ const editorConfig = {
     AutoformatPlugin,
     ContextedPlugin,
   ],
-
   toolbar: {
     items: [
       'bold',
@@ -51,9 +54,11 @@ const editorConfig = {
       'numberedList',
     ],
   },
+  placeholder: 'Click here to start typing...',
 }
 
 const editorElement = ref<HTMLInputElement | null>(null)
+watch(editorData, () => emit('update', htmlToMd(editorData.value)))
 
 const handleClick = ({ data }: { data: any }) => {
   const noteTitle = data.domTarget.textContent as string