easy-email-pro-theme 1.40.3 → 1.41.0

package/lib/index.js

@@ -511,7 +511,7 @@ const styleText$g = `@font-face {
 }
 
 `;
-const RetroStyleText = '[data-slate-block=page] {\n  min-height: 300px;\n}\n\n[data-slate-category=navbar]::after,\n[data-slate-category=social]::after {\n  content: "";\n  left: 0;\n  top: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: default;\n}\n\n[data-slate-hover=true] {\n  z-index: 4;\n}\n\n[data-slate-focus=true] {\n  z-index: 3;\n}\n\n[data-slate-selected=true] {\n  z-index: 3;\n}\n\n[data-slate-hover=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-void=true] [data-slate-node=element][data-slate-block=button]:hover,\n[data-slate-void=true] [data-slate-node=element][data-slate-block=text]:hover {\n  outline: 2px solid var(--hover-color);\n}\n\n.text-mergetag {\n  outline: 1px solid rgb(78, 89, 105);\n  outline-offset: 1px;\n  padding: 0 2px;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s linear;\n  border: none;\n  font-weight: inherit;\n  outline-color: #00a0ac;\n  color: inherit;\n  background-color: #ebf9fc;\n  max-width: 10em;\n  font-style: inherit;\n  text-decoration-line: inherit;\n  position: relative;\n}\n\n.text-mergetag [data-slate-string=true] {\n  font-size: 0px;\n}\n\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\n\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\n\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\n\n[data-is-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n#dragging-placeholder .element-tools-container {\n  opacity: 1 !important;\n}\n\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\n\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  opacity: 0.8;\n}\n\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\n\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\n\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\n\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.unset-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-slate-universal-editing=true] .universal-element-mask {\n  display: none;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}';
+const RetroStyleText = '[data-slate-block=page] {\n  min-height: 300px;\n}\n\n[data-slate-category=navbar]::after,\n[data-slate-category=social]::after {\n  content: "";\n  left: 0;\n  top: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: default;\n}\n\n[data-slate-hover=true] {\n  z-index: 4;\n}\n\n[data-slate-focus=true] {\n  z-index: 3;\n}\n\n[data-slate-selected=true] {\n  z-index: 3;\n}\n\n[data-slate-hover=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-selected=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-void=true] [data-slate-node=element][data-slate-block=button]:hover,\n[data-slate-void=true] [data-slate-node=element][data-slate-block=text]:hover {\n  outline: 2px solid var(--hover-color);\n}\n\n.text-mergetag {\n  outline: 1px solid rgb(78, 89, 105);\n  outline-offset: 1px;\n  padding: 0 2px;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s linear;\n  border: none;\n  font-weight: inherit;\n  outline-color: #00a0ac;\n  color: inherit;\n  background-color: #ebf9fc;\n  max-width: 10em;\n  font-style: inherit;\n  text-decoration-line: inherit;\n  position: relative;\n}\n\n.text-mergetag [data-slate-string=true] {\n  font-size: 0px;\n}\n\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\n\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\n\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\n\n[data-is-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n#dragging-placeholder .element-tools-container {\n  opacity: 1 !important;\n}\n\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\n\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  opacity: 0.8;\n}\n\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\n\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\n\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\n\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.unset-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-slate-universal-editing=true] .universal-element-mask {\n  display: none;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}';
 const withTheme$1 = (editor) => {
   const { insertBreak, normalizeNode, deleteBackward, apply: apply3, insertSoftBreak } = editor;
   editor.insertBreak = (...args) => {
@@ -1876,10 +1876,12 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
     quantityLimitCheck,
     ElementTools: ElementTools2,
     ElementToolsInner,
-    showDragMoveIcon
+    showDragMoveIcon,
+    showPreviousLevelIcon
   } = useEditorProps();
   const { open } = useUniversalContent();
   const { setSelectedNodePath, universalElementEditing, universalElementPath } = useEditorState();
+  const isPage = NodeUtils.isPageElement(element);
   const { dragHandle: dragHandle2 } = useDragging({
     element,
     nodeElement,
@@ -1916,6 +1918,14 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
     const path22 = ReactEditor.findPath(editor, element);
     deleteBlock(path22);
   });
+  const onSelectParent = useEventCallback((ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    setTimeout(() => {
+      Transforms.deselect(editor);
+      setSelectedNodePath(Path.parent(path2));
+    }, 100);
+  });
   const isSectionCategory = BlockManager.getBlockByType(
     element.type
   ).category.includes(ElementCategory.SECTION);
@@ -1976,7 +1986,14 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
           nodeElement,
           path: path2
         }
-      ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !isEditingUniversalElement && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: onCopy }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-copy" })), universalElementSetting && !universalElementEditing && !isUniversalElement && /* @__PURE__ */ React__default.createElement(
+      ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, showPreviousLevelIcon && !isPage && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "element-tools-item",
+          onPointerDown: onSelectParent
+        },
+        /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-back-parent" })
+      ), !isEditingUniversalElement && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: onCopy }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-copy" })), universalElementSetting && !universalElementEditing && !isUniversalElement && /* @__PURE__ */ React__default.createElement(
         "div",
         {
           className: "element-tools-item",
@@ -6857,7 +6874,7 @@ const disableInteraction = "_disableInteraction_ng4f3_110";
 const disableSelection = "_disableSelection_ng4f3_114";
 const Collapse = "_Collapse_ng4f3_122";
 const collapsed = "_collapsed_ng4f3_125";
-const styles$3 = {
+const styles$4 = {
   Wrapper: Wrapper$1,
   clone,
   TreeItem: TreeItem$1,
@@ -6873,7 +6890,7 @@ const styles$3 = {
   collapsed
 };
 const Action$1 = "_Action_armtj_1";
-const styles$2 = {
+const styles$3 = {
   Action: Action$1
 };
 const Action = forwardRef(
@@ -6884,7 +6901,7 @@ const Action = forwardRef(
       __spreadProps(__spreadValues({
         ref: ref2
       }, props), {
-        className: classnames$1(styles$2.Action, className),
+        className: classnames$1(styles$3.Action, className),
         tabIndex: 0,
         style: __spreadProps(__spreadValues({}, style2), {
           cursor,
@@ -6971,13 +6988,13 @@ const TreeItem = forwardRef(
       "li",
       __spreadValues({
         className: classnames$1(
-          styles$3.Wrapper,
-          clone2 && styles$3.clone,
-          ghost2 && styles$3.ghost,
-          selected2 && styles$3.selected,
-          indicator2 && styles$3.indicator,
-          disableSelection2 && styles$3.disableSelection,
-          disableInteraction2 && styles$3.disableInteraction
+          styles$4.Wrapper,
+          clone2 && styles$4.clone,
+          ghost2 && styles$4.ghost,
+          selected2 && styles$4.selected,
+          indicator2 && styles$4.indicator,
+          disableSelection2 && styles$4.disableSelection,
+          disableInteraction2 && styles$4.disableInteraction
         ),
         ref: wrapperRef,
         style: {
@@ -6987,7 +7004,7 @@ const TreeItem = forwardRef(
       /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: styles$3.TreeItem,
+          className: styles$4.TreeItem,
           ref: ref2,
           style: style2,
           onClick: onSelect,
@@ -7001,17 +7018,17 @@ const TreeItem = forwardRef(
               onCollapse();
             },
             className: classnames$1(
-              styles$3.Collapse,
-              collapsed2 && styles$3.collapsed
+              styles$4.Collapse,
+              collapsed2 && styles$4.collapsed
             )
           },
           collapseIcon
         ),
-        /* @__PURE__ */ React__default.createElement("span", { className: styles$3.Text }, renderTitle(item2)),
+        /* @__PURE__ */ React__default.createElement("span", { className: styles$4.Text }, renderTitle(item2)),
         !clone2 && onRemove && /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$3.hoverHandle,
+            className: styles$4.hoverHandle,
             style: { visibility: removable ? void 0 : "hidden" }
           },
           /* @__PURE__ */ React__default.createElement(
@@ -7024,11 +7041,11 @@ const TreeItem = forwardRef(
             }
           )
         ),
-        clone2 && childCount && childCount > 1 ? /* @__PURE__ */ React__default.createElement("span", { className: styles$3.Count }, childCount) : null,
+        clone2 && childCount && childCount > 1 ? /* @__PURE__ */ React__default.createElement("span", { className: styles$4.Count }, childCount) : null,
         /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$3.hoverHandle,
+            className: styles$4.hoverHandle,
             style: { visibility: moveable ? void 0 : "hidden" }
           },
           /* @__PURE__ */ React__default.createElement(Handle, __spreadValues({}, handleProps))
@@ -8053,9 +8070,63 @@ const TabHeader = (props) => {
     /* @__PURE__ */ React__default.createElement("div", { style: { position: "absolute", right: 0 } }, props.right)
   ));
 };
+const hoverUnderline = "_hoverUnderline_8d8dl_1";
+const styles$2 = {
+  hoverUnderline
+};
+function BlockPaths() {
+  const { selectedNodePath, setSelectedNodePath } = useSelectedNode();
+  const editor = useSlate();
+  const paths = useMemo$1(() => {
+    const paths2 = [];
+    let prev = selectedNodePath || [0];
+    while (prev) {
+      const current = Node$1.get(editor, prev);
+      if (!current)
+        break;
+      paths2.push({ name: BlockManager.getBlockTitle(current), path: prev });
+      if (NodeUtils.isPageElement(current)) {
+        prev = null;
+      } else {
+        prev = Path.parent(prev);
+      }
+    }
+    return paths2.reverse();
+  }, [editor, selectedNodePath]);
+  return useMemo$1(() => {
+    return /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex" } }, paths.map((item2, index2) => {
+      const isLast = index2 === paths.length - 1;
+      return /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          key: index2,
+          style: {
+            cursor: "pointer",
+            fontSize: 12,
+            lineHeight: 1,
+            fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif
+            -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto`,
+            color: isLast ? "#000b1d" : "#666",
+            fontWeight: isLast ? "bold" : void 0,
+            marginLeft: index2 === 0 ? 10 : 4
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          "span",
+          {
+            className: styles$2.hoverUnderline,
+            onClick: () => setSelectedNodePath(item2.path)
+          },
+          item2.name
+        ),
+        !isLast && /* @__PURE__ */ React__default.createElement("span", { style: { marginLeft: 4 } }, "-")
+      );
+    }));
+  }, [paths, setSelectedNodePath]);
+}
 const EditorTabs = (props) => {
   const { clearCanvas } = useElementInteract();
-  const { readOnly, showPreview } = useEditorProps();
+  const { readOnly, showPreview, showBlockPaths } = useEditorProps();
   const [headerEle, setHeaderEle] = useState(null);
   const [footerEle, setFooterEle] = useState(null);
   const [headerEleHeight, setHeaderEleHeight] = useState(0);
@@ -8124,7 +8195,7 @@ const EditorTabs = (props) => {
         },
         /* @__PURE__ */ React__default.createElement(IconEye, null)
       )))), /* @__PURE__ */ React__default.createElement("div", null)),
-      left: null
+      left: /* @__PURE__ */ React__default.createElement("div", null, showBlockPaths && /* @__PURE__ */ React__default.createElement(BlockPaths, null))
     }
   ), /* @__PURE__ */ React__default.createElement(
     "div",
@@ -15801,38 +15872,12 @@ const TextAlign$1 = () => {
     mode: "all"
   });
   const node = match2 == null ? void 0 : match2[0];
+  const { setFieldValue } = useEditorContext();
   const matchAlign = match2 && get(node.attributes, "align");
   const onAlignHandle = (align) => {
-    const htmlBlockNodeElementEntry = Editor.above(editor, {
-      match(node2, path2) {
-        return NodeUtils.isHTMLBlockNodeElement(node2);
-      },
-      mode: "lowest"
-    });
-    if (!htmlBlockNodeElementEntry) {
-      Transforms.wrapNodes(
-        editor,
-        {
-          type: ElementType.HTML_BLOCK_NODE,
-          children: [],
-          data: {
-            tagName: "div"
-          },
-          attributes: {
-            style: `text-align:${align};`
-          }
-        },
-        {
-          match: (node2) => !NodeUtils.isBlockElement(node2) && !NodeUtils.isHTMLBlockNodeElement(node2)
-        }
-      );
-    } else {
-      Transforms.setNodes(editor, {
-        attributes: __spreadProps(__spreadValues({}, htmlBlockNodeElementEntry[0].attributes), {
-          style: `text-align:${align};`
-        })
-      });
-    }
+    if (!match2)
+      return;
+    setFieldValue(match2[1], "attributes.align", align);
   };
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     FormatButton,
@@ -37631,11 +37676,14 @@ const ConditionModal = ({
     Modal,
     {
       visible,
-      title: /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "left" } }, t("Logic")),
+      title: /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "left" } }, t("Condition")),
       okText: t("Save"),
       cancelText: t("Cancel"),
       onOk: form.submit,
-      onCancel: onClose
+      onCancel: onClose,
+      style: {
+        width: 550
+      }
     },
     /* @__PURE__ */ React__default.createElement(
       List$1,
@@ -37779,15 +37827,30 @@ function ConditionItem({
   const name = `${path2}.${gIndex}.groups.${ggIndex}`;
   const value = Form.useWatch(name);
   const hideRight = value.operator === ConditionOperator.TRUTHY || value.operator === ConditionOperator.FALSY;
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid.Row, { align: "end" }, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 8 }, /* @__PURE__ */ React__default.createElement(
-    Form.Item,
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid.Row, { align: "end" }, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 9 }, /* @__PURE__ */ React__default.createElement(
+    AttributeField.MergeTagSelectInputField,
     {
-      label: t("Variable"),
-      field: `${name}.left`,
-      layout: "vertical"
-    },
-    /* @__PURE__ */ React__default.createElement(Input, { placeholder: "customer.country" })
-  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 5, style: { paddingLeft: 10 } }, /* @__PURE__ */ React__default.createElement(
+      mergetagType: "condition",
+      label: t("Value"),
+      name: `${name}.left`,
+      formItem: {
+        wrapperCol: {
+          span: 24,
+          offset: 0
+        },
+        labelCol: {
+          span: 24,
+          style: {
+            marginBottom: 8,
+            textAlign: "left"
+          }
+        }
+      },
+      path: null,
+      placeholder: "customer.country",
+      keepName: true
+    }
+  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 5, style: { paddingLeft: 5 } }, /* @__PURE__ */ React__default.createElement(
     Form.Item,
     {
       label: t("Operator"),
@@ -37797,15 +37860,15 @@ function ConditionItem({
     /* @__PURE__ */ React__default.createElement(Select$1, { options: options$4 }, options$4.map((item2) => {
       return /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: item2.value, value: item2.value }, /* @__PURE__ */ React__default.createElement(Tooltip, { content: item2.tootip }, /* @__PURE__ */ React__default.createElement("div", null, item2.label)));
     }))
-  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 8, style: { paddingLeft: 10 } }, !hideRight && /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 8, style: { paddingLeft: 5 } }, !hideRight && /* @__PURE__ */ React__default.createElement(
     Form.Item,
     {
       label: t("Value"),
       field: `${name}.right`,
       layout: "vertical"
     },
-    /* @__PURE__ */ React__default.createElement(Input, { placeholder: "Canda" })
-  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(Input, { placeholder: "Canada" })
+  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 2 }, /* @__PURE__ */ React__default.createElement(
     Form.Item,
     {
       wrapperCol: {
@@ -37831,6 +37894,7 @@ function Iteration({
 }) {
   var _a;
   const iteration = (_a = selectedBlock.logic) == null ? void 0 : _a.iteration;
+  const [popupVisible, setPopupVisible] = useState(false);
   const onIterationToggle = useCallback$1(
     (enabled) => {
       var _a2;
@@ -37856,6 +37920,13 @@ function Iteration({
     },
     [editor, nodePath, selectedBlock.logic]
   );
+  const { mergetags } = useEditorProps();
+  useCallback$1((mergetag) => {
+    setPopupVisible(false);
+  }, []);
+  useMemo$1(() => {
+    return getMergeTagsByType(mergetags || [], "link");
+  }, [mergetags]);
   return /* @__PURE__ */ React__default.createElement(Collapse$1, { activeKey: ["Iteration"] }, /* @__PURE__ */ React__default.createElement(
     Collapse$1.Item,
     {
@@ -37869,14 +37940,16 @@ function Iteration({
     /* @__PURE__ */ React__default.createElement("p", null, t(
       `To repeat this content, specify a variable to “loop over” (i.e., repeat) as well as an alias you can use in your template.`
     )),
-    (iteration == null ? void 0 : iteration.enabled) && /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 24 }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
-      TextField,
+    (iteration == null ? void 0 : iteration.enabled) && /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 24, style: { marginTop: 10 } }, /* @__PURE__ */ React__default.createElement(
+      AttributeField.MergeTagSelectInputField,
       {
+        mergetagType: "repeat",
         label: t("Repeat for"),
         name: `logic.iteration.dataSource`,
-        path: nodePath
+        path: nodePath,
+        keepName: true
       }
-    ), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 24 }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 24 }, /* @__PURE__ */ React__default.createElement(
       TextField,
       {
         label: t("Item alias"),
@@ -38024,19 +38097,7 @@ function Link$1(props) {
   const { label = t("Link address") } = props;
   const { setFieldValue } = useEditorContext();
   const [isUploading, setIsUploading] = useState(false);
-  const [popupVisible, setPopupVisible] = useState(false);
-  const onChangeMergeTag = useCallback$1(
-    (mergetag) => {
-      setFieldValue(
-        props.path,
-        props.name,
-        PluginManager.generateVariable(mergetag)
-      );
-      setPopupVisible(false);
-    },
-    [props.name, props.path, setFieldValue]
-  );
-  const { showSelectFileButton, handleUploadClick, onUpload, mergetags } = useEditorProps();
+  const { showSelectFileButton, handleUploadClick, onUpload } = useEditorProps();
   const uploadHandlerRef = useRef(onUpload);
   const handleUpload = useCallback$1(() => {
     if (handleUploadClick) {
@@ -38068,49 +38129,15 @@ function Link$1(props) {
     });
     uploader.chooseFile();
   }, [handleUploadClick, isUploading, props.name, props.path, setFieldValue]);
-  const formatMergetags = useMemo$1(() => {
-    return getMergeTagsByType(mergetags || [], "link");
-  }, [mergetags]);
   return useMemo$1(() => {
-    var _a, _b, _c, _d;
-    return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(
-      Grid.Col,
-      {
-        style: { textAlign: "right" },
-        span: ((_b = (_a = props.formItem) == null ? void 0 : _a.labelCol) == null ? void 0 : _b.span) || 7
-      },
-      /* @__PURE__ */ React__default.createElement("span", null, label)
-    ), /* @__PURE__ */ React__default.createElement(Grid.Col, { offset: 1, span: ((_d = (_c = props.formItem) == null ? void 0 : _c.wrapperCol) == null ? void 0 : _d.span) || 14 }, /* @__PURE__ */ React__default.createElement(Grid.Row, { style: { width: "100%" } }, formatMergetags.length > 0 && /* @__PURE__ */ React__default.createElement(
-      SharedComponents.MergeTagComponent,
-      {
-        mergetags: formatMergetags,
-        popupVisible,
-        onVisibleChange: setPopupVisible,
-        onChange: onChangeMergeTag,
-        onClose: () => setPopupVisible(false),
-        value: "",
-        triggerElement: /* @__PURE__ */ React__default.createElement(
-          Button$2,
-          {
-            type: "secondary",
-            icon: /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-merge-tags" })
-          }
-        )
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      AttributeField.TextField,
-      __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+      AttributeField.MergeTagSelectInputField,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+        mergetagType: "link",
         prefix: /* @__PURE__ */ React__default.createElement(IconLink, null)
-      }, props), {
-        label: "",
-        formItem: __spreadProps(__spreadValues({
-          style: {
-            flex: 1
-          }
-        }, props.formItem), {
-          wrapperCol: {
-            span: 24
-          },
+      }), props), {
+        label,
+        formItem: __spreadProps(__spreadValues({}, props.formItem), {
           rules: [
             {
               validator(value, callback) {
@@ -38123,7 +38150,7 @@ function Link$1(props) {
           ]
         })
       })
-    )))), showSelectFileButton && /* @__PURE__ */ React__default.createElement(
+    ), showSelectFileButton && /* @__PURE__ */ React__default.createElement(
       Grid.Row,
       {
         style: { marginTop: -10, marginBottom: 10, textAlign: "left" }
@@ -38139,16 +38166,8 @@ function Link$1(props) {
         " ",
         t(`Select file`)
       ))
-    ));
-  }, [
-    formatMergetags,
-    handleUpload,
-    label,
-    onChangeMergeTag,
-    popupVisible,
-    props,
-    showSelectFileButton
-  ]);
+    )));
+  }, [handleUpload, label, props, showSelectFileButton]);
 }
 const defaultOptions = [
   {
@@ -38550,6 +38569,81 @@ function TableLayout(props) {
     );
   }, [label, props]);
 }
+const MergeTagSelectInputField = (props) => {
+  var _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const _a = props, { label, keepName, mergetagType } = _a, rest = __objRest(_a, ["label", "keepName", "mergetagType"]);
+  const { mergetags } = useEditorProps();
+  const { setFieldValue } = useEditorContext();
+  const { form } = Form.useFormContext();
+  const [popupVisible, setPopupVisible] = useState(false);
+  const onChangeMergeTag = useCallback$1(
+    (mergetag) => {
+      if (props.path) {
+        setFieldValue(
+          props.path,
+          props.name,
+          keepName ? mergetag : PluginManager.generateVariable(mergetag)
+        );
+      } else {
+        form.setFieldValue(
+          props.name,
+          keepName ? mergetag : PluginManager.generateVariable(mergetag)
+        );
+      }
+      setPopupVisible(false);
+    },
+    [form, keepName, props.name, props.path, setFieldValue]
+  );
+  const formatMergetags = useMemo$1(() => {
+    return getMergeTagsByType(mergetags || [], props.mergetagType);
+  }, [mergetags, props.mergetagType]);
+  return /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(
+    Grid.Col,
+    {
+      style: __spreadValues({ textAlign: "right" }, (_c = (_b = props.formItem) == null ? void 0 : _b.labelCol) == null ? void 0 : _c.style),
+      span: ((_e = (_d = props.formItem) == null ? void 0 : _d.labelCol) == null ? void 0 : _e.span) || 7
+    },
+    /* @__PURE__ */ React__default.createElement("span", null, label)
+  ), /* @__PURE__ */ React__default.createElement(
+    Grid.Col,
+    {
+      offset: isUndefined$1((_g = (_f = props.formItem) == null ? void 0 : _f.wrapperCol) == null ? void 0 : _g.offset) ? 1 : (_i = (_h = props.formItem) == null ? void 0 : _h.wrapperCol) == null ? void 0 : _i.offset,
+      span: ((_k = (_j = props.formItem) == null ? void 0 : _j.wrapperCol) == null ? void 0 : _k.span) || 14
+    },
+    /* @__PURE__ */ React__default.createElement(Grid.Row, { style: { width: "100%" } }, formatMergetags.length > 0 && /* @__PURE__ */ React__default.createElement(
+      SharedComponents.MergeTagComponent,
+      {
+        mergetags: formatMergetags,
+        popupVisible,
+        onVisibleChange: setPopupVisible,
+        onChange: onChangeMergeTag,
+        onClose: () => setPopupVisible(false),
+        value: "",
+        triggerElement: /* @__PURE__ */ React__default.createElement(
+          Button$2,
+          {
+            type: "secondary",
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-merge-tags" })
+          }
+        )
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.TextField,
+      __spreadProps(__spreadValues({}, rest), {
+        label: "",
+        formItem: __spreadProps(__spreadValues({
+          style: {
+            flex: 1
+          }
+        }, props.formItem), {
+          wrapperCol: {
+            span: 24
+          }
+        })
+      })
+    ))
+  ));
+};
 const defaultAttributeFields = {
   // Basic Form Field
   WatchField,
@@ -38566,6 +38660,7 @@ const defaultAttributeFields = {
   EditPanelListField,
   EditPanelTabsField,
   PixelAndPercentField,
+  MergeTagSelectInputField,
   // Attributes Field
   Heading,
   Direction,
@@ -45672,6 +45767,10 @@ const minimaliststyleText = `[data-slate-block=page] {
   z-index: 4;
 }
 
+[data-slate-selected=true] .element-tools-container {
+  z-index: 4;
+}
+
 [data-slate-void=true] [data-slate-node=element][data-slate-block=button]:hover,
 [data-slate-void=true] [data-slate-node=element][data-slate-block=text]:hover {
   outline: 2px solid var(--hover-color);

package/lib/style.css

@@ -318,6 +318,8 @@
   color: rgb(201, 205, 212);
   cursor: not-allowed;
   pointer-events: none;
+}._hoverUnderline_8d8dl_1:hover {
+  text-decoration: underline;
 }.UniversalElementEditorDrawer {
   position: fixed;
   left: 0;

package/lib/typings/components/BlockPaths/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function BlockPaths(): React.JSX.Element;

package/lib/typings/components/ConfigurationPanel/components/AttributeField/MergeTagSelectInputField.d.ts

@@ -0,0 +1,8 @@
+import React, { ComponentProps } from "react";
+import { MergetagItem } from "easy-email-pro-editor";
+import { TextField } from "../../../../components/Form";
+export declare const MergeTagSelectInputField: (props: Omit<ComponentProps<typeof TextField>, "label"> & {
+    label?: React.ReactNode;
+    mergetagType: MergetagItem["type"];
+    keepName?: boolean;
+}) => React.JSX.Element;

package/lib/typings/components/ConfigurationPanel/components/AttributeField/index.d.ts

@@ -70,6 +70,11 @@ export declare const defaultAttributeFields: {
     EditPanelListField: (props: Omit<import("../../../Form/enhancer").EnhancerProps & Omit<import("../../../Form/EditPanelListField").EditPanelListProps<unknown>, "onChange" | "value">, "">) => import("react").JSX.Element;
     EditPanelTabsField: (props: Omit<import("../../../Form/enhancer").EnhancerProps & Omit<import("../../../Form/EditPanelTabsField").EditPanelTabsProps<unknown>, "onChange" | "value">, "">) => import("react").JSX.Element;
     PixelAndPercentField: typeof PixelAndPercentField;
+    MergeTagSelectInputField: (props: Omit<import("../../../Form/enhancer").EnhancerProps & Omit<import("@arco-design/web-react").InputProps & import("react").RefAttributes<import("@arco-design/web-react/es/Input").RefInputType> & import("@arco-design/web-react/es/_util/hooks/useMergeProps").MergePropsOptions, "onChange" | "value">, "label"> & {
+        label?: import("react").ReactNode;
+        mergetagType: "text" | "image" | "condition" | "link" | "repeat" | undefined;
+        keepName?: boolean | undefined;
+    }) => import("react").JSX.Element;
     Heading: typeof Heading;
     Direction: typeof Direction;
     RTLDirection: typeof RTLDirection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.40.3",
+  "version": "1.41.0",
   "description": "",
   "files": [
     "lib"