refactor: update right menu and shortcut keys (#353)

README.md

@@ -33,7 +33,7 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 - [x] 支持自定义 CSS 样式
 - [x] 支持 Markdown 所有基础语法
 - [x] 支持浅色、暗黑两种主题模式
-- [x] 支持 <kbd>Ctrl</kbd> + <kbd>F</kbd> 快速格式化文档
+- [x] 支持 <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> 快速格式化文档
 - [x] 支持色盘取色，快速替换文章整体色调
 - [x] 支持多图上传，可自定义配置图床
 - [x] 支持自定义上传逻辑

src/assets/example/theme-css.txt

@@ -1,5 +1,5 @@
 /*
-  按Ctrl/Command+F可格式化
+  按 Alt/Option + Shift + F 可格式化
 */
 /* 一级标题样式 */
 h1 {

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -20,6 +20,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
+import { altSign, ctrlKey, ctrlSign, shiftSign } from '@/config'
 import { mergeCss, solveWeChatImage } from '@/utils'
 import { useStore } from '@/stores'
 
@@ -29,42 +30,36 @@ const emit = defineEmits([
   `startCopy`,
   `endCopy`,
 ])
-const defaultKeyMap = CodeMirror.keyMap.default
-const modPrefix
-  = defaultKeyMap === CodeMirror.keyMap.macDefault ? `Cmd` : `Ctrl`
-
-const kbdIcon
-  = defaultKeyMap === CodeMirror.keyMap.macDefault ? `⌘` : `Ctrl`
 
 const formatItems = [
   {
     label: `加粗`,
-    kbd: [kbdIcon, `B`],
+    kbd: [ctrlSign, `B`],
-    emitArgs: [`addFormat`, `${modPrefix}-B`],
+    emitArgs: [`addFormat`, `${ctrlKey}-B`],
   },
   {
     label: `斜体`,
-    kbd: [kbdIcon, `I`],
+    kbd: [ctrlSign, `I`],
-    emitArgs: [`addFormat`, `${modPrefix}-I`],
+    emitArgs: [`addFormat`, `${ctrlKey}-I`],
   },
   {
     label: `删除线`,
-    kbd: [kbdIcon, `D`],
+    kbd: [ctrlSign, `D`],
-    emitArgs: [`addFormat`, `${modPrefix}-D`],
+    emitArgs: [`addFormat`, `${ctrlKey}-D`],
   },
   {
     label: `超链接`,
-    kbd: [kbdIcon, `K`],
+    kbd: [ctrlSign, `K`],
-    emitArgs: [`addFormat`, `${modPrefix}-K`],
+    emitArgs: [`addFormat`, `${ctrlKey}-K`],
   },
   {
     label: `行内代码`,
-    kbd: [kbdIcon, `E`],
+    kbd: [ctrlSign, `E`],
-    emitArgs: [`addFormat`, `${modPrefix}-E`],
+    emitArgs: [`addFormat`, `${ctrlKey}-E`],
   },
   {
     label: `格式化`,
-    kbd: [kbdIcon, `F`],
+    kbd: [altSign, shiftSign, `F`],
     emitArgs: [`formatContent`],
   },
 ]
@@ -182,21 +177,16 @@ function updateOpen(isOpen) {
   <div class="header-container">
     <div class="dropdowns flex flex-auto">
       <FileDropdown
-        :is-open="isClickTrigger && isOpenList[0]"
+        :is-open="isClickTrigger && isOpenList[0]" :click-trigger="clickTrigger"
-        :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(0)" :update-open="updateOpen"
-        :open-dropdown="openDropdown(0)"
-        :update-open="updateOpen"
       />
 
       <DropdownMenu :open="isClickTrigger && isOpenList[1]" @update:open="updateOpen">
         <DropdownMenuTrigger
-          class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9"
+          class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9" :class="{
-          :class="{
+            'bg-gray-2': isClickTrigger && isOpenList[1],
-            'bg-gray-2': isOpenList[1],
+            'dark:bg-stone-9': isClickTrigger && isOpenList[1],
-            'dark:bg-stone-9': isOpenList[1],
+          }" @click="clickTrigger()" @mouseenter="openDropdown(1)()"
-          }"
-          @click="clickTrigger()"
-          @mouseenter="openDropdown(1)()"
         >
           格式
         </DropdownMenuTrigger>
@@ -220,23 +210,16 @@ function updateOpen(isOpen) {
         </DropdownMenuContent>
       </DropdownMenu>
       <EditDropdown
-        :is-open="isClickTrigger && isOpenList[2]"
+        :is-open="isClickTrigger && isOpenList[2]" :click-trigger="clickTrigger"
-        :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(2)" :update-open="updateOpen"
-        :open-dropdown="openDropdown(2)"
-        :update-open="updateOpen"
       />
       <StyleDropdown
-
+        :is-open="isClickTrigger && isOpenList[3]" :click-trigger="clickTrigger"
-        :is-open="isClickTrigger && isOpenList[3]"
+        :open-dropdown="openDropdown(3)" :update-open="updateOpen"
-        :click-trigger="clickTrigger"
-        :open-dropdown="openDropdown(3)"
-        :update-open="updateOpen"
       />
       <HelpDropdown
-        :is-open="isClickTrigger && isOpenList[4]"
+        :is-open="isClickTrigger && isOpenList[4]" :click-trigger="clickTrigger"
-        :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(4)" :update-open="updateOpen"
-        :open-dropdown="openDropdown(4)"
-        :update-open="updateOpen"
       />
     </div>
     <el-button plain type="primary" @click="copy">

src/components/CodemirrorEditor/RightClickMenu.vue

@@ -1,125 +0,0 @@
-<script setup>
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  top: {
-    type: Number,
-    default: 0,
-  },
-  left: {
-    type: Number,
-    default: 0,
-  },
-})
-
-const emit = defineEmits([`menuTick`, `closeMenu`])
-
-const menu = [
-  [
-    {
-      text: `上传图片`,
-      key: `insertPic`,
-    },
-    {
-      text: `插入表格`,
-      key: `insertTable`,
-    },
-    {
-      text: `恢复默认样式`,
-      key: `resetStyle`,
-    },
-  ],
-  [
-    {
-      text: `导入 .md 文档`,
-      key: `importMarkdown`,
-    },
-    {
-      text: `导出 .md 文档`,
-      key: `exportMarkdown`,
-    },
-    {
-      text: `导出 .html`,
-      key: `exportHtml`,
-    },
-    {
-      text: `格式化`,
-      key: `formatMarkdown`,
-    },
-  ],
-]
-
-function onMouseDown(key) {
-  emit(`menuTick`, key)
-  emit(`closeMenu`)
-}
-</script>
-
-<template>
-  <div
-    v-show="props.visible"
-    id="menu"
-    class="menu"
-    :style="{
-      left: `${props.left}px`,
-      top: `${props.top}px`,
-    }"
-  >
-    <ul v-for="(menuItem, index) in menu" :key="index" class="menu__group">
-      <li
-        v-for="{ key, text } in menuItem"
-        :key="key"
-        class="menu_item"
-        @mousedown="onMouseDown(key)"
-      >
-        {{ text }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.menu {
-  position: absolute;
-  border-radius: var(--el-border-radius-base);
-  background-color: var(--el-bg-color);
-  box-shadow: var(--el-box-shadow);
-  z-index: 9999;
-}
-
-.menu__group {
-  padding: 6px 0;
-  margin: 0;
-  border-bottom: 1px solid var(--el-border-color);
-
-  &:last-of-type {
-    border-bottom: none;
-  }
-}
-
-.menu_item {
-  list-style: none;
-  box-sizing: border-box;
-  padding: 4px 0 4px 24px;
-  margin-top: 10px;
-  min-width: 200px;
-  line-height: 20px;
-  font-size: 12px;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-
-  &:first-of-type {
-    margin-top: 0;
-  }
-
-  &:hover {
-    background: var(--el-bg-color-page);
-  }
-
-  :deep(.el-upload) {
-    width: 100%;
-  }
-}
-</style>

src/components/ui/context-menu/ContextMenu.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuRootProps>()
+const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="forwarded">
+    <slot />
+  </ContextMenuRoot>
+</template>

src/components/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ContextMenuCheckboxItem,
+  type ContextMenuCheckboxItemEmits,
+  type ContextMenuCheckboxItemProps,
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>

src/components/ui/context-menu/ContextMenuContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ContextMenuContent,
+  type ContextMenuContentEmits,
+  type ContextMenuContentProps,
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>

src/components/ui/context-menu/ContextMenuGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuGroupProps>()
+</script>
+
+<template>
+  <ContextMenuGroup v-bind="props">
+    <slot />
+  </ContextMenuGroup>
+</template>

src/components/ui/context-menu/ContextMenuItem.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ContextMenuItem,
+  type ContextMenuItemEmits,
+  type ContextMenuItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>

src/components/ui/context-menu/ContextMenuLabel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="delegatedProps"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold text-foreground',
+         inset && 'pl-8', props.class,
+      )"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>

src/components/ui/context-menu/ContextMenuPortal.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuPortalProps>()
+</script>
+
+<template>
+  <ContextMenuPortal v-bind="props">
+    <slot />
+  </ContextMenuPortal>
+</template>

src/components/ui/context-menu/ContextMenuRadioGroup.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  ContextMenuRadioGroup,
+  type ContextMenuRadioGroupEmits,
+  type ContextMenuRadioGroupProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </ContextMenuRadioGroup>
+</template>

src/components/ui/context-menu/ContextMenuRadioItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  type ContextMenuRadioItemEmits,
+  type ContextMenuRadioItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>

src/components/ui/context-menu/ContextMenuSeparator.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ContextMenuSeparator,
+  type ContextMenuSeparatorProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ContextMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+</template>

src/components/ui/context-menu/ContextMenuShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

src/components/ui/context-menu/ContextMenuSub.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  ContextMenuSub,
+  type ContextMenuSubEmits,
+  type ContextMenuSubProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuSubProps>()
+const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuSub v-bind="forwarded">
+    <slot />
+  </ContextMenuSub>
+</template>

src/components/ui/context-menu/ContextMenuSubContent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ContextMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>

src/components/ui/context-menu/ContextMenuSubTrigger.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ContextMenuSubTrigger,
+  type ContextMenuSubTriggerProps,
+  useForwardProps,
+} from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>

src/components/ui/context-menu/ContextMenuTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="forwardedProps">
+    <slot />
+  </ContextMenuTrigger>
+</template>

src/components/ui/context-menu/index.ts

@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
+export { default as ContextMenuContent } from './ContextMenuContent.vue'
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuItem } from './ContextMenuItem.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuSub } from './ContextMenuSub.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'

src/config/index.js

@@ -1,5 +1,17 @@
+import CodeMirror from 'codemirror'
+
 export * from './api'
 export * from './style'
 export * from './theme'
 
 export const prefix = `MD`
+
+const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
+
+export const ctrlKey = isMac ? `Cmd` : `Ctrl`
+export const altKey = `Alt`
+export const shiftKey = `Shift`
+
+export const ctrlSign = isMac ? `⌘` : `Ctrl`
+export const altSign = isMac ? `⌥` : `Alt`
+export const shiftSign = isMac ? `⇧` : `Shift`

src/stores/index.js

@@ -5,16 +5,12 @@ import CodeMirror from 'codemirror'
 import { useDark, useStorage, useToggle } from '@vueuse/core'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, legendOptions, themeMap, themeOptions } from '@/config'
+import { altKey, codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, legendOptions, shiftKey, themeMap, themeOptions } from '@/config'
 import WxRenderer from '@/utils/wx-renderer'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt?raw'
 import { addPrefix, css2json, customCssWithTemplate, downloadMD, exportHTML, formatCss, formatDoc, setColorWithCustomTemplate, setFontSizeWithTemplate, setTheme } from '@/utils'
 
-const defaultKeyMap = CodeMirror.keyMap.default
-const modPrefix
-  = defaultKeyMap === CodeMirror.keyMap.macDefault ? `Cmd` : `Ctrl`
-
 export const useStore = defineStore(`store`, () => {
   // 是否开启深色模式
   const isDark = useDark()
@@ -209,7 +205,7 @@ export const useStore = defineStore(`store`, () => {
         matchBrackets: true,
         autofocus: true,
         extraKeys: {
-          [`${modPrefix}-F`]: function autoFormat(editor) {
+          [`${shiftKey}-${altKey}-F`]: function autoFormat(editor) {
             const doc = formatCss(editor.getValue())
             getCurrentTab().content = doc
             editor.setValue(doc)

src/views/CodemirrorEditor.vue

@@ -9,11 +9,28 @@ import { useStore } from '@/stores'
 
 import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
 import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog.vue'
-import RightClickMenu from '@/components/CodemirrorEditor/RightClickMenu.vue'
 import UploadImgDialog from '@/components/CodemirrorEditor/UploadImgDialog.vue'
 import CssEditor from '@/components/CodemirrorEditor/CssEditor.vue'
 import RunLoading from '@/components/RunLoading.vue'
 
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu'
+
+import { altKey, altSign, ctrlKey, ctrlSign, shiftKey, shiftSign } from '@/config'
+
 import {
   checkImage,
   formatDoc,
@@ -22,10 +39,6 @@ import {
 
 import 'codemirror/mode/javascript/javascript'
 
-const defaultKeyMap = CodeMirror.keyMap.default
-const modPrefix
-  = defaultKeyMap === CodeMirror.keyMap.macDefault ? `Cmd` : `Ctrl`
-
 const store = useStore()
 const { output, editor, editorContent, isShowCssEditor } = storeToRefs(store)
 
@@ -42,9 +55,6 @@ const {
 
 const isImgLoading = ref(false)
 const timeout = ref(0)
-const mouseLeft = ref(0)
-const mouseTop = ref(0)
-const rightClickMenuVisible = ref(false)
 
 const preview = ref(null)
 
@@ -119,34 +129,6 @@ function endCopy() {
   }, 800)
 }
 
-function onMenuEvent(type) {
-  switch (type) {
-    case `insertPic`:
-      toggleShowUploadImgDialog()
-      break
-    case `insertTable`:
-      toggleShowInsertFormDialog()
-      break
-    case `resetStyle`:
-      resetStyleConfirm()
-      break
-    case `importMarkdown`:
-      importMarkdownContent()
-      break
-    case `exportMarkdown`:
-      exportEditorContent2MD()
-      break
-    case `exportHtml`:
-      exportEditorContent2HTML()
-      break
-    case `formatMarkdown`:
-      formatContent()
-      break
-    default:
-      break
-  }
-}
-
 function beforeUpload(file) {
   // validate image
   const checkResult = checkImage(file)
@@ -221,32 +203,32 @@ function initEditor() {
     styleActiveLine: true,
     autoCloseBrackets: true,
     extraKeys: {
-      [`${modPrefix}-F`]: function autoFormat(editor) {
+      [`${shiftKey}-${altKey}-F`]: function autoFormat(editor) {
         const doc = formatDoc(editor.getValue(0))
         editor.setValue(doc)
       },
-      [`${modPrefix}-B`]: function bold(editor) {
+      [`${ctrlKey}-B`]: function bold(editor) {
         const selected = editor.getSelection()
         editor.replaceSelection(`**${selected}**`)
       },
-      [`${modPrefix}-I`]: function italic(editor) {
+      [`${ctrlKey}-I`]: function italic(editor) {
         const selected = editor.getSelection()
         editor.replaceSelection(`*${selected}*`)
       },
-      [`${modPrefix}-D`]: function del(editor) {
+      [`${ctrlKey}-D`]: function del(editor) {
         const selected = editor.getSelection()
         editor.replaceSelection(`~~${selected}~~`)
       },
-      [`${modPrefix}-K`]: function italic(editor) {
+      [`${ctrlKey}-K`]: function italic(editor) {
         const selected = editor.getSelection()
         editor.replaceSelection(`[${selected}]()`)
       },
-      [`${modPrefix}-E`]: function code(editor) {
+      [`${ctrlKey}-E`]: function code(editor) {
         const selected = editor.getSelection()
         editor.replaceSelection(`\`${selected}\``)
       },
       // 预备弃用
-      [`${modPrefix}-L`]: function code(editor) {
+      [`${ctrlKey}-L`]: function code(editor) {
         const selected = editor.getSelection()
         editor.replaceSelection(`\`${selected}\``)
       },
@@ -279,33 +261,10 @@ function initEditor() {
       }
     }
   })
-
-  editor.value.on(`mousedown`, () => {
-    rightClickMenuVisible.value = false
-  })
-  editor.value.on(`blur`, () => {
-    // !影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
-    rightClickMenuVisible.value = false
-  })
-  editor.value.on(`scroll`, () => {
-    rightClickMenuVisible.value = false
-  })
 }
 
 const container = ref(null)
 
-// 右键菜单
-function openMenu(e) {
-  const menuMinWidth = 105
-  const offsetLeft = container.value.getBoundingClientRect().left
-  const offsetWidth = container.value.offsetWidth
-  const maxLeft = offsetWidth - menuMinWidth
-  const left = e.clientX - offsetLeft
-  mouseLeft.value = Math.min(maxLeft, left)
-  mouseTop.value = e.clientY + 10
-  rightClickMenuVisible.value = true
-}
-
 // 工具函数，添加格式
 function addFormat(cmd) {
   editor.value.options.extraKeys[cmd](editor.value)
@@ -440,13 +399,41 @@ onMounted(() => {
             :class="{
               'order-1': !store.isEditOnLeft,
             }"
-            @contextmenu.prevent="openMenu"
           >
+            <ContextMenu>
+              <ContextMenuTrigger>
                 <textarea
                   id="editor"
                   type="textarea"
                   placeholder="Your markdown text here."
                 />
+              </ContextMenuTrigger>
+              <ContextMenuContent class="w-64">
+                <ContextMenuItem inset @click="toggleShowUploadImgDialog()">
+                  上传图片
+                </ContextMenuItem>
+                <ContextMenuItem inset @click="toggleShowInsertFormDialog()">
+                  插入表格
+                </ContextMenuItem>
+                <ContextMenuItem inset @click="resetStyleConfirm()">
+                  恢复默认样式
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                <ContextMenuItem inset @click="importMarkdownContent()">
+                  导入 .md 文档
+                </ContextMenuItem>
+                <ContextMenuItem inset @click="exportEditorContent2MD()">
+                  导出 .md 文档
+                </ContextMenuItem>
+                <ContextMenuItem inset @click="exportEditorContent2HTML()">
+                  导出 .html
+                </ContextMenuItem>
+                <ContextMenuItem inset @click="formatContent()">
+                  格式化
+                  <ContextMenuShortcut>{{ altSign }} + {{ shiftSign }} + F</ContextMenuShortcut>
+                </ContextMenuItem>
+              </ContextMenuContent>
+            </ContextMenu>
           </el-col>
           <el-col
             id="preview"
@@ -479,14 +466,6 @@ onMounted(() => {
 
     <InsertFormDialog />
 
-    <RightClickMenu
-      :visible="rightClickMenuVisible"
-      :left="mouseLeft"
-      :top="mouseTop"
-      @menu-tick="onMenuEvent"
-      @close-menu="rightClickMenuVisible = false"
-    />
-
     <RunLoading />
   </div>
 </template>