easy-email-extensions 3.2.1-alpha.0 → 3.2.1-alpha.12

package/lib/AttributePanel/components/attributes/FontFamily.d.ts

@@ -1 +1,3 @@
-export declare function FontFamily(): JSX.Element;
+export declare function FontFamily({ name }: {
+    name?: string;
+}): JSX.Element;

package/lib/AttributePanel/components/attributes/FontStyle.d.ts

@@ -1 +1,3 @@
-export declare function FontStyle(): JSX.Element;
+export declare function FontStyle({ name }: {
+    name?: string;
+}): JSX.Element;

package/lib/AttributePanel/components/attributes/FontWeight.d.ts

@@ -1 +1,3 @@
-export declare function FontWeight(): JSX.Element;
+export declare function FontWeight({ name }: {
+    name?: string;
+}): JSX.Element;

package/lib/AttributePanel/components/attributes/LetterSpacing.d.ts

@@ -1 +1,3 @@
-export declare function LetterSpacing(): JSX.Element;
+export declare function LetterSpacing({ name }: {
+    name?: string;
+}): JSX.Element;

package/lib/AttributePanel/components/attributes/LineHeight.d.ts

@@ -1 +1,3 @@
-export declare function LineHeight(): JSX.Element;
+export declare function LineHeight({ name }: {
+    name?: string;
+}): JSX.Element;

package/lib/AttributePanel/components/attributes/Padding.d.ts

@@ -1,5 +1,6 @@
 export interface PaddingProps {
     title?: string;
     attributeName?: 'padding' | 'inner-padding' | 'text-padding';
+    name?: string;
 }
 export declare function Padding(props?: PaddingProps): JSX.Element;

package/lib/AttributePanel/components/attributes/TextAlign.d.ts

@@ -1 +1,3 @@
-export declare function TextAlign(): JSX.Element;
+export declare function TextAlign({ name }: {
+    name?: string;
+}): JSX.Element;

package/lib/AttributePanel/components/attributes/TextDecoration.d.ts

@@ -1 +1,3 @@
-export declare function TextDecoration(): JSX.Element;
+export declare function TextDecoration({ name }: {
+    name?: string;
+}): JSX.Element;

package/lib/AttributePanel/components/attributes/TextTransform.d.ts

@@ -1 +1,3 @@
-export declare function TextTransform(): JSX.Element;
+export declare function TextTransform({ name }: {
+    name?: string;
+}): JSX.Element;

package/lib/SimpleLayout/SimpleLayout.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import { BlockLayerProps } from '../BlockLayer';
 export declare const SimpleLayout: React.FC<{
     showSourceCode?: boolean;
+    defaultShowLayer?: boolean;
 } & BlockLayerProps>;

package/lib/index2.js

@@ -56,7 +56,7 @@ var __async = (__this, __arguments, generator) => {
 import * as React from "react";
 import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, createRef, useImperativeHandle, PureComponent, useCallback, useReducer, Fragment, createElement, Suspense } from "react";
 import { IconFont, useEditorProps, Stack as Stack$6, getShadowRoot, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, getEditNode, MergeTagBadge as MergeTagBadge$1, FIXED_CONTAINER_ID, getPluginElement, isTextBlock, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, useRefState, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getBlockNodeByIdx, useLazyState, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
-import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
+import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
 import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
 var index$2 = "";
@@ -39048,6 +39048,7 @@ function ColorPicker(props) {
 }
 function Select(props) {
   return /* @__PURE__ */ React__default.createElement(Select$2, __spreadProps(__spreadValues({}, props), {
+    dropdownMenuClassName: "easy-email-overlay",
     style: lodash.exports.merge({ width: "100%" }, props.style),
     value: props.value,
     onChange: props.onChange
@@ -39346,6 +39347,7 @@ function EditTab(props) {
     props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
   };
   return /* @__PURE__ */ React__default.createElement(Tabs$1, {
+    destroyOnHide: true,
     className: classnames(styles$3.editTab),
     style: { border: "none" },
     type: "card",
@@ -39832,7 +39834,7 @@ function EyeIcon() {
     onClick: onToggleVisible
   });
 }
-function FontFamily() {
+function FontFamily({ name }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const { fontList: fontList2 } = useFontFamily();
   return useMemo(() => {
@@ -39840,10 +39842,10 @@ function FontFamily() {
       style: { minWidth: 100, flex: 1 },
       showSearch: true,
       label: "Font family",
-      name: `${focusIdx2}.attributes.font-family`,
+      name: name || `${focusIdx2}.attributes.font-family`,
       options: fontList2
     });
-  }, [focusIdx2, fontList2]);
+  }, [focusIdx2, fontList2, name]);
 }
 function Page() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -39885,7 +39887,9 @@ function Page() {
     spacing: "tight"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
-  }, /* @__PURE__ */ React__default.createElement(FontFamily, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+  }, /* @__PURE__ */ React__default.createElement(FontFamily, {
+    name: `${focusIdx2}.data.value.font-family`
+  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
@@ -39920,13 +39924,23 @@ function Page() {
   }), /* @__PURE__ */ React__default.createElement(AddFont, null))))));
 }
 function Padding(props = {}) {
-  const { title: title2 = "Padding", attributeName = "padding" } = props;
-  const { focusBlock: focusBlock2, change } = useBlock();
+  const { title: title2 = "Padding", attributeName = "padding", name } = props;
+  const { focusBlock: focusBlock2, change, values: values2 } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const type = focusBlock2 && focusBlock2.type;
   const defaultConfig = useMemo(() => type ? createBlockDataByType(type) : void 0, [type]);
-  const paddingValue = focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName];
-  const defaultPaddingValue = defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName];
+  const paddingValue = useMemo(() => {
+    if (name) {
+      return lodash.exports.get(values2, name);
+    }
+    return focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName];
+  }, [attributeName, focusBlock2 == null ? void 0 : focusBlock2.attributes, name, values2]);
+  const defaultPaddingValue = useMemo(() => {
+    if (name) {
+      return null;
+    }
+    return defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName];
+  }, [attributeName, defaultConfig == null ? void 0 : defaultConfig.attributes, name]);
   const paddingFormValues = useMemo(() => {
     const paddingList = paddingValue == null ? void 0 : paddingValue.split(" ");
     const defaultPaddingList = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
@@ -39942,8 +39956,12 @@ function Padding(props = {}) {
     };
   }, [defaultPaddingValue, paddingValue]);
   const onChancePadding = useCallback((val) => {
-    change(focusIdx2 + `.attributes[${attributeName}]`, val);
-  }, [focusIdx2, attributeName, change]);
+    if (name) {
+      change(name, val);
+    } else {
+      change(focusIdx2 + `.attributes[${attributeName}]`, val);
+    }
+  }, [name, change, focusIdx2, attributeName]);
   return /* @__PURE__ */ React__default.createElement(Form$3, {
     initialValues: paddingFormValues,
     subscription: { submitting: true, pristine: true },
@@ -40162,7 +40180,7 @@ function Condition() {
               groups: [
                 {
                   left: "",
-                  operator: Operator.EQUAL,
+                  operator: Operator.TRUTHY,
                   right: ""
                 }
               ]
@@ -40180,7 +40198,7 @@ function Condition() {
       groups: [
         {
           left: "",
-          operator: Operator.EQUAL,
+          operator: Operator.TRUTHY,
           right: ""
         }
       ]
@@ -40191,7 +40209,7 @@ function Condition() {
     const groups = lodash.exports.get(values2, path);
     groups.push({
       left: "",
-      operator: Operator.EQUAL,
+      operator: Operator.TRUTHY,
       right: ""
     });
     change(path, [...groups]);
@@ -40298,12 +40316,14 @@ function Condition() {
 const options$b = Object.values(Operator).map((item2) => ({ label: lodash.exports.upperFirst(item2), value: item2 }));
 function ConditionItem({ path, onDelete, gIndex, ggIndex }) {
   const name = `${path}.${gIndex}.groups.${ggIndex}`;
+  const { input: { value } } = useField(name);
+  const hideRight = value.operator === Operator.TRUTHY || value.operator === Operator.FALSY;
   return /* @__PURE__ */ React__default.createElement(Grid.Row, {
     align: "end"
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 7
   }, " ", /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Left",
+    label: "Variable path",
     name: `${name}.left`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 7
@@ -40313,7 +40333,7 @@ function ConditionItem({ path, onDelete, gIndex, ggIndex }) {
     options: options$b
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 7
-  }, " ", /* @__PURE__ */ React__default.createElement(TextField, {
+  }, " ", !hideRight && /* @__PURE__ */ React__default.createElement(TextField, {
     label: "Right",
     name: `${name}.right`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -40355,7 +40375,8 @@ const CollapseWrapper = (props) => {
   }, [conditionEnabled, isAdvancedBlockType]);
   return /* @__PURE__ */ React__default.createElement(Space$1, {
     size: "large",
-    direction: "vertical"
+    direction: "vertical",
+    style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement(Collapse$1, {
     onChange,
     activeKey: activeKeys
@@ -40531,15 +40552,15 @@ const options$9 = [
     label: "Inherit"
   }
 ];
-function TextDecoration() {
+function TextDecoration({ name }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(SelectField, {
       label: "Text decoration",
-      name: `${focusIdx2}.attributes.text-decoration`,
+      name: name || `${focusIdx2}.attributes.text-decoration`,
       options: options$9
     });
-  }, [focusIdx2]);
+  }, [focusIdx2, name]);
 }
 const options$8 = [
   {
@@ -40587,15 +40608,15 @@ const options$8 = [
     label: "900"
   }
 ];
-function FontWeight() {
+function FontWeight({ name }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(SelectField, {
       label: "Font weight",
-      name: `${focusIdx2}.attributes.font-weight`,
+      name: name || `${focusIdx2}.attributes.font-weight`,
       options: options$8
     });
-  }, [focusIdx2]);
+  }, [focusIdx2, name]);
 }
 const options$7 = [
   {
@@ -40607,11 +40628,11 @@ const options$7 = [
     label: "Italic"
   }
 ];
-function FontStyle() {
+function FontStyle({ name }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
     label: "Font style",
-    name: `${focusIdx2}.attributes.font-style`,
+    name: name || `${focusIdx2}.attributes.font-style`,
     options: options$7
   });
 }
@@ -40681,19 +40702,19 @@ function Align({ inline }) {
     options: options$6
   });
 }
-function LineHeight() {
+function LineHeight({ name }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
     label: "Line height",
     unitOptions: "percent",
-    name: `${focusIdx2}.attributes.line-height`
+    name: name || `${focusIdx2}.attributes.line-height`
   });
 }
-function LetterSpacing() {
+function LetterSpacing({ name }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
     label: "Letter spacing",
-    name: `${focusIdx2}.attributes.letter-spacing`
+    name: name || `${focusIdx2}.attributes.letter-spacing`
   });
 }
 const ShadowDom = (props) => {
@@ -40992,15 +41013,15 @@ const options$5 = [
     label: "Right"
   }
 ];
-function TextAlign() {
+function TextAlign({ name }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
       label: "Text align",
-      name: `${focusIdx2}.attributes.text-align`,
+      name: name || `${focusIdx2}.attributes.text-align`,
       options: options$5
     }));
-  }, [focusIdx2]);
+  }, [focusIdx2, name]);
 }
 function Decoration() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -41034,7 +41055,7 @@ function Decoration() {
 }
 const options$4 = [
   {
-    value: "",
+    value: "initial",
     label: "none"
   },
   {
@@ -41050,15 +41071,15 @@ const options$4 = [
     label: "capitalize"
   }
 ];
-function TextTransform() {
+function TextTransform({ name }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(SelectField, {
       label: "Text transform",
-      name: `${focusIdx2}.attributes.text-transform`,
+      name: name || `${focusIdx2}.attributes.text-transform`,
       options: options$4
     });
-  }, [focusIdx2]);
+  }, [focusIdx2, name]);
 }
 const options$3 = [
   {
@@ -41288,72 +41309,14 @@ function BorderStyle() {
   }, [focusIdx2]);
 }
 function NavbarLinkPadding({ name }) {
-  const { values: values2 } = useBlock();
-  const getVal = useCallback((index2) => {
-    return () => {
-      var _a;
-      return ((_a = lodash.exports.get(values2, name)) == null ? void 0 : _a.split(" ")[index2]) || "";
-    };
-  }, [name, values2]);
-  const setVal = useCallback((index2) => {
-    return (newVal) => {
-      if (newVal === "") {
-        newVal = "0px";
-      }
-      const vals = [
-        getVal(0)(),
-        getVal(1)(),
-        getVal(2)(),
-        getVal(3)()
-      ];
-      vals[index2] = newVal;
-      return vals.join(" ");
-    };
-  }, [getVal]);
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(Stack$6, {
       vertical: true,
       spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      variation: "strong"
-    }, "Padding"), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Top"),
-      quickchange: true,
-      name,
-      valueAdapter: getVal(0),
-      onChangeAdapter: setVal(0)
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Bottom",
-      quickchange: true,
-      name,
-      valueAdapter: getVal(2),
-      onChangeAdapter: setVal(2)
-    }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Left"),
-      quickchange: true,
-      name,
-      valueAdapter: getVal(3),
-      onChangeAdapter: setVal(3)
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Right\xA0"),
-      quickchange: true,
-      name,
-      valueAdapter: getVal(1),
-      onChangeAdapter: setVal(1)
-    }))));
-  }, [getVal, name, setVal]);
+    }, /* @__PURE__ */ React__default.createElement(Padding, {
+      name
+    }));
+  }, [name]);
 }
 function BorderWidth() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -42010,6 +41973,9 @@ function Navbar() {
     contentStyle: { padding: 0 },
     name: "1",
     header: "Navbar links"
+  }, /* @__PURE__ */ React__default.createElement(Space$1, {
+    direction: "vertical",
+    style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement(EditTabField, {
     tabPosition: "top",
     name: `${focusIdx2}.data.value.links`,
@@ -42026,7 +41992,7 @@ function Navbar() {
       color: "#1890ff",
       "font-size": "13px"
     }
-  })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+  }), /* @__PURE__ */ React__default.createElement("div", null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
     header: "Extra"
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -42038,16 +42004,16 @@ function NavbarLink({
   index: index2
 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(Space$1, {
-    direction: "vertical"
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: "NavbarLink"
+  }, /* @__PURE__ */ React__default.createElement(Space$1, {
+    direction: "vertical",
+    style: { width: "100%" }
+  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
     label: "Content",
     name: `${focusIdx2}.data.value.links.[${index2}].content`
-  }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Font size",
-    name: `${focusIdx2}.data.value.links.[${index2}].font-size`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
@@ -42057,6 +42023,44 @@ function NavbarLink({
     alignment: "center"
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
+  }, /* @__PURE__ */ React__default.createElement(FontFamily, {
+    name: `${focusIdx2}.data.value.links.[${index2}].font-family`
+  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Font size",
+    quickchange: true,
+    name: `${focusIdx2}.data.value.links.[${index2}].font-size`
+  }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(LineHeight, {
+    name: `${focusIdx2}.data.value.links.[${index2}].line-height`
+  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(LetterSpacing, {
+    name: `${focusIdx2}.data.value.links.[${index2}].letter-spacing`
+  }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(TextDecoration, {
+    name: `${focusIdx2}.data.value.links.[${index2}].text-decoration`
+  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(FontWeight, {
+    name: `${focusIdx2}.data.value.links.[${index2}].font-weight`
+  }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(TextTransform, {
+    name: `${focusIdx2}.data.value.links.[${index2}].text-transform`
+  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  })), /* @__PURE__ */ React__default.createElement(FontStyle, {
+    name: `${focusIdx2}.data.value.links.[${index2}].font-style`
+  }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
     prefix: /* @__PURE__ */ React__default.createElement(IconLink$1, null),
     label: /* @__PURE__ */ React__default.createElement("span", null, "Url"),
@@ -42081,7 +42085,7 @@ function NavbarLink({
   }))), /* @__PURE__ */ React__default.createElement(NavbarLinkPadding, {
     key: index2,
     name: `${focusIdx2}.data.value.links.[${index2}].padding`
-  }));
+  }), /* @__PURE__ */ React__default.createElement("div", null)));
 }
 const options = [
   {
@@ -42349,10 +42353,9 @@ function AttributePanel() {
   const { values: values2, focusBlock: focusBlock2 } = useBlock();
   const { initialized } = useEditorContext();
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  const value = getValueByIdx(values2, focusIdx2);
   const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
   const shadowRoot = getShadowRoot();
-  if (!value || !initialized)
+  if (!initialized)
     return null;
   return /* @__PURE__ */ React__default.createElement(SelectionRangeProvider, null, /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, {
     key: focusIdx2
@@ -42798,7 +42801,7 @@ function FontSize(props) {
   }));
 }
 function Tools(props) {
-  const { mergeTags: mergeTags2 } = useEditorProps();
+  const { mergeTags: mergeTags2, enabledMergeTagsBadge } = useEditorProps();
   const { focusBlockNode } = useFocusBlockLayout();
   const { selectionRange, restoreRange, setRangeByElement } = useSelectionRange();
   const execCommand = (cmd, val) => {
@@ -42834,7 +42837,10 @@ function Tools(props) {
       link.style.textDecoration = linkData.underline ? "underline" : "none";
       link.setAttribute("href", linkData.link);
     } else if (cmd === "insertHTML") {
-      const newContent = MergeTagBadge$1.transform(val, uuid2);
+      let newContent = val;
+      if (enabledMergeTagsBadge) {
+        newContent = MergeTagBadge$1.transform(val, uuid2);
+      }
       document.execCommand(cmd, false, newContent);
       const insertMergeTagEle = getShadowRoot().getElementById(uuid2);
       if (insertMergeTagEle) {
@@ -46305,7 +46311,7 @@ function TipNode(props) {
     style: {
       position: "absolute",
       left: 0,
-      bottom: 0
+      top: 0
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
@@ -46318,7 +46324,7 @@ function TipNode(props) {
       boxSizing: "border-box",
       whiteSpace: "nowrap",
       fontFamily: "sans-serif",
-      transform: "translateY(100%)"
+      transform: "translateY(-100%)"
     }
   }, title2))), props.isDragging && /* @__PURE__ */ React__default.createElement("div", {
     style: __spreadValues({
@@ -46419,13 +46425,13 @@ function InteractivePrompt() {
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(HoverTooltip, null), /* @__PURE__ */ React__default.createElement(FocusTooltip, null));
 }
-const SimpleLayout$1 = "_SimpleLayout_2xr2p_1";
-const rightSide = "_rightSide_2xr2p_5";
-const customScrollBar = "_customScrollBar_2xr2p_9";
+const SimpleLayout$1 = "_SimpleLayout_1olgv_1";
+const customScrollBar = "_customScrollBar_1olgv_8";
+const customScrollBarV2 = "_customScrollBarV2_1olgv_24";
 var styles = {
   SimpleLayout: SimpleLayout$1,
-  rightSide,
-  customScrollBar
+  customScrollBar,
+  customScrollBarV2
 };
 var Calendar = {
   formatYear: "YYYY",
@@ -46617,6 +46623,15 @@ function MergeTagBadge() {
       window.removeEventListener("click", onBlur3);
     };
   }, [targetRef, popoverRef]);
+  const onClose = useCallback(() => {
+    let ele = targetRef.current;
+    setTimeout(() => {
+      if (!ele)
+        return;
+      focusMergeTag(ele);
+    }, 100);
+    setTarget(null);
+  }, [focusMergeTag, targetRef]);
   useEffect(() => {
     if (!root2)
       return;
@@ -46627,6 +46642,10 @@ function MergeTagBadge() {
       if (target22 instanceof HTMLInputElement && target22.classList.contains("easy-email-merge-tag")) {
         target22.classList.add("easy-email-merge-tag-focus");
         const namePath = target22.value;
+        if (!onChangeMergeTag) {
+          focusMergeTag(target22);
+          return;
+        }
         setText(lodash.exports.get(mergeTags2, namePath, ""));
         setTarget(target22);
       } else {
@@ -46639,16 +46658,7 @@ function MergeTagBadge() {
     return () => {
       root2.removeEventListener("click", onClick2);
     };
-  }, [focusMergeTag, mergeTags2, root2]);
-  const onClose = useCallback(() => {
-    let ele = targetRef.current;
-    setTimeout(() => {
-      if (!ele)
-        return;
-      focusMergeTag(ele);
-    }, 100);
-    setTarget(null);
-  }, [focusMergeTag, targetRef]);
+  }, [focusMergeTag, mergeTags2, onChangeMergeTag, root2]);
   const onChange = useCallback((ev) => {
     setText(ev.target.value);
   }, []);
@@ -46704,8 +46714,8 @@ function MergeTagBadge() {
 }
 const SimpleLayout = (props) => {
   const { height: containerHeight } = useEditorProps();
-  const { showSourceCode = true } = props;
-  const [collapsed, setCollapsed] = useState(false);
+  const { showSourceCode = true, defaultShowLayer = true } = props;
+  const [collapsed, setCollapsed] = useState(!defaultShowLayer);
   return /* @__PURE__ */ React__default.createElement(ConfigProvider, {
     locale: enUS
   }, /* @__PURE__ */ React__default.createElement(Layout$1, {
@@ -46772,13 +46782,19 @@ const SimpleLayout = (props) => {
       borderLeft: "none"
     },
     bodyStyle: { padding: 0 },
-    className: styles.customScrollBar
-  }, /* @__PURE__ */ React__default.createElement(Tabs$1, null, /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
-    key: "Configuration",
-    title: "Configuration"
+    className: styles.customScrollBarV2
+  }, /* @__PURE__ */ React__default.createElement(Tabs$1, {
+    className: styles.layoutTabs
+  }, /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
+    title: /* @__PURE__ */ React__default.createElement("div", {
+      style: { height: 31, lineHeight: "31px" }
+    }, "Configuration")
   }, /* @__PURE__ */ React__default.createElement(AttributePanel, null)), showSourceCode && /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
+    destroyOnHide: true,
     key: "Source code",
-    title: "Source code"
+    title: /* @__PURE__ */ React__default.createElement("div", {
+      style: { height: 31, lineHeight: "31px" }
+    }, "Source code")
   }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadge, null)));
 };
 export { AutoCompleteField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, SimpleLayout as E, FontFamily as F, TextField as G, Height as H, InteractivePrompt as I, InputWithUnitField as J, SearchField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, TextAreaField as O, Padding as P, NumberField as Q, SliderField as R, ShortcutToolbar as S, TextAlign as T, ColorPickerField as U, VerticalAlign as V, Width as W, UploadField as X, ImageUploaderField as Y, SelectField as Z, TreeSelectField as _, getIconNameByBlockType as a, RadioGroupField as a0, SwitchField as a1, DatePickerField as a2, CheckboxField as a3, EditTabField as a4, InlineTextField as a5, enhancer as a6, RichTextField as a7, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, ContainerBackgroundColor as h, TextDecoration as i, Background as j, LineHeight as k, TextTransform as l, BackgroundColor as m, Direction as n, Link as o, Border as p, BorderColor as q, FontSize$1 as r, MergeTags$1 as s, BorderStyle as t, FontStyle as u, BorderWidth as v, FontWeight as w, BlockMarketManager as x, BlockMaskWrapper as y, SourceCodePanel as z };