From 184290cc5bcc571627ce8c1a85d27251f92ac209 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 26 Sep 2021 19:33:44 +0800
Subject: [PATCH] fix: improve note editor

---
 packages/client/internals/NoteEditor.vue | 25 ++++++++++++++++--------
 packages/client/logic/note.ts            | 20 ++++++++++++-------
 packages/slidev/node/plugins/loaders.ts  | 10 ++++++----
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/packages/client/internals/NoteEditor.vue b/packages/client/internals/NoteEditor.vue
index 9094c6188f..dcebe951f3 100644
--- a/packages/client/internals/NoteEditor.vue
+++ b/packages/client/internals/NoteEditor.vue
@@ -59,15 +59,24 @@ onClickOutside(input, () => {
 </script>
 
 <template>
-  <div
-    v-show="!editing && note"
-    class="prose overflow-auto outline-none"
-    :class="props.class"
-    @click="switchNoteEdit"
-    v-html="info?.notesHTML"
-  />
+  <template v-if="!editing && note">
+    <div
+      v-if="info?.notesHTML"
+      class="prose overflow-auto outline-none"
+      :class="props.class"
+      @click="switchNoteEdit"
+      v-html="info?.notesHTML"
+    ></div>
+    <div
+      v-else
+      class="prose overflow-auto outline-none"
+      :class="props.class"
+      @click="switchNoteEdit"
+      v-text="note"
+    ></div>
+  </template>
   <textarea
-    v-show="editing || !note"
+    v-else
     ref="input"
     v-model="note"
     class="prose resize-none overflow-auto outline-none bg-transparent block"
diff --git a/packages/client/logic/note.ts b/packages/client/logic/note.ts
index e599a5a6d3..9a65c5100c 100644
--- a/packages/client/logic/note.ts
+++ b/packages/client/logic/note.ts
@@ -4,7 +4,7 @@ import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
 
 export interface UseSlideInfo{
   info: Ref<SlideInfoExtended | undefined>
-  update: (data: Partial<SlideInfo>) => Promise<void>
+  update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
 }
 
 export function useSlideInfo(id: number | undefined): UseSlideInfo {
@@ -20,7 +20,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
   execute()
 
   const update = async(data: Partial<SlideInfo>) => {
-    await fetch(
+    return await fetch(
       url,
       {
         method: 'POST',
@@ -30,12 +30,12 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
         },
         body: JSON.stringify(data),
       },
-    )
+    ).then(r => r.json())
   }
 
-  import.meta.hot?.on('slidev-update', (playload) => {
-    if (playload.id === id)
-      info.value = playload.data
+  import.meta.hot?.on('slidev-update', (payload) => {
+    if (payload.id === id)
+      info.value = payload.data
   })
 
   return {
@@ -56,6 +56,12 @@ export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
 
   return {
     info: computed(() => get(unref(id)).info.value),
-    update: (data: Partial<SlideInfo>, newId?: number) => get(newId ?? unref(id)).update(data),
+    update: async(data: Partial<SlideInfo>, newId?: number) => {
+      const info = get(newId ?? unref(id))
+      const newData = await info.update(data)
+      if (newData)
+        info.info.value = newData
+      return newData
+    },
   }
 }
diff --git a/packages/slidev/node/plugins/loaders.ts b/packages/slidev/node/plugins/loaders.ts
index 71de51382c..f8bb8aacb1 100644
--- a/packages/slidev/node/plugins/loaders.ts
+++ b/packages/slidev/node/plugins/loaders.ts
@@ -112,6 +112,7 @@ export function createSlidesLoader(
             }
 
             res.statusCode = 200
+            res.write(JSON.stringify(prepareSlideInfo(slide)))
             return res.end()
           }
 
@@ -149,13 +150,14 @@ export function createSlidesLoader(
         const length = Math.max(data.slides.length, newData.slides.length)
 
         for (let i = 0; i < length; i++) {
-          if (hmrPages.has(i))
-            continue
-
           const a = data.slides[i]
           const b = newData.slides[i]
 
-          if (a?.content.trim() === b?.content.trim() && equal(a.frontmatter, b.frontmatter))
+          if (
+            a?.content.trim() === b?.content.trim()
+            && a?.note === b?.note
+            && equal(a.frontmatter, b.frontmatter)
+          )
             continue
 
           ctx.server.ws.send({