From 8e43c03a1fc5138254aefb45de846324bfb9003d Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Fri, 12 Apr 2024 01:03:14 +0800
Subject: [PATCH] feat: context menu (#1475)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 docs/.vitepress/config.ts                     |   4 +
 docs/custom/config-context-menu.md            |  33 +++++
 docs/custom/index.md                          |   2 +
 .../client/composables/useDragElements.ts     |   4 +-
 packages/client/composables/useNav.ts         |  20 ++++
 packages/client/constants.ts                  |   1 +
 packages/client/env.ts                        |   2 +
 packages/client/internals/ContextMenu.vue     | 110 +++++++++++++++++
 packages/client/internals/Controls.vue        |   2 +
 packages/client/internals/NavControls.vue     |  17 +--
 packages/client/logic/contextMenu.ts          |  34 ++++++
 packages/client/pages/play.vue                |   6 +-
 packages/client/pages/presenter.vue           |   4 +
 packages/client/setup/context-menu.ts         | 113 ++++++++++++++++++
 packages/parser/src/config.ts                 |   1 +
 packages/slidev/node/utils.ts                 |  46 ++++---
 packages/slidev/node/virtual/setups.ts        |   2 +-
 packages/slidev/node/vite/loaders.ts          |   8 +-
 packages/types/client.d.ts                    |   7 ++
 packages/types/src/config.ts                  |   6 +
 packages/types/src/context-menu.ts            |  19 +++
 packages/types/src/index.ts                   |   1 +
 packages/types/src/setups.ts                  |  47 +++-----
 packages/types/src/types.ts                   |   6 +-
 test/utils.test.ts                            |  22 +++-
 25 files changed, 442 insertions(+), 75 deletions(-)
 create mode 100644 docs/custom/config-context-menu.md
 create mode 100644 packages/client/internals/ContextMenu.vue
 create mode 100644 packages/client/logic/contextMenu.ts
 create mode 100644 packages/client/setup/context-menu.ts
 create mode 100644 packages/types/src/context-menu.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 0712cfd2b5..81dc564d11 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -156,6 +156,10 @@ const Customizations: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildr
     text: 'Configure Code Runners',
     link: '/custom/config-code-runners',
   },
+  {
+    text: 'Configure Context Menu',
+    link: '/custom/config-context-menu',
+  },
   {
     text: 'Vue Global Context',
     link: '/custom/vue-context',
diff --git a/docs/custom/config-context-menu.md b/docs/custom/config-context-menu.md
new file mode 100644
index 0000000000..12e6e1b152
--- /dev/null
+++ b/docs/custom/config-context-menu.md
@@ -0,0 +1,33 @@
+# Configure Context Menu
+
+<Environment type="client" />
+
+Customize the context menu items in Slidev.
+
+Create `./setup/context-menu.ts` with the following content:
+
+```ts
+import { defineContextMenuSetup } from '@slidev/types'
+import { computed } from 'vue'
+import Icon3DCursor from '~icons/carbon/3d-cursor'
+
+export default defineContextMenuSetup((items) => {
+  const { isPresenter } = useNav()
+  return computed(() => [
+    ...items.value,
+    {
+      small: false,
+      icon: Icon3DCursor, // Used as `title` if `small` is `true`
+      label: 'Custom Menu Item', // or a Vue component
+      action() {
+        alert('Custom Menu Item Clicked!')
+      },
+      disabled: isPresenter.value,
+    },
+  ])
+})
+```
+
+This will append a new menu item to the context menu.
+
+To disable context menu globally, set `contextMenu` to `false` in the frontmatter. `contextMenu` can also be set to `dev` or `build` to only enable the context menu in development or build mode.
diff --git a/docs/custom/index.md b/docs/custom/index.md
index 7cf2af9329..54e8725b8e 100644
--- a/docs/custom/index.md
+++ b/docs/custom/index.md
@@ -55,6 +55,8 @@ remoteAssets: false
 selectable: true
 # enable slide recording, can be boolean, 'dev' or 'build'
 record: dev
+# enable Slidev's context menu, can be boolean, 'dev' or 'build'
+contextMenu: true
 
 # force color schema for the slides, can be 'auto', 'light', or 'dark'
 colorSchema: auto
diff --git a/packages/client/composables/useDragElements.ts b/packages/client/composables/useDragElements.ts
index 884c2a0bb6..242925d972 100644
--- a/packages/client/composables/useDragElements.ts
+++ b/packages/client/composables/useDragElements.ts
@@ -52,7 +52,9 @@ export function useDragElementsUpdater(no: number) {
         return
       frontmatter.dragPos[id] = posStr
       newPatch = {
-        dragPos: frontmatter.dragPos,
+        frontmatter: {
+          dragPos: frontmatter.dragPos,
+        },
       }
     }
     else {
diff --git a/packages/client/composables/useNav.ts b/packages/client/composables/useNav.ts
index 8653bb6b20..0460069c65 100644
--- a/packages/client/composables/useNav.ts
+++ b/packages/client/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,
   }
 }
 
diff --git a/packages/client/constants.ts b/packages/client/constants.ts
index faee5a2466..8f5caa8c90 100644
--- a/packages/client/constants.ts
+++ b/packages/client/constants.ts
@@ -76,4 +76,5 @@ export const HEADMATTER_FIELDS = [
   'drawings',
   'htmlAttrs',
   'mdc',
+  'contextMenu',
 ]
diff --git a/packages/client/env.ts b/packages/client/env.ts
index a8cee09168..fc9de7674b 100644
--- a/packages/client/env.ts
+++ b/packages/client/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)
 
diff --git a/packages/client/internals/ContextMenu.vue b/packages/client/internals/ContextMenu.vue
new file mode 100644
index 0000000000..2057a17d0c
--- /dev/null
+++ b/packages/client/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>
diff --git a/packages/client/internals/Controls.vue b/packages/client/internals/Controls.vue
index dc8d83c28b..8c0e716ece 100644
--- a/packages/client/internals/Controls.vue
+++ b/packages/client/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>
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
index 242a401483..d531eb6651 100644
--- a/packages/client/internals/NavControls.vue
+++ b/packages/client/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__"
diff --git a/packages/client/logic/contextMenu.ts b/packages/client/logic/contextMenu.ts
new file mode 100644
index 0000000000..0ac8daf3ca
--- /dev/null
+++ b/packages/client/logic/contextMenu.ts
@@ -0,0 +1,34 @@
+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'
+
+export const currentContextMenu = shallowRef<null | {
+  x: number
+  y: number
+  items: ComputedRef<ContextMenuItem[]>
+}>(null)
+
+export function openContextMenu(x: number, y: number) {
+  currentContextMenu.value = {
+    x,
+    y,
+    items: setupContextMenu(),
+  }
+}
+
+export function closeContextMenu() {
+  currentContextMenu.value = null
+}
+
+export function onContextMenu(ev: MouseEvent) {
+  if (configs.contextMenu !== true && configs.contextMenu !== undefined && configs.contextMenu !== mode)
+    return
+  if (ev.shiftKey || ev.defaultPrevented)
+    return
+
+  openContextMenu(ev.pageX, ev.pageY)
+  ev.preventDefault()
+  ev.stopPropagation()
+}
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index 87c6b2c12e..8a0eddfc57 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -9,6 +9,7 @@ import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 
@@ -22,9 +23,9 @@ function onClick(e: MouseEvent) {
   if (showEditor.value)
     return
 
-  if ((e.target as HTMLElement)?.id === 'slide-container') {
+  if (e.button === 0 && (e.target as HTMLElement)?.id === 'slide-container') {
     // click right to next, left to previous
-    if ((e.screenX / window.innerWidth) > 0.6)
+    if ((e.pageX / window.innerWidth) > 0.6)
       next()
     else
       prev()
@@ -57,6 +58,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :scale="slideScale"
       :is-main="true"
       @pointerdown="onClick"
+      @contextmenu="onContextMenu"
     >
       <template #default>
         <SlidesShow render-context="slide" />
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index 9ab56b5ebd..c94fc39990 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -7,6 +7,7 @@ import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout,
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
+import { onContextMenu } from '../logic/contextMenu'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { createFixedClicks } from '../composables/useClicks'
@@ -21,6 +22,7 @@ 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'
 
@@ -112,6 +114,7 @@ onMounted(() => {
         <SlideContainer
           key="main"
           class="h-full w-full p-2 lg:p-4 flex-auto"
+          @contextmenu="onContextMenu"
         >
           <template #default>
             <SlidesShow render-context="presenter" />
@@ -209,6 +212,7 @@ onMounted(() => {
   </div>
   <Goto />
   <QuickOverview v-model="showOverview" />
+  <ContextMenu />
 </template>
 
 <style scoped>
diff --git a/packages/client/setup/context-menu.ts b/packages/client/setup/context-menu.ts
new file mode 100644
index 0000000000..48a63e36aa
--- /dev/null
+++ b/packages/client/setup/context-menu.ts
@@ -0,0 +1,113 @@
+/// <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 setups from '#slidev/setups/context-menu'
+
+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 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 IconUserSpeaker from '~icons/carbon/user-speaker'
+import IconMaximize from '~icons/carbon/maximize'
+import IconMinimize from '~icons/carbon/minimize'
+
+let items: ComputedRef<ContextMenuItem[]> | undefined
+
+export default () => {
+  if (items)
+    return items
+
+  const {
+    next,
+    nextSlide,
+    prev,
+    prevSlide,
+    hasNext,
+    hasPrev,
+    currentPage,
+    total,
+    isPresenter,
+    enterPresenter,
+    exitPresenter,
+    isEmbedded,
+    isPresenterAvailable,
+  } = useNav()
+  const { drawingEnabled } = useDrawings()
+  const {
+    isFullscreen,
+    toggle: toggleFullscreen,
+  } = fullscreen
+
+  return items = setups.reduce(
+    (items, fn) => fn(items),
+    computed(() => [
+      {
+        small: true,
+        icon: IconArrowLeft,
+        label: 'Previous Click',
+        action: prev,
+        disabled: !hasPrev.value,
+      },
+      {
+        small: true,
+        icon: IconArrowRight,
+        label: 'Next Click',
+        action: next,
+        disabled: !hasNext.value,
+      },
+      {
+        small: true,
+        icon: IconArrowUp,
+        label: 'Previous Slide',
+        action: prevSlide,
+        disabled: currentPage.value <= 1,
+      },
+      {
+        small: true,
+        icon: IconArrowDown,
+        label: 'Next Slide',
+        action: nextSlide,
+        disabled: currentPage.value >= total.value,
+      },
+      'separator',
+      {
+        icon: IconTextNotationToggle,
+        label: showEditor.value ? 'Hide editor' : 'Show editor',
+        action: () => (showEditor.value = !showEditor.value),
+      },
+      {
+        icon: IconPen,
+        label: drawingEnabled.value ? 'Hide drawing toolbar' : 'Show drawing toolbar',
+        action: () => (drawingEnabled.value = !drawingEnabled.value),
+      },
+      {
+        icon: IconApps,
+        label: 'Show slide overview',
+        action: toggleOverview,
+      },
+      isPresenter.value && {
+        icon: IconPresentationFile,
+        label: 'Exit Presenter Mode',
+        action: exitPresenter,
+      },
+      __SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable.value && {
+        icon: IconUserSpeaker,
+        label: 'Enter Presenter Mode',
+        action: enterPresenter,
+      },
+      !isEmbedded.value && {
+        icon: isFullscreen.value ? IconMinimize : IconMaximize,
+        label: isFullscreen.value ? 'Close fullscreen' : 'Enter fullscreen',
+        action: toggleFullscreen,
+      },
+    ].filter(Boolean) as ContextMenuItem[]),
+  )
+}
diff --git a/packages/parser/src/config.ts b/packages/parser/src/config.ts
index 871ed9df05..df2e644730 100644
--- a/packages/parser/src/config.ts
+++ b/packages/parser/src/config.ts
@@ -36,6 +36,7 @@ export function getDefaultConfig(): SlidevConfig {
     htmlAttrs: {},
     transition: undefined,
     editor: true,
+    contextMenu: undefined,
   }
 }
 
diff --git a/packages/slidev/node/utils.ts b/packages/slidev/node/utils.ts
index 3b2247545c..612396a5e3 100644
--- a/packages/slidev/node/utils.ts
+++ b/packages/slidev/node/utils.ts
@@ -23,30 +23,40 @@ export function generateGoogleFontsUrl(options: ResolvedFontOptions) {
   return `https://fonts.googleapis.com/css2?${fonts}&display=swap`
 }
 
-export function updateDragPos(slide: SlideInfo, dragPos: Record<string, string>) {
+/**
+ * Update frontmatter patch and preserve the comments
+ */
+export function updateFrontmatterPatch(slide: SlideInfo, frontmatter: Record<string, any>) {
   const source = slide.source
-  slide.frontmatter.dragPos = source.frontmatter.dragPos = dragPos
   let doc = source.frontmatterDoc
   if (!doc) {
     source.frontmatterStyle = 'frontmatter'
     source.frontmatterDoc = doc = new YAML.Document({})
   }
-  const valueNode = doc.createNode(dragPos)
-  let found = false
-  YAML.visit(doc.contents, {
-    Pair(_key, node, path) {
-      if (path.length === 1 && YAML.isScalar(node.key) && node.key.value === 'dragPos') {
-        node.value = valueNode
-        found = true
-        return YAML.visit.BREAK
+  for (const [key, value] of Object.entries(frontmatter)) {
+    slide.frontmatter[key] = source.frontmatter[key] = value
+    if (value == null) {
+      doc.delete(key)
+    }
+    else {
+      const valueNode = doc.createNode(value)
+      let found = false
+      YAML.visit(doc.contents, {
+        Pair(_key, node, path) {
+          if (path.length === 1 && YAML.isScalar(node.key) && node.key.value === key) {
+            node.value = valueNode
+            found = true
+            return YAML.visit.BREAK
+          }
+        },
+      })
+      if (!found) {
+        if (!YAML.isMap(doc.contents))
+          doc.contents = doc.createNode({})
+        doc.contents.add(
+          doc.createPair(key, valueNode),
+        )
       }
-    },
-  })
-  if (!found) {
-    if (!YAML.isMap(doc.contents))
-      doc.contents = doc.createNode({})
-    doc.contents.add(
-      doc.createPair('dragPos', valueNode),
-    )
+    }
   }
 }
diff --git a/packages/slidev/node/virtual/setups.ts b/packages/slidev/node/virtual/setups.ts
index d66a14fd87..d64cc8bf48 100644
--- a/packages/slidev/node/virtual/setups.ts
+++ b/packages/slidev/node/virtual/setups.ts
@@ -28,6 +28,6 @@ function createSetupTemplate(name: string): VirtualModuleTemplate {
 }
 
 // setups
-const setupModules = ['shiki', 'code-runners', 'monaco', 'mermaid', 'main', 'root', 'shortcuts']
+const setupModules = ['shiki', 'code-runners', 'monaco', 'mermaid', 'main', 'root', 'shortcuts', 'context-menu']
 
 export const templateSetups = setupModules.map(createSetupTemplate)
diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts
index 43fb110d1f..2e81fe58ad 100644
--- a/packages/slidev/node/vite/loaders.ts
+++ b/packages/slidev/node/vite/loaders.ts
@@ -13,7 +13,7 @@ import * as parser from '@slidev/parser/fs'
 import equal from 'fast-deep-equal'
 
 import type { LoadResult } from 'rollup'
-import { stringifyMarkdownTokens, updateDragPos } from '../utils'
+import { stringifyMarkdownTokens, updateFrontmatterPatch } from '../utils'
 import { toAtFS } from '../resolver'
 import { templates } from '../virtual'
 import type { VirtualModuleTempalteContext } from '../virtual/types'
@@ -167,8 +167,8 @@ export function createSlidesLoader(
               slide.content = slide.source.content = body.content
             if (body.note)
               slide.note = slide.source.note = body.note
-            if (body.dragPos)
-              updateDragPos(slide, body.dragPos)
+            if (body.frontmatter)
+              updateFrontmatterPatch(slide, body.frontmatter)
 
             parser.prettifySlide(slide.source)
             const fileContent = await parser.save(data.markdownFiles[slide.source.filepath])
@@ -180,7 +180,7 @@ export function createSlidesLoader(
               server?.moduleGraph.invalidateModule(
                 server.moduleGraph.getModuleById(`${VIRTUAL_SLIDE_PREFIX}${no}.md`)!,
               )
-              if (body.dragPos) {
+              if (body.frontmatter) {
                 server?.moduleGraph.invalidateModule(
                   server.moduleGraph.getModuleById(`${VIRTUAL_SLIDE_PREFIX}${no}.frontmatter`)!,
                 )
diff --git a/packages/types/client.d.ts b/packages/types/client.d.ts
index 39a864d563..508a3d4f29 100644
--- a/packages/types/client.d.ts
+++ b/packages/types/client.d.ts
@@ -97,6 +97,13 @@ declare module '#slidev/setups/shortcuts' {
   export default setups
 }
 
+declare module '#slidev/setups/context-menu' {
+  import type { ContextMenuSetup } from '@slidev/types'
+
+  const setups: ContextMenuSetup[]
+  export default setups
+}
+
 declare module '#slidev/styles' {
   // side-effects only
 }
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index fb0eb7bf51..d9b4d9fead 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -233,6 +233,12 @@ export interface SlidevConfig {
    * @default true
    */
   editor: boolean
+  /**
+   * Enable context menu
+   *
+   * @default true
+   */
+  contextMenu: boolean | 'dev' | 'build' | undefined
 }
 
 export interface FontOptions {
diff --git a/packages/types/src/context-menu.ts b/packages/types/src/context-menu.ts
new file mode 100644
index 0000000000..0c21f2d13c
--- /dev/null
+++ b/packages/types/src/context-menu.ts
@@ -0,0 +1,19 @@
+import type { Component } from 'vue'
+
+type ContextMenuOption = {
+  action: () => void
+  disabled?: boolean
+} & (
+  | {
+    small?: false
+    icon?: Component
+    label: string | Component
+  }
+  | {
+    small: true
+    icon: Component
+    label: string
+  }
+  )
+
+export type ContextMenuItem = ContextMenuOption | 'separator'
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 4ed6365055..801917c1d6 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -5,6 +5,7 @@ export * from './toc'
 export * from './cli'
 export * from './hmr'
 export * from './code-runner'
+export * from './context-menu'
 export * from './options'
 export * from './vite'
 export * from './transform'
diff --git a/packages/types/src/setups.ts b/packages/types/src/setups.ts
index ec9b32e4cd..84f1fd4020 100644
--- a/packages/types/src/setups.ts
+++ b/packages/types/src/setups.ts
@@ -1,6 +1,6 @@
 import type { Awaitable } from '@antfu/utils'
 import type * as monaco from 'monaco-editor'
-import type { App, Ref } from 'vue'
+import type { App, ComputedRef, Ref } from 'vue'
 import type { Router } from 'vue-router'
 import type mermaid from 'mermaid'
 import type { KatexOptions } from 'katex'
@@ -8,6 +8,7 @@ import type { BuiltinLanguage, BuiltinTheme, CodeOptionsMeta, CodeOptionsThemes,
 import type { VitePluginConfig as UnoCssConfig } from 'unocss/vite'
 import type { SlidevPreparserExtension } from './types'
 import type { CodeRunnerProviders } from './code-runner'
+import type { ContextMenuItem } from './context-menu'
 
 export interface AppContext {
   app: App
@@ -75,39 +76,19 @@ export type RootSetup = () => Awaitable<void>
 export type MermaidSetup = () => Partial<MermaidOptions> | void
 export type ShortcutsSetup = (nav: NavOperations, defaultShortcuts: ShortcutOptions[]) => Array<ShortcutOptions>
 export type CodeRunnersSetup = (runners: CodeRunnerProviders) => Awaitable<CodeRunnerProviders | void>
+export type ContextMenuSetup = (items: ComputedRef<ContextMenuItem[]>) => ComputedRef<ContextMenuItem[]>
 
-export function defineShikiSetup(fn: ShikiSetup) {
+function defineSetup<Fn>(fn: Fn) {
   return fn
 }
 
-export function defineUnoSetup(fn: UnoSetup) {
-  return fn
-}
-
-export function defineMonacoSetup(fn: MonacoSetup) {
-  return fn
-}
-
-export function defineAppSetup(fn: AppSetup) {
-  return fn
-}
-
-export function defineMermaidSetup(fn: MermaidSetup) {
-  return fn
-}
-
-export function defineKatexSetup(fn: KatexSetup) {
-  return fn
-}
-
-export function defineShortcutsSetup(fn: ShortcutsSetup) {
-  return fn
-}
-
-export function definePreparserSetup(fn: PreparserSetup) {
-  return fn
-}
-
-export function defineCodeRunnersSetup(fn: CodeRunnersSetup) {
-  return fn
-}
+export const defineShikiSetup = defineSetup<ShikiSetup>
+export const defineUnoSetup = defineSetup<UnoSetup>
+export const defineMonacoSetup = defineSetup<MonacoSetup>
+export const defineAppSetup = defineSetup<AppSetup>
+export const defineMermaidSetup = defineSetup<MermaidSetup>
+export const defineKatexSetup = defineSetup<KatexSetup>
+export const defineShortcutsSetup = defineSetup<ShortcutsSetup>
+export const definePreparserSetup = defineSetup<PreparserSetup>
+export const defineCodeRunnersSetup = defineSetup<CodeRunnersSetup>
+export const defineContextMenuSetup = defineSetup<ContextMenuSetup>
diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
index 5258654aaf..4b2eaa05c4 100644
--- a/packages/types/src/types.ts
+++ b/packages/types/src/types.ts
@@ -47,7 +47,11 @@ export interface SlideInfo extends SlideInfoBase {
  */
 export type SlidePatch = Partial<Pick<SlideInfoBase, 'content' | 'note'>> & {
   skipHmr?: boolean
-  dragPos?: Record<string, string>
+  /**
+   * The frontmatter patch (only the changed fields)
+   * `null` to remove a field
+   */
+  frontmatter?: Record<string, any>
 }
 
 /**
diff --git a/test/utils.test.ts b/test/utils.test.ts
index 5802ca5839..be8aed8f6b 100644
--- a/test/utils.test.ts
+++ b/test/utils.test.ts
@@ -6,7 +6,7 @@ import YAML from 'yaml'
 import type { ResolvedFontOptions, SlideInfo } from '@slidev/types'
 import { getRoots } from '../packages/slidev/node/resolver'
 import { parseAspectRatio, parseRangeString } from '../packages/parser/src'
-import { generateGoogleFontsUrl, stringifyMarkdownTokens, updateDragPos } from '../packages/slidev/node/utils'
+import { generateGoogleFontsUrl, stringifyMarkdownTokens, updateFrontmatterPatch } from '../packages/slidev/node/utils'
 
 describe('utils', () => {
   it('page-range', () => {
@@ -70,7 +70,7 @@ describe('utils', () => {
     expectRelative(userWorkspaceRoot).toMatchInlineSnapshot(`".."`)
   })
 
-  it('update dragPos', async () => {
+  it('update frontmatter patch', async () => {
     const dragPos = {
       foo: '1,2,3,4',
     }
@@ -90,7 +90,7 @@ describe('utils', () => {
     }
 
     const slide1 = createFakeSource(``)
-    updateDragPos(slide1, dragPos)
+    updateFrontmatterPatch(slide1, { dragPos })
     expectFrontmatter(slide1).toMatchInlineSnapshot(`
       "dragPos:
         foo: 1,2,3,4
@@ -103,7 +103,7 @@ describe('utils', () => {
       dragPos:
         bar: 5,6,7,8
     `)
-    updateDragPos(slide2, dragPos)
+    updateFrontmatterPatch(slide2, { dragPos })
     expectFrontmatter(slide2).toMatchInlineSnapshot(`
       "# comment
       title: Hello # another comment
@@ -111,5 +111,19 @@ describe('utils', () => {
         foo: 1,2,3,4
       "
     `)
+
+    // remove a field
+    const slide3 = createFakeSource(`
+      # comment
+      title: Hello  # another comment
+      dragPos:
+        bar: 5,6,7,8
+    `)
+    updateFrontmatterPatch(slide3, { title: null })
+    expectFrontmatter(slide3).toMatchInlineSnapshot(`
+      "dragPos:
+        bar: 5,6,7,8
+      "
+    `)
   })
 })