@tmagic/editor 1.1.0-beta.1 → 1.1.0-beta.4

package/dist/tmagic-editor.umd.js

@@ -479,17 +479,12 @@
     try {
       let beforeArgs = args;
       for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-        let beforeReturnValue = await beforeMethod(...beforeArgs) || [];
-        if (isError(beforeReturnValue))
-          throw beforeReturnValue;
-        if (!Array.isArray(beforeReturnValue)) {
-          beforeReturnValue = [beforeReturnValue];
+        beforeArgs = await beforeMethod(...beforeArgs) || [];
+        if (isError(beforeArgs))
+          throw beforeArgs;
+        if (!Array.isArray(beforeArgs)) {
+          beforeArgs = [beforeArgs];
         }
-        beforeArgs = beforeArgs.map((v, index) => {
-          if (typeof beforeReturnValue[index] === "undefined")
-            return v;
-          return beforeReturnValue[index];
-        });
       }
       let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
       for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
@@ -674,7 +669,7 @@
     setPropsValue(type, value) {
       this.state.propsValueMap[type] = value;
     }
-    async getPropsValue(type, defaultValue = {}) {
+    async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
       if (type === "area") {
         const value = await this.getPropsValue("button");
         value.className = "action-area";
@@ -879,23 +874,13 @@
       return config.style?.left;
     const el = doc.getElementById(`${config.id}`);
     const parentEl = doc.getElementById(`${parent.id}`);
-    if (el && parentEl && el.offsetWidth + config.style?.left > parentEl.offsetWidth) {
+    const left = Number(config.style?.left) || 0;
+    if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
       return parentEl.offsetWidth - el.offsetWidth;
     }
     return config.style.left;
   };
 
-  const log = (...args) => {
-  };
-  const info = (...args) => {
-  };
-  const warn = (...args) => {
-  };
-  const debug = (...args) => {
-  };
-  const error = (...args) => {
-  };
-
   class Editor$1 extends BaseService {
     constructor() {
       super([
@@ -1033,7 +1018,7 @@
       this.set("highlightNode", node);
     }
     async add(addNode, parent) {
-      const { type, ...config2 } = addNode;
+      const { type, inputEvent, ...config2 } = addNode;
       const curNode = this.get("node");
       let parentNode;
       const isPage2 = type === schema.NodeType.PAGE;
@@ -1057,7 +1042,7 @@
       parentNode?.items?.push(newNode);
       const stage = this.get("stage");
       const root = this.get("root");
-      await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(root) });
+      await stage?.add({ config: lodashEs.cloneDeep(newNode), parent: lodashEs.cloneDeep(parentNode), root: lodashEs.cloneDeep(root) });
       if (layout === Layout.ABSOLUTE) {
         const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
         if (typeof fixedLeft !== "undefined") {
@@ -1214,8 +1199,8 @@
       const stage = this.get("stage");
       const doc = stage?.renderer.contentWindow?.document;
       if (doc) {
-        const parentEl = doc.getElementById(`${parent.id}`);
         const el = doc.getElementById(`${node.id}`);
+        const parentEl = el?.offsetParent;
         if (parentEl && el) {
           node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
         }
@@ -1642,6 +1627,17 @@
     name: type
   };
 
+  const log = (...args) => {
+  };
+  const info = (...args) => {
+  };
+  const warn = (...args) => {
+  };
+  const debug = (...args) => {
+  };
+  const error = (...args) => {
+  };
+
   const _sfc_main$i = vue.defineComponent({
     components: { Plus: iconsVue.Plus },
     setup() {
@@ -2307,20 +2303,9 @@
             }
             return;
           }
-          if (timeout)
+          if (timeout || !stage.value)
             return;
-          timeout = globalThis.setTimeout(async () => {
-            if (!stageOptions || !stage.value)
-              return;
-            const doc = stage.value.renderer.contentWindow?.document;
-            const els = stage.value.getElementsFromPoint(e);
-            for (const el of els) {
-              if (doc && !el.id.startsWith(StageCore.GHOST_EL_ID_PREFIX) && await stageOptions.isContainer(el)) {
-                utils.addClassName(el, doc, stageOptions?.containerHighlightClassName);
-                break;
-              }
-            }
-          }, stageOptions?.containerHighlightDuration);
+          timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
         }
       };
     }
@@ -3381,7 +3366,7 @@
         el,
         style: vue.computed(() => `
         width: ${props.width}px;
-        height: ${(props.height || 0) - 40}px;
+        height: ${props.height}px;
         position: absolute;
         margin-top: 30px;
       `)
@@ -3712,6 +3697,7 @@
               top,
               left
             };
+            config.inputEvent = e;
             services?.editorService.add(config, parent);
           }
         }
@@ -4004,10 +3990,12 @@
       const { height, width } = stageContainerRect;
       if (!width || !height)
         return 1;
-      if (width > stageRect.width && height > stageRect.height) {
+      const stageWidth = stageRect.width + 30;
+      const stageHeight = stageRect.height + 30;
+      if (width > stageWidth && height > stageHeight) {
         return 1;
       }
-      return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+      return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
     }
   }
   var uiService = new Ui();
@@ -4221,7 +4209,7 @@
   }
   var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-  var index$1 = /* #__PURE__ */ (() => ".m-editor-nav-menu {\n  display: flex;\n  z-index: 5;\n  -webkit-box-pack: justify;\n  justify-content: space-between;\n  -webkit-box-align: center;\n  align-items: center;\n  background-color: #ffffff;\n  font-size: 19.2px;\n  color: #070303;\n  font-weight: 400;\n  box-sizing: border-box;\n  margin: 0px;\n  flex: 0 0 35px;\n  border-bottom: 1px solid #d8dee8;\n}\n.m-editor-nav-menu > div {\n  display: flex;\n  height: 100%;\n  z-index: 1;\n  align-items: center;\n}\n.m-editor-nav-menu .menu-center {\n  justify-content: center;\n}\n.m-editor-nav-menu .menu-right {\n  justify-content: flex-end;\n}\n.m-editor-nav-menu .menu-item {\n  flex-direction: row;\n  -webkit-box-align: center;\n  align-items: center;\n  vertical-align: middle;\n  font-size: 14px;\n  line-height: 1;\n  height: 100%;\n  color: rgba(255, 255, 255, 0.7);\n  box-sizing: inherit;\n  z-index: 1;\n  display: flex !important;\n  transition: all 0.3s ease 0s;\n  border-bottom: 2px solid transparent;\n  margin: 0;\n}\n.m-editor-nav-menu .menu-item .is-disabled {\n  opacity: 0.5;\n}\n.m-editor-nav-menu .menu-item .is-text {\n  padding: 5px;\n}\n.m-editor-nav-menu .menu-item .is-text,\n.m-editor-nav-menu .menu-item i {\n  color: #070303;\n}\n.m-editor-nav-menu .menu-item .icon {\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  height: 100%;\n  padding: 0px 8px;\n}\n.m-editor-nav-menu .menu-item .menu-item-text {\n  color: #070303;\n}\n.m-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n.m-editor-content {\n  width: 100%;\n  height: calc(100% - 35px);\n  display: flex;\n  justify-self: space-between;\n}\n.m-editor-framework-center {\n  position: relative;\n  transform: translateZ(0);\n  flex: 1;\n}\n.m-editor-framework-left {\n  background-color: #ffffff;\n}\n.m-editor-framework-center .el-scrollbar__view {\n  height: 100%;\n  min-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-empty-panel {\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: calc(100% - 32px);\n}\n.m-editor-empty-content {\n  display: flex;\n  justify-content: space-evenly;\n  flex-direction: row;\n  width: 100%;\n}\n.m-editor-empty-button {\n  border: 3px solid rgba(0, 0, 0, 0.2);\n  padding: 10px 40px;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n}\n.m-editor-empty-button i {\n  height: 180px;\n  line-height: 180px;\n  font-size: 100px;\n}\n.m-editor-empty-button p {\n  text-align: center;\n  font-size: 20px;\n  margin-top: 5px;\n}\n.m-editor-empty-button:hover {\n  border-color: #2882e0;\n  color: #2882e0;\n}\n.m-editor-sidebar {\n  height: 100%;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header {\n  background: #2882e0;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {\n  width: 40px;\n  margin-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {\n  margin: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {\n  border: 0;\n  border-radius: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {\n  margin-left: 2px;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {\n  line-height: 15px;\n  border: 0;\n  height: auto;\n  padding: 8px;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {\n  background: #ffffff;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {\n  border-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i {\n  font-size: 25px;\n  color: rgba(255, 255, 255, 0.6);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {\n  color: rgb(255, 255, 255);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {\n  font-size: 12px;\n  white-space: normal;\n}\n.m-editor-sidebar .el-scrollbar {\n  height: 100%;\n}\n.m-editor-sidebar .el-tree {\n  min-height: 100%;\n}\n.m-editor-sidebar .fold-icon {\n  position: absolute;\n  bottom: 8px;\n  left: 0px;\n  width: 45px;\n  padding-left: 8px;\n  color: #fff;\n  font-size: 32px;\n  opacity: 0.8;\n  cursor: pointer;\n}\n.m-editor-sidebar .fold-icon:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n.m-editor-sidebar .el-tabs__content,\n.m-editor-sidebar .el-tab-pane {\n  height: 100%;\n}\n.magic-editor-layer-panel {\n  background: #ffffff;\n}\n.magic-editor-layer-panel .search-input {\n  background: #ffffff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n.magic-editor-layer-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.magic-editor-layer-panel .node-content {\n  flex: 1;\n  display: flex;\n  width: 100%;\n}\n.magic-editor-layer-panel .node-content > div {\n  width: 8px;\n}\n.magic-editor-layer-panel .node-content > span {\n  width: calc(100% - 68px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.magic-editor-layer-panel .node-content > i {\n  margin-right: 10px;\n  font-size: 20px;\n}\n.magic-editor-layer-panel .node-content > i.lock {\n  color: #bbb;\n}\n.magic-editor-layer-panel,\n.magic-editor-layer-panel .el-tree {\n  background-color: #ffffff;\n  color: #313a40;\n}\n.magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.magic-editor-layer-panel .cus-tree-node {\n  width: 100%;\n  overflow: hidden;\n}\n.magic-editor-layer-panel .cus-tree-node-hover {\n  background-color: #f3f5f9;\n  width: 100%;\n}\n.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.ui-tree-tip {\n  width: 100%;\n  height: 25px;\n  margin-left: 10px;\n  background: #ffffff;\n  font-style: italic;\n  color: #555554;\n  position: absolute;\n  top: 40px;\n  left: 0;\n  z-index: 1;\n}\n.ui-component-panel {\n  height: 100%;\n  border-top: 0 !important;\n  margin-top: 50px;\n  background-color: #ffffff;\n}\n.ui-component-panel .search-input {\n  background: #f8fbff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  z-index: 1;\n}\n.ui-component-panel .search-input .el-input__prefix {\n  padding: 10px;\n}\n.ui-component-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.ui-component-panel .el-collapse-item > div:first-of-type {\n  border-bottom: 1px solid #d9dbdd;\n  margin-bottom: 10px;\n}\n.ui-component-panel .el-collapse-item__header {\n  background: #ffffff;\n  color: #070303;\n  height: 25px;\n  line-height: 25px;\n  padding-left: 10px;\n  font-size: 12px;\n}\n.ui-component-panel .el-collapse-item__header i {\n  margin-right: 5px;\n  font-size: 14px;\n}\n.ui-component-panel .el-collapse-item__wrap {\n  background: #ffffff;\n  border-bottom: 0;\n}\n.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {\n  padding: 10px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item {\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  color: #070303;\n  flex-direction: column;\n  width: 42px;\n  cursor: pointer;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i {\n  font-size: 20px;\n  background: #fff;\n  height: 40px;\n  width: 40px;\n  line-height: 40px;\n  border-radius: 5px;\n  color: #909090;\n  border: 1px solid #d9dbdd;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  margin-bottom: 5px;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i:hover {\n  background: #2882e0;\n  color: #fff;\n  border-color: #4e8be1;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item span {\n  font-size: 12px;\n  text-align: center;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip {\n  width: 50px;\n  height: 30px;\n  line-height: 15px;\n  display: block;\n  white-space: normal;\n  margin: 0;\n}\n.m-editor-resizer {\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  width: 8px;\n  margin: 0 -5px;\n  height: 100%;\n  opacity: 0.9;\n  background: padding-box #d8dee8;\n  box-sizing: border-box;\n  cursor: col-resize;\n  z-index: 1;\n}\n.m-editor-resizer:hover {\n  border-color: #d8dee8;\n}\n.m-editor-resizer .icon-container {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.4s;\n  width: 20px;\n  height: 120px;\n  line-height: 120px;\n  text-align: center;\n  background: #d8dee8;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: pointer;\n}\n.m-editor-resizer .icon-container.position-left {\n  transform: translate(calc(-100% - 4px), -50%);\n}\n.m-editor-resizer .icon-container.position-right {\n  transform: translate(calc(100% + 4px), -50%);\n}\n.m-editor-resizer .icon {\n  color: #fff;\n  font-size: 18px;\n}\n.magic-editor-resizer:hover .icon-container {\n  visibility: visible;\n  opacity: 1;\n}\n.m-editor-workspace {\n  height: 100%;\n  width: 100%;\n  user-select: none;\n}\n.m-editor-workspace:focus-visible {\n  outline: 0;\n}\n.m-editor-page-bar {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  width: 100%;\n  height: 32px;\n  line-height: 32px;\n  color: #070303;\n  background-color: #f3f3f3;\n  border-top: 1px solid #d9dbdd;\n  z-index: 2;\n  overflow: hidden;\n}\n.m-editor-page-bar-items {\n  display: flex;\n  transition: transform 0.3s;\n}\n.m-editor-page-bar-item {\n  padding: 0 10px;\n  cursor: pointer;\n  border-right: 1px solid #d9dbdd;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n  background-color: #f3f3f3;\n  white-space: nowrap;\n}\n.m-editor-page-bar-item.active {\n  background-color: #fff;\n  cursor: text;\n}\n.m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {\n  cursor: pointer;\n}\n.m-editor-page-bar-item-icon {\n  position: relative;\n  z-index: 1;\n}\n.m-editor-page-bar-item-title {\n  max-width: 150px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.page-bar-popover.el-popper.el-popover {\n  padding: 10px 0;\n}\n.page-bar-popover .menu-item {\n  cursor: pointer;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n}\n.page-bar-popover .menu-item .el-button--text,\n.page-bar-popover .menu-item i {\n  color: #070303;\n}\n.page-bar-popover .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-props-panel {\n  padding: 0 10px;\n}\n.m-editor-props-panel.small .el-form-item__label {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .m-fieldset legend {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .el-tabs__item {\n  font-size: 12px;\n}\n.m-editor-props-panel .el-input__wrapper {\n  border-radius: 0;\n}\n.m-editor-props-panel-popper.small span,\n.m-editor-props-panel-popper.small a,\n.m-editor-props-panel-popper.small p {\n  font-size: 12px;\n}\n.magic-editor-content-menu {\n  position: fixed;\n  font-size: 12px;\n  background: #fff;\n  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);\n  z-index: 9999;\n  transform-origin: 0% 0%;\n  font-weight: 600;\n  padding: 4px 0px;\n  overflow: auto;\n  max-height: 100%;\n}\n.magic-editor-content-menu .menu-item {\n  color: #333;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n  min-width: 140px;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n  border-left: 2px solid transparent;\n}\n.magic-editor-content-menu .menu-item .el-button {\n  width: 100%;\n  justify-content: flex-start;\n}\n.magic-editor-content-menu .menu-item .el-button--text,\n.magic-editor-content-menu .menu-item i {\n  color: #070303;\n}\n.magic-editor-content-menu .menu-item.divider {\n  padding: 0 14px;\n}\n.magic-editor-content-menu .menu-item.divider .el-divider {\n  margin: 0;\n}\n.magic-editor-content-menu .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-stage {\n  position: relative;\n  width: 100%;\n  height: calc(100% - 32px);\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-stage-container {\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  position: relative;\n  border: 1px solid #d9dbdd;\n  transition: transform 0.3s;\n  box-sizing: content-box;\n}\n.m-editor-stage-container::-webkit-scrollbar {\n  width: 0 !important;\n}\n.magic-code-editor {\n  width: 100%;\n}\n.magic-code-editor .margin {\n  margin: 0;\n}")();
+  var index$1 = /* #__PURE__ */ (() => ".m-editor-nav-menu {\n  display: flex;\n  z-index: 5;\n  -webkit-box-pack: justify;\n  justify-content: space-between;\n  -webkit-box-align: center;\n  align-items: center;\n  background-color: #ffffff;\n  font-size: 19.2px;\n  color: #070303;\n  font-weight: 400;\n  box-sizing: border-box;\n  margin: 0px;\n  flex: 0 0 35px;\n  border-bottom: 1px solid #d8dee8;\n}\n.m-editor-nav-menu > div {\n  display: flex;\n  height: 100%;\n  z-index: 1;\n  align-items: center;\n}\n.m-editor-nav-menu .menu-center {\n  justify-content: center;\n}\n.m-editor-nav-menu .menu-right {\n  justify-content: flex-end;\n}\n.m-editor-nav-menu .menu-item {\n  flex-direction: row;\n  -webkit-box-align: center;\n  align-items: center;\n  vertical-align: middle;\n  font-size: 14px;\n  line-height: 1;\n  height: 100%;\n  color: rgba(255, 255, 255, 0.7);\n  box-sizing: inherit;\n  z-index: 1;\n  display: flex !important;\n  transition: all 0.3s ease 0s;\n  border-bottom: 2px solid transparent;\n  margin: 0;\n}\n.m-editor-nav-menu .menu-item .is-disabled {\n  opacity: 0.5;\n}\n.m-editor-nav-menu .menu-item .is-text {\n  padding: 5px;\n}\n.m-editor-nav-menu .menu-item .is-text,\n.m-editor-nav-menu .menu-item i {\n  color: #070303;\n}\n.m-editor-nav-menu .menu-item .icon {\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  height: 100%;\n  padding: 0px 8px;\n}\n.m-editor-nav-menu .menu-item .menu-item-text {\n  color: #070303;\n}\n.m-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n.m-editor-content {\n  width: 100%;\n  height: calc(100% - 35px);\n  display: flex;\n  justify-self: space-between;\n}\n.m-editor-framework-center {\n  position: relative;\n  transform: translateZ(0);\n  flex: 1;\n}\n.m-editor-framework-left {\n  background-color: #ffffff;\n}\n.m-editor-framework-center .el-scrollbar__view {\n  height: 100%;\n  min-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-empty-panel {\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: calc(100% - 32px);\n}\n.m-editor-empty-content {\n  display: flex;\n  justify-content: space-evenly;\n  flex-direction: row;\n  width: 100%;\n}\n.m-editor-empty-button {\n  border: 3px solid rgba(0, 0, 0, 0.2);\n  padding: 10px 40px;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n}\n.m-editor-empty-button i {\n  height: 180px;\n  line-height: 180px;\n  font-size: 100px;\n}\n.m-editor-empty-button p {\n  text-align: center;\n  font-size: 20px;\n  margin-top: 5px;\n}\n.m-editor-empty-button:hover {\n  border-color: #2882e0;\n  color: #2882e0;\n}\n.m-editor-sidebar {\n  height: 100%;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header {\n  background: #2882e0;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {\n  width: 40px;\n  margin-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {\n  margin: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {\n  border: 0;\n  border-radius: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {\n  margin-left: 2px;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {\n  line-height: 15px;\n  border: 0;\n  height: auto;\n  padding: 8px;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {\n  background: #ffffff;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {\n  border-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i {\n  font-size: 25px;\n  color: rgba(255, 255, 255, 0.6);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {\n  color: rgb(255, 255, 255);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {\n  font-size: 12px;\n  white-space: normal;\n}\n.m-editor-sidebar .el-scrollbar {\n  height: 100%;\n}\n.m-editor-sidebar .el-tree {\n  min-height: 100%;\n}\n.m-editor-sidebar .fold-icon {\n  position: absolute;\n  bottom: 8px;\n  left: 0px;\n  width: 45px;\n  padding-left: 8px;\n  color: #fff;\n  font-size: 32px;\n  opacity: 0.8;\n  cursor: pointer;\n}\n.m-editor-sidebar .fold-icon:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n.m-editor-sidebar .el-tabs__content,\n.m-editor-sidebar .el-tab-pane {\n  height: 100%;\n}\n.magic-editor-layer-panel {\n  background: #ffffff;\n}\n.magic-editor-layer-panel .search-input {\n  background: #ffffff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n.magic-editor-layer-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.magic-editor-layer-panel .node-content {\n  flex: 1;\n  display: flex;\n  width: 100%;\n}\n.magic-editor-layer-panel .node-content > div {\n  width: 8px;\n}\n.magic-editor-layer-panel .node-content > span {\n  width: calc(100% - 68px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.magic-editor-layer-panel .node-content > i {\n  margin-right: 10px;\n  font-size: 20px;\n}\n.magic-editor-layer-panel .node-content > i.lock {\n  color: #bbb;\n}\n.magic-editor-layer-panel,\n.magic-editor-layer-panel .el-tree {\n  background-color: #ffffff;\n  color: #313a40;\n}\n.magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.magic-editor-layer-panel .cus-tree-node {\n  width: 100%;\n  overflow: hidden;\n}\n.magic-editor-layer-panel .cus-tree-node-hover {\n  background-color: #f3f5f9;\n  width: 100%;\n}\n.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.ui-tree-tip {\n  width: 100%;\n  height: 25px;\n  margin-left: 10px;\n  background: #ffffff;\n  font-style: italic;\n  color: #555554;\n  position: absolute;\n  top: 40px;\n  left: 0;\n  z-index: 1;\n}\n.ui-component-panel {\n  height: 100%;\n  border-top: 0 !important;\n  margin-top: 50px;\n  background-color: #ffffff;\n}\n.ui-component-panel .search-input {\n  background: #f8fbff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  z-index: 1;\n}\n.ui-component-panel .search-input .el-input__prefix {\n  padding: 10px;\n}\n.ui-component-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.ui-component-panel .el-collapse-item > div:first-of-type {\n  border-bottom: 1px solid #d9dbdd;\n  margin-bottom: 10px;\n}\n.ui-component-panel .el-collapse-item__header {\n  background: #ffffff;\n  color: #070303;\n  height: 25px;\n  line-height: 25px;\n  padding-left: 10px;\n  font-size: 12px;\n}\n.ui-component-panel .el-collapse-item__header i {\n  margin-right: 5px;\n  font-size: 14px;\n}\n.ui-component-panel .el-collapse-item__wrap {\n  background: #ffffff;\n  border-bottom: 0;\n}\n.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {\n  padding: 10px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item {\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  color: #070303;\n  flex-direction: column;\n  width: 42px;\n  cursor: pointer;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i {\n  font-size: 20px;\n  background: #fff;\n  height: 40px;\n  width: 40px;\n  line-height: 40px;\n  border-radius: 5px;\n  color: #909090;\n  border: 1px solid #d9dbdd;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  margin-bottom: 5px;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i:hover {\n  background: #2882e0;\n  color: #fff;\n  border-color: #4e8be1;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item span {\n  font-size: 12px;\n  text-align: center;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip {\n  width: 50px;\n  height: 30px;\n  line-height: 15px;\n  display: block;\n  white-space: normal;\n  margin: 0;\n}\n.m-editor-resizer {\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  width: 8px;\n  margin: 0 -5px;\n  height: 100%;\n  opacity: 0.9;\n  background: padding-box #d8dee8;\n  box-sizing: border-box;\n  cursor: col-resize;\n  z-index: 1;\n}\n.m-editor-resizer:hover {\n  border-color: #d8dee8;\n}\n.m-editor-resizer .icon-container {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.4s;\n  width: 20px;\n  height: 120px;\n  line-height: 120px;\n  text-align: center;\n  background: #d8dee8;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: pointer;\n}\n.m-editor-resizer .icon-container.position-left {\n  transform: translate(calc(-100% - 4px), -50%);\n}\n.m-editor-resizer .icon-container.position-right {\n  transform: translate(calc(100% + 4px), -50%);\n}\n.m-editor-resizer .icon {\n  color: #fff;\n  font-size: 18px;\n}\n.magic-editor-resizer:hover .icon-container {\n  visibility: visible;\n  opacity: 1;\n}\n.m-editor-workspace {\n  height: 100%;\n  width: 100%;\n  user-select: none;\n}\n.m-editor-workspace:focus-visible {\n  outline: 0;\n}\n.m-editor-page-bar {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  width: 100%;\n  height: 32px;\n  line-height: 32px;\n  color: #070303;\n  background-color: #f3f3f3;\n  border-top: 1px solid #d9dbdd;\n  z-index: 2;\n  overflow: hidden;\n}\n.m-editor-page-bar-items {\n  display: flex;\n  transition: transform 0.3s;\n}\n.m-editor-page-bar-item {\n  padding: 0 10px;\n  cursor: pointer;\n  border-right: 1px solid #d9dbdd;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n  background-color: #f3f3f3;\n  white-space: nowrap;\n}\n.m-editor-page-bar-item.active {\n  background-color: #fff;\n  cursor: text;\n}\n.m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {\n  cursor: pointer;\n}\n.m-editor-page-bar-item-icon {\n  position: relative;\n  z-index: 1;\n}\n.m-editor-page-bar-item-title {\n  max-width: 150px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.page-bar-popover.el-popper.el-popover {\n  padding: 10px 0;\n}\n.page-bar-popover .menu-item {\n  cursor: pointer;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n}\n.page-bar-popover .menu-item .el-button--text,\n.page-bar-popover .menu-item i {\n  color: #070303;\n}\n.page-bar-popover .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-props-panel {\n  padding: 0 10px;\n}\n.m-editor-props-panel.small .el-form-item__label {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .m-fieldset legend {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .el-tabs__item {\n  font-size: 12px;\n}\n.m-editor-props-panel .el-input__wrapper {\n  border-radius: 0;\n}\n.m-editor-props-panel-popper.small span,\n.m-editor-props-panel-popper.small a,\n.m-editor-props-panel-popper.small p {\n  font-size: 12px;\n}\n.magic-editor-content-menu {\n  position: fixed;\n  font-size: 12px;\n  background: #fff;\n  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);\n  z-index: 9999;\n  transform-origin: 0% 0%;\n  font-weight: 600;\n  padding: 4px 0px;\n  overflow: auto;\n  max-height: 100%;\n}\n.magic-editor-content-menu .menu-item {\n  color: #333;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n  min-width: 140px;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n  border-left: 2px solid transparent;\n}\n.magic-editor-content-menu .menu-item .el-button {\n  width: 100%;\n  justify-content: flex-start;\n}\n.magic-editor-content-menu .menu-item .el-button--text,\n.magic-editor-content-menu .menu-item i {\n  color: #070303;\n}\n.magic-editor-content-menu .menu-item.divider {\n  padding: 0 14px;\n}\n.magic-editor-content-menu .menu-item.divider .el-divider {\n  margin: 0;\n}\n.magic-editor-content-menu .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-stage {\n  position: relative;\n  width: 100%;\n  height: calc(100% - 32px);\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-stage-container {\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  position: relative;\n  transition: transform 0.3s;\n  box-sizing: content-box;\n  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;\n}\n.m-editor-stage-container::-webkit-scrollbar {\n  width: 0 !important;\n}\n.magic-code-editor {\n  width: 100%;\n}\n.magic-code-editor .margin {\n  margin: 0;\n}")();
 
   const defaultInstallOpt = {};
   var index = {