diff --git a/src/editor/core/event/handlers/keydown.ts b/src/editor/core/event/handlers/keydown.ts index 5e6ca6f..c5568da 100644 --- a/src/editor/core/event/handlers/keydown.ts +++ b/src/editor/core/event/handlers/keydown.ts @@ -2,6 +2,7 @@ import { ZERO } from '../../../dataset/constant/Common' import { ElementType } from '../../../dataset/enum/Element' import { KeyMap } from '../../../dataset/enum/KeyMap' import { IElement, IElementPosition } from '../../../interface/Element' +import { isMod } from '../../../utils/hotkey' import { CanvasEvent } from '../CanvasEvent' export function keydown(evt: KeyboardEvent, host: CanvasEvent) { @@ -230,24 +231,24 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) { isComputeRowList: false }) } - } else if (evt.ctrlKey && evt.key === KeyMap.Z) { + } else if (isMod(evt) && evt.key === KeyMap.Z) { if (isReadonly) return historyManager.undo() evt.preventDefault() - } else if (evt.ctrlKey && evt.key === KeyMap.Y) { + } else if (isMod(evt) && evt.key === KeyMap.Y) { if (isReadonly) return historyManager.redo() evt.preventDefault() - } else if (evt.ctrlKey && evt.key === KeyMap.C) { + } else if (isMod(evt) && evt.key === KeyMap.C) { host.copy() evt.preventDefault() - } else if (evt.ctrlKey && evt.key === KeyMap.X) { + } else if (isMod(evt) && evt.key === KeyMap.X) { host.cut() evt.preventDefault() - } else if (evt.ctrlKey && evt.key === KeyMap.A) { + } else if (isMod(evt) && evt.key === KeyMap.A) { host.selectAll() evt.preventDefault() - } else if (evt.ctrlKey && evt.key === KeyMap.S) { + } else if (isMod(evt) && evt.key === KeyMap.S) { if (isReadonly) return const listener = draw.getListener() if (listener.saved) { diff --git a/src/editor/core/shortcut/Shortcut.ts b/src/editor/core/shortcut/Shortcut.ts index f09c77c..7d675cc 100644 --- a/src/editor/core/shortcut/Shortcut.ts +++ b/src/editor/core/shortcut/Shortcut.ts @@ -2,6 +2,7 @@ import { IRegisterShortcut } from '../../interface/shortcut/Shortcut' import { richtextKeys } from './keys/richtextKeys' import { Command } from '../command/Command' import { Draw } from '../draw/Draw' +import { isMod } from '../../utils/hotkey' export class Shortcut { @@ -61,7 +62,11 @@ export class Shortcut { for (let s = 0; s < shortCutList.length; s++) { const shortCut = shortCutList[s] if ( - evt.ctrlKey === !!shortCut.ctrl && + ( + shortCut.mod + ? isMod(evt) === !!shortCut.mod + : evt.ctrlKey === !!shortCut.ctrl && evt.metaKey === !!shortCut.meta + ) && evt.shiftKey === !!shortCut.shift && evt.altKey === !!shortCut.alt && evt.key === shortCut.key diff --git a/src/editor/core/shortcut/keys/richtextKeys.ts b/src/editor/core/shortcut/keys/richtextKeys.ts index 0a2ac53..3fb960f 100644 --- a/src/editor/core/shortcut/keys/richtextKeys.ts +++ b/src/editor/core/shortcut/keys/richtextKeys.ts @@ -1,6 +1,7 @@ import { Command } from '../../..' import { KeyMap } from '../../../dataset/enum/KeyMap' import { IRegisterShortcut } from '../../../interface/shortcut/Shortcut' +import { isApple } from '../../../utils/ua' export const richtextKeys: IRegisterShortcut[] = [ { @@ -13,50 +14,50 @@ export const richtextKeys: IRegisterShortcut[] = [ }, { key: KeyMap.LEFT_BRACKET, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeSizeAdd() } }, { key: KeyMap.RIGHT_BRACKET, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeSizeMinus() } }, { key: KeyMap.B, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeBold() } }, { key: KeyMap.I, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeItalic() } }, { key: KeyMap.U, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeUnderline() } }, { - key: KeyMap.RIGHT_ANGLE_BRACKET, - ctrl: true, + key: isApple ? KeyMap.COMMA : KeyMap.RIGHT_ANGLE_BRACKET, + mod: true, shift: true, callback: (command: Command) => { command.executeSuperscript() } }, { - key: KeyMap.LEFT_ANGLE_BRACKET, - ctrl: true, + key: isApple ? KeyMap.PERIOD : KeyMap.LEFT_ANGLE_BRACKET, + mod: true, shift: true, callback: (command: Command) => { command.executeSubscript() @@ -64,28 +65,28 @@ export const richtextKeys: IRegisterShortcut[] = [ }, { key: KeyMap.L, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeLeft() } }, { key: KeyMap.E, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeCenter() } }, { key: KeyMap.R, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeRight() } }, { key: KeyMap.J, - ctrl: true, + mod: true, callback: (command: Command) => { command.executeAlignment() } diff --git a/src/editor/dataset/enum/KeyMap.ts b/src/editor/dataset/enum/KeyMap.ts index 67598f9..dfc58ea 100644 --- a/src/editor/dataset/enum/KeyMap.ts +++ b/src/editor/dataset/enum/KeyMap.ts @@ -8,6 +8,7 @@ export enum KeyMap { Down = 'ArrowDown', ESC = 'Escape', TAB = 'Tab', + META = 'Meta', LEFT_BRACKET = '[', RIGHT_BRACKET = ']', COMMA = ',', diff --git a/src/editor/interface/shortcut/Shortcut.ts b/src/editor/interface/shortcut/Shortcut.ts index b4fe814..add9b09 100644 --- a/src/editor/interface/shortcut/Shortcut.ts +++ b/src/editor/interface/shortcut/Shortcut.ts @@ -4,8 +4,10 @@ import { KeyMap } from '../../dataset/enum/KeyMap' export interface IRegisterShortcut { key: KeyMap; ctrl?: boolean; + meta?: boolean; + mod?: boolean; // windows:ctrl || mac:command shift?: boolean; - alt?: boolean; + alt?: boolean; // windows:alt || mac:option isGlobal?: boolean; callback: (command: Command) => any; } \ No newline at end of file diff --git a/src/editor/utils/hotkey.ts b/src/editor/utils/hotkey.ts new file mode 100644 index 0000000..79ad217 --- /dev/null +++ b/src/editor/utils/hotkey.ts @@ -0,0 +1,5 @@ +import { isApple } from './ua' + +export function isMod(evt: KeyboardEvent) { + return isApple ? evt.metaKey : evt.ctrlKey +} \ No newline at end of file diff --git a/src/editor/utils/ua.ts b/src/editor/utils/ua.ts new file mode 100644 index 0000000..cce6f74 --- /dev/null +++ b/src/editor/utils/ua.ts @@ -0,0 +1 @@ +export const isApple = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent) \ No newline at end of file