@slidev/client 0.49.29 → 0.50.0-beta.2

package/logic/contextMenu.ts

@@ -1,9 +1,9 @@
 import type { ContextMenuItem } from '@slidev/types'
 import type { ComputedRef } from 'vue'
 import { shallowRef } from 'vue'
-import setupContextMenu from '../setup/context-menu'
-import { configs, mode } from '../env'
 import { useNav } from '../composables/useNav'
+import { configs, mode } from '../env'
+import setupContextMenu from '../setup/context-menu'
 
 export const currentContextMenu = shallowRef<null | {
   x: number
@@ -24,7 +24,7 @@ export function closeContextMenu() {
 }
 
 export function onContextMenu(ev: MouseEvent) {
-  if (configs.contextMenu !== true && configs.contextMenu !== undefined && configs.contextMenu !== mode)
+  if (configs.contextMenu !== true && configs.contextMenu != null && configs.contextMenu !== mode)
     return
   if (ev.shiftKey || ev.defaultPrevented)
     return

package/logic/recording.ts

@@ -1,9 +1,9 @@
-import type { Ref } from 'vue'
-import { nextTick, ref, shallowRef, watch } from 'vue'
-import { useDevicesList, useEventListener, useLocalStorage } from '@vueuse/core'
-import { isTruthy } from '@antfu/utils'
 import type RecorderType from 'recordrtc'
 import type { Options as RecorderOptions } from 'recordrtc'
+import type { Ref } from 'vue'
+import { isTruthy } from '@antfu/utils'
+import { useDevicesList, useEventListener, useLocalStorage } from '@vueuse/core'
+import { nextTick, ref, shallowRef, watch } from 'vue'
 import { currentCamera, currentMic } from '../state'
 
 type Defined<T> = T extends undefined ? never : T

package/logic/shortcuts.ts

@@ -1,11 +1,11 @@
+import type { ShortcutOptions } from '@slidev/types'
 import type { Fn, KeyFilter } from '@vueuse/core'
+import type { Ref } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
 import { and, not } from '@vueuse/math'
-import type { Ref } from 'vue'
 import { watch } from 'vue'
-import type { ShortcutOptions } from '@slidev/types'
-import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled } from '../state'
 import setupShortcuts from '../setup/shortcuts'
+import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled } from '../state'
 
 const _shortcut = and(not(isInputting), not(isOnFocus), shortcutsEnabled)
 

package/logic/slides.ts

@@ -1,8 +1,8 @@
 import type { SlideRoute } from '@slidev/types'
+import { slides } from '#slidev/slides'
 import { computed, watch, watchEffect } from 'vue'
-import { useSlideContext } from '../context'
 import { useNav } from '../composables/useNav'
-import { slides } from '#slidev/slides'
+import { useSlideContext } from '../context'
 
 export { slides }
 

package/logic/snapshot.ts

@@ -0,0 +1,86 @@
+import { snapshotState } from '../state/snapshot'
+import { getSlide } from './slides'
+
+export class SlideSnapshotManager {
+  private _capturePromises = new Map<number, Promise<void>>()
+
+  getSnapshot(slideNo: number) {
+    const data = snapshotState.state[slideNo]
+    if (!data) {
+      return
+    }
+    const slide = getSlide(slideNo)
+    if (!slide) {
+      return
+    }
+    if (data?.revision === slide?.meta.slide.revision) {
+      return data.image
+    }
+  }
+
+  async captureSnapshot(slideNo: number, el: HTMLElement, delay = 1000) {
+    if (!__DEV__)
+      return
+    if (this.getSnapshot(slideNo)) {
+      return
+    }
+    if (this._capturePromises.has(slideNo)) {
+      await this._capturePromises.get(slideNo)
+    }
+    const promise = this._captureSnapshot(slideNo, el, delay)
+      .finally(() => {
+        this._capturePromises.delete(slideNo)
+      })
+    this._capturePromises.set(slideNo, promise)
+    await promise
+  }
+
+  private async _captureSnapshot(slideNo: number, el: HTMLElement, delay: number) {
+    if (!__DEV__)
+      return
+    const slide = getSlide(slideNo)
+    if (!slide)
+      return
+
+    const revision = slide.meta.slide.revision
+
+    // Retry until the slide is loaded
+    let retries = 100
+    while (retries-- > 0) {
+      if (!el.querySelector('.slidev-slide-loading'))
+        break
+      await new Promise(r => setTimeout(r, 100))
+    }
+
+    // Artificial delay for the content to be loaded
+    await new Promise(r => setTimeout(r, delay))
+
+    // Capture the snapshot
+    const toImage = await import('html-to-image')
+    try {
+      const dataUrl = await toImage.toPng(el, {
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+        skipFonts: true,
+        cacheBust: true,
+        pixelRatio: 1.5,
+      })
+      if (revision !== slide.meta.slide.revision) {
+        // eslint-disable-next-line no-console
+        console.info('[Slidev] Slide', slideNo, 'changed, discarding the snapshot')
+        return
+      }
+      snapshotState.patch(slideNo, {
+        revision,
+        image: dataUrl,
+      })
+      // eslint-disable-next-line no-console
+      console.info('[Slidev] Snapshot captured for slide', slideNo)
+    }
+    catch (e) {
+      console.error('[Slidev] Failed to capture snapshot for slide', slideNo, e)
+    }
+  }
+}
+
+export const snapshotManager = new SlideSnapshotManager()

package/modules/context.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef } from '@vue/reactivity'
-import type { configs } from '../env'
 import type { SlidevContextNav } from '../composables/useNav'
+import type { configs } from '../env'
 
 export interface SlidevContext {
   nav: SlidevContextNav

package/modules/mermaid.ts

@@ -1,8 +1,8 @@
-import mermaid from 'mermaid/dist/mermaid.esm.mjs'
-import lz from 'lz-string'
 import { clearUndefined } from '@antfu/utils'
-import setupMermaid from '../setup/mermaid'
+import lz from 'lz-string'
+import mermaid from 'mermaid/dist/mermaid.esm.mjs'
 import { makeId } from '../logic/utils'
+import setupMermaid from '../setup/mermaid'
 
 mermaid.startOnLoad = false
 mermaid.initialize({ startOnLoad: false })

package/modules/v-click.ts

@@ -1,6 +1,6 @@
+import type { ClicksElement, RawAtValue } from '@slidev/types'
 import type { App, DirectiveBinding } from 'vue'
 import { computed, watchEffect } from 'vue'
-import type { ClicksElement, RawAtValue } from '@slidev/types'
 import {
   CLASS_VCLICK_CURRENT,
   CLASS_VCLICK_FADE,

package/modules/v-drag.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
-import { watch } from 'vue'
 import type { DragElementState } from '../composables/useDragElements'
+import { watch } from 'vue'
 import { useDragElement } from '../composables/useDragElements'
 
 export function createVDragDirective() {

package/modules/v-mark.ts

@@ -1,8 +1,8 @@
 import type { RoughAnnotationConfig } from '@slidev/rough-notation'
-import { annotate } from '@slidev/rough-notation'
+import type { RawAtValue } from '@slidev/types'
 import type { App } from 'vue'
+import { annotate } from '@slidev/rough-notation'
 import { computed, watchEffect } from 'vue'
-import type { RawAtValue } from '@slidev/types'
 import { resolveClick } from './v-click'
 
 export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {

package/modules/v-motion.ts

@@ -1,9 +1,9 @@
+import type { ClicksInfo } from '@slidev/types'
 import type { App, ObjectDirective } from 'vue'
-import { watch } from 'vue'
 import { MotionDirective } from '@vueuse/motion'
-import type { ClicksInfo } from '@slidev/types'
-import { injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
+import { watch } from 'vue'
 import { useNav } from '../composables/useNav'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
 import { makeId } from '../logic/utils'
 import { directiveInject } from '../utils'
 import { resolvedClickMap } from './v-click'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.29",
+  "version": "0.50.0-beta.2",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,39 +29,40 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.10",
-    "@iconify-json/carbon": "^1.1.37",
-    "@iconify-json/ph": "^1.1.14",
-    "@iconify-json/svg-spinners": "^1.1.3",
-    "@shikijs/monaco": "^1.14.1",
-    "@shikijs/vitepress-twoslash": "^1.14.1",
+    "@iconify-json/carbon": "^1.2.1",
+    "@iconify-json/ph": "^1.2.0",
+    "@iconify-json/svg-spinners": "^1.2.0",
+    "@shikijs/monaco": "^1.21.0",
+    "@shikijs/vitepress-twoslash": "^1.21.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.7",
-    "@unhead/vue": "^1.10.0",
-    "@unocss/reset": "^0.62.3",
-    "@vueuse/core": "^11.0.3",
-    "@vueuse/math": "^11.0.3",
-    "@vueuse/motion": "^2.2.3",
+    "@unhead/vue": "^1.11.6",
+    "@unocss/reset": "^0.63.1",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/math": "^11.1.0",
+    "@vueuse/motion": "^2.2.5",
     "drauu": "^0.4.1",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
+    "html-to-image": "^1.11.11",
     "katex": "^0.16.11",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.0.2",
-    "monaco-editor": "^0.51.0",
+    "mermaid": "^11.2.1",
+    "monaco-editor": "^0.52.0",
     "prettier": "^3.3.3",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.14.1",
+    "shiki": "^1.21.0",
     "shiki-magic-move": "^0.4.4",
-    "typescript": "^5.5.4",
-    "unocss": "^0.62.3",
-    "vue": "^3.4.38",
-    "vue-router": "^4.4.3",
-    "yaml": "^2.5.0",
-    "@slidev/types": "0.49.29",
-    "@slidev/parser": "0.49.29"
+    "typescript": "^5.6.2",
+    "unocss": "^0.63.1",
+    "vue": "^3.5.10",
+    "vue-router": "^4.4.5",
+    "yaml": "^2.5.1",
+    "@slidev/types": "0.50.0-beta.2",
+    "@slidev/parser": "0.50.0-beta.2"
   },
   "devDependencies": {
-    "vite": "^5.4.2"
+    "vite": "^5.4.8"
   }
 }

package/pages/notes.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { computed, ref, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { createClicksContextBase } from '../composables/useClicks'
+import { useNav } from '../composables/useNav'
 import { slidesTitle } from '../env'
-import { sharedState } from '../state/shared'
-import { fullscreen } from '../state'
 
-import NoteDisplay from '../internals/NoteDisplay.vue'
-import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
-import { useNav } from '../composables/useNav'
-import { createClicksContextBase } from '../composables/useClicks'
+import IconButton from '../internals/IconButton.vue'
+import NoteDisplay from '../internals/NoteDisplay.vue'
+import { fullscreen } from '../state'
+import { sharedState } from '../state/shared'
 
 useHead({ title: `Notes - ${slidesTitle}` })
 

package/pages/overview.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
-import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { pathPrefix, slidesTitle } from '../env'
-import { getSlidePath } from '../logic/slides'
+import { useHead } from '@unhead/vue'
+import { computed, nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
-import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import SlideContainer from '../internals/SlideContainer.vue'
-import SlideWrapper from '../internals/SlideWrapper.vue'
+import { useNav } from '../composables/useNav'
+import { CLICKS_MAX } from '../constants'
+import { pathPrefix, slidesTitle } from '../env'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
-import ClicksSlider from '../internals/ClicksSlider.vue'
-import { CLICKS_MAX } from '../constants'
-import { useNav } from '../composables/useNav'
+import SlideContainer from '../internals/SlideContainer.vue'
+import SlideWrapper from '../internals/SlideWrapper.vue'
+import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
+import { getSlidePath } from '../logic/slides'
 
 const cardWidth = 450
 
@@ -49,7 +49,20 @@ function toggleRoute(route: SlideRoute) {
 }
 
 function wordCount(str: string) {
-  return str.match(/[\w`'\-]+/g)?.length || 0
+  const pattern = /[\w`'\-\u0392-\u03C9\u00C0-\u00FF\u0600-\u06FF\u0400-\u04FF]+|[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF\u3040-\u309F\uAC00-\uD7AF]+/g
+  const m = str.match(pattern)
+  let count = 0
+  if (!m)
+    return 0
+  for (let i = 0; i < m.length; i++) {
+    if (m[i].charCodeAt(0) >= 0x4E00) {
+      count += m[i].length
+    }
+    else {
+      count += 1
+    }
+  }
+  return count
 }
 
 function isElementInViewport(el: HTMLElement) {

package/pages/play.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed, ref, shallowRef } from 'vue'
 import { useStyleTag } from '@vueuse/core'
-import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
+import { computed, ref, shallowRef } from 'vue'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { registerShortcuts } from '../logic/shortcuts'
+import { useWakeLock } from '../composables/useWakeLock'
 import Controls from '../internals/Controls.vue'
-import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
-import SlidesShow from '../internals/SlidesShow.vue'
+import PresenterMouse from '../internals/PresenterMouse.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import SlideContainer from '../internals/SlideContainer.vue'
+import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
-import { useNav } from '../composables/useNav'
-import { useWakeLock } from '../composables/useWakeLock'
-import { useDrawings } from '../composables/useDrawings'
-import PresenterMouse from '../internals/PresenterMouse.vue'
+import { registerShortcuts } from '../logic/shortcuts'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
 
 const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
@@ -80,7 +80,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
       <template #controls>
         <div
           v-if="!isPrintMode"
-          class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
+          class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100 focus-within:opacity-100 focus-visible:opacity-100"
           :class="[
             persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
             isDrawing ? 'pointer-events-none' : '',

package/pages/presenter/print.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
+import { useStyleTag } from '@vueuse/core'
+import { computed } from 'vue'
 import { useNav } from '../../composables/useNav'
 import { configs } from '../../env'
 import NoteDisplay from '../../internals/NoteDisplay.vue'

package/pages/presenter.vue

@@ -1,30 +1,30 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
+import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
+import { createFixedClicks } from '../composables/useClicks'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
+import { useWakeLock } from '../composables/useWakeLock'
 import { slidesTitle } from '../env'
-import { sharedState } from '../state/shared'
-import { registerShortcuts } from '../logic/shortcuts'
-import { onContextMenu } from '../logic/contextMenu'
-import { useTimer } from '../logic/utils'
-import { createFixedClicks } from '../composables/useClicks'
-import SlideWrapper from '../internals/SlideWrapper.vue'
-import SlideContainer from '../internals/SlideContainer.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
+import ContextMenu from '../internals/ContextMenu.vue'
+import DrawingControls from '../internals/DrawingControls.vue'
+import Goto from '../internals/Goto.vue'
+import IconButton from '../internals/IconButton.vue'
 import NavControls from '../internals/NavControls.vue'
-import QuickOverview from '../internals/QuickOverview.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
-import Goto from '../internals/Goto.vue'
+import QuickOverview from '../internals/QuickOverview.vue'
+import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
-import DrawingControls from '../internals/DrawingControls.vue'
-import IconButton from '../internals/IconButton.vue'
-import ClicksSlider from '../internals/ClicksSlider.vue'
-import ContextMenu from '../internals/ContextMenu.vue'
-import { useNav } from '../composables/useNav'
-import { useDrawings } from '../composables/useDrawings'
-import { useWakeLock } from '../composables/useWakeLock'
+import SlideWrapper from '../internals/SlideWrapper.vue'
+import { onContextMenu } from '../logic/contextMenu'
+import { registerShortcuts } from '../logic/shortcuts'
+import { useTimer } from '../logic/utils'
+import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
+import { sharedState } from '../state/shared'
 
 const main = ref<HTMLDivElement>()
 

package/pages/print.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { onMounted, watchEffect } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
-import { windowSize } from '../state'
+import { onMounted, watchEffect } from 'vue'
+import { useNav } from '../composables/useNav'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
-import { useNav } from '../composables/useNav'
+import { windowSize } from '../state'
 
 const { isPrintMode } = useNav()
 

package/setup/code-runners.ts

@@ -1,10 +1,10 @@
-import { createSingletonPromise } from '@antfu/utils'
-import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
-
+import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputs, CodeRunnerOutputText } from '@slidev/types'
 import type ts from 'typescript'
-import { ref } from 'vue'
+
 import deps from '#slidev/monaco-run-deps'
 import setups from '#slidev/setups/code-runners'
+import { createSingletonPromise } from '@antfu/utils'
+import { ref } from 'vue'
 
 export default createSingletonPromise(async () => {
   const runners: Record<string, CodeRunner> = {

package/setup/context-menu.ts

@@ -1,23 +1,23 @@
 /// <reference types="unplugin-icons/types/vue3" />
-import type { ComputedRef } from 'vue'
-import { computed } from 'vue'
+
 import type { ContextMenuItem } from '@slidev/types'
-import { useNav } from '../composables/useNav'
-import { useDrawings } from '../composables/useDrawings'
-import { fullscreen, showEditor, toggleOverview } from '../state'
+import type { ComputedRef } from 'vue'
 import setups from '#slidev/setups/context-menu'
-
+import IconApps from '~icons/carbon/apps'
+import IconArrowDown from '~icons/carbon/arrow-down'
 import IconArrowLeft from '~icons/carbon/arrow-left'
 import IconArrowRight from '~icons/carbon/arrow-right'
 import IconArrowUp from '~icons/carbon/arrow-up'
-import IconArrowDown from '~icons/carbon/arrow-down'
+import IconMaximize from '~icons/carbon/maximize'
+import IconMinimize from '~icons/carbon/minimize'
 import IconPen from '~icons/carbon/pen'
-import IconTextNotationToggle from '~icons/carbon/text-annotation-toggle'
-import IconApps from '~icons/carbon/apps'
 import IconPresentationFile from '~icons/carbon/presentation-file'
+import IconTextNotationToggle from '~icons/carbon/text-annotation-toggle'
 import IconUserSpeaker from '~icons/carbon/user-speaker'
-import IconMaximize from '~icons/carbon/maximize'
-import IconMinimize from '~icons/carbon/minimize'
+import { computed } from 'vue'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
+import { fullscreen, showEditor, toggleOverview } from '../state'
 
 let items: ComputedRef<ContextMenuItem[]> | undefined
 

package/setup/main.ts

@@ -1,14 +1,14 @@
 import type { AppContext } from '@slidev/types'
-import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import type { App } from 'vue'
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import setups from '#slidev/setups/main'
+import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import { createHead } from '@unhead/vue'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import { createVClickDirectives } from '../modules/v-click'
-import { createVMarkDirective } from '../modules/v-mark'
 import { createVDragDirective } from '../modules/v-drag'
+import { createVMarkDirective } from '../modules/v-mark'
 import { createVMotionDirectives } from '../modules/v-motion'
 import setupRoutes from '../setup/routes'
-import setups from '#slidev/setups/main'
 
 import '#slidev/styles'
 

package/setup/mermaid.ts

@@ -1,6 +1,6 @@
 import type { MermaidConfig } from 'mermaid'
-import { createSingletonPromise } from '@antfu/utils'
 import setups from '#slidev/setups/mermaid'
+import { createSingletonPromise } from '@antfu/utils'
 
 export default createSingletonPromise(async () => {
   const setupReturn: MermaidConfig = {

package/setup/monaco.ts

@@ -1,9 +1,9 @@
-import { createSingletonPromise } from '@antfu/utils'
 import type { MonacoSetupReturn } from '@slidev/types'
-import * as monaco from 'monaco-editor'
-import { watchEffect } from 'vue'
+import configs from '#slidev/configs'
+import setups from '#slidev/setups/monaco'
+import { createSingletonPromise } from '@antfu/utils'
 import { setupTypeAcquisition } from '@typescript/ata'
-import ts from 'typescript'
+import * as monaco from 'monaco-editor'
 
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
@@ -11,18 +11,18 @@ import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 
+import ts from 'typescript'
+
+import { watchEffect } from 'vue'
+
 // @ts-expect-error missing types
 import { ContextViewService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextViewService'
 
 // @ts-expect-error missing types
 import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/common/descriptors'
-
 // @ts-expect-error missing types
 import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'
-
 import { isDark } from '../logic/dark'
-import configs from '#slidev/configs'
-import setups from '#slidev/setups/monaco'
 
 window.MonacoEnvironment = {
   getWorker(_, label) {
@@ -92,7 +92,7 @@ const setup = createSingletonPromise(async () => {
   monaco.languages.register({ id: 'typescript' })
   monaco.languages.register({ id: 'javascript' })
 
-  const { shiki, themes, shikiToMonaco } = await import('#slidev/shiki')
+  const { shiki, languages, themes, shikiToMonaco } = await import('#slidev/shiki')
   const highlighter = await shiki
 
   const editorOptions: MonacoSetupReturn['editorOptions'] & object = {}
@@ -113,6 +113,10 @@ const setup = createSingletonPromise(async () => {
         : themes.light || 'vitesse-light')
     })
   }
+  // Register all languages, otherwise Monaco will not highlight them
+  for (const lang of languages) {
+    monaco.languages.register({ id: lang })
+  }
 
   return {
     monaco,