feat(paste): ⌘V / Ctrl+V inserts clipboard image or image URL into slide

- `usePasteImage` listens for global `paste` events. When the clipboard has
  an image / video file (e.g. screenshot, image copied from another app),
  uploads via the existing `/__slidev/upload` endpoint and appends
  `![](url)` to the current slide via `appendToSlide`. Same pipeline as
  `useFileDrop` / the `i`-key picker, so all three converge on identical
  source-line shape + `slides.coords.yaml` handling.
- When the clipboard holds plain text that parses as an `http(s)://…` URL
  with an image extension (`.png|.jpg|.gif|.webp|.svg|.avif`, optional
  query), appends `![](url)` without uploading — remote-hosted, hotlinked.
- Skipped when an `<input>` / `<textarea>` / contentEditable is focused so
  paste-into-input still works for chips like `<SlugChip>`.

Mounted from `play.vue` alongside the file-drop hook.

Verified via synthetic ClipboardEvent dispatch in dev: pasting
`https://sli.dev/logo.png` on slide 2 appended `![](https://sli.dev/logo.png)`
to the slide source.

Author: ryan-williams

packages/client/composables/usePasteImage.ts

@@ -0,0 +1,109 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+import { uploadAndInsert } from './useImageInsert'
+import { useNav } from './useNav'
+
+const IMAGE_URL_RE = /\.(?:png|jpe?g|gif|webp|svg|avif)(?:\?.*)?$/i
+
+function isImageOrVideoFile(file: File): boolean {
+  return file.type.startsWith('image/') || file.type.startsWith('video/')
+}
+
+function looksLikeImageUrl(s: string): boolean {
+  try {
+    const u = new URL(s.trim())
+    if (u.protocol !== 'http:' && u.protocol !== 'https:')
+      return false
+    return IMAGE_URL_RE.test(u.pathname)
+  }
+  catch {
+    return false
+  }
+}
+
+function inputContextActive(): boolean {
+  const ae = document.activeElement
+  if (!ae)
+    return false
+  if (ae instanceof HTMLInputElement || ae instanceof HTMLTextAreaElement)
+    return true
+  if ((ae as HTMLElement).isContentEditable)
+    return true
+  return false
+}
+
+// Paste handler — Cmd+V (or Ctrl+V) with an image / video file on the
+// clipboard uploads the file via the existing `/__slidev/upload` endpoint and
+// appends `![](url)` to the current slide. URL pastes that look like image
+// links append the same markdown without uploading (remote-hosted, hotlinked).
+//
+// Skipped when:
+//   - An `<input>` / `<textarea>` / contentEditable element is focused (so
+//     paste-into-input still works for slug-chip-style controls).
+//   - Clipboard has neither image bytes nor a URL that looks like an image.
+//
+// Same upload pipeline + append-to-slide-source semantics as `useFileDrop`
+// and the `i`-key image picker, so all three converge on the same source-line
+// shape and `slides.coords.yaml` handling for the inserted element's eventual
+// drag position.
+export function usePasteImage() {
+  const inFlight = ref(false)
+  const error = ref<string | null>(null)
+  const { currentSlideNo } = useNav()
+
+  async function onPaste(ev: ClipboardEvent) {
+    if (inputContextActive())
+      return
+    const dt = ev.clipboardData
+    if (!dt)
+      return
+
+    // 1. File paste (screenshot, image from another app, etc.)
+    const files = Array.from(dt.files ?? []).filter(isImageOrVideoFile)
+    if (files.length > 0) {
+      ev.preventDefault()
+      inFlight.value = true
+      error.value = null
+      try {
+        const no = currentSlideNo.value
+        for (const file of files)
+          await uploadAndInsert(file, no)
+      }
+      catch (e) {
+        error.value = e instanceof Error ? e.message : String(e)
+
+        console.error('[slidev] paste image failed:', e)
+      }
+      finally {
+        inFlight.value = false
+      }
+      return
+    }
+
+    // 2. URL paste — only consume if it parses as a URL and the path ends in
+    //    a common image extension. Otherwise let the paste flow through (e.g.
+    //    pasting plain text into a focusable region that's not an input but
+    //    might still have a paste handler).
+    const text = dt.getData('text/plain')
+    if (text && looksLikeImageUrl(text)) {
+      ev.preventDefault()
+      const { appendToSlide } = await import('./useImageInsert')
+      try {
+        await appendToSlide(currentSlideNo.value, `![](${text.trim()})`)
+      }
+      catch (e) {
+        error.value = e instanceof Error ? e.message : String(e)
+
+        console.error('[slidev] paste image URL failed:', e)
+      }
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('paste', onPaste)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('paste', onPaste)
+  })
+
+  return { inFlight, error }
+}

packages/client/pages/play.vue

@@ -5,6 +5,7 @@ import { useDrawings } from '../composables/useDrawings'
 import { useFileDrop } from '../composables/useFileDrop'
 import { useHideCursorIdle } from '../composables/useHideCursorIdle'
 import { useNav } from '../composables/useNav'
+import { usePasteImage } from '../composables/usePasteImage'
 import { usePinchZoomPan } from '../composables/usePinchZoomPan'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { useWakeLock } from '../composables/useWakeLock'
@@ -44,6 +45,7 @@ usePinchZoomPan(root)
 useSwipeControls(root)
 registerShortcuts()
 const { dropActive: fileDropActive, inFlight: fileDropInFlight } = useFileDrop()
+usePasteImage()
 if (__SLIDEV_FEATURE_WAKE_LOCK__)
   useWakeLock()
 useHideCursorIdle(computed(() => isPlaying.value && !isEmbedded.value && !showEditor.value))