update note content

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