feat: edit frontmatter in side editor

Author: kermanx

demo/starter/slides.md

@@ -24,7 +24,7 @@ mdc: true
 
 # Welcome to Slidev
 
-Presentation slides for developers
+Presentation slides for developers11111111111111
 
 <div class="pt-12">
   <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
@@ -47,7 +47,8 @@ The last comment block of each slide will be treated as slide notes. It will be
 -->
 
 ---
-transition: fade-out
+transition: fade-1
+class: text-center
 ---
 
 # What is Slidev?
@@ -117,6 +118,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
 ---
 layout: two-cols
 layoutClass: gap-16
+class: text-center
 ---
 
 # Table of contents
@@ -553,7 +555,7 @@ Learn More: [Mermaid Diagrams](https://sli.dev/guide/features/mermaid) and [Plan
 ---
 foo: bar
 dragPos:
-  square: 691,32,167,_,-16
+  square: 655,30,167,_,-16
 ---
 
 # Draggable Elements
@@ -579,7 +581,7 @@ Double-click on the draggable elements to edit their positions.
 </v-drag>
 ```
 
-<v-drag pos="663,206,261,_,-15">
+<v-drag pos="577,349,261,_,-15">
   <div text-center text-3xl border border-main rounded>
     Double-click me!
   </div>
@@ -593,7 +595,7 @@ Double-click on the draggable elements to edit their positions.
 <v-drag-arrow two-way />
 ```
 
-<v-drag-arrow pos="67,452,253,46" two-way op70 />
+<v-drag-arrow pos="67,452,436,-8" two-way op70 />
 
 ---
 src: ./pages/imported-slides.md

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)