feat: edit frontmatter in side editor

packages/client/internals/SideEditor.vue

@@ -17,18 +17,16 @@ const tab = ref<'content' | 'note'>('content')
 const content = ref('')
 const note = ref('')
 const dirty = ref(false)
-const frontmatter = ref<any>({})
 
 const { info, update } = useDynamicSlideInfo(currentSlideNo)
 
 watch(
   info,
   (v) => {
-    frontmatter.value = v?.frontmatter || {}
-
     if (!isInputting.value) {
       note.value = (v?.note || '').trim()
-      content.value = (v?.content || '').trim()
+      const frontmatterPart = v?.frontmatterRaw?.trim() ? `---\n${v.frontmatterRaw.trim()}\n---\n\n` : ''
+      content.value = frontmatterPart + (v?.content || '').trim()
       dirty.value = false
     }
   },
@@ -37,10 +35,17 @@ watch(
 
 async function save() {
   dirty.value = false
+
+  let frontmatterRaw: string | undefined
+  const contentOnly = content.value.trim().replace(/^---\n([\s\S]*?)\n---\n/, (_, f) => {
+    frontmatterRaw = f
+    return ''
+  })
+
   await update({
     note: note.value || undefined,
-    content: content.value,
-    // frontmatter: frontmatter.value,
+    content: contentOnly,
+    frontmatterRaw,
   })
 }
 

packages/parser/src/fs.ts

@@ -103,14 +103,11 @@ export async function load(userRoot: string, filepath: string, loadedSource: Rec
     }
     else {
       slides.push({
+        ...slide,
         index: slides.length,
         importChain,
         source: slide,
         frontmatter: { ...slide.frontmatter, ...frontmatterOverride },
-        content: slide.content,
-        note: slide.note,
-        title: slide.title,
-        level: slide.level,
       })
     }
   }

packages/slidev/node/vite/loaders.ts

@@ -4,6 +4,7 @@ import type { ResolvedSlidevOptions, SlideInfo, SlidePatch, SlidevServerOptions
 import * as parser from '@slidev/parser/fs'
 import equal from 'fast-deep-equal'
 import type { LoadResult } from 'rollup'
+import YAML from 'yaml'
 import { getBodyJson, updateFrontmatterPatch } from '../utils'
 import { templates } from '../virtual'
 import { templateTitleRendererMd } from '../virtual/titles'
@@ -91,6 +92,18 @@ export function createSlidesLoader(
 
           if (body.content)
             slide.content = slide.source.content = body.content
+          if (body.frontmatterRaw != null) {
+            if (body.frontmatterRaw.trim() === '') {
+              slide.source.frontmatterDoc = slide.source.frontmatterStyle = undefined
+            }
+            else {
+              const parsed = YAML.parseDocument(body.frontmatterRaw)
+              if (parsed.errors.length)
+                console.error('ERROR when saving frontmatter', parsed.errors)
+              else
+                slide.source.frontmatterDoc = parsed
+            }
+          }
           if (body.note)
             slide.note = slide.source.note = body.note
           if (body.frontmatter)

packages/slidev/package.json

@@ -117,6 +117,7 @@
     "vite-plugin-vue-server-ref": "^0.4.2",
     "vitefu": "^0.2.5",
     "vue": "^3.4.33",
+    "yaml": "^2.4.5",
     "yargs": "^17.7.2"
   },
   "devDependencies": {

packages/types/src/types.ts

@@ -8,6 +8,7 @@ export type FrontmatterStyle = 'frontmatter' | 'yaml'
 export interface SlideInfoBase {
   frontmatter: Record<string, any>
   content: string
+  frontmatterRaw?: string
   note?: string
   title?: string
   level?: number
@@ -33,7 +34,6 @@ export interface SourceSlideInfo extends SlideInfoBase {
    * Slides import by this slide.
    */
   imports?: SourceSlideInfo[]
-  frontmatterRaw?: string
   frontmatterDoc?: YAML.Document
   frontmatterStyle?: FrontmatterStyle
 }
@@ -57,7 +57,7 @@ export interface SlideInfo extends SlideInfoBase {
 /**
  * Editable fields for a slide
  */
-export type SlidePatch = Partial<Pick<SlideInfoBase, 'content' | 'note'>> & {
+export type SlidePatch = Partial<Pick<SlideInfoBase, 'content' | 'note' | 'frontmatterRaw'>> & {
   skipHmr?: boolean
   /**
    * The frontmatter patch (only the changed fields)