From e237d74389cf084308ae6d7d89d46bf3f2893dcd Mon Sep 17 00:00:00 2001 From: _Kerman Date: Wed, 7 Aug 2024 12:01:43 +0800 Subject: [PATCH 1/4] feat: edit frontmatter in side editor --- demo/starter/slides.md | 12 +++++++----- packages/client/internals/SideEditor.vue | 17 +++++++++++------ packages/parser/src/fs.ts | 5 +---- packages/slidev/node/vite/loaders.ts | 13 +++++++++++++ packages/slidev/package.json | 1 + packages/types/src/types.ts | 4 ++-- pnpm-lock.yaml | 3 +++ 7 files changed, 38 insertions(+), 17 deletions(-) diff --git a/demo/starter/slides.md b/demo/starter/slides.md index dc2ba4e2e0..67fa714c4c 100644 --- a/demo/starter/slides.md +++ b/demo/starter/slides.md @@ -24,7 +24,7 @@ mdc: true # Welcome to Slidev -Presentation slides for developers +Presentation slides for developers11111111111111
@@ -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. ``` - +
Double-click me!
@@ -593,7 +595,7 @@ Double-click on the draggable elements to edit their positions. ``` - + --- src: ./pages/imported-slides.md diff --git a/packages/client/internals/SideEditor.vue b/packages/client/internals/SideEditor.vue index b354d2fa0d..f672657f05 100644 --- a/packages/client/internals/SideEditor.vue +++ b/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({}) 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, }) } diff --git a/packages/parser/src/fs.ts b/packages/parser/src/fs.ts index a66c7d3632..064856e4d7 100644 --- a/packages/parser/src/fs.ts +++ b/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, }) } } diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts index 0d26241e12..c895674a0a 100644 --- a/packages/slidev/node/vite/loaders.ts +++ b/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) diff --git a/packages/slidev/package.json b/packages/slidev/package.json index 1fa042aca5..ece65db4a0 100644 --- a/packages/slidev/package.json +++ b/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": { diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts index aa7c004ce9..199f378f2e 100644 --- a/packages/types/src/types.ts +++ b/packages/types/src/types.ts @@ -8,6 +8,7 @@ export type FrontmatterStyle = 'frontmatter' | 'yaml' export interface SlideInfoBase { frontmatter: Record 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> & { +export type SlidePatch = Partial> & { skipHmr?: boolean /** * The frontmatter patch (only the changed fields) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 99a357a072..1070279315 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -669,6 +669,9 @@ importers: vue: specifier: ^3.4.33 version: 3.4.33(typescript@5.5.4) + yaml: + specifier: ^2.4.5 + version: 2.4.5 yargs: specifier: ^17.7.2 version: 17.7.2 From 7d171cdf85c33b6659077e671536e125c9ba7015 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Wed, 7 Aug 2024 12:03:06 +0800 Subject: [PATCH 2/4] Discard changes to demo/starter/slides.md --- demo/starter/slides.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/demo/starter/slides.md b/demo/starter/slides.md index 67fa714c4c..dc2ba4e2e0 100644 --- a/demo/starter/slides.md +++ b/demo/starter/slides.md @@ -24,7 +24,7 @@ mdc: true # Welcome to Slidev -Presentation slides for developers11111111111111 +Presentation slides for developers
@@ -47,8 +47,7 @@ The last comment block of each slide will be treated as slide notes. It will be --> --- -transition: fade-1 -class: text-center +transition: fade-out --- # What is Slidev? @@ -118,7 +117,6 @@ 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 @@ -555,7 +553,7 @@ Learn More: [Mermaid Diagrams](https://sli.dev/guide/features/mermaid) and [Plan --- foo: bar dragPos: - square: 655,30,167,_,-16 + square: 691,32,167,_,-16 --- # Draggable Elements @@ -581,7 +579,7 @@ Double-click on the draggable elements to edit their positions. ``` - +
Double-click me!
@@ -595,7 +593,7 @@ Double-click on the draggable elements to edit their positions. ``` - + --- src: ./pages/imported-slides.md From b6719fead9a7443dd70ad652fc81ae129653c473 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Fri, 16 Aug 2024 13:02:18 +0800 Subject: [PATCH 3/4] fix --- packages/parser/src/fs.ts | 8 ++++-- test/__snapshots__/parser.test.ts.snap | 40 ++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/packages/parser/src/fs.ts b/packages/parser/src/fs.ts index 064856e4d7..15a2fc95b4 100644 --- a/packages/parser/src/fs.ts +++ b/packages/parser/src/fs.ts @@ -103,11 +103,15 @@ export async function load(userRoot: string, filepath: string, loadedSource: Rec } else { slides.push({ - ...slide, + frontmatter: { ...slide.frontmatter, ...frontmatterOverride }, + content: slide.content, + frontmatterRaw: slide.frontmatterRaw, + note: slide.note, + title: slide.title, + level: slide.level, index: slides.length, importChain, source: slide, - frontmatter: { ...slide.frontmatter, ...frontmatterOverride }, }) } } diff --git a/test/__snapshots__/parser.test.ts.snap b/test/__snapshots__/parser.test.ts.snap index bf1f01fcdb..ed162f2076 100644 --- a/test/__snapshots__/parser.test.ts.snap +++ b/test/__snapshots__/parser.test.ts.snap @@ -88,6 +88,12 @@ exports[`md parser > frontmatter.md > slides 1`] = ` }, "layout": "cover", }, + "frontmatterRaw": "layout: cover +fonts: + sans: Roboto, Lato + serif: Mate SC + mono: Fira Code +", "importChain": undefined, "index": 0, "level": 1, @@ -149,6 +155,11 @@ fonts: "title": "FooBar", }, }, + "frontmatterRaw": "meta: + title: FooBar + duration: 12 +layout: center +", "importChain": undefined, "index": 1, "level": 1, @@ -204,6 +215,7 @@ This is note { "content": "# Morning", "frontmatter": {}, + "frontmatterRaw": undefined, "importChain": undefined, "index": 2, "level": 1, @@ -236,6 +248,8 @@ Hey", "frontmatter": { "layout": "text", }, + "frontmatterRaw": "layout: text +", "importChain": undefined, "index": 3, "level": undefined, @@ -287,6 +301,7 @@ this should be treated as code block Also part of the code block \`\`\`", "frontmatter": {}, + "frontmatterRaw": undefined, "importChain": undefined, "index": 4, "level": undefined, @@ -334,6 +349,10 @@ Also part of the code block "frontmatter": { "layout": "from yaml", }, + "frontmatterRaw": " +# The first yaml block should be treated as frontmatter +layout: from yaml +", "importChain": undefined, "index": 5, "level": undefined, @@ -381,6 +400,8 @@ Content 2", "frontmatter": { "layout": "cover", }, + "frontmatterRaw": "layout: cover +", "importChain": undefined, "index": 6, "level": 1, @@ -435,6 +456,7 @@ layout: should not from yaml 2 Content 3", "frontmatter": {}, + "frontmatterRaw": undefined, "importChain": undefined, "index": 7, "level": 1, @@ -554,6 +576,8 @@ exports[`md parser > mdc.md > slides 1`] = ` "frontmatter": { "mdc": true, }, + "frontmatterRaw": "mdc: true +", "importChain": undefined, "index": 0, "level": 1, @@ -674,6 +698,7 @@ Sample Text console.log('Hello World') \`\`\`", "frontmatter": {}, + "frontmatterRaw": undefined, "importChain": undefined, "index": 0, "level": 1, @@ -724,6 +749,7 @@ console.log('Hello World') - Hey - Yo", "frontmatter": {}, + "frontmatterRaw": undefined, "importChain": undefined, "index": 1, "level": 1, @@ -763,6 +789,7 @@ console.log('Hello World') { "content": "Nice to meet you", "frontmatter": {}, + "frontmatterRaw": undefined, "importChain": undefined, "index": 2, "level": undefined, @@ -864,6 +891,7 @@ exports[`md parser > multi-entries.md > slides 1`] = ` { "content": "# Page 1", "frontmatter": {}, + "frontmatterRaw": undefined, "importChain": [ { "content": "", @@ -939,6 +967,8 @@ src: sub/page1.md "background": "https://sli.dev/demo-cover.png#2", "layout": "cover", }, + "frontmatterRaw": "layout: cover +", "importChain": [ { "content": "", @@ -1041,6 +1071,7 @@ layout: cover "frontmatter": { "background": "https://sli.dev/demo-cover.png#34", }, + "frontmatterRaw": undefined, "importChain": [ { "content": "", @@ -1150,6 +1181,8 @@ background: https://sli.dev/demo-cover.png#34 "background": "https://sli.dev/demo-cover.png#34", "layout": "cover", }, + "frontmatterRaw": "layout: cover +", "importChain": [ { "content": "", @@ -1269,6 +1302,7 @@ layout: cover "frontmatter": { "background": "https://sli.dev/demo-cover.png#14", }, + "frontmatterRaw": undefined, "importChain": [ { "content": "", @@ -1546,6 +1580,8 @@ src: /sub/page1.md "background": "https://sli.dev/demo-cover.png#14", "layout": "cover", }, + "frontmatterRaw": "layout: cover +", "importChain": [ { "content": "", @@ -1846,6 +1882,7 @@ layout: cover "frontmatter": { "background": "https://sli.dev/demo-cover.png#14", }, + "frontmatterRaw": undefined, "importChain": [ { "content": "", @@ -2153,6 +2190,8 @@ src: ../sub/pages3-4.md "background": "https://sli.dev/demo-cover.png#14", "layout": "cover", }, + "frontmatterRaw": "layout: cover +", "importChain": [ { "content": "", @@ -2470,6 +2509,7 @@ layout: cover $x+2$", "frontmatter": {}, + "frontmatterRaw": undefined, "importChain": undefined, "index": 8, "level": 1, From ae913b7e44a253bb7ca10e2ea1e864a3fb821199 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Fri, 16 Aug 2024 13:11:01 +0800 Subject: [PATCH 4/4] fix --- packages/slidev/node/vite/loaders.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts index c895674a0a..cace9b7ab8 100644 --- a/packages/slidev/node/vite/loaders.ts +++ b/packages/slidev/node/vite/loaders.ts @@ -45,7 +45,7 @@ export function createSlidesLoader( let skipHmr: { filePath: string, fileContent: string } | null = null - const { data, clientRoot, roots, mode, utils } = options + const { data, mode, utils } = options function getSourceId(index: number, type: 'md' | 'frontmatter') { return `${data.slides[index].source.filepath}__slidev_${index + 1}.${type}` @@ -213,7 +213,7 @@ export function createSlidesLoader( } Object.assign(data, newData) - Object.assign(utils, createDataUtils(newData, clientRoot, roots)) + Object.assign(utils, createDataUtils(options)) if (hmrSlidesIndexes.size > 0) moduleIds.add(templateTitleRendererMd.id)