refactor: update right menu and shortcut keys

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`],
-    emitArgs: [`addFormat`, `${modPrefix}-B`],
+    kbd: [ctrlSign, `B`],
+    emitArgs: [`addFormat`, `${ctrlKey}-B`],
   },
   {
     label: `斜体`,
-    kbd: [kbdIcon, `I`],
-    emitArgs: [`addFormat`, `${modPrefix}-I`],
+    kbd: [ctrlSign, `I`],
+    emitArgs: [`addFormat`, `${ctrlKey}-I`],
   },
   {
     label: `删除线`,
-    kbd: [kbdIcon, `D`],
-    emitArgs: [`addFormat`, `${modPrefix}-D`],
+    kbd: [ctrlSign, `D`],
+    emitArgs: [`addFormat`, `${ctrlKey}-D`],
   },
   {
     label: `超链接`,
-    kbd: [kbdIcon, `K`],
-    emitArgs: [`addFormat`, `${modPrefix}-K`],
+    kbd: [ctrlSign, `K`],
+    emitArgs: [`addFormat`, `${ctrlKey}-K`],
   },
   {
     label: `行内代码`,
-    kbd: [kbdIcon, `E`],
-    emitArgs: [`addFormat`, `${modPrefix}-E`],
+    kbd: [ctrlSign, `E`],
+    emitArgs: [`addFormat`, `${ctrlKey}-E`],
   },
   {
     label: `格式化`,
-    kbd: [kbdIcon, `F`],
+    kbd: [altSign, shiftSign, `F`],
     emitArgs: [`formatContent`],
   },
 ]
@@ -124,9 +119,9 @@ function copy() {
           /class="base"( style="display: inline")*/g,
           `class="base" style="display: inline"`,
         )
-      // 公众号不支持 position， 转换为等价的 translateY
+        // 公众号不支持 position， 转换为等价的 translateY
         .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
-      // 适配主题中的颜色变量
+        // 适配主题中的颜色变量
         .replaceAll(`var(--el-text-color-regular)`, `#3f3f3f`)
       clipboardDiv.focus()
       window.getSelection().removeAllRanges()
@@ -182,21 +177,16 @@ function updateOpen(isOpen) {
   <div class="header-container">
     <div class="dropdowns flex flex-auto">
       <FileDropdown
-        :is-open="isClickTrigger && isOpenList[0]"
-        :click-trigger="clickTrigger"
-        :open-dropdown="openDropdown(0)"
-        :update-open="updateOpen"
+        :is-open="isClickTrigger && isOpenList[0]" :click-trigger="clickTrigger"
+        :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="{
-            'bg-gray-2': isOpenList[1],
-            'dark:bg-stone-9': isOpenList[1],
-          }"
-          @click="clickTrigger()"
-          @mouseenter="openDropdown(1)()"
+          class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9" :class="{
+            'bg-gray-2': isClickTrigger && isOpenList[1],
+            'dark:bg-stone-9': isClickTrigger && isOpenList[1],
+          }" @click="clickTrigger()" @mouseenter="openDropdown(1)()"
         >
           格式
         </DropdownMenuTrigger>
@@ -220,23 +210,16 @@ function updateOpen(isOpen) {
         </DropdownMenuContent>
       </DropdownMenu>
       <EditDropdown
-        :is-open="isClickTrigger && isOpenList[2]"
-        :click-trigger="clickTrigger"
-        :open-dropdown="openDropdown(2)"
-        :update-open="updateOpen"
+        :is-open="isClickTrigger && isOpenList[2]" :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(2)" :update-open="updateOpen"
       />
       <StyleDropdown
-
-        :is-open="isClickTrigger && isOpenList[3]"
-        :click-trigger="clickTrigger"
-        :open-dropdown="openDropdown(3)"
-        :update-open="updateOpen"
+        :is-open="isClickTrigger && isOpenList[3]" :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(3)" :update-open="updateOpen"
       />
       <HelpDropdown
-        :is-open="isClickTrigger && isOpenList[4]"
-        :click-trigger="clickTrigger"
-        :open-dropdown="openDropdown(4)"
-        :update-open="updateOpen"
+        :is-open="isClickTrigger && isOpenList[4]" :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(4)" :update-open="updateOpen"
       />
     </div>
     <el-button plain type="primary" @click="copy">

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>