feat(editor): 新增删除、复制、粘贴、剪切快捷键操作

package-lock.json

@@ -14360,6 +14360,21 @@
 				"verror": "1.10.0"
 			}
 		},
+		"keycode": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+			"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+		},
+		"keycon": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/keycon/-/keycon-1.1.2.tgz",
+			"integrity": "sha512-yCoUAfwqmQUWrtOFuZhicxasF/4ae+M0aH8yV1wEKKZCZql8v6jWhlVF9dT5i1TfuHSmgt/GNuCaWIHT8wk6eQ==",
+			"requires": {
+				"@daybrush/utils": "^1.0.0",
+				"@scena/event-emitter": "^1.0.2",
+				"keycode": "^2.2.0"
+			}
+		},
 		"kind-of": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",

packages/editor/package.json

@@ -45,6 +45,7 @@
     "color": "^3.1.3",
     "element-plus": "^2.1.7",
     "events": "^3.3.0",
+    "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",

packages/editor/src/layouts/workspace/Workspace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace">
+  <div class="m-editor-workspace" tabindex="1" ref="workspace">
     <magic-stage
       :key="page?.id"
       :runtime-url="runtimeUrl"
@@ -18,9 +18,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, PropType, ref } from 'vue';
+import KeyController from 'keycon';
 
-import type { MPage } from '@tmagic/schema';
+import type { MNode, MPage } from '@tmagic/schema';
 import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
@@ -55,8 +56,52 @@ export default defineComponent({
 
   setup() {
     const services = inject<Services>('services');
+    const workspace = ref<HTMLDivElement>();
+    const node = computed(() => services?.editorService.get<MNode>('node'));
+    let keycon: KeyController;
+
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
+
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
+
+    onMounted(() => {
+      workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+
+      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
+
+      keycon = new KeyController(workspace.value);
+
+      keycon
+        .keyup('delete', () => {
+          node.value && services?.editorService.remove(node.value);
+        })
+        .keyup(['ctrl', 'c'], () => {
+          node.value && services?.editorService.copy(node.value);
+        })
+        .keyup(['ctrl', 'v'], () => {
+          node.value && services?.editorService.paste();
+        })
+        .keyup(['ctrl', 'x'], () => {
+          if (node.value && services) {
+            services.editorService.copy(node.value);
+            services.editorService.remove(node.value);
+          }
+        });
+    });
+
+    onUnmounted(() => {
+      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
+      keycon.destroy();
+    });
 
     return {
+      workspace,
+
       page: computed(() => services?.editorService.get<MPage>('page')),
     };
   },