fix: editing presenter notes on frontmatter-only slides (#2591)

Author: quinnypig

packages/client/internals/SideEditor.vue

@@ -3,6 +3,7 @@ import { throttledWatch, useEventListener } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useNav } from '../composables/useNav'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import { parseSideEditorContent } from '../logic/sideEditor'
 import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import IconButton from './IconButton.vue'
 import ShikiEditor from './ShikiEditor.vue'
@@ -11,8 +12,6 @@ const props = defineProps<{
   resize?: boolean
 }>()
 
-const RE_FRONTMATTER_BLOCK = /^---\n([\s\S]*?)\n---\n/
-
 const { currentSlideNo, openInEditor } = useNav()
 
 const tab = ref<'content' | 'note'>('content')
@@ -38,11 +37,7 @@ watch(
 async function save() {
   dirty.value = false
 
-  let frontmatterRaw: string | undefined
-  const contentOnly = content.value.trim().replace(RE_FRONTMATTER_BLOCK, (_, f) => {
-    frontmatterRaw = f
-    return ''
-  })
+  const { content: contentOnly, frontmatterRaw } = parseSideEditorContent(content.value)
 
   await update({
     note: note.value || undefined,

packages/client/logic/sideEditor.ts

@@ -0,0 +1,14 @@
+const RE_FRONTMATTER_BLOCK = /^---\n([\s\S]*?)\n---(?:\n|$)/
+
+export function parseSideEditorContent(content: string) {
+  let frontmatterRaw: string | undefined
+  const contentOnly = content.trim().replace(RE_FRONTMATTER_BLOCK, (_, f) => {
+    frontmatterRaw = f
+    return ''
+  })
+
+  return {
+    content: contentOnly,
+    frontmatterRaw,
+  }
+}

packages/slidev/node/vite/loaders.ts

@@ -107,7 +107,7 @@ export function createSlidesLoader(
                 slide.source.frontmatterDoc = parsed
             }
           }
-          if (body.note)
+          if (body.note != null)
             slide.note = slide.source.note = body.note
           if (body.frontmatter) {
             updateFrontmatterPatch(slide.source, body.frontmatter)

test/side-editor.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { parseSideEditorContent } from '../packages/client/logic/sideEditor'
+
+describe('side editor', () => {
+  it('extracts frontmatter-only slide content', () => {
+    expect(parseSideEditorContent(`---
+layout: image
+image: /example.png
+---`)).toEqual({
+      content: '',
+      frontmatterRaw: 'layout: image\nimage: /example.png',
+    })
+  })
+
+  it('extracts frontmatter from slides with body content', () => {
+    expect(parseSideEditorContent(`---
+layout: center
+---
+
+# Hello`)).toEqual({
+      content: '\n# Hello',
+      frontmatterRaw: 'layout: center',
+    })
+  })
+})