From 14041b4f8964318913bd96fb95c35197325ecf62 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 5 Mar 2024 00:42:57 +0100
Subject: [PATCH] fix: support `{at:x}` for magic move

---
 demo/starter/slides.md                     | 4 +++-
 packages/client/builtin/ShikiMagicMove.vue | 2 +-
 packages/slidev/node/plugins/markdown.ts   | 6 +++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/demo/starter/slides.md b/demo/starter/slides.md
index 6d012a499c..2f05a1bce4 100644
--- a/demo/starter/slides.md
+++ b/demo/starter/slides.md
@@ -190,7 +190,7 @@ Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev sup
 
 Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example:
 
-````md magic-move
+````md magic-move {at:0}
 ```ts
 const author = reactive({
   name: 'John Doe',
@@ -234,6 +234,8 @@ export default {
 }
 ```
 
+Non-code blocks are ignored.
+
 ```vue
 <script setup>
 const author = {
diff --git a/packages/client/builtin/ShikiMagicMove.vue b/packages/client/builtin/ShikiMagicMove.vue
index f11dbfba4c..d95da59ee9 100644
--- a/packages/client/builtin/ShikiMagicMove.vue
+++ b/packages/client/builtin/ShikiMagicMove.vue
@@ -26,7 +26,7 @@ onMounted(() => {
   if (!clicks || clicks.disabled)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at || '+1', steps.length - 1)
+  const { start, end, delta } = clicks.resolve(props.at ?? '+1', steps.length - 1)
   clicks.register(id, { max: end, delta })
 
   watchEffect(() => {
diff --git a/packages/slidev/node/plugins/markdown.ts b/packages/slidev/node/plugins/markdown.ts
index b925bd8897..f3e391b006 100644
--- a/packages/slidev/node/plugins/markdown.ts
+++ b/packages/slidev/node/plugins/markdown.ts
@@ -238,7 +238,7 @@ export function transformSlotSugar(md: string) {
   return lines.join('\n')
 }
 
-const reMagicMoveBlock = /^````(?:md|markdown) magic-move(?:[ ]*?({.*?})?([^\n]*?))?\n([\s\S]+?)^````$/mg
+const reMagicMoveBlock = /^````(?:md|markdown) magic-move(?:[ ]*(\{.*?\})?([^\n]*?))?\n([\s\S]+?)^````$/mg
 const reCodeBlock = /^```(\w+?)(?:\s*{([\d\w*,\|-]+)}\s*?({.*?})?(.*?))?\n([\s\S]+?)^```$/mg
 
 /**
@@ -251,7 +251,7 @@ export function transformMagicMove(
 ) {
   return md.replace(
     reMagicMoveBlock,
-    (full, _options = '', _attrs = '', body: string) => {
+    (full, options = '{}', _attrs = '', body: string) => {
       if (!shiki || !shikiOptions)
         throw new Error('Shiki is required for Magic Move. You may need to set `highlighter: shiki` in your Slidev config.')
 
@@ -267,7 +267,7 @@ export function transformMagicMove(
         }),
       )
       const compressed = lz.compressToBase64(JSON.stringify(steps))
-      return `<ShikiMagicMove steps-lz="${compressed}" />`
+      return `<ShikiMagicMove v-bind="${options}" steps-lz="${compressed}" />`
     },
   )
 }