@tmagic/editor 1.3.0-alpha.5 → 1.3.0-alpha.6

package/dist/tmagic-editor.umd.cjs

@@ -194,7 +194,7 @@
     }
   });
 
-  const _hoisted_1$m = ["src"];
+  const _hoisted_1$n = ["src"];
   const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
@@ -218,7 +218,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$m)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$n)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -237,7 +237,7 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-fields-code-select-col" };
+  const _hoisted_1$m = { class: "m-fields-code-select-col" };
   const _hoisted_2$e = { class: "code-select-container" };
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -331,7 +331,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -355,7 +355,7 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$l = { class: "m-editor-data-source-fields" };
   const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -503,7 +503,7 @@
         }
       ];
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: filedColumns
@@ -536,7 +536,7 @@
     }
   });
 
-  const _hoisted_1$j = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_1$k = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$c = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$5 = { class: "el-input__inner" };
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
@@ -762,7 +762,7 @@
             vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$j, [
+            vue.createElementVNode("div", _hoisted_1$k, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
               vue.createElementVNode("span", _hoisted_2$c, vue.toDisplayString(item.value), 1)
             ])
@@ -801,7 +801,7 @@
     }
   });
 
-  const _hoisted_1$i = { class: "m-fields-event-select" };
+  const _hoisted_1$j = { class: "m-fields-event-select" };
   const _hoisted_2$b = {
     key: 1,
     class: "fullWidth"
@@ -968,7 +968,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -1019,7 +1019,7 @@
     }
   });
 
-  const _hoisted_1$h = { class: "m-fields-key-value" };
+  const _hoisted_1$i = { class: "m-fields-key-value" };
   const _hoisted_2$a = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -1064,7 +1064,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -1370,6 +1370,7 @@
     emits: ["change"],
     setup(__props, { emit }) {
       const target = vue.ref();
+      const isDraging = vue.ref(false);
       let getso;
       vue.onMounted(() => {
         if (!target.value)
@@ -1381,19 +1382,24 @@
           if (!target.value)
             return;
           emit("change", e.deltaX);
+        }).on("dragStart", () => {
+          isDraging.value = true;
+        }).on("dragEnd", () => {
+          isDraging.value = false;
         });
       });
       vue.onUnmounted(() => {
         getso?.unset();
+        isDraging.value = false;
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("span", {
           ref_key: "target",
           ref: target,
-          class: "m-editor-resizer"
+          class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": isDraging.value }])
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 512);
+        ], 2);
       };
     }
   });
@@ -1402,7 +1408,7 @@
     ...{
       name: "MEditorLayout"
     },
-    __name: "Layout",
+    __name: "SplitView",
     props: {
       left: {},
       right: {},
@@ -3386,7 +3392,7 @@
     return stage;
   };
 
-  const _hoisted_1$g = { class: "m-editor-empty-panel" };
+  const _hoisted_1$h = { class: "m-editor-empty-panel" };
   const _hoisted_2$9 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
@@ -3409,7 +3415,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           vue.createElementVNode("div", _hoisted_2$9, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
@@ -3426,7 +3432,7 @@
     }
   });
 
-  const _hoisted_1$f = { class: "m-editor" };
+  const _hoisted_1$g = { class: "m-editor" };
   const DEFAULT_LEFT_COLUMN_WIDTH = 310;
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
@@ -3497,7 +3503,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.renderSlot(_ctx.$slots, "header"),
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
@@ -3552,7 +3558,7 @@
     }
   });
 
-  const _hoisted_1$e = {
+  const _hoisted_1$f = {
     key: 1,
     class: "menu-item-text"
   };
@@ -3636,7 +3642,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -3891,7 +3897,7 @@
     }
   });
 
-  const _hoisted_1$d = { class: "m-editor-props-panel" };
+  const _hoisted_1$e = { class: "m-editor-props-panel" };
   const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
@@ -3941,7 +3947,7 @@
       };
       __expose({ submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -3993,7 +3999,7 @@
     }
   });
 
-  const _hoisted_1$c = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_1$d = { xmlns: "http://www.w3.org/2000/svg" };
   const _hoisted_2$7 = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
@@ -4014,12 +4020,12 @@
     __name: "AppManageIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _hoisted_3$3);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _hoisted_3$3);
       };
     }
   });
 
-  const _hoisted_1$b = {
+  const _hoisted_1$c = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4036,12 +4042,12 @@
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_4$3);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _hoisted_4$3);
       };
     }
   });
 
-  const _hoisted_1$a = {
+  const _hoisted_1$b = {
     key: 0,
     class: "m-editor-content-bottom"
   };
@@ -4145,7 +4151,7 @@
             language: _ctx.language,
             options: codeOptions.value
           }, null, 8, ["init-values", "language", "options"]),
-          _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+          _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -4201,7 +4207,7 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "code-name-wrapper" };
+  const _hoisted_1$a = { class: "code-name-wrapper" };
   const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
   const _hoisted_3$2 = { class: "code-name-wrapper" };
   const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
@@ -4327,7 +4333,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$9, [
+            vue.createElementVNode("div", _hoisted_1$a, [
               _hoisted_2$4,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 class: "code-name-input",
@@ -4369,7 +4375,7 @@
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$9 = {
     key: 0,
     class: "m-editor-code-block-editor-panel"
   };
@@ -4437,7 +4443,7 @@
               class: "code-editor-layout"
             }, {
               center: vue.withCtx(() => [
-                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
                   vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
                   codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
                     key: 0,
@@ -4462,7 +4468,7 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _hoisted_1$8 = { class: "search-wrapper" };
   const _hoisted_2$3 = ["id"];
   const _hoisted_3$1 = { class: "list-item" };
   const _hoisted_4$1 = {
@@ -4565,7 +4571,7 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$7, [
+              vue.createElementVNode("div", _hoisted_1$8, [
                 vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
@@ -4760,7 +4766,7 @@
     }
   });
 
-  const _hoisted_1$6 = { class: "search-wrapper" };
+  const _hoisted_1$7 = { class: "search-wrapper" };
   const _hoisted_2$2 = ["id"];
   const _hoisted_3 = { class: "list-item" };
   const _hoisted_4 = {
@@ -4829,7 +4835,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$6, [
+            vue.createElementVNode("div", _hoisted_1$7, [
               vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
               vue.createVNode(vue.unref(design.TMagicButton), {
                 type: "primary",
@@ -4925,7 +4931,7 @@
     }
   });
 
-  const _hoisted_1$5 = ["onClick", "onDragstart"];
+  const _hoisted_1$6 = ["onClick", "onDragstart"];
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
@@ -5043,7 +5049,7 @@
                                 _: 2
                               }, 1032, ["content"])
                             ])
-                          ], 40, _hoisted_1$5);
+                          ], 40, _hoisted_1$6);
                         }), 128))
                       ]),
                       _: 2
@@ -5282,7 +5288,7 @@
     }
   });
 
-  const _hoisted_1$4 = ["id", "onMouseenter"];
+  const _hoisted_1$5 = ["id", "onMouseenter"];
   const throttleTime = 150;
   const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -5295,6 +5301,7 @@
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
+      const keybindingService = services?.keybindingService;
       const tree = vue.ref();
       const menu = vue.ref();
       const checkedKeys = vue.ref([]);
@@ -5428,27 +5435,38 @@
       const windowBlurHandler = () => {
         isCtrlKeyDown.value = false;
       };
+      const globalKeyupHandler = () => {
+        if (document.activeElement !== tree.value?.$el) {
+          isCtrlKeyDown.value = false;
+        }
+      };
       let keycon;
       vue.onMounted(() => {
         editorService?.on("remove", editorServiceRemoveHandler);
-        keycon = new KeyController();
-        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-        const ctrl = isMac ? "meta" : "ctrl";
-        keycon.keydown((e) => {
-          if (e.key !== ctrl) {
+        if (tree.value?.$el) {
+          keybindingService?.on("keyup", globalKeyupHandler);
+          keycon = new KeyController(tree.value.$el);
+          const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+          const ctrl = isMac ? "meta" : "ctrl";
+          keycon.keydown((e) => {
+            if (e.key !== ctrl) {
+              isCtrlKeyDown.value = false;
+            }
+          }).keydown(ctrl, () => {
+            isCtrlKeyDown.value = true;
+          }).keyup(ctrl, () => {
             isCtrlKeyDown.value = false;
-          }
-        }).keydown(ctrl, () => {
-          isCtrlKeyDown.value = true;
-        }).keyup(ctrl, () => {
-          isCtrlKeyDown.value = false;
-        });
+          });
+          tree.value.$el.addEventListener("blur", windowBlurHandler);
+        }
         globalThis.addEventListener("blur", windowBlurHandler);
       });
       vue.onUnmounted(() => {
         keycon.destroy();
         editorService?.off("remove", editorServiceRemoveHandler);
+        keybindingService?.off("keyup", globalKeyupHandler);
         globalThis.removeEventListener("blur", windowBlurHandler);
+        tree.value?.$el.removeEventListener("blur", windowBlurHandler);
       });
       const highlightHandler = lodashEs.throttle((data) => {
         highlight(data);
@@ -5493,6 +5511,7 @@
               ref: tree,
               "node-key": "id",
               "empty-text": "页面空荡荡的",
+              tabindex: "-1",
               draggable: "",
               "default-expanded-keys": expandedKeys.value,
               "default-checked-keys": checkedKeys.value,
@@ -5526,7 +5545,7 @@
                   }, () => [
                     vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
                   ])
-                ], 40, _hoisted_1$4)
+                ], 40, _hoisted_1$5)
               ]),
               _: 3
             }, 8, ["default-expanded-keys", "default-checked-keys", "current-node-key", "data", "highlight-current", "show-checkbox"])) : vue.createCommentVNode("", true),
@@ -5544,7 +5563,7 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$4 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
@@ -5632,7 +5651,7 @@
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
                   ]))
                 ]),
                 default: vue.withCtx(() => [
@@ -5719,7 +5738,7 @@
     }
   });
 
-  const _hoisted_1$2 = {
+  const _hoisted_1$3 = {
     key: 0,
     class: "m-editor-breadcrumb"
   };
@@ -5741,7 +5760,7 @@
         editorService?.get("stage")?.select(node2.id);
       };
       return (_ctx, _cache) => {
-        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(path.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: item.id
@@ -5764,7 +5783,7 @@
     }
   });
 
-  const _hoisted_1$1 = {
+  const _hoisted_1$2 = {
     key: 1,
     style: { "width": "21px" }
   };
@@ -5857,7 +5876,7 @@
             onClick: addPage
           }, [
             vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -5886,7 +5905,7 @@
     }
   });
 
-  const _hoisted_1 = ["onClick"];
+  const _hoisted_1$1 = ["onClick"];
   const _hoisted_2 = { class: "m-editor-page-bar-title" };
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -5972,7 +5991,7 @@
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_1);
+              ], 10, _hoisted_1$1);
             }), 128))
           ]),
           _: 3
@@ -6625,6 +6644,10 @@
     }
   });
 
+  const _hoisted_1 = {
+    class: "m-editor-workspace",
+    tabindex: "-1"
+  };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorWorkspace"
@@ -6635,112 +6658,9 @@
     },
     setup(__props) {
       const services = vue.inject("services");
-      const workspace = vue.ref();
-      const nodes = vue.computed(() => services?.editorService.get("nodes"));
       const page = vue.computed(() => services?.editorService.get("page"));
-      const mouseenterHandler = () => {
-        workspace.value?.focus();
-      };
-      const mouseleaveHandler = () => {
-        workspace.value?.blur();
-      };
-      let keycon;
-      vue.onMounted(() => {
-        workspace.value?.addEventListener("mouseenter", mouseenterHandler);
-        workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
-        keycon = new KeyController(workspace.value);
-        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-        const ctrl = isMac ? "meta" : "ctrl";
-        keycon.keyup("delete", (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.remove(nodes.value);
-        }).keyup("backspace", (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.remove(nodes.value);
-        }).keydown([ctrl, "c"], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.copy(nodes.value);
-        }).keydown([ctrl, "v"], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
-        }).keydown([ctrl, "x"], (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.copy(nodes.value);
-          services?.editorService.remove(nodes.value);
-        }).keydown([ctrl, "z"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.undo();
-        }).keydown([ctrl, "shift", "z"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.redo();
-        }).keydown("up", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, -1);
-        }).keydown("down", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, 1);
-        }).keydown("left", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(-1, 0);
-        }).keydown("right", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(1, 0);
-        }).keydown([ctrl, "up"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, -10);
-        }).keydown([ctrl, "down"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, 10);
-        }).keydown([ctrl, "left"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(-10, 0);
-        }).keydown([ctrl, "right"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(10, 0);
-        }).keydown("tab", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.selectNextNode();
-        }).keydown([ctrl, "tab"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.selectNextPage();
-        }).keydown([ctrl, "="], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        }).keydown([ctrl, "numpadplus"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        }).keydown([ctrl, "-"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        }).keydown([ctrl, "numpad-"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        }).keydown([ctrl, "0"], async (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.set("zoom", await services.uiService.calcZoom());
-        }).keydown([ctrl, "1"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.set("zoom", 1);
-        });
-      });
-      vue.onUnmounted(() => {
-        workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
-        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
-        keycon.destroy();
-      });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-workspace",
-          tabindex: "-1",
-          ref_key: "workspace",
-          ref: workspace
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           vue.createVNode(_sfc_main$8),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
             page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
@@ -6758,7 +6678,7 @@
             ]),
             _: 3
           })
-        ], 512);
+        ]);
       };
     }
   });
@@ -7482,6 +7402,177 @@
   }
   const eventsService = new Events();
 
+  class Keybinding extends BaseService {
+    keycon = new KeyController();
+    ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "meta" : "ctrl";
+    constructor() {
+      super();
+      this.keycon.keyup((e) => {
+        this.emit("keyup", e.inputEvent);
+      }).keyup("delete", (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        this.removeNode();
+      }).keyup("backspace", (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        this.removeNode();
+      }).keydown([this.ctrlKey, "c"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        const nodes = editorService.get("nodes");
+        nodes && editorService.copy(nodes);
+      }).keydown([this.ctrlKey, "v"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        const nodes = editorService.get("nodes");
+        nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+      }).keydown([this.ctrlKey, "x"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        const nodes = editorService.get("nodes");
+        if (!nodes || utils.isPage(nodes[0]))
+          return;
+        editorService.copy(nodes);
+        editorService.remove(nodes);
+      }).keydown([this.ctrlKey, "z"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.undo();
+      }).keydown([this.ctrlKey, "shift", "z"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.redo();
+      }).keydown("up", (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.move(0, -1);
+      }).keydown("down", (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.move(0, 1);
+      }).keydown("left", (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.move(-1, 0);
+      }).keydown("right", (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.move(1, 0);
+      }).keydown([this.ctrlKey, "up"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.move(0, -10);
+      }).keydown([this.ctrlKey, "down"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.move(0, 10);
+      }).keydown([this.ctrlKey, "left"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.move(-10, 0);
+      }).keydown([this.ctrlKey, "right"], (e) => {
+        e.inputEvent.preventDefault();
+        editorService.move(10, 0);
+      }).keydown("tab", (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.selectNextNode();
+      }).keydown([this.ctrlKey, "tab"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        editorService.selectNextPage();
+      }).keydown([this.ctrlKey, "="], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        uiService.zoom(0.1);
+      }).keydown([this.ctrlKey, "numpadplus"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        uiService.zoom(0.1);
+      }).keydown([this.ctrlKey, "-"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        uiService.zoom(-0.1);
+      }).keydown([this.ctrlKey, "numpad-"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        uiService.zoom(-0.1);
+      }).keydown([this.ctrlKey, "0"], async (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        uiService.set("zoom", await uiService.calcZoom());
+      }).keydown([this.ctrlKey, "1"], (e) => {
+        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+          return;
+        }
+        e.inputEvent.preventDefault();
+        uiService.set("zoom", 1);
+      });
+    }
+    destroy() {
+      this.keycon.destroy();
+    }
+    isDisabledKeyEvent(node) {
+      const el = node;
+      if (!el)
+        return false;
+      return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable;
+    }
+    removeNode() {
+      const nodes = editorService.get("nodes");
+      if (!nodes || utils.isPage(nodes[0]))
+        return;
+      editorService.remove(nodes);
+    }
+  }
+  const keybindingService = new Keybinding();
+
   const editorProps = {
     /** 页面初始值 */
     modelValue: {
@@ -7869,7 +7960,8 @@
         storageService,
         codeBlockService,
         depService,
-        dataSourceService
+        dataSourceService,
+        keybindingService
       };
       initServiceEvents(props, emit, services);
       initServiceState(props, services);
@@ -8052,6 +8144,7 @@
   exports.Layout = Layout;
   exports.LayoutContainer = _sfc_main$s;
   exports.PropsPanel = _sfc_main$n;
+  exports.SplitView = _sfc_main$s;
   exports.TMagicCodeEditor = _sfc_main$u;
   exports.TMagicEditor = Editor;
   exports.ToolButton = _sfc_main$p;