easy-email-extensions 3.1.37 → 3.1.38

package/lib/index2.js

@@ -56,11 +56,11 @@ 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, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, TextStyle, useFocusIdx, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, useFocusBlockLayout, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, useRefState, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
-import { BasicType, ImageManager, BlockManager, getParentIdx, createBlockDataByType, getParentByIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
+import { BasicType, ImageManager, BlockManager, createBlockDataByType, getParentByIdx, getParentIdx, getValueByIdx, 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 = "";
-const title = "_title_15yi1_1";
+const title = "_title_15b2l_1";
 var styles$6 = {
   title
 };
@@ -38463,9 +38463,7 @@ function enhancer(Component2, changeAdapter) {
     const [currentValue, setCurrentValue] = useState(value);
     const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
       onChange(val);
-    }, 100, {
-      maxWait: 500
-    }), [onChange]);
+    }, 500, {}), [onChange]);
     useEffect(() => {
       setCurrentValue(value);
     }, [value]);
@@ -39157,105 +39155,10 @@ function AddFont() {
     }
   });
 }
-function getContextMergeTags(mergeTags2, context, idx) {
-  const loop2 = (currentIdx, combineMergeTags) => {
-    var _a, _b;
-    const parentBlockData = lodash.exports.get(context, currentIdx);
-    if (!parentBlockData)
-      return combineMergeTags;
-    const parentBlock = BlockManager.getBlockByType(parentBlockData.type);
-    if (parentBlock && parentBlock.render) {
-      const dataSource = (_b = (_a = parentBlockData.data) == null ? void 0 : _a.value) == null ? void 0 : _b.dataSource;
-      if (!dataSource)
-        return combineMergeTags;
-      Object.keys(dataSource).forEach((key) => {
-        let formatKey = dataSource[key];
-        const loopFormatKey = (currentLoopKeyIdx) => {
-          const currentParentIdx = getParentIdx(currentLoopKeyIdx);
-          if (currentParentIdx) {
-            const currentBlockData = lodash.exports.get(context, currentParentIdx);
-            if (!currentBlockData)
-              return formatKey;
-            currentBlockData.data.value.dataSource && Object.keys(currentBlockData.data.value.dataSource).forEach((item2) => {
-              formatKey = formatKey.replace(item2, currentBlockData.data.value.dataSource[item2].replace(/{{([^}}]+)}}/g, "$1"));
-            });
-            loopFormatKey(currentParentIdx);
-          }
-        };
-        loopFormatKey(currentIdx);
-        const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, "$1");
-        combineMergeTags = __spreadValues({
-          [key]: lodash.exports.get(combineMergeTags, dataSourcePath)
-        }, combineMergeTags);
-      });
-    }
-    const parentIdx = getParentIdx(currentIdx);
-    if (!parentIdx)
-      return combineMergeTags;
-    return loop2(parentIdx, combineMergeTags);
-  };
-  return loop2(idx, lodash.exports.cloneDeep(mergeTags2));
-}
-const MergeTags = React__default.memo((props) => {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const {
-    mergeTags: mergeTags2 = {},
-    mergeTagGenerate = (m) => `{{${m}}}`,
-    renderMergeTagContent
-  } = useEditorProps();
-  const { values: values2 } = useBlock();
-  const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
-  const treeOptions = useMemo(() => {
-    const treeData = [];
-    const deep = (key, title2, parent2, mapData = []) => {
-      const currentMapData = {
-        key: mergeTagGenerate(key),
-        value: mergeTagGenerate(key),
-        title: title2,
-        disabled: lodash.exports.isObject(parent2[key]) || !parent2[title2],
-        children: []
-      };
-      mapData.push(currentMapData);
-      const current = parent2[title2];
-      if (current && typeof current === "object") {
-        Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
-      }
-    };
-    Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
-    return treeData;
-  }, [contextMergeTags, mergeTagGenerate]);
-  const onSelect = useCallback((value) => {
-    return props.onChange(value);
-  }, [props]);
-  const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
-    onChange: props.onChange,
-    isSelect: Boolean(props.isSelect),
-    value: props.value
-  }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), [renderMergeTagContent, props.onChange, props.isSelect, props.value]);
-  if (renderMergeTagContent) {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
-  }
-  return /* @__PURE__ */ React__default.createElement("div", {
-    style: { color: "#333" }
-  }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
-    value: props.value,
-    size: "small",
-    dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
-    placeholder: "Please select",
-    treeData: treeOptions,
-    onChange: (val) => onSelect(val)
-  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
-    defaultExpandedKeys: [],
-    selectedKeys: [],
-    treeData: treeOptions,
-    onSelect: (vals) => onSelect(vals[0])
-  }));
-});
 const AttributesPanelWrapper = (props) => {
   const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
-  const { mergeTags: mergeTags2 } = useEditorProps();
   const block2 = focusBlock2 && BlockManager.getBlockByType(focusBlock2.type);
-  const onChangeHidden = useCallback((val) => {
+  useCallback((val) => {
     if (!focusBlock2)
       return;
     focusBlock2.data.hidden = val;
@@ -39283,13 +39186,7 @@ const AttributesPanelWrapper = (props) => {
   }, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle, {
     variation: "strong",
     size: "large"
-  }, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags2 && /* @__PURE__ */ React__default.createElement(Stack$6, {
-    spacing: "extraTight"
-  }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Hide if"), /* @__PURE__ */ React__default.createElement(MergeTags, {
-    isSelect: true,
-    onChange: onChangeHidden,
-    value: String(focusBlock2.data.hidden)
-  })))), /* @__PURE__ */ React__default.createElement("div", {
+  }, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))))), /* @__PURE__ */ React__default.createElement("div", {
     style: __spreadValues({ padding: "0px" }, props.style)
   }, props.children));
 };
@@ -39362,12 +39259,6 @@ function Page() {
     helpText: "Allows you to control on which breakpoint the layout should go desktop/mobile.",
     name: `${focusIdx2}.data.value.breakpoint`,
     inline: true
-  }), /* @__PURE__ */ React__default.createElement(SwitchField, {
-    inline: true,
-    label: "Responsive",
-    name: `${focusIdx2}.data.value.responsive`,
-    checkedText: "True",
-    uncheckedText: "False"
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
     header: "Theme Setting"
@@ -40303,6 +40194,117 @@ function BorderColor() {
     });
   }, [focusIdx2]);
 }
+function getContextMergeTags(mergeTags2, context, idx) {
+  const loop2 = (currentIdx, combineMergeTags) => {
+    var _a, _b;
+    const parentBlockData = lodash.exports.get(context, currentIdx);
+    if (!parentBlockData)
+      return combineMergeTags;
+    const parentBlock = BlockManager.getBlockByType(parentBlockData.type);
+    if (parentBlock && parentBlock.render) {
+      const dataSource = (_b = (_a = parentBlockData.data) == null ? void 0 : _a.value) == null ? void 0 : _b.dataSource;
+      if (!dataSource)
+        return combineMergeTags;
+      Object.keys(dataSource).forEach((key) => {
+        let formatKey = dataSource[key];
+        const loopFormatKey = (currentLoopKeyIdx) => {
+          const currentParentIdx = getParentIdx(currentLoopKeyIdx);
+          if (currentParentIdx) {
+            const currentBlockData = lodash.exports.get(context, currentParentIdx);
+            if (!currentBlockData)
+              return formatKey;
+            currentBlockData.data.value.dataSource && Object.keys(currentBlockData.data.value.dataSource).forEach((item2) => {
+              formatKey = formatKey.replace(item2, currentBlockData.data.value.dataSource[item2].replace(/{{([^}}]+)}}/g, "$1"));
+            });
+            loopFormatKey(currentParentIdx);
+          }
+        };
+        loopFormatKey(currentIdx);
+        const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, "$1");
+        combineMergeTags = __spreadValues({
+          [key]: lodash.exports.get(combineMergeTags, dataSourcePath)
+        }, combineMergeTags);
+      });
+    }
+    const parentIdx = getParentIdx(currentIdx);
+    if (!parentIdx)
+      return combineMergeTags;
+    return loop2(parentIdx, combineMergeTags);
+  };
+  return loop2(idx, lodash.exports.cloneDeep(mergeTags2));
+}
+const MergeTags = React__default.memo((props) => {
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const {
+    mergeTags: mergeTags2 = {},
+    mergeTagGenerate = (m) => `{{${m}}}`,
+    renderMergeTagContent
+  } = useEditorProps();
+  const { values: values2 } = useBlock();
+  const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
+  const treeOptions = useMemo(() => {
+    const treeData = [];
+    const deep = (key, title2, parent2, mapData = []) => {
+      const currentMapData = {
+        key,
+        value: key,
+        title: title2,
+        children: []
+      };
+      mapData.push(currentMapData);
+      const current = parent2[title2];
+      if (current && typeof current === "object") {
+        Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
+      }
+    };
+    Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
+    return treeData;
+  }, [contextMergeTags]);
+  const onSelect = useCallback((key) => {
+    const value = lodash.exports.get(contextMergeTags, key);
+    if (lodash.exports.isObject(value)) {
+      setExpandedKeys((keys2) => {
+        console.log("keys", keys2, key);
+        if (keys2.includes(key)) {
+          return keys2.filter((k) => k !== key);
+        } else {
+          return [...keys2, key];
+        }
+      });
+      return;
+    }
+    return props.onChange(mergeTagGenerate(value));
+  }, [contextMergeTags, props, mergeTagGenerate]);
+  const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
+    onChange: props.onChange,
+    isSelect: Boolean(props.isSelect),
+    value: props.value
+  }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), [renderMergeTagContent, props.onChange, props.isSelect, props.value]);
+  if (renderMergeTagContent) {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
+  }
+  return /* @__PURE__ */ React__default.createElement("div", {
+    style: { color: "#333" }
+  }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
+    value: props.value,
+    size: "small",
+    dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
+    placeholder: "Please select",
+    treeData: treeOptions,
+    onChange: (val) => onSelect(val)
+  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
+    expandedKeys,
+    onExpand: setExpandedKeys,
+    selectedKeys: [],
+    treeData: treeOptions,
+    onSelect: (vals) => onSelect(vals[0]),
+    style: {
+      maxHeight: 400,
+      overflow: "auto"
+    }
+  }));
+});
 const borderStyleOptions = [
   {
     value: "dashed",