feat(editor): support shortcut key

Resolved: #1875

Author: fu050409

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;
 }

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) => {

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,

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) && (