@slidev/client 0.49.0-beta.1 → 0.49.0-beta.3

package/builtin/CodeBlockWrapper.vue

@@ -63,10 +63,10 @@ onMounted(() => {
   if (!clicks || !props.ranges?.length)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
-  clicks.register(id, { max: end, delta })
+  const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
+  clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - start + 1))
+  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/KaTexBlockWrapper.vue

@@ -58,10 +58,10 @@ onMounted(() => {
   if (!clicks || !props.ranges?.length)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
-  clicks.register(id, { max: end, delta })
+  const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
+  clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - start + 1))
+  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/Monaco.vue

@@ -16,7 +16,11 @@ import { debounce } from '@antfu/utils'
 import lz from 'lz-string'
 import type * as monaco from 'monaco-editor'
 import { computed, nextTick, onMounted, ref } from 'vue'
+import type { RawAtValue } from '@slidev/types'
+import { whenever } from '@vueuse/core'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
+import { useNav } from '../composables/useNav'
 import CodeRunner from '../internals/CodeRunner.vue'
 
 const props = withDefaults(defineProps<{
@@ -30,6 +34,7 @@ const props = withDefaults(defineProps<{
   ata?: boolean
   runnable?: boolean
   autorun?: boolean | 'once'
+  showOutputAt?: RawAtValue
   outputHeight?: string
   highlightOutput?: boolean
   runnerOptions?: Record<string, unknown>
@@ -74,6 +79,19 @@ const height = computed(() => {
   return props.height
 })
 
+const loadTypes = ref<() => void>()
+const { $page: thisSlideNo, $renderContext: renderContext } = useSlideContext()
+const { currentSlideNo } = useNav()
+const stopWatchTypesLoading = whenever(
+  () => Math.abs(thisSlideNo.value - currentSlideNo.value) <= 1 && loadTypes.value,
+  (loadTypes) => {
+    if (['slide', 'presenter'].includes(renderContext.value))
+      loadTypes()
+    else
+      setTimeout(loadTypes, 5000)
+  },
+)
+
 onMounted(async () => {
   // Lazy load monaco, so it will be bundled in async chunk
   const { default: setup } = await import('../setup/monaco')
@@ -135,11 +153,15 @@ onMounted(async () => {
     })
     editableEditor = editor
   }
-  if (props.ata) {
-    ata(editableEditor.getValue())
-    editableEditor.onDidChangeModelContent(debounce(1000, () => {
+  loadTypes.value = () => {
+    stopWatchTypesLoading()
+    import('#slidev/monaco-types')
+    if (props.ata) {
       ata(editableEditor.getValue())
-    }))
+      editableEditor.onDidChangeModelContent(debounce(1000, () => {
+        ata(editableEditor.getValue())
+      }))
+    }
   }
   const originalLayoutContentWidget = editableEditor.layoutContentWidget.bind(editableEditor)
   editableEditor.layoutContentWidget = (widget: any) => {
@@ -165,6 +187,7 @@ onMounted(async () => {
       v-model="code"
       :lang="lang"
       :autorun="props.autorun"
+      :show-output-at="props.showOutputAt"
       :height="props.outputHeight"
       :highlight-output="props.highlightOutput"
       :runner-options="props.runnerOptions"

package/builtin/ShikiMagicMove.vue

@@ -36,14 +36,14 @@ onMounted(() => {
     throw new Error('[slidev] The length of stepRanges does not match the length of steps, this is an internal error.')
 
   const clickCounts = ranges.value.map(s => s.length).reduce((a, b) => a + b, 0)
-  const { start, end, delta } = clicks.resolve(props.at ?? '+1', clickCounts - 1)
-  clicks.register(id, { max: end, delta })
+  const clickInfo = clicks.calculateSince(props.at ?? '+1', clickCounts - 1)
+  clicks.register(id, clickInfo)
 
   watch(
     () => clicks.current,
     () => {
       // Calculate the step and rangeStr based on the current click count
-      const clickCount = clicks.current - start
+      const clickCount = clicks.current - clickInfo.start
       let step = steps.length - 1
       let currentClickSum = 0
       let rangeStr = 'all'

package/builtin/SlidevVideo.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { and } from '@vueuse/math'
 import { useSlideContext } from '../context'
+import { resolvedClickMap } from '../modules/v-click'
 import { useNav } from '../composables/useNav'
 
 const props = defineProps<{
@@ -17,12 +18,7 @@ const props = defineProps<{
 const printPoster = computed(() => props.printPoster ?? props.poster)
 const printTimestamp = computed(() => props.printTimestamp ?? props.timestamp ?? 0)
 
-const {
-  $slidev,
-  $clicksContext,
-  $renderContext,
-  $route,
-} = useSlideContext()
+const { $slidev, $renderContext, $route } = useSlideContext()
 const { isPrintMode } = useNav()
 
 const noPlay = computed(() => isPrintMode.value || !['slide', 'presenter'].includes($renderContext.value))
@@ -38,7 +34,7 @@ onMounted(() => {
   video.value!.currentTime = timestamp
 
   const matchRoute = computed(() => !!$route && $route.no === $slidev?.nav.currentSlideNo)
-  const matchClick = computed(() => !!video.value && ($clicksContext.map.get(video.value)?.isShown?.value ?? true))
+  const matchClick = computed(() => !!video.value && (resolvedClickMap.get(video.value)?.isShown?.value ?? true))
   const matchRouteAndClick = and(matchRoute, matchClick)
 
   watch(matchRouteAndClick, () => {

package/builtin/VClicks.ts

@@ -7,7 +7,7 @@
 import { toArray } from '@antfu/utils'
 import type { VNode, VNodeArrayChildren } from 'vue'
 import { Comment, createVNode, defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
-import { normalizeAtProp } from '../logic/utils'
+import { normalizeAtValue } from '../composables/useClicks'
 import VClickGap from './VClickGap.vue'
 
 const listTags = ['ul', 'ol']
@@ -37,7 +37,12 @@ export default defineComponent({
   },
   render() {
     const every = +this.every
-    const [isRelative, at] = normalizeAtProp(this.at)
+    const at = normalizeAtValue(this.at)
+    const isRelative = typeof at === 'string'
+    if (typeof at !== 'string' && typeof at !== 'number') {
+      console.warn('[slidev] Invalid at prop for v-clicks component:', at)
+      return
+    }
 
     const click = resolveDirective('click')!
 

package/composables/useClicks.ts

@@ -1,67 +1,115 @@
 import { clamp, sum } from '@antfu/utils'
-import type { ClicksContext, SlideRoute } from '@slidev/types'
+import type { ClicksContext, NormalizedAtValue, RawAtValue, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
-import { ref, shallowReactive } from 'vue'
-import { normalizeAtProp } from '../logic/utils'
+import { computed, ref, shallowReactive } from 'vue'
 import { routeForceRefresh } from '../logic/route'
 
+export function normalizeAtValue(at: RawAtValue): NormalizedAtValue {
+  if (at === false || at === 'false')
+    return null
+  if (at == null || at === true || at === 'true')
+    return '+1'
+  if (Array.isArray(at))
+    return [+at[0], +at[1]]
+  if (typeof at === 'string' && '+-'.includes(at[0]))
+    return at
+  return +at
+}
+
 export function createClicksContextBase(
   current: Ref<number>,
   clicksStart = 0,
   clicksTotalOverrides?: number,
 ): ClicksContext {
-  const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
-  const map: ClicksContext['map'] = shallowReactive(new Map())
-
-  return {
+  const context: ClicksContext = {
     get current() {
       // Here we haven't know clicksTotal yet.
-      return clamp(+current.value, clicksStart, this.total)
+      return clamp(+current.value, clicksStart, context.total)
     },
     set current(value) {
-      current.value = clamp(+value, clicksStart, this.total)
+      current.value = clamp(+value, clicksStart, context.total)
     },
     clicksStart,
-    relativeOffsets,
-    map,
+    relativeOffsets: new Map(),
+    maxMap: shallowReactive(new Map()),
     onMounted() { },
-    resolve(at, size = 1) {
-      const [isRelative, value] = normalizeAtProp(at)
-      if (isRelative) {
-        const offset = this.currentOffset
-        return {
-          start: offset + value,
-          end: offset + value + size - 1,
-          delta: value + size - 1,
-        }
+    calculateSince(at, size = 1) {
+      let start: number, max: number, delta: number
+      if (typeof at === 'string') {
+        const offset = context.currentOffset
+        const value = +at
+        start = offset + value
+        max = offset + value + size - 1
+        delta = value + size - 1
       }
       else {
-        return {
-          start: value,
-          end: value + size - 1,
-          delta: 0,
-        }
+        start = at
+        max = at + size - 1
+        delta = 0
+      }
+      return {
+        start,
+        end: +Number.POSITIVE_INFINITY,
+        max,
+        delta,
+        isCurrent: computed(() => context.current === start),
+        isActive: computed(() => context.current >= start),
       }
     },
-    register(el, resolved) {
-      relativeOffsets.set(el, resolved.delta)
-      map.set(el, resolved)
+    calculateRange([a, b]) {
+      let start: number, end: number, delta: number
+      if (typeof a === 'string') {
+        const offset = context.currentOffset
+        start = offset + +a
+        delta = +a
+      }
+      else {
+        start = a
+        delta = 0
+      }
+      if (typeof b === 'string') {
+        end = start + +b
+        delta += +b
+      }
+      else {
+        end = b
+      }
+      return {
+        start,
+        end,
+        max: end,
+        delta,
+        isCurrent: computed(() => context.current === start),
+        isActive: computed(() => start <= context.current && context.current < end),
+      }
+    },
+    calculate(at) {
+      if (at == null)
+        return null
+      if (Array.isArray(at))
+        return context.calculateRange(at)
+      return context.calculateSince(at)
+    },
+    register(el, { delta, max }) {
+      context.relativeOffsets.set(el, delta)
+      context.maxMap.set(el, max)
     },
     unregister(el) {
-      relativeOffsets.delete(el)
-      map.delete(el)
+      context.relativeOffsets.delete(el)
+      context.maxMap.delete(el)
     },
     get currentOffset() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return sum(...relativeOffsets.values())
+      return sum(...context.relativeOffsets.values())
     },
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return clicksTotalOverrides ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
+      return clicksTotalOverrides ?? Math.max(0, ...context.maxMap.values())
     },
   }
+  return context
 }
 
 export function createFixedClicks(

package/composables/useDragElements.ts

@@ -52,7 +52,9 @@ export function useDragElementsUpdater(no: number) {
         return
       frontmatter.dragPos[id] = posStr
       newPatch = {
-        frontmatter,
+        frontmatter: {
+          dragPos: frontmatter.dragPos,
+        },
       }
     }
     else {
@@ -267,8 +269,10 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
 
   watchStopHandles.push(
     onClickOutside(container, (ev) => {
-      if ((ev.target as HTMLElement | null)?.dataset?.dragId !== id)
-        state.stopDragging()
+      const container = document.querySelector('#drag-control-container')
+      if (container && ev.target && container.contains(ev.target as HTMLElement))
+        return
+      state.stopDragging()
     }),
     watch(useWindowFocus(), (focused) => {
       if (!focused)

package/composables/useNav.ts

@@ -60,6 +60,11 @@ export interface SlidevContextNav {
   goFirst: () => Promise<void>
   /** Go to the last slide */
   goLast: () => Promise<void>
+
+  /** Enter presenter mode */
+  enterPresenter: () => void
+  /** Exit presenter mode */
+  exitPresenter: () => void
 }
 
 export interface SlidevContextNavState {
@@ -194,6 +199,19 @@ export function useNavBase(
     }
   }
 
+  function enterPresenter() {
+    router?.push({
+      path: getSlidePath(currentSlideNo.value, true),
+      query: { ...router.currentRoute.value.query },
+    })
+  }
+  function exitPresenter() {
+    router?.push({
+      path: getSlidePath(currentSlideNo.value, false),
+      query: { ...router.currentRoute.value.query },
+    })
+  }
+
   return {
     slides,
     total,
@@ -222,6 +240,8 @@ export function useNavBase(
     goFirst,
     nextSlide,
     prevSlide,
+    enterPresenter,
+    exitPresenter,
   }
 }
 

package/constants.ts

@@ -14,7 +14,6 @@ export const injectionRenderContext = '$$slidev-render-context' as unknown as In
 export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
 export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionKey<ComputedRef<number>>
-export const injectionClickVisibility = '$$slidev-click-visibility' as unknown as InjectionKey<ComputedRef<true | 'before' | 'after'>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
@@ -77,4 +76,5 @@ export const HEADMATTER_FIELDS = [
   'drawings',
   'htmlAttrs',
   'mdc',
+  'contextMenu',
 ]

package/env.ts

@@ -4,6 +4,8 @@ import configs from '#slidev/configs'
 
 export { configs }
 
+export const mode = __DEV__ ? 'dev' : 'build'
+
 export const slideAspect = ref(configs.aspectRatio ?? (16 / 9))
 export const slideWidth = ref(configs.canvasWidth ?? 980)
 

package/internals/CodeRunner.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { debounce, toArray } from '@antfu/utils'
 import { useVModel } from '@vueuse/core'
-import type { CodeRunnerOutput } from '@slidev/types'
-import { computed, ref, shallowRef, watch } from 'vue'
+import type { CodeRunnerOutput, RawAtValue } from '@slidev/types'
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch, watchSyncEffect } from 'vue'
 import { useSlideContext } from '../context'
 import setupCodeRunners from '../setup/code-runners'
 import { useNav } from '../composables/useNav'
+import { makeId } from '../logic/utils'
+import { normalizeAtValue } from '../composables/useClicks'
 import IconButton from './IconButton.vue'
 import DomElement from './DomElement.vue'
 
@@ -14,6 +16,7 @@ const props = defineProps<{
   lang: string
   autorun: boolean | 'once'
   height?: string
+  showOutputAt?: RawAtValue
   highlightOutput: boolean
   runnerOptions?: Record<string, unknown>
 }>()
@@ -24,7 +27,7 @@ const { isPrintMode } = useNav()
 
 const code = useVModel(props, 'modelValue', emit)
 
-const { $renderContext } = useSlideContext()
+const { $renderContext, $clicksContext } = useSlideContext()
 const disabled = computed(() => !['slide', 'presenter'].includes($renderContext.value))
 
 const autorun = isPrintMode.value ? 'once' : props.autorun
@@ -33,6 +36,25 @@ const outputs = shallowRef<CodeRunnerOutput[]>()
 const runCount = ref(0)
 const highlightFn = ref<(code: string, lang: string) => string>()
 
+const hidden = ref(props.showOutputAt)
+if (props.showOutputAt) {
+  const id = makeId()
+  onMounted(() => {
+    const at = normalizeAtValue(props.showOutputAt)
+    const info = $clicksContext.calculate(at)
+    if (info) {
+      $clicksContext.register(id, info)
+      watchSyncEffect(() => {
+        hidden.value = !info.isActive.value
+      })
+    }
+    else {
+      hidden.value = false
+    }
+  })
+  onUnmounted(() => $clicksContext.unregister(id))
+}
+
 const triggerRun = debounce(200, async () => {
   if (disabled.value)
     return
@@ -59,6 +81,7 @@ else if (autorun)
 
 <template>
   <div
+    v-show="!hidden"
     class="relative flex flex-col rounded-b border-t border-main"
     :style="{ height: props.height }"
     data-waitfor=".slidev-runner-output"

package/internals/ContextMenu.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { onClickOutside, useElementBounding, useEventListener, useWindowFocus } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { closeContextMenu, currentContextMenu } from '../logic/contextMenu'
+import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import { windowSize } from '../state'
+import { configs } from '../env'
+
+const container = ref<HTMLElement>()
+
+onClickOutside(container, closeContextMenu)
+useEventListener(document, 'mousedown', (ev) => {
+  if (ev.buttons & 2)
+    closeContextMenu()
+}, {
+  passive: true,
+  capture: true,
+})
+
+const isExplicitEnabled = computed(() => configs.contextMenu != null)
+
+const windowFocus = useWindowFocus()
+watch(windowFocus, (hasFocus) => {
+  if (!hasFocus)
+    closeContextMenu()
+})
+
+const firstSlide = useDynamicSlideInfo(1)
+function disableContextMenu() {
+  const info = firstSlide.info.value
+  if (!info)
+    return
+  firstSlide.update({
+    frontmatter: {
+      contextMenu: false,
+    },
+  })
+}
+
+const { width, height } = useElementBounding(container)
+const left = computed(() => {
+  const x = currentContextMenu.value?.x
+  if (!x)
+    return 0
+  if (x + width.value > windowSize.width.value)
+    return windowSize.width.value - width.value
+  return x
+})
+const top = computed(() => {
+  const y = currentContextMenu.value?.y
+  if (!y)
+    return 0
+  if (y + height.value > windowSize.height.value)
+    return windowSize.height.value - height.value
+  return y
+})
+</script>
+
+<template>
+  <div
+    v-if="currentContextMenu"
+    ref="container"
+    :style="`left:${left}px;top:${top}px`"
+    class="fixed z-100 w-60 flex flex-wrap justify-items-start p-1 animate-fade-in animate-duration-100 backdrop-blur bg-main bg-opacity-75! border border-main rounded-md shadow overflow-hidden select-none"
+    @contextmenu.prevent=""
+    @click="closeContextMenu"
+  >
+    <template v-for="item, index of currentContextMenu.items.value" :key="index">
+      <div v-if="item === 'separator'" :key="index" class="w-full my1 border-t border-main" />
+      <div
+        v-else-if="item.small"
+        class="p-2 w-[40px] h-[40px] inline-block text-center cursor-pointer rounded"
+        :class="item.disabled ? `op40` : `hover:bg-active`"
+        :title="(item.label as string)"
+        @click="item.action"
+      >
+        <component :is="item.icon" />
+      </div>
+      <div
+        v-else
+        class="w-full grid grid-cols-[35px_1fr] p-2 pl-0 cursor-pointer rounded"
+        :class="item.disabled ? `op40` : `hover:bg-active`"
+        @click="item.action"
+      >
+        <div class="mx-auto">
+          <component :is="item.icon" />
+        </div>
+        <div v-if="typeof item.label === 'string'">
+          {{ item.label }}
+        </div>
+        <component :is="item.label" v-else />
+      </div>
+    </template>
+    <template v-if="!isExplicitEnabled">
+      <div class="w-full my1 border-t border-main" />
+      <div class="w-full text-xs p2">
+        <div class="text-main text-opacity-50!">
+          Hold <kbd class="border px1 py0.5 border-main rounded text-primary">Shift</kbd> and right click to open the native context menu
+          <button
+            v-if="__DEV__"
+            class="underline op50 hover:op100 mt1 block"
+            @click="disableContextMenu()"
+          >
+            Disable custom context menu
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/internals/Controls.vue

@@ -5,6 +5,7 @@ import { configs } from '../env'
 import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
+import ContextMenu from './ContextMenu.vue'
 
 const WebCamera = shallowRef<any>()
 const RecordingDialog = shallowRef<any>()
@@ -20,4 +21,5 @@ if (__SLIDEV_FEATURE_RECORD__) {
   <WebCamera v-if="WebCamera" />
   <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />
   <InfoDialog v-if="configs.info" v-model="showInfoDialog" />
+  <ContextMenu />
 </template>

package/internals/DragControl.vue

@@ -355,6 +355,7 @@ watchEffect(() => {
 <template>
   <div
     v-if="Number.isFinite(x0)"
+    id="drag-control-container"
     :data-drag-id="id"
     :style="{
       position: 'absolute',

package/internals/NavControls.vue

@@ -5,7 +5,6 @@ import { downloadPDF } from '../utils'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { configs } from '../env'
 import { useNav } from '../composables/useNav'
-import { getSlidePath } from '../logic/slides'
 import { useDrawings } from '../composables/useDrawings'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
@@ -21,7 +20,6 @@ const props = defineProps({
 })
 
 const {
-  currentRoute,
   currentSlideNo,
   hasNext,
   hasPrev,
@@ -31,6 +29,8 @@ const {
   next,
   prev,
   total,
+  enterPresenter,
+  exitPresenter,
 } = useNav()
 const {
   brush,
@@ -40,11 +40,6 @@ const {
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
-const presenterPassword = computed(() => currentRoute.value.query.password)
-const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
-const presenterLink = computed(() => `${getSlidePath(currentSlideNo.value, true)}${query.value}`)
-const nonPresenterLink = computed(() => `${getSlidePath(currentSlideNo.value, false)}${query.value}`)
-
 const root = ref<HTMLDivElement>()
 function onMouseLeave() {
   if (root.value && activeElement.value && root.value.contains(activeElement.value))
@@ -124,12 +119,12 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
 
       <template v-if="!isEmbedded">
-        <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
+        <IconButton v-if="isPresenter" title="Play Mode" @click="exitPresenter">
           <carbon:presentation-file />
-        </RouterLink>
-        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
+        </IconButton>
+        <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" title="Presenter Mode" @click="enterPresenter">
           <carbon:user-speaker />
-        </RouterLink>
+        </IconButton>
 
         <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"