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

src/composables/useNotes.ts

@@ -91,6 +91,7 @@ export const updateNote = (noteId: string, note: BaseNote) => {
     modified: new Date().getTime(),
   }
   baseNotes[noteId] = updatedNote
+  console.log(note)
 }
 
 export const addNote = (title: string, content: string, goToNote: boolean = false) => {

src/utils/markdown.ts

@@ -1,7 +1,8 @@
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
+import Turndown from 'turndown'
 
-export function mdToHtml(mdText: string) {
+export function mdToHtml(mdText: string): string {
   const renderer = new marked.Renderer()
 
   const html = DOMPurify.sanitize(marked.parse(mdText, { renderer }))
@@ -14,3 +15,28 @@ export function mdToHtml(mdText: string) {
   })
   return doc.body.innerHTML
 }
+
+export function htmlToMd(htmlText: string): string {
+  const turndown = new Turndown({ headingStyle: 'atx' })
+  const escapes = [
+    [/\\/g, '\\\\'],
+    [/\*/g, '\\*'],
+    [/^-/g, '\\-'],
+    [/^\+ /g, '\\+ '],
+    [/^(=+)/g, '\\$1'],
+    [/^(#{1,6}) /g, '\\$1 '],
+    [/`/g, '\\`'],
+    [/^~~~/g, '\\~~~'],
+    // [/\[/g, '\\['],
+    // [/\]/g, '\\]'],
+    [/^>/g, '\\>'],
+    [/_/g, '\\_'],
+    [/^(\d+)\. /g, '$1\\. '],
+  ]
+  turndown.escape = (string) =>
+    escapes.reduce((accumulator, escape) => {
+      return accumulator.replace(escape[0], escape[1] as string)
+    }, string)
+  const md = turndown.turndown(htmlText)
+  return md
+}