Merge pull request #122 from Hufe921/feature/macos

feat:support mac os shortcut remark

index.html

@@ -12,10 +12,10 @@
   <div id="app">
     <div class="menu" editor-component="menu">
       <div class="menu-item">
-        <div class="menu-item__undo" title="撤销(Ctrl+Z)">
+        <div class="menu-item__undo">
           <i></i>
         </div>
-        <div class="menu-item__redo" title="重做(Ctrl+Y)">
+        <div class="menu-item__redo">
           <i></i>
         </div>
         <div class="menu-item__painter" title="格式刷(双击可连续使用)">
@@ -51,28 +51,28 @@
             </ul>
           </div>
         </div>
-        <div class="menu-item__size-add" title="增大字号(Ctrl+[)">
+        <div class="menu-item__size-add">
           <i></i>
         </div>
-        <div class="menu-item__size-minus" title="减小字号(Ctrl+])">
+        <div class="menu-item__size-minus">
           <i></i>
         </div>
-        <div class="menu-item__bold" title="加粗(Ctrl+B)">
+        <div class="menu-item__bold">
           <i></i>
         </div>
-        <div class="menu-item__italic" title="斜体(Ctrl+I)">
+        <div class="menu-item__italic">
           <i></i>
         </div>
-        <div class="menu-item__underline" title="下划线(Ctrl+U)">
+        <div class="menu-item__underline">
           <i></i>
         </div>
         <div class="menu-item__strikeout" title="删除线(Ctrl+Shift+X)">
           <i></i>
         </div>
-        <div class="menu-item__superscript" title="上标(Ctrl+Shift+.)">
+        <div class="menu-item__superscript">
           <i></i>
         </div>
-        <div class="menu-item__subscript" title="下标(Ctrl+Shift+,)">
+        <div class="menu-item__subscript">
           <i></i>
         </div>
         <div class="menu-item__color" title="字体颜色">
@@ -88,16 +88,16 @@
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">
-        <div class="menu-item__left" title="左对齐(Ctrl+L)">
+        <div class="menu-item__left">
           <i></i>
         </div>
-        <div class="menu-item__center" title="居中对齐(Ctrl+E)">
+        <div class="menu-item__center">
           <i></i>
         </div>
-        <div class="menu-item__right" title="右对齐(Ctrl+R)">
+        <div class="menu-item__right">
           <i></i>
         </div>
-        <div class="menu-item__alignment" title="两端对齐(Ctrl+J)">
+        <div class="menu-item__alignment">
           <i></i>
         </div>
         <div class="menu-item__row-margin">
@@ -206,7 +206,7 @@
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">
-        <div class="menu-item__search" data-menu="search" title="搜索与替换(Ctrl+F)">
+        <div class="menu-item__search" data-menu="search">
           <i></i>
         </div>
         <div class="menu-item__search__collapse" data-menu="search">
@@ -226,7 +226,7 @@
             <button>替换</button>
           </div>
         </div>
-        <div class="menu-item__print" data-menu="print" title="打印(Ctrl+P)">
+        <div class="menu-item__print" data-menu="print">
           <i></i>
         </div>
       </div>

src/editor/core/contextmenu/menus/globalMenus.ts

@@ -1,10 +1,11 @@
 import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
+import { isApple } from '../../../utils/ua'
 import { Command } from '../../command/Command'
 
 export const globalMenus: IRegisterContextMenu[] = [
   {
     i18nPath: 'contextmenu.global.cut',
-    shortCut: 'Ctrl + X',
+    shortCut: `${isApple ? '⌘' : 'Ctrl'} + X`,
     when: (payload) => {
       return !payload.isReadonly
     },
@@ -14,7 +15,7 @@ export const globalMenus: IRegisterContextMenu[] = [
   },
   {
     i18nPath: 'contextmenu.global.copy',
-    shortCut: 'Ctrl + C',
+    shortCut: `${isApple ? '⌘' : 'Ctrl'} + C`,
     when: (payload) => {
       return payload.editorHasSelection
     },
@@ -24,7 +25,7 @@ export const globalMenus: IRegisterContextMenu[] = [
   },
   {
     i18nPath: 'contextmenu.global.paste',
-    shortCut: 'Ctrl + V',
+    shortCut: `${isApple ? '⌘' : 'Ctrl'} + V`,
     when: (payload) => {
       return !payload.isReadonly && payload.editorTextFocus
     },
@@ -34,7 +35,7 @@ export const globalMenus: IRegisterContextMenu[] = [
   },
   {
     i18nPath: 'contextmenu.global.selectAll',
-    shortCut: 'Ctrl + A',
+    shortCut: `${isApple ? '⌘' : 'Ctrl'} + A`,
     when: (payload) => {
       return payload.editorTextFocus
     },

src/main.ts

@@ -7,6 +7,7 @@ import { formatPrismToken } from './utils/prism'
 import { Signature } from './components/signature/Signature'
 
 window.onload = function () {
+  const isApple = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent)
 
   // 1. 初始化编辑器
   const container = document.querySelector<HTMLDivElement>('.editor')!
@@ -17,12 +18,14 @@ window.onload = function () {
 
   // 2. | 撤销 | 重做 | 格式刷 | 清除格式 |
   const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!
+  undoDom.title = `撤销(${isApple ? '⌘' : 'Ctrl'}+Z)`
   undoDom.onclick = function () {
     console.log('undo')
     instance.command.executeUndo()
   }
 
   const redoDom = document.querySelector<HTMLDivElement>('.menu-item__redo')!
+  redoDom.title = `重做(${isApple ? '⌘' : 'Ctrl'}+Y)`
   redoDom.onclick = function () {
     console.log('redo')
     instance.command.executeRedo()
@@ -60,29 +63,36 @@ window.onload = function () {
     instance.command.executeFont(li.dataset.family!)
   }
 
-  document.querySelector<HTMLDivElement>('.menu-item__size-add')!.onclick = function () {
+  const sizeAddDom = document.querySelector<HTMLDivElement>('.menu-item__size-add')!
+  sizeAddDom.title = `增大字号(${isApple ? '⌘' : 'Ctrl'}+[)`
+  sizeAddDom.onclick = function () {
     console.log('size-add')
     instance.command.executeSizeAdd()
   }
 
-  document.querySelector<HTMLDivElement>('.menu-item__size-minus')!.onclick = function () {
+  const sizeMinusDom = document.querySelector<HTMLDivElement>('.menu-item__size-minus')!
+  sizeMinusDom.title = `减小字号(${isApple ? '⌘' : 'Ctrl'}+])`
+  sizeMinusDom.onclick = function () {
     console.log('size-minus')
     instance.command.executeSizeMinus()
   }
 
   const boldDom = document.querySelector<HTMLDivElement>('.menu-item__bold')!
+  boldDom.title = `加粗(${isApple ? '⌘' : 'Ctrl'}+B)`
   boldDom.onclick = function () {
     console.log('bold')
     instance.command.executeBold()
   }
 
   const italicDom = document.querySelector<HTMLDivElement>('.menu-item__italic')!
+  italicDom.title = `斜体(${isApple ? '⌘' : 'Ctrl'}+I)`
   italicDom.onclick = function () {
     console.log('italic')
     instance.command.executeItalic()
   }
 
   const underlineDom = document.querySelector<HTMLDivElement>('.menu-item__underline')!
+  underlineDom.title = `下划线(${isApple ? '⌘' : 'Ctrl'}+U)`
   underlineDom.onclick = function () {
     console.log('underline')
     instance.command.executeUnderline()
@@ -95,12 +105,14 @@ window.onload = function () {
   }
 
   const superscriptDom = document.querySelector<HTMLDivElement>('.menu-item__superscript')!
+  superscriptDom.title = `上标(${isApple ? '⌘' : 'Ctrl'}+Shift+,)`
   superscriptDom.onclick = function () {
     console.log('superscript')
     instance.command.executeSuperscript()
   }
 
   const subscriptDom = document.querySelector<HTMLDivElement>('.menu-item__subscript')!
+  subscriptDom.title = `下标(${isApple ? '⌘' : 'Ctrl'}+Shift+.)`
   subscriptDom.onclick = function () {
     console.log('subscript')
     instance.command.executeSubscript()
@@ -129,24 +141,28 @@ window.onload = function () {
   }
 
   const leftDom = document.querySelector<HTMLDivElement>('.menu-item__left')!
+  leftDom.title = `左对齐(${isApple ? '⌘' : 'Ctrl'}+L)`
   leftDom.onclick = function () {
     console.log('left')
     instance.command.executeLeft()
   }
 
   const centerDom = document.querySelector<HTMLDivElement>('.menu-item__center')!
+  centerDom.title = `居中对齐(${isApple ? '⌘' : 'Ctrl'}+E)`
   centerDom.onclick = function () {
     console.log('center')
     instance.command.executeCenter()
   }
 
   const rightDom = document.querySelector<HTMLDivElement>('.menu-item__right')!
+  rightDom.title = `右对齐(${isApple ? '⌘' : 'Ctrl'}+R)`
   rightDom.onclick = function () {
     console.log('right')
     instance.command.executeRight()
   }
 
   const alignmentDom = document.querySelector<HTMLDivElement>('.menu-item__alignment')!
+  alignmentDom.title = `两端对齐(${isApple ? '⌘' : 'Ctrl'}+J)`
   alignmentDom.onclick = function () {
     console.log('alignment')
     instance.command.executeAlignment()
@@ -697,6 +713,7 @@ window.onload = function () {
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!
   const replaceInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__replace input')!
   const searchDom = document.querySelector<HTMLDivElement>('.menu-item__search')!
+  searchDom.title = `搜索与替换(${isApple ? '⌘' : 'Ctrl'}+F)`
   const searchResultDom = searchCollapseDom.querySelector<HTMLLabelElement>('.search-result')!
   function setSearchResult() {
     const result = instance.command.getSearchNavigateInfo()
@@ -754,7 +771,9 @@ window.onload = function () {
     setSearchResult()
   }
 
-  document.querySelector<HTMLDivElement>('.menu-item__print')!.onclick = function () {
+  const printDom = document.querySelector<HTMLDivElement>('.menu-item__print')!
+  printDom.title = `打印(${isApple ? '⌘' : 'Ctrl'}+P)`
+  printDom.onclick = function () {
     console.log('print')
     instance.command.executePrint()
   }
@@ -1062,7 +1081,7 @@ window.onload = function () {
   instance.register.shortcutList([
     {
       key: KeyMap.P,
-      ctrl: true,
+      mod: true,
       isGlobal: true,
       callback: (command: Command) => {
         command.executePrint()
@@ -1070,7 +1089,7 @@ window.onload = function () {
     },
     {
       key: KeyMap.F,
-      ctrl: true,
+      mod: true,
       isGlobal: true,
       callback: (command: Command) => {
         const text = command.getRangeText()