From 8319018d8eba18ebb2923314842da80eeebba6f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
Date: Sun, 30 Jun 2024 19:47:39 +0800
Subject: [PATCH] feat(editor): support shortcut key

Resolved: #1875
---
 .../src/composables/use-editor-md-toolbar.ts   |  6 ++----
 .../editor-md/src/composables/use-editor-md.ts | 18 ++++++++++++++++++
 .../devui/editor-md/src/editor-md-types.ts     |  7 ++++---
 .../devui/editor-md/src/editor-md.tsx          |  6 ++++--
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts
index 3c8c6bba69..e07cf16f42 100644
--- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts
+++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts
@@ -1,8 +1,6 @@
 import { inject } from 'vue';
 import { EditorMdInjectionKey, IEditorMdInjection } from '../editor-md-types';
 
-export function useToolbar() {
-  const { toolbars, toolbarConfig, customToolbars } = inject(EditorMdInjectionKey) as IEditorMdInjection;
-
-  return { toolbars, toolbarConfig, customToolbars };
+export function useToolbar(): IEditorMdInjection {
+  return inject(EditorMdInjectionKey) as IEditorMdInjection;
 }
diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
index 65d0c0a00e..5fb37fd4cf 100644
--- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
+++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
@@ -316,6 +316,24 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
     setTimeout(() => {
       ctx.emit('contentChange', editorIns.getValue());
     }, 100);
+
+    containerRef.value.addEventListener('keydown', (e: KeyboardEvent) => {
+      let keyCombination = '';
+      if (e.ctrlKey) {
+        keyCombination += 'Ctrl-';
+      }
+      if (e.altKey) {
+        keyCombination += 'Alt-';
+      }
+      if (e.shiftKey) {
+        keyCombination += 'Shift-';
+      }
+      keyCombination += e.key.toUpperCase();
+      if (shortKeys[keyCombination] && typeof shortKeys[keyCombination] === 'function') {
+        e.preventDefault();
+        shortKeys[keyCombination]();
+      }
+    });
   };
 
   const onPaste = (e: ClipboardEvent) => {
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md-types.ts b/packages/devui-vue/devui/editor-md/src/editor-md-types.ts
index 9598190711..ea05d3bc90 100644
--- a/packages/devui-vue/devui/editor-md/src/editor-md-types.ts
+++ b/packages/devui-vue/devui/editor-md/src/editor-md-types.ts
@@ -1,5 +1,6 @@
 import type { PropType, ExtractPropTypes, InjectionKey, Ref } from 'vue';
 import { DEFAULT_TOOLBAR_CONFIG, IToolbarItemConfig } from './toolbar-config';
+import { RenderRule } from 'markdown-it/lib/renderer';
 
 export interface MDThemeToolbarConfig {
   icons: { [key: string]: string };
@@ -11,7 +12,7 @@ export interface MDThemeConfig {
 
 export interface MdPlugin {
   plugin: any;
-  opts?: Object;
+  opts?: Record<string, unknown>;
 }
 
 export interface ICustomXssRule {
@@ -21,7 +22,7 @@ export interface ICustomXssRule {
 
 export interface ICustomRenderRule {
   key: string;
-  value: Function;
+  value: RenderRule;
 }
 
 export type Mode = 'editonly' | 'readonly' | 'normal';
@@ -112,7 +113,7 @@ export const editorMdProps = {
   },
   toolbarConfig: {
     type: Array as PropType<ToolbarConfigProp>,
-    default: () => DEFAULT_TOOLBAR_CONFIG,
+    default: (): (string[] | string)[] => DEFAULT_TOOLBAR_CONFIG,
   },
   fullscreenZIndex: {
     type: Number,
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.tsx b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
index 1d2b2cff30..b62c6e1472 100644
--- a/packages/devui-vue/devui/editor-md/src/editor-md.tsx
+++ b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
@@ -61,7 +61,9 @@ export default defineComponent({
       onPreviewMouseover,
     } = useEditorMd(props, ctx);
 
-    const { isDarkMode } = useEditorMdTheme(() => {});
+    const { isDarkMode } = useEditorMdTheme(() => {
+      return;
+    });
 
     provide(EditorMdInjectionKey, {
       showFullscreen,
@@ -97,7 +99,7 @@ export default defineComponent({
                 origin={cursorRef.value || undefined}
                 align="start"
                 position={['bottom-start']}
-                onClick={withModifiers(() => {}, ['stop'])}>
+                onClick={withModifiers(() => {return ;}, ['stop'])}>
                 {ctx.slots?.hintTemplate?.()}
               </FlexibleOverlay>
               {Boolean(maxlength?.value) && (