@slidev/client 52.2.4 → 52.3.0

package/builtin/LightOrDark.vue

@@ -3,6 +3,8 @@ import { isDark } from '../logic/dark'
 </script>
 
 <template>
-  <slot v-if="isDark" name="dark" />
-  <slot v-else name="light" />
+  <div>
+    <slot v-if="isDark" name="dark" />
+    <slot v-else name="light" />
+  </div>
 </template>

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/composables/useIME.ts

@@ -0,0 +1,30 @@
+import type { ModelRef } from 'vue'
+import { ref, watch } from 'vue'
+
+export function useIME(content: ModelRef<string>) {
+  const composingContent = ref(content.value)
+  watch(content, (v) => {
+    if (v !== composingContent.value) {
+      composingContent.value = v
+    }
+  })
+
+  function onInput(e: Event) {
+    if (!(e instanceof InputEvent) || !(e.target instanceof HTMLTextAreaElement)) {
+      return
+    }
+
+    if (e.isComposing) {
+      composingContent.value = e.target.value
+    }
+    else {
+      content.value = e.target.value
+    }
+  }
+
+  function onCompositionEnd() {
+    content.value = composingContent.value
+  }
+
+  return { composingContent, onInput, onCompositionEnd }
+}

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/internals/NoteEditable.vue

@@ -131,7 +131,7 @@ watch(
     v-else
     ref="inputEl"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
+    class="prose dark:prose-invert resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
     style="line-height: 1.75;"
     :style="[props.style, inputHeight != null ? { height: `${inputHeight}px` } : {}]"
     :class="props.class"

package/internals/ShikiEditor.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { getHighlighter } from '#slidev/shiki'
 import { ref, shallowRef } from 'vue'
+import { useIME } from '../composables/useIME'
 
 const props = defineProps<{
   placeholder?: string
 }>()
 const content = defineModel<string>({ required: true })
+const { composingContent, onInput, onCompositionEnd } = useIME(content)
 
 const textareaEl = ref<HTMLTextAreaElement | null>(null)
 
@@ -16,10 +18,12 @@ getHighlighter().then(h => highlight.value = h)
 <template>
   <div class="absolute left-3 right-0 inset-y-2 font-mono overflow-x-hidden overflow-y-auto cursor-text">
     <div v-if="highlight" class="relative w-full h-max min-h-full">
-      <div class="relative w-full h-max" v-html="`${highlight(content, 'markdown')}&nbsp;`" />
+      <div class="relative w-full h-max" v-html="`${highlight(composingContent, 'markdown')}&nbsp;`" />
       <textarea
-        ref="textareaEl" v-model="content" :placeholder="props.placeholder"
+        ref="textareaEl" v-model="composingContent" :placeholder="props.placeholder"
         class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"
+        @input="onInput"
+        @compositionend="onCompositionEnd"
       />
     </div>
   </div>

package/logic/shortcuts.ts

@@ -6,11 +6,11 @@ import { and, not } from '@vueuse/math'
 import { watch } from 'vue'
 import { useNav } from '../composables/useNav'
 import setupShortcuts from '../setup/shortcuts'
-import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled } from '../state'
+import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled, shortcutsLocked } from '../state'
 
 export function registerShortcuts() {
   const { isPrintMode } = useNav()
-  const enabled = and(not(isInputting), not(isOnFocus), not(isPrintMode), shortcutsEnabled)
+  const enabled = and(not(isInputting), not(isOnFocus), not(isPrintMode), shortcutsEnabled, not(shortcutsLocked))
 
   const allShortcuts = setupShortcuts()
   const shortcuts = new Map<string | Ref<boolean>, ShortcutOptions>(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.2.4",
+  "version": "52.3.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@antfu/utils": "^9.2.0",
-    "@iconify-json/carbon": "^1.2.13",
+    "@antfu/utils": "^9.3.0",
+    "@iconify-json/carbon": "^1.2.14",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@shikijs/engine-javascript": "^3.13.0",
@@ -37,8 +37,8 @@
     "@shikijs/vitepress-twoslash": "^3.13.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.8",
-    "@unhead/vue": "^2.0.17",
-    "@unocss/reset": "^66.5.1",
+    "@unhead/vue": "^2.0.19",
+    "@unocss/reset": "^66.5.4",
     "@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.25",
     "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",
-    "vue-router": "^4.5.1",
+    "shiki-magic-move": "^1.2.0",
+    "typescript": "^5.9.3",
+    "unocss": "^66.5.4",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3",
     "yaml": "^2.8.1",
-    "@slidev/parser": "52.2.4",
-    "@slidev/types": "52.2.4"
+    "@slidev/parser": "52.3.0",
+    "@slidev/types": "52.3.0"
   },
   "devDependencies": {
-    "vite": "^7.1.6"
+    "vite": "^7.1.10"
   }
 }

package/pages/notes-edit.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { SlideRoute } from '@slidev/types'
+import { useHead } from '@unhead/vue'
+import { debouncedWatch } from '@vueuse/core'
+import { ref } from 'vue'
+import { useNav } from '../composables/useNav'
+import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import { slidesTitle } from '../env'
+import IconButton from '../internals/IconButton.vue'
+import Modal from '../internals/Modal.vue'
+
+useHead({ title: `Notes Edit - ${slidesTitle}` })
+
+const { slides } = useNav()
+
+const showHelp = ref(false)
+const note = ref(serializeNotes(slides.value))
+
+function serializeNotes(slides: SlideRoute[]) {
+  const lines: string[] = []
+
+  for (const slide of slides) {
+    if (!slide.meta.slide.note?.trim())
+      continue
+    lines.push(`--- #${slide.no}`)
+    lines.push('')
+    lines.push(slide.meta.slide.note)
+    lines.push('')
+  }
+
+  return lines.join('\n')
+}
+
+function deserializeNotes(notes: string, slides: SlideRoute[]) {
+  const lines = notes.split(/^(---\s*#\d+\s*)$/gm)
+
+  lines.forEach((line, index) => {
+    const match = line.match(/^---\s*#(\d+)\s*$/)
+    if (match) {
+      const no = Number.parseInt(match[1])
+      const note = lines[index + 1].trim()
+      const slide = slides.find(s => s.no === no)
+      if (slide) {
+        slide.meta.slide.note = note
+        useDynamicSlideInfo(no).update({ note })
+      }
+    }
+  })
+}
+
+debouncedWatch(note, (value) => {
+  deserializeNotes(value, slides.value)
+}, { debounce: 300 })
+</script>
+
+<template>
+  <Modal v-model="showHelp" class="px-6 py-4 flex flex-col gap-2">
+    <div class="flex gap-2 text-xl">
+      <div class="i-carbon:information my-auto" /> Help
+    </div>
+    <div class="prose dark:prose-invert">
+      <p>This is the batch notes editor. You can edit the notes for all the slides at once here.</p>
+
+      <p>The note for each slide are separated by <code>--- #[no]</code> lines, you might want to keep them while editing.</p>
+    </div>
+    <div class="flex my-1">
+      <button class="slidev-form-button" @click="showHelp = false">
+        Close
+      </button>
+    </div>
+  </Modal>
+  <div class="h-full">
+    <div class="slidev-glass-effect fixed bottom-5 right-5 rounded-full border border-main">
+      <IconButton title="Help" class="rounded-full" @click="showHelp = true">
+        <div class="i-carbon:help text-2xl" />
+      </IconButton>
+    </div>
+    <textarea
+      v-model="note"
+      class="prose dark:prose-invert resize-none p5 outline-none bg-transparent block h-full w-full! max-w-full! max-h-full! min-h-full! min-w-full!"
+    />
+  </div>
+</template>

package/pages/notes.vue

@@ -5,9 +5,9 @@ import { computed, ref, watch } from 'vue'
 import { createClicksContextBase } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { slidesTitle } from '../env'
-
 import ClicksSlider from '../internals/ClicksSlider.vue'
 import IconButton from '../internals/IconButton.vue'
+import Modal from '../internals/Modal.vue'
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import { fullscreen } from '../state'
 import { sharedState } from '../state/shared'
@@ -20,6 +20,7 @@ const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 const scroller = ref<HTMLDivElement>()
 const fontSize = useLocalStorage('slidev-notes-font-size', 18)
 const pageNo = computed(() => sharedState.page)
+const showHelp = ref(false)
 const currentRoute = computed(() => slides.value.find(i => i.no === pageNo.value))
 
 watch(pageNo, () => {
@@ -43,6 +44,20 @@ const clicksContext = computed(() => {
 </script>
 
 <template>
+  <Modal v-model="showHelp" class="px-6 py-4 flex flex-col gap-2">
+    <div class="flex gap-2 text-xl">
+      <div class="i-carbon:information my-auto" /> Help
+    </div>
+    <div class="prose dark:prose-invert">
+      <p>This is the hands-free live notes viewer.</p>
+      <p>It's designed to be used in a separate view or device. The progress is controlled by and auto synced with the main presenter or slide.</p>
+    </div>
+    <div class="flex my-1">
+      <button class="slidev-form-button" @click="showHelp = false">
+        Close
+      </button>
+    </div>
+  </Modal>
   <div
     class="fixed top-0 left-0 h-3px bg-primary transition-all duration-500"
     :style="{ width: `${(pageNo - 1) / (total - 1) * 100 + 1}%` }"
@@ -76,6 +91,12 @@ const clicksContext = computed(() => {
         <IconButton title="Decrease font size" @click="decreaseFontSize">
           <div class="i-carbon:zoom-out" />
         </IconButton>
+        <IconButton title="Edit notes" to="/notes-edit" target="_blank">
+          <div class="i-carbon:edit" />
+        </IconButton>
+        <IconButton title="Help" class="rounded-full" @click="showHelp = true">
+          <div class="i-carbon:help" />
+        </IconButton>
         <div class="flex-auto" />
         <div class="p2 text-center">
           {{ pageNo }} / {{ total }}

package/setup/monaco.ts

@@ -20,6 +20,7 @@ import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/comm
 import ts from 'typescript'
 import { watchEffect } from 'vue'
 import { isDark } from '../logic/dark'
+import { lockShortcuts } from '../state'
 
 window.MonacoEnvironment = {
   getWorker(_, label) {
@@ -97,6 +98,18 @@ const setup = createSingletonPromise(async () => {
     Object.assign(editorOptions, result?.editorOptions)
   }
 
+  // Disable shortcuts when focusing Monaco editor.
+  monaco.editor.onDidCreateEditor((editor) => {
+    let release: (() => void) | null = null
+    editor.onDidFocusEditorWidget(() => {
+      release = lockShortcuts()
+    })
+    editor.onDidBlurEditorWidget(() => {
+      release?.()
+      release = null
+    })
+  })
+
   // Use Shiki to highlight Monaco
   shikiToMonaco(highlighter, monaco)
   if (typeof themes === 'string') {

package/setup/routes.ts

@@ -39,6 +39,12 @@ export default function setupRoutes() {
         component: () => import('../pages/notes.vue'),
         beforeEnter: passwordGuard,
       },
+      {
+        name: 'notes-edit',
+        path: '/notes-edit',
+        component: () => import('../pages/notes-edit.vue'),
+        beforeEnter: passwordGuard,
+      },
       {
         name: 'presenter',
         path: '/presenter/:no',

package/state/storage.ts

@@ -1,6 +1,6 @@
 import type { DragElementState } from '../composables/useDragElements'
 import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, reactive, ref, shallowRef } from 'vue'
 import { slideAspect } from '../env'
 
 export const showRecordingDialog = ref(false)
@@ -16,6 +16,28 @@ export const hmrSkipTransition = ref(false)
 export const disableTransition = ref(false)
 
 export const shortcutsEnabled = ref(true)
+
+/**
+ * Whether the keyboard shortcuts are enabled. Readonly,
+ * use `lockShortcuts` and `releaseShortcuts` to modify.
+ */
+
+// Use a locking mechanism to support multiple simultaneous locks
+// and avoid race conditions. Race conditions may occur, for example,
+// when locking shortcuts on editor focus and moving from one editor
+// to another, as blur events can be triggered after focus.
+const shortcutsLocks = reactive(new Set<symbol>())
+
+export const shortcutsLocked = computed(() => shortcutsLocks.size > 0)
+
+export function lockShortcuts() {
+  const lock = Symbol('shortcuts lock')
+  shortcutsLocks.add(lock)
+  return () => {
+    shortcutsLocks.delete(lock)
+  }
+}
+
 export const breakpoints = useBreakpoints({
   xs: 460,
   ...breakpointsTailwind,

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 {