feat: add copy button for Shiki Magic Move code block (#2289)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: elecmonkey

packages/client/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>
 

packages/parser/src/config.ts

@@ -32,6 +32,7 @@ export function getDefaultConfig(): SlidevConfig {
     drawings: {} as ResolvedDrawingsOptions,
     plantUmlServer: 'https://www.plantuml.com/plantuml',
     codeCopy: true,
+    magicMoveCopy: true,
     author: '',
     record: 'dev',
     css: 'unocss',

packages/types/src/frontmatter.ts

@@ -52,6 +52,15 @@ export interface HeadmatterConfig extends TransitionOptions {
    * @default true
    */
   codeCopy?: boolean
+  /**
+   * Show copy button in magic move code blocks
+   *
+   * `'final'` for only show copy button on the final step
+   * `'always'` or `true` for show copy button on all steps
+   *
+   * @default true
+   */
+  magicMoveCopy?: boolean | 'final' | 'always'
   /**
    * The author of the slides
    */

packages/vscode/schema/headmatter.json

@@ -174,6 +174,24 @@
           "markdownDescription": "Show a copy button in code blocks",
           "default": true
         },
+        "magicMoveCopy": {
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "string",
+              "const": "final"
+            },
+            {
+              "type": "string",
+              "const": "always"
+            }
+          ],
+          "description": "Show copy button in magic move code blocks\n\n`'final'` for only show copy button on the final step `'always'` or `true` for show copy button on all steps",
+          "markdownDescription": "Show copy button in magic move code blocks\n\n`'final'` for only show copy button on the final step\n`'always'` or `true` for show copy button on all steps",
+          "default": true
+        },
         "author": {
           "type": "string",
           "description": "The author of the slides",