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

package/dist/tmagic-editor.js

@@ -185,7 +185,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = ["src"];
+const _hoisted_1$n = ["src"];
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
@@ -209,7 +209,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$m)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$n)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -228,7 +228,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
@@ -322,7 +322,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -346,7 +346,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
@@ -494,7 +494,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: filedColumns
@@ -527,7 +527,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
@@ -753,7 +753,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$B, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$j, [
+          createElementVNode("div", _hoisted_1$k, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
             createElementVNode("span", _hoisted_2$c, toDisplayString(item.value), 1)
           ])
@@ -792,7 +792,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-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"
@@ -959,7 +959,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -1010,7 +1010,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = { class: "m-fields-key-value" };
+const _hoisted_1$i = { class: "m-fields-key-value" };
 const _hoisted_2$a = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
@@ -1055,7 +1055,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -1361,6 +1361,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit }) {
     const target = ref();
+    const isDraging = ref(false);
     let getso;
     onMounted(() => {
       if (!target.value)
@@ -1372,19 +1373,24 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         if (!target.value)
           return;
         emit("change", e.deltaX);
+      }).on("dragStart", () => {
+        isDraging.value = true;
+      }).on("dragEnd", () => {
+        isDraging.value = false;
       });
     });
     onUnmounted(() => {
       getso?.unset();
+      isDraging.value = false;
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
         ref_key: "target",
         ref: target,
-        class: "m-editor-resizer"
+        class: normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": isDraging.value }])
       }, [
         renderSlot(_ctx.$slots, "default")
-      ], 512);
+      ], 2);
     };
   }
 });
@@ -1393,7 +1399,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
-  __name: "Layout",
+  __name: "SplitView",
   props: {
     left: {},
     right: {},
@@ -3377,7 +3383,7 @@ const useStage = (stageOptions) => {
   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__ */ createElementVNode("p", null, "新增页面", -1);
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
@@ -3400,7 +3406,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         createElementVNode("div", _hoisted_2$9, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
@@ -3417,7 +3423,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-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";
@@ -3427,10 +3433,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     name: "MEditorFramework"
   },
   __name: "Framework",
-  props: {
-    codeOptions: { default: () => ({}) }
-  },
   setup(__props) {
+    const codeOptions = inject("codeOptions", {});
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
     const nodes = computed(() => editorService?.get("nodes") || []);
@@ -3490,16 +3494,18 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
-        showSrc.value ? (openBlock(), createBlock(_component_magic_code_editor, {
-          key: 0,
-          class: "m-editor-content",
-          "init-values": root.value,
-          options: _ctx.codeOptions,
-          onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$s, {
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        renderSlot(_ctx.$slots, "header"),
+        renderSlot(_ctx.$slots, "nav"),
+        renderSlot(_ctx.$slots, "content-before"),
+        showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
+          createVNode(_sfc_main$u, {
+            class: "m-editor-content",
+            "init-values": root.value,
+            options: unref(codeOptions),
+            onSave: saveCode
+          }, null, 8, ["init-values", "options"])
+        ]) : (openBlock(), createBlock(_sfc_main$s, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -3535,13 +3541,15 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["left", "right"]))
+        ]), 1032, ["left", "right"])),
+        renderSlot(_ctx.$slots, "content-after"),
+        renderSlot(_ctx.$slots, "footer")
       ]);
     };
   }
 });
 
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 1,
   class: "menu-item-text"
 };
@@ -3625,7 +3633,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -3880,7 +3888,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$d = { class: "m-editor-props-panel" };
+const _hoisted_1$e = { class: "m-editor-props-panel" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
@@ -3930,7 +3938,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
     __expose({ submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -3982,7 +3990,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
@@ -4003,12 +4011,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_3$3);
+      return openBlock(), 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",
@@ -4025,12 +4033,12 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$3);
+      return openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_4$3);
     };
   }
 });
 
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   key: 0,
   class: "m-editor-content-bottom"
 };
@@ -4134,7 +4142,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           language: _ctx.language,
           options: codeOptions.value
         }, null, 8, ["init-values", "language", "options"]),
-        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
+        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -4190,7 +4198,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "code-name-wrapper" };
+const _hoisted_1$a = { class: "code-name-wrapper" };
 const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
 const _hoisted_3$2 = { class: "code-name-wrapper" };
 const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
@@ -4316,7 +4324,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$9, [
+          createElementVNode("div", _hoisted_1$a, [
             _hoisted_2$4,
             createVNode(unref(TMagicInput), {
               class: "code-name-input",
@@ -4358,7 +4366,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 0,
   class: "m-editor-code-block-editor-panel"
 };
@@ -4426,7 +4434,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             class: "code-editor-layout"
           }, {
             center: withCtx(() => [
-              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
                 codeConfig.value ? (openBlock(), createBlock(_sfc_main$i, {
                   key: 0,
@@ -4451,7 +4459,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-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 = {
@@ -4554,7 +4562,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            createElementVNode("div", _hoisted_1$7, [
+            createElementVNode("div", _hoisted_1$8, [
               createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
@@ -4749,7 +4757,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-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 = {
@@ -4818,7 +4826,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$6, [
+          createElementVNode("div", _hoisted_1$7, [
             createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
             createVNode(unref(TMagicButton), {
               type: "primary",
@@ -4914,7 +4922,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = ["onClick", "onDragstart"];
+const _hoisted_1$6 = ["onClick", "onDragstart"];
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
@@ -5032,7 +5040,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               _: 2
                             }, 1032, ["content"])
                           ])
-                        ], 40, _hoisted_1$5);
+                        ], 40, _hoisted_1$6);
                       }), 128))
                     ]),
                     _: 2
@@ -5271,7 +5279,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = ["id", "onMouseenter"];
+const _hoisted_1$5 = ["id", "onMouseenter"];
 const throttleTime = 150;
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
@@ -5284,6 +5292,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
+    const keybindingService = services?.keybindingService;
     const tree = ref();
     const menu = ref();
     const checkedKeys = ref([]);
@@ -5417,27 +5426,38 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const windowBlurHandler = () => {
       isCtrlKeyDown.value = false;
     };
+    const globalKeyupHandler = () => {
+      if (document.activeElement !== tree.value?.$el) {
+        isCtrlKeyDown.value = false;
+      }
+    };
     let keycon;
     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);
     });
     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);
@@ -5482,6 +5502,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ref: tree,
             "node-key": "id",
             "empty-text": "页面空荡荡的",
+            tabindex: "-1",
             draggable: "",
             "default-expanded-keys": expandedKeys.value,
             "default-checked-keys": checkedKeys.value,
@@ -5515,7 +5536,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 }, () => [
                   createElementVNode("span", null, 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"])) : createCommentVNode("", true),
@@ -5533,7 +5554,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
@@ -5621,7 +5642,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  config.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+                  config.text ? (openBlock(), createElementBlock("div", _hoisted_1$4, toDisplayString(config.text), 1)) : createCommentVNode("", true)
                 ]))
               ]),
               default: withCtx(() => [
@@ -5708,7 +5729,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "m-editor-breadcrumb"
 };
@@ -5730,7 +5751,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       editorService?.get("stage")?.select(node2.id);
     };
     return (_ctx, _cache) => {
-      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: item.id
@@ -5753,7 +5774,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 1,
   style: { "width": "21px" }
 };
@@ -5846,7 +5867,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           onClick: addPage
         }, [
           createVNode(_sfc_main$B, { icon: unref(Plus) }, null, 8, ["icon"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
+        ])) : (openBlock(), createElementBlock("div", _hoisted_1$2)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -5875,7 +5896,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = ["onClick"];
+const _hoisted_1$1 = ["onClick"];
 const _hoisted_2 = { class: "m-editor-page-bar-title" };
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{
@@ -5961,7 +5982,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 2
               }, 1024)
-            ], 10, _hoisted_1);
+            ], 10, _hoisted_1$1);
           }), 128))
         ]),
         _: 3
@@ -6614,6 +6635,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1 = {
+  class: "m-editor-workspace",
+  tabindex: "-1"
+};
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorWorkspace"
@@ -6624,112 +6649,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const services = inject("services");
-    const workspace = ref();
-    const nodes = computed(() => services?.editorService.get("nodes"));
     const page = computed(() => services?.editorService.get("page"));
-    const mouseenterHandler = () => {
-      workspace.value?.focus();
-    };
-    const mouseleaveHandler = () => {
-      workspace.value?.blur();
-    };
-    let keycon;
-    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 || isPage(nodes.value[0]))
-          return;
-        services?.editorService.remove(nodes.value);
-      }).keyup("backspace", (e) => {
-        e.inputEvent.preventDefault();
-        if (!nodes.value || 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 || 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);
-      });
-    });
-    onUnmounted(() => {
-      workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
-      workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
-      keycon.destroy();
-    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "m-editor-workspace",
-        tabindex: "-1",
-        ref_key: "workspace",
-        ref: workspace
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_sfc_main$8),
         renderSlot(_ctx.$slots, "stage", {}, () => [
           page.value ? (openBlock(), createBlock(_sfc_main$2, {
@@ -6747,7 +6669,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         })
-      ], 512);
+      ]);
     };
   }
 });
@@ -7471,6 +7393,177 @@ 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();
+      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 || 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 || isPage(nodes[0]))
+      return;
+    editorService.remove(nodes);
+  }
+}
+const keybindingService = new Keybinding();
+
 const editorProps = {
   /** 页面初始值 */
   modelValue: {
@@ -7858,7 +7951,8 @@ const _sfc_main = defineComponent({
       storageService,
       codeBlockService,
       depService,
-      dataSourceService
+      dataSourceService,
+      keybindingService
     };
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
@@ -7898,12 +7992,21 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Workspace = resolveComponent("Workspace");
   const _component_PropsPanel = resolveComponent("PropsPanel");
   const _component_Framework = resolveComponent("Framework");
-  return openBlock(), createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
+  return openBlock(), createBlock(_component_Framework, null, {
+    header: withCtx(() => [
+      renderSlot(_ctx.$slots, "header")
+    ]),
     nav: withCtx(() => [
       renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
         createVNode(_component_TMagicNavMenu, { data: _ctx.menu }, null, 8, ["data"])
       ])
     ]),
+    "content-before": withCtx(() => [
+      renderSlot(_ctx.$slots, "content-before")
+    ]),
+    "src-code": withCtx(() => [
+      renderSlot(_ctx.$slots, "src-code", { editorService: _ctx.editorService })
+    ]),
     sidebar: withCtx(() => [
       renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
         createVNode(_component_Sidebar, {
@@ -7975,8 +8078,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     empty: withCtx(() => [
       renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
     ]),
+    "content-after": withCtx(() => [
+      renderSlot(_ctx.$slots, "content-after")
+    ]),
+    footer: withCtx(() => [
+      renderSlot(_ctx.$slots, "footer")
+    ]),
     _: 3
-  }, 8, ["code-options"]);
+  });
 }
 const Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
@@ -8004,5 +8113,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$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, _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 };
 //# sourceMappingURL=tmagic-editor.js.map