feat: editable notes in presenter mode

Author: antfu

packages/client/internals/Editor.vue

@@ -3,7 +3,8 @@ import { useEventListener, useFetch } from '@vueuse/core'
 import { computed, watch, ref, onMounted, onUnmounted } from 'vue'
 import { activeElement, showEditor } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
-import { currentRoute } from '../logic/nav'
+import { currentRoute, currentSlideId } from '../logic/nav'
+import { useDynamicSlideInfo } from '../logic/note'
 
 const tab = ref<'content' | 'note'>('content')
 const offsetRight = ref(0)
@@ -14,38 +15,27 @@ const frontmatter = ref<any>({})
 const contentInput = ref<HTMLTextAreaElement>()
 const noteInput = ref<HTMLTextAreaElement>()
 
-const url = computed(() => `/@slidev/slide/${currentRoute.value?.meta?.slide?.id}.json`)
-const { data } = useFetch(url, { refetch: true }).get().json()
+const { info, update } = useDynamicSlideInfo(currentSlideId)
 
 watch(
-  data,
-  () => {
-    content.value = (data.value?.content || '').trim()
-    note.value = (data.value?.note || '').trim()
-    frontmatter.value = data.value?.frontmatter || {}
+  info,
+  (v) => {
+    content.value = (v?.content || '').trim()
+    note.value = (v?.note || '').trim()
+    frontmatter.value = v?.frontmatter || {}
     dirty.value = false
   },
   { immediate: true },
 )
 
 async function save() {
-  await fetch(
-    url.value,
-    {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        raw: null,
-        note: note.value || undefined,
-        content: content.value,
-        frontmatter: frontmatter.value,
-      }),
-    },
-  )
   dirty.value = false
+  await update({
+    raw: null!,
+    note: note.value || undefined,
+    content: content.value,
+    frontmatter: frontmatter.value,
+  })
 }
 
 function close() {

packages/client/internals/NavControls.vue

@@ -103,7 +103,7 @@ const dev = import.meta.env.DEV
     </a>
 
     <button
-      v-if="currentCamera !== 'none'"
+      v-if="currentCamera !== 'none' && !isPresenter"
       class="icon-btn"
       :class="{'text-green-500': Boolean(showAvatar && streamCamera)}"
       title="Show camera view"
@@ -113,6 +113,7 @@ const dev = import.meta.env.DEV
     </button>
 
     <div
+      v-if="!isPresenter"
       ref="devicesList"
       class="flex relative"
     >

packages/client/internals/Presenter.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
-import { useFetch } from '@vueuse/core'
-import { ref, computed, watchEffect } from 'vue'
-import { total, currentPage, currentRoute, nextRoute, tab, tabElements } from '../logic/nav'
+import { ignorableWatch } from '@vueuse/core'
+import { ref, computed, watch } from 'vue'
+import { total, currentPage, currentRoute, nextRoute, tab, tabElements, currentSlideId } from '../logic/nav'
 import { showOverview } from '../state'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
+import { useDynamicSlideInfo } from '../logic/note'
 import SlidesOverview from './SlidesOverview.vue'
 // @ts-expect-error
 import configs from '/@slidev/configs'
@@ -14,10 +15,6 @@ useHead({
   title: configs.title ? `Presenter - ${configs.title} - Slidev` : 'Presenter - Slidev',
 })
 
-watchEffect(() => {
-  console.log(tabElements.value.length)
-})
-
 const nextTabElements = ref([])
 const nextSlide = computed(() => {
   if (tab.value < tabElements.value.length) {
@@ -34,16 +31,42 @@ const nextSlide = computed(() => {
   }
 })
 
-const url = computed(() => `/@slidev/slide/${currentRoute.value?.meta?.slide?.id}.json`)
-const { data } = useFetch(url, { refetch: true }).get().json()
+const { info, update } = useDynamicSlideInfo(currentSlideId)
+
+const note = ref('')
+let timer: any
+
+const { ignoreUpdates } = ignorableWatch(
+  note,
+  (v) => {
+    const id = currentSlideId.value
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      update({ raw: null!, note: v }, id)
+    }, 500)
+  },
+)
+
+watch(
+  info,
+  (v) => {
+    clearTimeout(timer)
+    ignoreUpdates(() => {
+      note.value = v?.note || ''
+    })
+  },
+  { immediate: true, flush: 'sync' },
+)
 </script>
 
 <template>
   <div class="grid-container">
     <div class="grid-section top flex">
       <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto" />
       <div class="flex-auto" />
-      <div class="px-4 my-auto">{{ currentPage + 1 }} / {{ total }}</div>
+      <div class="px-4 my-auto">
+        {{ currentPage + 1 }} / {{ total }}
+      </div>
     </div>
     <div class="grid-section main flex flex-col p-4">
       <SlideContainer
@@ -67,8 +90,8 @@ const { data } = useFetch(url, { refetch: true }).get().json()
     </div>
     <div class="grid-section note">
       <textarea
+        v-model="note"
         class="w-full h-full p-4 resize-none overflow-auto outline-none bg-transparent"
-        :value="data?.note"
         placeholder="No notes for this slide"
       />
     </div>

packages/client/logic/nav.ts

@@ -12,9 +12,12 @@ export const isPresenter = computed(() => route.value.path.startsWith('/presente
 
 export const total = computed(() => rawRoutes.length)
 export const path = computed(() => route.value.path)
+
 export const currentPage = computed(() => parseInt(path.value.split(/\//g).slice(-1)[0]) || 0)
 export const currentPath = computed(() => getPath(currentPage.value))
 export const currentRoute = computed(() => rawRoutes.find(i => i.path === `${currentPage.value}`))
+export const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id)
+
 export const hasNext = computed(() => currentPage.value < rawRoutes.length - 1)
 export const hasPrev = computed(() => currentPage.value > 0)
 export const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length - 1, currentPage.value + 1)}`))

packages/client/logic/note.ts

@@ -0,0 +1,61 @@
+import { MaybeRef, useFetch } from '@vueuse/core'
+import { computed, ref, Ref, unref } from 'vue'
+import type { SlideInfo } from '../../slidev/node/parser'
+
+export interface UseSlideInfo{
+  info: Ref<SlideInfo | undefined>
+  update: (data: Partial<SlideInfo>) => Promise<void>
+}
+
+export function useSlideInfo(id: number | undefined): UseSlideInfo {
+  if (id == null) {
+    return {
+      info: ref() as Ref<SlideInfo | undefined>,
+      update: async() => {},
+    }
+  }
+  const url = `/@slidev/slide/${id}.json`
+  const { data: info, execute } = useFetch<SlideInfo>(url).get().json()
+
+  execute()
+
+  const update = async(data: Partial<SlideInfo>) => {
+    await fetch(
+      url,
+      {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      },
+    )
+  }
+
+  import.meta.hot?.on('slidev-update', (playload) => {
+    if (playload.id === id)
+      info.value = playload.data
+  })
+
+  return {
+    info,
+    update,
+  }
+}
+
+const map: Record<string, UseSlideInfo> = {}
+
+export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
+  function get(id: number | undefined) {
+    const i = `${id}`
+    if (!map[i])
+      map[i] = useSlideInfo(id)
+    return map[i]
+  }
+
+  return {
+    info: computed(() => get(unref(id)).info.value),
+    update: (data: Partial<SlideInfo>, newId?: number) => get(newId ?? unref(id)).update(data),
+  }
+}

packages/slidev/node/plugins/loaders.ts

@@ -71,6 +71,15 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRo
               `${slidePrefix}${idx}.json`,
             )
 
+            server.ws.send({
+              type: 'custom',
+              event: 'slidev-update',
+              data: {
+                id: idx,
+                data: data.slides[idx],
+              },
+            })
+
             await parser.save(data, entry)
 
             res.statusCode = 200

tsconfig.json

@@ -23,6 +23,8 @@
   "include": [
     "docs/.vitepress/**/*.ts",
     "docs/.vitepress/**/*.vue",
+    "packages/**/*.ts",
+    "packages/**/*.vue"
   ],
   "exclude": ["**/dist/**", "node_modules"]
 }