@slidev/client 52.2.3 → 52.2.5

package/builtin/ShikiMagicMove.vue

@@ -2,6 +2,7 @@
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
 import type { PropType } from 'vue'
 import { sleep } from '@antfu/utils'
+import { useClipboard } from '@vueuse/core'
 import lz from 'lz-string'
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -43,6 +44,33 @@ const id = makeId()
 const stepIndex = ref(0)
 const container = ref<HTMLElement>()
 
+const showCopyButton = computed(() => {
+  if (!configs.codeCopy)
+    return false
+
+  const magicCopy = configs.magicMoveCopy
+  if (!magicCopy)
+    return false
+
+  if (magicCopy === true || magicCopy === 'always')
+    return true
+
+  if (magicCopy === 'final')
+    return stepIndex.value === steps.length - 1
+
+  return false
+})
+const { copied, copy } = useClipboard()
+
+function copyCode() {
+  // Use the code property directly from KeyedTokensInfo
+  const currentStep = steps[stepIndex.value]
+  if (!currentStep || !currentStep.code)
+    return
+
+  copy(currentStep.code.trim())
+}
+
 // Normalized the ranges, to at least have one range
 const ranges = computed(() => props.stepRanges.map(i => i.length ? i : ['all']))
 
@@ -116,7 +144,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="container" class="slidev-code-wrapper slidev-code-magic-move relative">
+  <div ref="container" class="slidev-code-wrapper slidev-code-magic-move relative group">
     <div v-if="title" class="slidev-code-block-title">
       <TitleIcon :title="title" />
       <div class="leading-1em">
@@ -135,6 +163,15 @@ onMounted(() => {
         stagger: 1,
       }"
     />
+    <button
+      v-if="showCopyButton"
+      class="slidev-code-copy absolute right-0 transition opacity-0 group-hover:opacity-20 hover:!opacity-100"
+      :class="title ? 'top-10' : 'top-0'"
+      :title="copied ? 'Copied' : 'Copy'" @click="copyCode()"
+    >
+      <ph-check-circle v-if="copied" class="p-2 w-8 h-8" />
+      <ph-clipboard v-else class="p-2 w-8 h-8" />
+    </button>
   </div>
 </template>
 

package/internals/NoteDisplay.vue

@@ -148,20 +148,20 @@ watchEffect(() => {
   <div
     v-if="noteHtml"
     ref="noteDisplay"
-    class="prose overflow-auto outline-none slidev-note"
+    class="prose dark:prose-invert overflow-auto outline-none slidev-note"
     :class="[props.class, withClicks ? 'slidev-note-with-clicks' : '']"
     v-html="noteHtml"
   />
   <div
     v-else-if="note"
-    class="prose overflow-auto outline-none slidev-note"
+    class="prose dark:prose-invert overflow-auto outline-none slidev-note"
     :class="props.class"
   >
     <p v-text="note" />
   </div>
   <div
     v-else
-    class="prose overflow-auto outline-none opacity-50 italic select-none slidev-note"
+    class="prose dark:prose-invert overflow-auto outline-none opacity-50 italic select-none slidev-note"
     :class="props.class"
   >
     <p v-text="props.placeholder || 'No notes.'" />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.2.3",
+  "version": "52.2.5",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@antfu/utils": "^9.2.0",
+    "@antfu/utils": "^9.3.0",
     "@iconify-json/carbon": "^1.2.13",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
@@ -38,7 +38,7 @@
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.8",
     "@unhead/vue": "^2.0.17",
-    "@unocss/reset": "^66.5.1",
+    "@unocss/reset": "^66.5.2",
     "@vueuse/core": "^13.9.0",
     "@vueuse/math": "^13.9.0",
     "@vueuse/motion": "^3.0.3",
@@ -46,7 +46,7 @@
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.1.0",
-    "katex": "^0.16.22",
+    "katex": "^0.16.23",
     "lz-string": "^1.5.0",
     "mermaid": "^11.12.0",
     "monaco-editor": "^0.53.0",
@@ -55,16 +55,16 @@
     "prettier": "^3.6.2",
     "recordrtc": "^5.6.2",
     "shiki": "^3.13.0",
-    "shiki-magic-move": "^1.1.0",
-    "typescript": "^5.9.2",
-    "unocss": "^66.5.1",
-    "vue": "^3.5.21",
+    "shiki-magic-move": "^1.2.0",
+    "typescript": "^5.9.3",
+    "unocss": "^66.5.2",
+    "vue": "^3.5.22",
     "vue-router": "^4.5.1",
     "yaml": "^2.8.1",
-    "@slidev/parser": "52.2.3",
-    "@slidev/types": "52.2.3"
+    "@slidev/parser": "52.2.5",
+    "@slidev/types": "52.2.5"
   },
   "devDependencies": {
-    "vite": "^7.1.6"
+    "vite": "^7.1.9"
   }
 }

package/styles/index.css

@@ -80,7 +80,11 @@ html {
 /* Note Clicks */
 
 .slidev-note-with-clicks .slidev-note-fade {
-  color: #888888ab;
+  color: #888888cc;
+}
+
+.dark .slidev-note-with-clicks .slidev-note-fade {
+  color: #a1a1a1cc;
 }
 
 .slidev-note-click-mark {