@slidev/client 0.48.0-beta.3 → 0.48.0-beta.5

package/builtin/CodeBlockWrapper.vue

@@ -14,11 +14,12 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 <script setup lang="ts">
 import { parseRangeString } from '@slidev/parser/core'
 import { useClipboard } from '@vueuse/core'
-import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { configs } from '../env'
 import { makeId } from '../logic/utils'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   ranges: {
@@ -47,7 +48,7 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicksContext)?.value
+const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 

package/builtin/KaTexBlockWrapper.vue

@@ -20,11 +20,12 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 -->
 
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { parseRangeString } from '@slidev/parser'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   ranges: {
@@ -45,7 +46,7 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicksContext)?.value
+const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 

package/builtin/RenderWhen.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { RenderContext } from '@slidev/types'
-import { computed, inject, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useElementVisibility } from '@vueuse/core'
-import { injectionRenderContext } from '../constants'
+import { useSlideContext } from '../context'
 
 type Context = 'main' | 'visible' | RenderContext
 
@@ -16,7 +16,7 @@ const targetVisible = useElementVisibility(target)
 // When context has `visible`, we need to wrap the content with a div to track the visibility
 const needsDomWrapper = Array.isArray(context) ? context.includes('visible') : context === 'visible'
 
-const currentContext = inject(injectionRenderContext)
+const { $renderContext: currentContext } = useSlideContext()
 const shouldRender = computed(() => {
   const anyContext = Array.isArray(context) ? context.some(contextMatch) : contextMatch(context)
   const allConditions = Array.isArray(context) ? context.every(conditionsMatch) : conditionsMatch(context)

package/builtin/SlideCurrentNo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectionCurrentPage } from '../constants'
+import { useSlideContext } from '../context'
 
-const $page = inject(injectionCurrentPage)
+const { $page } = useSlideContext()
 </script>
 
 <template>

package/builtin/SlidesTotal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectionSlidevContext } from '../constants'
+import { useSlideContext } from '../context'
 
-const $slidev = inject(injectionSlidevContext)
+const { $nav } = useSlideContext()
 </script>
 
 <template>
-  <span>{{ $slidev.nav.total }}</span>
+  <span>{{ $nav.total }}</span>
 </template>

package/builtin/SlidevVideo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
-import { injectionClicksContext, injectionRenderContext, injectionRoute, injectionSlidevContext } from '../constants'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useSlideContext } from '../context'
 
 const props = defineProps<{
   autoPlay?: boolean | 'once' | 'resume' | 'resumeOnce'
@@ -8,10 +8,12 @@ const props = defineProps<{
   autoReset?: 'slide' | 'click'
 }>()
 
-const $slidev = inject(injectionSlidevContext)
-const route = inject(injectionRoute)
-const currentContext = inject(injectionRenderContext)
-const clicks = inject(injectionClicksContext)?.value
+const {
+  $slidev,
+  $clicksContext: clicks,
+  $renderContext: currentContext,
+  $route: route,
+} = useSlideContext()
 
 const video = ref<HTMLMediaElement>()
 const played = ref(false)

package/builtin/Toc.vue

@@ -8,9 +8,9 @@ Usage:
 <Toc columns='2' maxDepth='3' mode='onlySiblings'/>
 -->
 <script setup lang='ts'>
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import type { TocItem } from '@slidev/types'
-import { injectionSlidevContext } from '../constants'
+import { useSlideContext } from '../context'
 
 const props = withDefaults(
   defineProps<{
@@ -33,7 +33,7 @@ const props = withDefaults(
   },
 )
 
-const $slidev = inject(injectionSlidevContext)
+const { $slidev } = useSlideContext()
 
 function filterTreeDepth(tree: TocItem[], level = 1): TocItem[] {
   if (level > Number(props.maxDepth)) {

package/builtin/Tweet.vue

@@ -7,9 +7,9 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { useScriptTag } from '@vueuse/core'
 import { getCurrentInstance, onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
+import { useTweetScript } from '../composables/useTweetScript'
 
 const props = defineProps<{
   id: string | number
@@ -41,21 +41,10 @@ async function create() {
 }
 
 // @ts-expect-error global
-if (window?.twttr?.widgets) {
+if (window?.twttr?.widgets)
   onMounted(create)
-}
-else {
-  useScriptTag(
-    'https://platform.twitter.com/widgets.js',
-    () => {
-      if (vm.isMounted)
-        create()
-      else
-        onMounted(create, vm)
-    },
-    { async: true },
-  )
-}
+else
+  useTweetScript(vm, create)
 </script>
 
 <template>

package/builtin/VClickGap.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Fragment, inject, onMounted, watchEffect } from 'vue'
-import { injectionClicksContext } from '../constants'
+import { Fragment, onMounted, watchEffect } from 'vue'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   size: {
@@ -10,12 +10,10 @@ const props = defineProps({
   },
 })
 
-const clicksRef = inject(injectionClicksContext)
+const { $clicksContext: clicks } = useSlideContext()
 
 onMounted(() => {
   watchEffect((onCleanup) => {
-    const clicks = clicksRef?.value
-
     if (!clicks || clicks.disabled)
       return
 

package/builtin/VClicks.ts

@@ -96,7 +96,7 @@ export default defineComponent({
         if (depth < +this.depth && Array.isArray(i.children))
           vNode = h(i, {}, mapSubList(i.children, depth))
         else
-          vNode = i
+          vNode = h(i)
 
         const delta = thisShowIdx - execIdx
         execIdx = thisShowIdx

package/composables/useClicks.ts

@@ -6,7 +6,7 @@ import type { RouteRecordRaw } from 'vue-router'
 import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
 import { normalizeAtProp } from '../logic/utils'
 
-function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: () => number): ClicksContext {
+function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
@@ -53,7 +53,7 @@ function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: ()
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return route?.meta?.clicks
+      return clicksOverrides
         ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
     },
   }
@@ -63,21 +63,24 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
   const thisPath = +(route?.path ?? 99999)
-  const context = useClicksContextBase(route, () => {
-    const currentPath = +(currentRoute.value?.path ?? 99999)
-    if (currentPath === thisPath)
-      return queryClicks.value
-    else if (currentPath > thisPath)
-      return 99999
-    else
-      return 0
-  })
+  const context = useClicksContextBase(
+    () => {
+      const currentPath = +(currentRoute.value?.path ?? 99999)
+      if (currentPath === thisPath)
+        return queryClicks.value
+      else if (currentPath > thisPath)
+        return 99999
+      else
+        return 0
+    },
+    route?.meta?.clicks,
+  )
   if (route?.meta)
     route.meta.__clicksContext = context
   return context
 }
 
-export function useFixedClicks(route: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
+export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
   const current = ref(currentInit)
-  return [current, useClicksContextBase(route, () => current.value)]
+  return [current, useClicksContextBase(() => current.value, route?.meta?.clicks)]
 }

package/composables/useTweetScript.ts

@@ -0,0 +1,17 @@
+import { createSharedComposable, useScriptTag } from '@vueuse/core'
+import type { ComponentInternalInstance } from 'vue'
+import { onMounted } from 'vue'
+
+export const useTweetScript = createSharedComposable(
+  (vm: ComponentInternalInstance, create: () => void) =>
+    useScriptTag(
+      'https://platform.twitter.com/widgets.js',
+      () => {
+        if (vm.isMounted)
+          create()
+        else
+          onMounted(create, vm)
+      },
+      { async: true },
+    ),
+)

package/constants.ts

@@ -24,3 +24,49 @@ export const TRUST_ORIGINS = [
   'localhost',
   '127.0.0.1',
 ]
+
+export const FRONTMATTER_FIELDS = [
+  'clicks',
+  'disabled',
+  'hide',
+  'hideInToc',
+  'layout',
+  'level',
+  'preload',
+  'routeAlias',
+  'src',
+  'title',
+  'transition',
+  'zoom',
+]
+
+export const HEADMATTER_FIELDS = [
+  ...FRONTMATTER_FIELDS,
+  'theme',
+  'titleTemplate',
+  'info',
+  'author',
+  'keywords',
+  'presenter',
+  'download',
+  'exportFilename',
+  'export',
+  'highlighter',
+  'lineNumbers',
+  'monaco',
+  'remoteAssets',
+  'selectable',
+  'record',
+  'colorSchema',
+  'routerMode',
+  'aspectRatio',
+  'canvasWidth',
+  'themeConfig',
+  'favicon',
+  'plantUmlServer',
+  'fonts',
+  'defaults',
+  'drawings',
+  'htmlAttrs',
+  'mdc',
+]

package/context.ts

@@ -0,0 +1,70 @@
+import { shallowRef, toRef } from 'vue'
+import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
+import { useFixedClicks } from './composables/useClicks'
+import {
+  FRONTMATTER_FIELDS,
+  HEADMATTER_FIELDS,
+  injectionClicksContext,
+  injectionCurrentPage,
+  injectionFrontmatter,
+  injectionRenderContext,
+  injectionRoute,
+  injectionSlidevContext,
+} from './constants'
+
+const clicksContextFallback = shallowRef(useFixedClicks()[1])
+
+/**
+ * Get the current slide context, should be called inside the setup function of a component inside slide
+ */
+export function useSlideContext() {
+  const $slidev = injectLocal(injectionSlidevContext)!
+  const $nav = toRef($slidev, 'nav')
+  const $clicksContext = injectLocal(injectionClicksContext, clicksContextFallback)!.value
+  const $clicks = toRef($clicksContext, 'current')
+  const $page = injectLocal(injectionCurrentPage)!
+  const $renderContext = injectLocal(injectionRenderContext)!
+  const $frontmatter = injectLocal(injectionFrontmatter, {})
+  const $route = injectLocal(injectionRoute, undefined)
+
+  return {
+    $slidev,
+    $nav,
+    $clicksContext,
+    $clicks,
+    $page,
+    $route,
+    $renderContext,
+    $frontmatter,
+  }
+}
+
+export function provideFrontmatter(frontmatter: Record<string, any>) {
+  provideLocal(injectionFrontmatter, frontmatter)
+
+  const {
+    $slidev,
+    $page,
+  } = useSlideContext()
+
+  // update frontmatter in router to make HMR work better
+  const route = $slidev.nav.rawRoutes.find(i => i.path === String($page.value))
+  if (route?.meta?.slide?.frontmatter) {
+    for (const key of Object.keys(route.meta.slide.frontmatter)) {
+      if (!(key in frontmatter))
+        delete route.meta.slide.frontmatter[key]
+    }
+    Object.assign(route.meta.slide.frontmatter, frontmatter)
+  }
+}
+
+/**
+ * Convert frontmatter options to props for v-bind
+ * It removes known options fields, and expose an extra `frontmatter` field that contains full frontmatter
+ */
+export function frontmatterToProps(frontmatter: Record<string, any>, pageNo: number) {
+  return {
+    ...objectOmit(frontmatter, pageNo === 0 ? HEADMATTER_FIELDS : FRONTMATTER_FIELDS),
+    frontmatter,
+  }
+}

package/internals/DrawingControls.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Menu } from 'floating-vue'
+import 'floating-vue/dist/style.css'
 import {
   brush,
   brushColors,
@@ -21,19 +23,24 @@ function undo() {
 function redo() {
   drauu.redo()
 }
+
+let lastDrawingMode: typeof drawingMode.value = 'stylus'
 function setDrawingMode(mode: typeof drawingMode.value) {
   drawingMode.value = mode
   drawingEnabled.value = true
+  if (mode !== 'eraseLine')
+    lastDrawingMode = mode
 }
 function setBrushColor(color: typeof brush.color) {
   brush.color = color
   drawingEnabled.value = true
+  drawingMode.value = lastDrawingMode
 }
 </script>
 
 <template>
   <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20"
     dark="border border-gray-400 border-opacity-10"
     :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
     storage-key="slidev-drawing-pos"
@@ -57,23 +64,41 @@ function setBrushColor(color: typeof brush.color) {
     <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
     </IconButton>
-    <!-- TODO: not sure why it's not working! -->
-    <!-- <IconButton title="Erase" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
       <carbon:erase />
-    </IconButton> -->
+    </IconButton>
 
     <VerticalDivider />
 
+    <Menu>
+      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
+        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
+          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </IconButton>
+      <template #popper>
+        <div class="flex bg-main p-2">
+          <div class="inline-block w-7 text-center">
+            {{ brush.size }}
+          </div>
+          <div class="pt-.5">
+            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
+          </div>
+        </div>
+      </template>
+    </Menu>
     <IconButton
       v-for="color of brushColors"
       :key="color"
       title="Set brush color"
-      :class="brush.color === color ? 'active' : 'shallow'"
+      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
       <div
-        class="w-6 h-6 transition-all transform border border-gray-400/50"
-        :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
+        class="w-6 h-6 transition-all transform border"
+        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
         :style="drawingEnabled ? { background: color } : { borderColor: color }"
       />
     </IconButton>
@@ -87,7 +112,7 @@ function setBrushColor(color: typeof brush.color) {
       <carbon:redo />
     </IconButton>
     <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
-      <carbon:delete />
+      <carbon:trash-can />
     </IconButton>
 
     <VerticalDivider />
@@ -106,3 +131,11 @@ function setBrushColor(color: typeof brush.color) {
     </IconButton>
   </Draggable>
 </template>
+
+<style lang="postcss">
+.v-popper--theme-menu {
+  .v-popper__arrow-inner {
+    @apply border-main;
+  }
+}
+</style>

package/internals/DrawingLayer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { injectLocal } from '@vueuse/core'
 import { drauu, drawingEnabled, loadCanvas } from '../logic/drawings'
 import { injectionSlideScale } from '../constants'
 
-const scale = inject(injectionSlideScale)!
+const scale = injectLocal(injectionSlideScale)!
 const svg = ref<SVGSVGElement>()
 
 onMounted(() => {

package/internals/PrintContainer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseRangeString } from '@slidev/parser/core'
-import { computed, provide } from 'vue'
+import { computed } from 'vue'
+import { provideLocal } from '@vueuse/core'
 import { configs, slideAspect, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
 import { route as currentRoute, rawRoutes } from '../logic/nav'
@@ -31,7 +32,7 @@ const className = computed(() => ({
   'select-none': !configs.selectable,
 }))
 
-provide(injectionSlideScale, scale)
+provideLocal(injectionSlideScale, scale)
 </script>
 
 <template>

package/internals/PrintSlideClick.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
-import { computed, provide, reactive, shallowRef } from 'vue'
+import { computed, reactive, shallowRef } from 'vue'
 import type { ClicksContext } from '@slidev/types'
+import { provideLocal } from '@vueuse/core'
 import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
@@ -33,7 +34,7 @@ const id = computed(() =>
   `${props.route.path.toString().padStart(3, '0')}-${(props.nav.clicks.value + 1).toString().padStart(2, '0')}`,
 )
 
-provide(injectionSlidevContext, reactive({
+provideLocal(injectionSlidevContext, reactive({
   nav: props.nav,
   configs,
   themeConfigs: computed(() => configs.themeConfig),

package/internals/SlideContainer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, provide, ref, watchEffect } from 'vue'
+import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
+import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
 import { isPrintMode } from '../logic/nav'
@@ -64,7 +64,7 @@ if (props.isMain) {
   `))
 }
 
-provide(injectionSlideScale, scale as any)
+provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>

package/internals/SlideWrapper.ts

@@ -1,6 +1,8 @@
-import { defineComponent, h, provide, ref, toRef } from 'vue'
+import { computed, defineComponent, h, ref, toRef } from 'vue'
 import type { PropType } from 'vue'
+import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext } from '@slidev/types'
+import type { RouteRecordRaw } from 'vue-router'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
 
 export default defineComponent({
@@ -20,23 +22,37 @@ export default defineComponent({
     },
     is: {
       type: Object,
-      default: undefined,
+      required: true,
     },
     route: {
-      type: Object,
-      default: undefined,
+      type: Object as PropType<RouteRecordRaw>,
+      required: true,
     },
   },
   setup(props) {
-    provide(injectionRoute, props.route as any)
-    provide(injectionCurrentPage, ref(+props.route?.path))
-    provide(injectionRenderContext, ref(props.renderContext as RenderContext))
-    provide(injectionActive, toRef(props, 'active'))
-    provide(injectionClicksContext, toRef(props, 'clicksContext'))
+    provideLocal(injectionRoute, props.route)
+    provideLocal(injectionCurrentPage, ref(+props.route.path))
+    provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
+    provideLocal(injectionActive, toRef(props, 'active'))
+    provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+
+    const style = computed(() => {
+      const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+      return zoom === 1
+        ? undefined
+        : {
+            width: `${100 / zoom}%`,
+            height: `${100 / zoom}%`,
+            transformOrigin: 'top left',
+            transform: `scale(${zoom})`,
+          }
+    })
+
+    return {
+      style,
+    }
   },
   render() {
-    if (this.$props.is)
-      return h(this.$props.is)
-    return this.$slots?.default?.()
+    return h(this.$props.is, { style: this.style })
   },
 })

package/logic/drawings.ts

@@ -4,6 +4,7 @@ import { createDrauu } from 'drauu'
 import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
+import { isInputting } from '../state'
 import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [
@@ -40,11 +41,13 @@ export const drawingMode = computed({
   set(v: DrawingMode | 'arrow') {
     _mode.value = v
     if (v === 'arrow') {
-      brush.mode = 'line'
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = 'line'
       brush.arrowEnd = true
     }
     else {
-      brush.mode = v
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = v
       brush.arrowEnd = false
     }
   },
@@ -110,7 +113,7 @@ drauu.on('start', () => isDrawing.value = true)
 drauu.on('end', () => isDrawing.value = false)
 
 window.addEventListener('keydown', (e) => {
-  if (!drawingEnabled.value)
+  if (!drawingEnabled.value || isInputting.value)
     return
 
   const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey

package/logic/nav.ts

@@ -177,7 +177,7 @@ export async function downloadPDF() {
 export async function openInEditor(url?: string) {
   if (url == null) {
     const slide = currentRoute.value?.meta?.slide
-    if (!slide?.filepath)
+    if (!slide)
       return false
     url = `${slide.filepath}:${slide.start}`
   }

package/modules/context.ts

@@ -1,12 +1,12 @@
 import type { App } from 'vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import type { ComputedRef } from '@vue/reactivity'
 import type { configs } from '../env'
 import * as nav from '../logic/nav'
 import { route } from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { injectionCurrentPage, injectionSlidevContext } from '../constants'
+import { injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
 export type SlidevContextNavKey = 'path' | 'total' | 'clicksContext' | 'clicks' | 'clicksTotal' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes' | 'go'
@@ -25,6 +25,7 @@ export default function createSlidevContext() {
   return {
     install(app: App) {
       const context = reactive(useContext(route))
+      app.provide(injectionRenderContext, ref('none'))
       app.provide(injectionSlidevContext, context)
       app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
 

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@slidev/client",
-  "version": "0.48.0-beta.3",
+  "type": "module",
+  "version": "0.48.0-beta.5",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -13,6 +14,12 @@
   "bugs": "https://github.com/slidevjs/slidev/issues",
   "exports": {
     "./package.json": "./package.json",
+    "./constants": "./constants.ts",
+    "./context": "./context.ts",
+    "./env": "./env.ts",
+    "./layoutHelper": "./layoutHelper.ts",
+    "./routes": "./routes.ts",
+    "./utils": "./utils.ts",
     "./*": "./*"
   },
   "engines": {
@@ -22,15 +29,15 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
-    "@shikijs/vitepress-twoslash": "^1.1.5",
+    "@shikijs/vitepress-twoslash": "^1.1.6",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
-    "@vueuse/core": "^10.7.2",
-    "@vueuse/math": "^10.7.2",
+    "@vueuse/core": "^10.8.0",
+    "@vueuse/math": "^10.8.0",
     "@vueuse/motion": "^2.0.0",
     "codemirror": "^5.65.16",
     "defu": "^6.1.4",
-    "drauu": "^0.3.7",
+    "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
@@ -39,15 +46,15 @@
     "katex": "^0.16.9",
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.5",
+    "nanoid": "^5.0.6",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
     "unocss": "^0.58.5",
     "vue": "^3.4.19",
     "vue-router": "^4.2.5",
-    "@slidev/parser": "0.48.0-beta.3",
-    "@slidev/types": "0.48.0-beta.3"
+    "@slidev/parser": "0.48.0-beta.5",
+    "@slidev/types": "0.48.0-beta.5"
   },
   "devDependencies": {
     "vite": "^5.1.3"

package/routes.ts

@@ -1,7 +1,7 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import type { TransitionGroupProps } from 'vue'
-import type { ClicksContext } from '@slidev/types'
+import type { ClicksContext, SlideInfo } from '@slidev/types'
 
 // @ts-expect-error missing types
 import _rawRoutes, { redirects } from '/@slidev/routes'
@@ -84,19 +84,12 @@ declare module 'vue-router' {
     preload?: boolean
 
     // slide info
-    slide?: {
+    slide?: Omit<SlideInfo, 'source'> & {
+      noteHTML: string
+      filepath: string
       start: number
-      end: number
-      note?: string
-      noteHTML?: string
       id: number
       no: number
-      filepath: string
-      title?: string
-      level?: number
-      raw: string
-      content: string
-      frontmatter: Record<string, any>
     }
 
     // private fields

package/setup/codemirror.ts

@@ -1,4 +1,5 @@
 import type { Ref, WritableComputedRef } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { watch } from 'vue'
 import * as _CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
@@ -47,5 +48,11 @@ export async function useCodeMirror(
     { immediate: true },
   )
 
+  onClickOutside(cm.getWrapperElement(), () => {
+    const el = cm.getInputField()
+    if (document.activeElement === el)
+      el.blur()
+  })
+
   return cm
 }

package/state/index.ts

@@ -20,19 +20,19 @@ export const activeElement = useActiveElement()
 export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
 export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
 
-export const currentCamera = useLocalStorage<string>('slidev-camera', 'default')
-export const currentMic = useLocalStorage<string>('slidev-mic', 'default')
+export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
+export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 
-export const showOverview = useLocalStorage('slidev-show-overview', false)
-export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true)
-export const showEditor = useLocalStorage('slidev-show-editor', false)
-export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false)
-export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318)
-export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300)
+export const showOverview = useLocalStorage('slidev-show-overview', false, { listenToStorageChanges: false })
+export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
+export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
+export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })
+export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
+export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
 
-export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1)
-export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1)
+export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1, { listenToStorageChanges: false })
+export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { listenToStorageChanges: false })
 
 export function togglePresenterLayout() {
   presenterLayout.value = presenterLayout.value + 1