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

package/dist/tmagic-editor.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, reactive, watch, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, createCommentVNode, nextTick, watchEffect, withModifiers, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, createStaticVNode, withDirectives, Teleport, vShow, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, reactive, watch, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, createCommentVNode, nextTick, watchEffect, withModifiers, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, createStaticVNode, provide, withDirectives, Teleport, vShow, onBeforeUnmount, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
 import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
 import { TMagicCard, TMagicIcon, TMagicButton, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicPopover } from '@tmagic/design';
@@ -9,10 +9,10 @@ import { MagicTable } from '@tmagic/table';
 import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
 import { isPop, getNodePath, isNumber, isPage, toLine, guid, datetimeFormatter, removeClassNameByClassName, getNodes } from '@tmagic/utils';
-import KeyController from 'keycon';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
+import KeyController from 'keycon';
 
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
@@ -47,6 +47,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
+let $TMAGIC_EDITOR = {};
+const setConfig = (option) => {
+  $TMAGIC_EDITOR = option;
+};
+const getConfig = (key) => $TMAGIC_EDITOR[key];
+
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
@@ -102,7 +108,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       if (!props.name || !props.model)
         return;
       try {
-        props.model[props.name] = eval(`(${v[props.name]})`);
+        const parseDSL = getConfig("parseDSL");
+        props.model[props.name] = parseDSL(`(${v[props.name]})`);
         emit("change", props.model[props.name]);
       } catch (e) {
         console.error(e);
@@ -556,7 +563,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
     const setDisplayState = () => {
       displayState.value = [];
-      const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+      const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
       let index = 0;
       for (const match of matches) {
         if (typeof match.index === "undefined")
@@ -629,13 +636,13 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       }
       return selectionStart;
     };
-    const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+    const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
     const curCharIsDot = (dotIndex) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
     const dsQuerySearch = (queryString, leftCurlyBracketIndex, cb) => {
       let result = [];
       if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
         result = dataSources.value;
-      } else if (leftCurlyBracketIndex > -1) {
+      } else if (leftCurlyBracketIndex > 0) {
         const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
         result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
       }
@@ -687,7 +694,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       const selectionStart = getSelectionStart();
       const curQueryString = queryString.substring(0, selectionStart);
       const fieldKeyStringLastIndex = curQueryString.lastIndexOf(".");
-      const dsKeyStringLastIndex = curQueryString.lastIndexOf("{");
+      const dsKeyStringLastIndex = curQueryString.lastIndexOf("${") + 1;
       const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
       if (isFieldTip) {
         fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
@@ -700,7 +707,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       const selectionStart = input.value?.selectionStart || 0;
       let startText = inputText.substring(0, selectionStart);
       const dotIndex = startText.lastIndexOf(".");
-      const leftCurlyBracketIndex = startText.lastIndexOf("{");
+      const leftCurlyBracketIndex = startText.lastIndexOf("${") + 1;
       const endText = inputText.substring(selectionStart);
       let suggestText = value;
       if (isDataSource) {
@@ -710,7 +717,6 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         if (!isRightCurlyBracket(selectionStart + 1)) {
           suggestText = `${suggestText}}`;
         }
-        suggestText = `{${suggestText}}`;
       } else if (!curCharIsDot(dotIndex)) {
         startText = startText.substring(0, dotIndex + 1);
       }
@@ -718,7 +724,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       await nextTick();
       let newSelectionStart = 0;
       if (isDataSource) {
-        newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+        newSelectionStart = leftCurlyBracketIndex + suggestText.length;
       } else {
         newSelectionStart = dotIndex + suggestText.length + 1;
       }
@@ -761,11 +767,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         _: 1
       }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
         key: 1,
-        class: normalizeClass(`el-input el-input--${_ctx.size}`),
+        class: normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
         onMouseup: mouseupHandler
       }, [
         createElementVNode("div", {
-          class: normalizeClass(`el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+          class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
           createElementVNode("div", _hoisted_3$5, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
@@ -784,7 +790,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   _: 2
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
-            }), 256))
+            }), 256)),
+            createVNode(_sfc_main$B, {
+              class: "tmagic-data-source-input-icon",
+              icon: unref(Coin)
+            }, null, 8, ["icon"])
           ])
         ], 2)
       ], 34));
@@ -1347,12 +1357,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-let $TMAGIC_EDITOR = {};
-const setConfig = (option) => {
-  $TMAGIC_EDITOR = option;
-};
-const getConfig = (key) => $TMAGIC_EDITOR[key];
-
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
@@ -1500,7 +1504,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ref: el,
         class: "m-editor-layout"
       }, [
-        hasLeft.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        hasLeft.value && _ctx.$slots.left ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-left", _ctx.leftClass]),
             style: normalizeStyle(`width: ${_ctx.left}px`)
@@ -1515,7 +1519,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "center")
         ], 6),
-        hasRight.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createVNode(_sfc_main$t, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
@@ -1609,6 +1613,40 @@ const fillConfig$1 = (config = []) => [
                   }
                 ]
               },
+              {
+                type: "fieldset",
+                legend: "边框",
+                items: [
+                  {
+                    name: "borderWidth",
+                    text: "宽度",
+                    defaultValue: "0"
+                  },
+                  {
+                    name: "borderColor",
+                    text: "颜色",
+                    type: "colorPicker"
+                  },
+                  {
+                    name: "borderStyle",
+                    text: "样式",
+                    type: "select",
+                    defaultValue: "none",
+                    options: [
+                      { text: "none", value: "none" },
+                      { text: "hidden", value: "hidden" },
+                      { text: "dotted", value: "dotted" },
+                      { text: "dashed", value: "dashed" },
+                      { text: "solid", value: "solid" },
+                      { text: "double", value: "double" },
+                      { text: "groove", value: "groove" },
+                      { text: "ridge", value: "ridge" },
+                      { text: "inset", value: "inset" },
+                      { text: "outset", value: "outset" }
+                    ]
+                  }
+                ]
+              },
               {
                 type: "fieldset",
                 legend: "背景",
@@ -1768,6 +1806,28 @@ var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
   return CodeDeleteErrorType2;
 })(CodeDeleteErrorType || {});
 const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+var KeyBindingCommand = /* @__PURE__ */ ((KeyBindingCommand2) => {
+  KeyBindingCommand2["COPY_NODE"] = "tmagic-system-copy-node";
+  KeyBindingCommand2["PASTE_NODE"] = "tmagic-system-paste-node";
+  KeyBindingCommand2["DELETE_NODE"] = "tmagic-system-delete-node";
+  KeyBindingCommand2["CUT_NODE"] = "tmagic-system-cut-node";
+  KeyBindingCommand2["UNDO"] = "tmagic-system-undo";
+  KeyBindingCommand2["REDO"] = "tmagic-system-redo";
+  KeyBindingCommand2["ZOOM_IN"] = "tmagic-system-zoom-in";
+  KeyBindingCommand2["ZOOM_OUT"] = "tmagic-system-zoom-out";
+  KeyBindingCommand2["ZOOM_RESET"] = "tmagic-system-zoom-reset";
+  KeyBindingCommand2["ZOOM_FIT"] = "tmagic-system-zoom-fit";
+  KeyBindingCommand2["MOVE_UP_1"] = "tmagic-system-move-up-1";
+  KeyBindingCommand2["MOVE_DOWN_1"] = "tmagic-system-move-down-1";
+  KeyBindingCommand2["MOVE_LEFT_1"] = "tmagic-system-move-left-1";
+  KeyBindingCommand2["MOVE_RIGHT_1"] = "tmagic-system-move-right-1";
+  KeyBindingCommand2["MOVE_UP_10"] = "tmagic-system-move-up-10";
+  KeyBindingCommand2["MOVE_DOWN_10"] = "tmagic-system-move-down-10";
+  KeyBindingCommand2["MOVE_LEFT_10"] = "tmagic-system-move-left-10";
+  KeyBindingCommand2["MOVE_RIGHT_10"] = "tmagic-system-move-right-10";
+  KeyBindingCommand2["SWITCH_NODE"] = "tmagic-system-switch-node";
+  return KeyBindingCommand2;
+})(KeyBindingCommand || {});
 
 const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 const getPageList = (app) => {
@@ -2214,8 +2274,8 @@ class WebStorage extends BaseService {
    * 清理，支持storageService.usePlugin
    */
   async clear() {
-    const storage2 = await this.getStorage();
-    storage2.clear();
+    const storage = await this.getStorage();
+    storage.clear();
   }
   /**
    * 获取存储项，支持storageService.usePlugin
@@ -2229,7 +2289,7 @@ class WebStorage extends BaseService {
       return null;
     switch (protocol) {
       case "object" /* OBJECT */:
-        return eval(`(${item})`);
+        return getConfig("parseDSL")(`(${item})`);
       case "json" /* JSON */:
         return JSON.parse(item);
       case "number" /* NUMBER */:
@@ -2244,49 +2304,49 @@ class WebStorage extends BaseService {
    * 获取指定索引位置的key
    */
   async key(index) {
-    const storage2 = await this.getStorage();
-    return storage2.key(index);
+    const storage = await this.getStorage();
+    return storage.key(index);
   }
   /**
    * 移除存储项，支持storageService.usePlugin
    */
-  async removeItem(key2, options2 = {}) {
-    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-    storage2.removeItem(`${options2.namespace || namespace2}:${key2}`);
+  async removeItem(key, options = {}) {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    storage.removeItem(`${options.namespace || namespace}:${key}`);
   }
   /**
    * 设置存储项，支持storageService.usePlugin
    */
-  async setItem(key2, value, options2 = {}) {
-    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-    let item2 = value;
-    const protocol2 = options2.protocol ? `${options2.protocol}:` : "";
+  async setItem(key, value, options = {}) {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    let item = value;
+    const protocol = options.protocol ? `${options.protocol}:` : "";
     if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
-      item2 = `${protocol2}${value}`;
+      item = `${protocol}${value}`;
     } else {
-      item2 = `${protocol2}${serialize(value)}`;
+      item = `${protocol}${serialize(value)}`;
     }
-    storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
+    storage.setItem(`${options.namespace || namespace}:${key}`, item);
   }
   destroy() {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
   getValueAndProtocol(value) {
-    let protocol2 = "";
+    let protocol = "";
     if (value === null) {
       return {
         item: value,
-        protocol: protocol2
+        protocol
       };
     }
-    const item2 = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
-      protocol2 = $1;
+    const item = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+      protocol = $1;
       return $3;
     });
     return {
-      protocol: protocol2,
-      item: item2
+      protocol,
+      item
     };
   }
 }
@@ -3437,7 +3497,6 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const codeOptions = inject("codeOptions", {});
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
-    const nodes = computed(() => editorService?.get("nodes") || []);
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = computed(() => uiService?.get("showSrc"));
     const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
@@ -3488,7 +3547,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
     const saveCode = (value) => {
       try {
-        editorService?.set("root", eval(value));
+        const parseDSL = getConfig("parseDSL");
+        editorService?.set("root", parseDSL(value));
       } catch (e) {
         console.error(e);
       }
@@ -3529,7 +3589,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ]),
           _: 2
         }, [
-          pageLength.value > 0 && nodes.value.length === 1 ? {
+          pageLength.value > 0 ? {
             name: "right",
             fn: withCtx(() => [
               createVNode(unref(TMagicScrollbar), null, {
@@ -3888,7 +3948,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = { class: "m-editor-props-panel" };
+const _hoisted_1$e = {
+  key: 0,
+  class: "m-editor-props-panel"
+};
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
@@ -3902,6 +3965,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const curFormConfig = ref([]);
     const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
+    const nodes = computed(() => services?.editorService.get("nodes") || []);
     const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
     const stage = computed(() => services?.editorService.get("stage"));
     const init = async () => {
@@ -3938,7 +4002,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
     __expose({ submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -3950,7 +4014,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           config: curFormConfig.value,
           onChange: submit
         }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
-      ]);
+      ])) : createCommentVNode("", true);
     };
   }
 });
@@ -4218,6 +4282,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
+    provide("mForm", {});
     const defaultParamColConfig = {
       type: "row",
       label: "参数类型",
@@ -4286,29 +4351,29 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     initTableModel();
     const beforeSave = (codeValue) => {
       try {
-        eval(codeValue);
+        getConfig("parseDSL")(codeValue);
         return true;
       } catch (e) {
         tMagicMessage.error(e.stack);
         return false;
       }
     };
-    const saveCode = async (codeValue2) => {
+    const saveCode = async (codeValue) => {
       if (!props.editable)
         return;
-      evalRes.value = beforeSave(codeValue2);
+      evalRes.value = beforeSave(codeValue);
       if (evalRes.value) {
         await services?.codeBlockService.setCodeDslById(props.id, {
           name: codeName.value,
-          content: codeValue2,
+          content: codeValue,
           params: tableModel.value?.params || []
         });
         tMagicMessage.success("代码成功保存到本地");
         services?.codeBlockService.removeCodeDraft(props.id);
       }
     };
-    const saveAndClose = async (codeValue2) => {
-      await saveCode(codeValue2);
+    const saveAndClose = async (codeValue) => {
+      await saveCode(codeValue);
       if (evalRes.value) {
         close();
       }
@@ -5077,6 +5142,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       left: "0",
       top: "0"
     });
+    const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
     const hide = () => {
       if (!visible.value)
         return;
@@ -5089,7 +5155,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       if (!visible.value || !target) {
         return;
       }
-      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+      if (contains(target)) {
         return;
       }
       hide();
@@ -5116,13 +5182,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       if (typeof item !== "object" || !menuItem.items?.length) {
         return;
       }
-      subMenuData.value = menuItem.items;
-      if (menu.value) {
-        subMenu.value.show({
-          clientX: menu.value.offsetLeft + menu.value.clientWidth,
-          clientY: menu.value.offsetTop
-        });
-      }
+      subMenuData.value = menuItem.items || [];
+      setTimeout(() => {
+        if (menu.value) {
+          subMenu.value?.show({
+            clientX: menu.value.offsetLeft + menu.value.clientWidth,
+            clientY: menu.value.offsetTop
+          });
+        }
+      }, 0);
     };
     onMounted(() => {
       if (props.isSubMenu)
@@ -5135,8 +5203,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       globalThis.removeEventListener("mousedown", hideHandler, true);
     });
     __expose({
+      menu,
       hide,
-      show
+      show,
+      contains
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
@@ -5159,14 +5229,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(_component_content_menu, {
+          subMenuData.value.length ? (openBlock(), createBlock(_component_content_menu, {
+            key: 0,
             class: "sub-menu",
             ref_key: "subMenu",
             ref: subMenu,
             "menu-data": subMenuData.value,
             "is-sub-menu": true,
             onHide: hide
-          }, null, 8, ["menu-data"])
+          }, null, 8, ["menu-data"])) : createCommentVNode("", true)
         ]))
       ], 4)), [
         [vShow, visible.value]
@@ -5188,6 +5259,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
+    const nodes = computed(() => services?.editorService.get("nodes"));
     const isRoot = computed(() => node.value?.type === NodeType.ROOT);
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
@@ -5239,7 +5311,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         type: "button",
         text: "新增",
         icon: markRaw(Plus),
-        display: () => node.value?.items,
+        display: () => node.value?.items && nodes.value?.length === 1,
         items: getSubMenuData.value
       },
       {
@@ -5248,7 +5320,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         icon: markRaw(CopyDocument),
         display: () => !isRoot.value,
         handler: () => {
-          node.value && services?.editorService.copy(node.value);
+          node.value && services?.editorService.copy(nodes.value || []);
         }
       },
       {
@@ -5257,7 +5329,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         icon: markRaw(Delete),
         display: () => !isRoot.value && !isPage.value,
         handler: () => {
-          node.value && services?.editorService.remove(node.value);
+          node.value && services?.editorService.remove(nodes.value || []);
         }
       },
       ...props.layerContentMenu
@@ -5426,38 +5498,61 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const windowBlurHandler = () => {
       isCtrlKeyDown.value = false;
     };
-    const globalKeyupHandler = () => {
-      if (document.activeElement !== tree.value?.$el) {
+    keybindingService?.registeCommand("layer-panel-not-ctrl-keydown", (e) => {
+      if (e.key !== keybindingService.ctrlKey) {
         isCtrlKeyDown.value = false;
       }
-    };
-    let keycon;
-    onMounted(() => {
-      editorService?.on("remove", editorServiceRemoveHandler);
+    });
+    keybindingService?.registeCommand("layer-panel-ctrl-keydown", () => {
+      isCtrlKeyDown.value = true;
+    });
+    keybindingService?.registeCommand("layer-panel-ctrl-keyup", () => {
+      isCtrlKeyDown.value = false;
+    });
+    keybindingService?.registeCommand("layer-panel-global-keydwon", () => {
+      if (!tree.value?.$el.contains(document.activeElement)) {
+        isCtrlKeyDown.value = false;
+      }
+    });
+    keybindingService?.registe([
+      {
+        command: "layer-panel-not-ctrl-keydown",
+        when: [["layer-panel", "keydown"]]
+      },
+      {
+        command: "layer-panel-ctrl-keydown",
+        keybinding: "ctrl",
+        when: [["layer-panel", "keydown"]]
+      },
+      {
+        command: "layer-panel-ctrl-keyup",
+        keybinding: "ctrl",
+        when: [["layer-panel", "keyup"]]
+      },
+      {
+        command: "layer-panel-global-keydwon",
+        keybinding: "ctrl",
+        when: [["global", "keydown"]]
+      }
+    ]);
+    watch(tree, () => {
       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;
-        });
+        keybindingService?.registeEl("layer-panel", tree.value.$el);
         tree.value.$el.addEventListener("blur", windowBlurHandler);
+      } else {
+        keybindingService?.unregisteEl("layer-panel");
       }
+    });
+    onMounted(() => {
+      editorService?.on("remove", editorServiceRemoveHandler);
       globalThis.addEventListener("blur", windowBlurHandler);
     });
+    onBeforeUnmount(() => {
+      tree.value?.$el.removeEventListener("blur", windowBlurHandler);
+    });
     onUnmounted(() => {
-      keycon.destroy();
       editorService?.off("remove", editorServiceRemoveHandler);
-      keybindingService?.off("keyup", globalKeyupHandler);
       globalThis.removeEventListener("blur", windowBlurHandler);
-      tree.value?.$el.removeEventListener("blur", windowBlurHandler);
     });
     const highlightHandler = throttle((data) => {
       highlight(data);
@@ -5487,7 +5582,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
     const contextmenu = async (event, data) => {
       event.preventDefault();
-      await select(data);
+      if (nodes.value.length < 2) {
+        await select(data);
+      }
       menu.value?.show(event);
     };
     return (_ctx, _cache) => {
@@ -6501,6 +6598,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
         return;
       stage = useStage(stageOptions);
+      stage.on("select", () => {
+        stageWrap.value?.container?.focus();
+      });
       services?.editorService.set("stage", markRaw(stage));
       stage?.mount(stageContainer.value);
       if (!node.value?.id)
@@ -6541,21 +6641,25 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     onMounted(() => {
-      stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+      if (stageWrap.value?.container) {
+        resizeObserver.observe(stageWrap.value.container);
+        services?.keybindingService.registeEl("stage", stageWrap.value.container);
+      }
     });
     onUnmounted(() => {
       stage?.destroy();
       resizeObserver.disconnect();
       services?.editorService.set("stage", null);
+      services?.keybindingService.unregisteEl("stage");
     });
-    const contextmenuHandler = (e2) => {
-      e2.preventDefault();
-      menu.value?.show(e2);
+    const contextmenuHandler = (e) => {
+      e.preventDefault();
+      menu.value?.show(e);
     };
-    const dragoverHandler = (e2) => {
-      e2.preventDefault();
-      if (e2.dataTransfer) {
-        e2.dataTransfer.dropEffect = "move";
+    const dragoverHandler = (e) => {
+      e.preventDefault();
+      if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = "move";
       }
     };
     const dropHandler = async (e) => {
@@ -6567,7 +6671,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         parent = services?.editorService.getNodeById(parentEl.id, false);
       }
       if (e.dataTransfer && parent && stageContainer.value && stage) {
-        const config = eval(`(${e.dataTransfer.getData("data")})`);
+        const parseDSL = getConfig("parseDSL");
+        const config = parseDSL(`(${e.dataTransfer.getData("data")})`);
         const layout = await services?.editorService.getLayout(parent);
         const containerRect = stageContainer.value.getBoundingClientRect();
         const { scrollTop, scrollLeft } = stage.mask;
@@ -6600,6 +6705,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
+        tabindex: "-1",
         width: stageRect.value?.width,
         height: stageRect.value?.height,
         "wrap-width": stageContainerRect.value?.width,
@@ -6635,10 +6741,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = {
-  class: "m-editor-workspace",
-  tabindex: "-1"
-};
+const _hoisted_1 = { class: "m-editor-workspace" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorWorkspace"
@@ -6698,8 +6801,8 @@ class CodeBlock extends BaseService {
    * @param {CodeBlockDSL} codeDsl 代码DSL
    * @returns {void}
    */
-  async setCodeDsl(codeDsl2) {
-    this.state.codeDsl = codeDsl2;
+  async setCodeDsl(codeDsl) {
+    this.state.codeDsl = codeDsl;
     this.emit("code-dsl-change", this.state.codeDsl);
   }
   /**
@@ -6716,13 +6819,13 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {CodeBlockContent | null}
    */
-  getCodeContentById(id2) {
-    if (!id2)
+  getCodeContentById(id) {
+    if (!id)
       return null;
     const totalCodeDsl = this.getCodeDsl();
     if (!totalCodeDsl)
       return null;
-    return totalCodeDsl[id2] ?? null;
+    return totalCodeDsl[id] ?? null;
   }
   /**
    * 设置代码块ID和代码内容到源dsl
@@ -6737,7 +6840,8 @@ class CodeBlock extends BaseService {
     }
     const codeConfigProcessed = codeConfig;
     if (codeConfig.content) {
-      codeConfigProcessed.content = eval(codeConfig.content);
+      const parseDSL = getConfig("parseDSL");
+      codeConfigProcessed.content = parseDSL(codeConfig.content);
     }
     const existContent = codeDsl[id] || {};
     codeDsl[id] = {
@@ -6752,8 +6856,8 @@ class CodeBlock extends BaseService {
    * @returns {CodeBlockDSL}
    */
   getCodeDslByIds(ids) {
-    const codeDsl2 = this.getCodeDsl();
-    return pick(codeDsl2, ids);
+    const codeDsl = this.getCodeDsl();
+    return pick(codeDsl, ids);
   }
   /**
    * 设置代码编辑面板展示状态
@@ -6776,10 +6880,10 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {void}
    */
-  setCodeEditorContent(status, id2) {
-    if (!id2)
+  setCodeEditorContent(status, id) {
+    if (!id)
       return;
-    this.setId(id2);
+    this.setId(id);
     this.state.isShowCodeEditor = status;
   }
   /**
@@ -6809,10 +6913,10 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {void}
    */
-  setId(id2) {
-    if (!id2)
+  setId(id) {
+    if (!id)
       return;
-    this.state.id = id2;
+    this.state.id = id;
   }
   /**
    * 获取当前选中的代码块ID
@@ -6877,9 +6981,9 @@ class CodeBlock extends BaseService {
     const currentDsl = await this.getCodeDsl();
     if (!currentDsl)
       return;
-    codeIds.forEach((id2) => {
-      delete currentDsl[id2];
-      this.emit("remove", id2);
+    codeIds.forEach((id) => {
+      delete currentDsl[id];
+      this.emit("remove", id);
     });
   }
   /**
@@ -7394,176 +7498,274 @@ class Events extends BaseService {
 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();
+  controllers = /* @__PURE__ */ new Map();
+  bindingList = [];
+  commands = {
+    [KeyBindingCommand.DELETE_NODE]: () => {
       const nodes = editorService.get("nodes");
-      nodes && editorService.copy(nodes);
-    }).keydown([this.ctrlKey, "v"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+      if (!nodes || isPage(nodes[0]))
         return;
-      }
-      e.inputEvent.preventDefault();
+      editorService.remove(nodes);
+    },
+    [KeyBindingCommand.COPY_NODE]: () => {
       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;
-      }
+      nodes && editorService.copy(nodes);
+    },
+    [KeyBindingCommand.CUT_NODE]: () => {
       const nodes = editorService.get("nodes");
       if (!nodes || 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();
+    },
+    [KeyBindingCommand.PASTE_NODE]: () => {
+      const nodes = editorService.get("nodes");
+      nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+    },
+    [KeyBindingCommand.UNDO]: () => {
       editorService.undo();
-    }).keydown([this.ctrlKey, "shift", "z"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.REDO]: () => {
       editorService.redo();
-    }).keydown("up", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.ZOOM_IN]: () => {
+      uiService.zoom(0.1);
+    },
+    [KeyBindingCommand.ZOOM_OUT]: () => {
+      uiService.zoom(-0.1);
+    },
+    [KeyBindingCommand.ZOOM_RESET]: () => {
+      uiService.set("zoom", 1);
+    },
+    [KeyBindingCommand.ZOOM_FIT]: async () => {
+      uiService.set("zoom", await uiService.calcZoom());
+    },
+    [KeyBindingCommand.MOVE_UP_1]: () => {
       editorService.move(0, -1);
-    }).keydown("down", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_DOWN_1]: () => {
       editorService.move(0, 1);
-    }).keydown("left", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_LEFT_1]: () => {
       editorService.move(-1, 0);
-    }).keydown("right", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_RIGHT_1]: () => {
       editorService.move(1, 0);
-    }).keydown([this.ctrlKey, "up"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_UP_10]: () => {
       editorService.move(0, -10);
-    }).keydown([this.ctrlKey, "down"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_DOWN_10]: () => {
       editorService.move(0, 10);
-    }).keydown([this.ctrlKey, "left"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_LEFT_10]: () => {
       editorService.move(-10, 0);
-    }).keydown([this.ctrlKey, "right"], (e) => {
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_RIGHT_10]: () => {
       editorService.move(10, 0);
-    }).keydown("tab", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.SWITCH_NODE]: () => {
       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;
+    }
+  };
+  registeCommand(command, handler) {
+    this.commands[command] = handler;
+  }
+  unregisteCommand(command) {
+    delete this.commands[command];
+  }
+  registeEl(name, el) {
+    if (name !== "global" && !el) {
+      throw new Error("只有name为global可以不传el");
+    }
+    const keycon = new KeyController(el);
+    this.controllers.set(name, keycon);
+    this.bind(name);
+  }
+  unregisteEl(name) {
+    this.controllers.get(name)?.destroy();
+    this.controllers.delete(name);
+    this.bindingList.forEach((item) => {
+      item.binded = false;
+    });
+  }
+  registe(maps) {
+    for (const keybindingItem of maps) {
+      const { command, keybinding, when } = keybindingItem;
+      for (const [type = "", eventType = "keydown"] of when) {
+        const cacheItem = { type, command, keybinding, eventType, binded: false };
+        this.bindingList.push(cacheItem);
       }
-      e.inputEvent.preventDefault();
-      uiService.set("zoom", 1);
+    }
+    this.bind();
+  }
+  reset() {
+    this.controllers.forEach((keycon) => {
+      keycon.destroy();
     });
+    this.controllers.clear();
+    this.bindingList = [];
   }
   destroy() {
-    this.keycon.destroy();
+    this.reset();
   }
-  isDisabledKeyEvent(node) {
-    const el = node;
-    if (!el)
-      return false;
-    return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable;
+  bind(name) {
+    for (const item of this.bindingList) {
+      const { type, eventType, command, keybinding, binded } = item;
+      if (name && name !== type) {
+        continue;
+      }
+      if (binded) {
+        continue;
+      }
+      const keycon = this.controllers.get(type);
+      if (!keycon) {
+        continue;
+      }
+      const handler = (e) => {
+        e.inputEvent.preventDefault();
+        this.commands[command]?.(e.inputEvent);
+      };
+      this.getKeyconKeys(keybinding).forEach((keys) => {
+        if (keys[0]) {
+          keycon[eventType](keys, handler);
+        } else {
+          keycon[eventType](handler);
+        }
+      });
+      item.binded = true;
+    }
   }
-  removeNode() {
-    const nodes = editorService.get("nodes");
-    if (!nodes || isPage(nodes[0]))
-      return;
-    editorService.remove(nodes);
+  getKeyconKeys(keybinding = "") {
+    const splitKey = (key) => key.split("+").map((k) => k === "ctrl" ? this.ctrlKey : k);
+    if (Array.isArray(keybinding)) {
+      return keybinding.map((key) => splitKey(key));
+    }
+    return [splitKey(keybinding)];
   }
 }
 const keybindingService = new Keybinding();
 
+const keybindingConfig = [
+  {
+    command: KeyBindingCommand.DELETE_NODE,
+    keybinding: ["delete", "backspace"],
+    when: [
+      ["stage", "keyup"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.COPY_NODE,
+    keybinding: "ctrl+c",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.PASTE_NODE,
+    keybinding: "ctrl+v",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.CUT_NODE,
+    keybinding: "ctrl+x",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.UNDO,
+    keybinding: "ctrl+z",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.REDO,
+    keybinding: "ctrl+shift+z",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_1,
+    keybinding: "up",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_1,
+    keybinding: "down",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_1,
+    keybinding: "left",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_1,
+    keybinding: "right",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_10,
+    keybinding: "ctrl+up",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_10,
+    keybinding: "ctrl+down",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_10,
+    keybinding: "ctrl+left",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_10,
+    keybinding: "ctrl+right",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.SWITCH_NODE,
+    keybinding: "tab",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.ZOOM_IN,
+    keybinding: ["ctrl+=", "ctrl+numpadplus"],
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.ZOOM_OUT,
+    keybinding: ["ctrl+-", "ctrl+numpad-"],
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.ZOOM_FIT,
+    keybinding: "ctrl+0",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.ZOOM_RESET,
+    keybinding: "ctrl+1",
+    when: [["stage", "keydown"]]
+  }
+];
+
 const editorProps = {
   /** 页面初始值 */
   modelValue: {
@@ -7691,7 +7893,8 @@ const initServiceState = (props, {
   propsService,
   eventsService,
   uiService,
-  codeBlockService
+  codeBlockService,
+  keybindingService
 }) => {
   watch(
     () => props.modelValue,
@@ -7760,6 +7963,7 @@ const initServiceState = (props, {
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    keybindingService.reset();
   });
 };
 const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
@@ -7956,6 +8160,8 @@ const _sfc_main = defineComponent({
     };
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
+    keybindingService.registe(keybindingConfig);
+    keybindingService.registeEl("global");
     provide("services", services);
     provide("codeOptions", props.codeOptions);
     provide(
@@ -8092,7 +8298,8 @@ const Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]])
 const index$1 = '';
 
 const defaultInstallOpt = {
-  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl) => eval(dsl)
 };
 const index = {
   install: (app, opt) => {
@@ -8113,5 +8320,5 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$C as CodeSelect, _sfc_main$A as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$z as DataSourceFields, _sfc_main$y as DataSourceInput, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$B as Icon, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$s as SplitView, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$C as CodeSelect, _sfc_main$A as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$z as DataSourceFields, _sfc_main$y as DataSourceInput, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$B as Icon, KeyBindingCommand, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$t as Resizer, _sfc_main$s as SplitView, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map