easy-email-extensions 3.1.37 → 3.1.44

package/License

@@ -0,0 +1,22 @@
+Copyright (c) 2021-2022 AfterShip
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/lib/BlockLayer/index.d.ts

@@ -7,4 +7,7 @@ export interface IBlockDataWithId extends IBlockData {
     children: IBlockDataWithId[];
     className?: string;
 }
-export declare function BlockLayer(): JSX.Element | null;
+export interface BlockLayerProps {
+    renderTitle?: (block: IBlockDataWithId) => React.ReactNode;
+}
+export declare function BlockLayer(props: BlockLayerProps): JSX.Element | null;

package/lib/SimpleLayout/SimpleLayout.d.ts

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

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
 };
@@ -38305,12 +38305,17 @@ const PresetColorsProvider = (props) => {
       setCurrentColors(newColors);
     }
   }, [currentColors, setCurrentColors]);
-  return /* @__PURE__ */ React__default.createElement(PresetColorsContext.Provider, {
-    value: {
+  const value = useMemo(() => {
+    return {
       colors: currentColors,
       addCurrentColor
-    }
-  }, props.children);
+    };
+  }, [addCurrentColor, currentColors]);
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(PresetColorsContext.Provider, {
+      value
+    }, props.children);
+  }, [props.children, value]);
 };
 function ColorPicker(props) {
   const { colors: presetColors, addCurrentColor } = useContext(PresetColorsContext);
@@ -38463,9 +38468,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 +39160,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 +39191,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 +39264,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 +40199,116 @@ 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) => {
+        if (keys2.includes(key)) {
+          return keys2.filter((k) => k !== key);
+        } else {
+          return [...keys2, key];
+        }
+      });
+      return;
+    }
+    return props.onChange(mergeTagGenerate(key));
+  }, [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",
@@ -41313,6 +41319,40 @@ class BlockAttributeConfigurationManager {
   }
 }
 __publicField(BlockAttributeConfigurationManager, "map", __spreadValues({}, blocks));
+const SelectionRangeContext = React__default.createContext({
+  selectionRange: null,
+  setSelectionRange: () => {
+  }
+});
+const SelectionRangeProvider = (props) => {
+  const [selectionRange, setSelectionRange] = useState(null);
+  useEffect(() => {
+    const onSelectionChange = () => {
+      try {
+        const range2 = getShadowRoot().getSelection().getRangeAt(0);
+        if (range2) {
+          setSelectionRange(range2);
+        }
+      } catch (error2) {
+      }
+    };
+    document.addEventListener("selectionchange", onSelectionChange);
+    return () => {
+      document.removeEventListener("selectionchange", onSelectionChange);
+    };
+  }, []);
+  const value = useMemo(() => {
+    return {
+      selectionRange,
+      setSelectionRange
+    };
+  }, [selectionRange]);
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(SelectionRangeContext.Provider, {
+      value
+    }, props.children);
+  }, [props.children, value]);
+};
 function AttributePanel() {
   const { values: values2, focusBlock: focusBlock2 } = useBlock();
   const { initialized } = useEditorContext();
@@ -41322,7 +41362,7 @@ function AttributePanel() {
   const shadowRoot = getShadowRoot();
   if (!value || !initialized)
     return null;
-  return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, {
+  return /* @__PURE__ */ React__default.createElement(SelectionRangeProvider, null, /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, {
     key: focusIdx2
   }) : /* @__PURE__ */ React__default.createElement("div", {
     style: { marginTop: 200, padding: "0 50px" }
@@ -41338,27 +41378,10 @@ function AttributePanel() {
                 outline: none;
                 cursor: text;
               }
-              `), shadowRoot));
+              `), shadowRoot)));
 }
-function Tools(props) {
-  const { container: container2 } = props;
-  const { mergeTags: mergeTags2 } = useEditorProps();
-  const [selectionRange, setSelectionRange] = useState(null);
-  useEffect(() => {
-    const onSelectionChange = () => {
-      try {
-        const range2 = getShadowRoot().getSelection().getRangeAt(0);
-        if (range2) {
-          setSelectionRange(range2);
-        }
-      } catch (error2) {
-      }
-    };
-    document.addEventListener("selectionchange", onSelectionChange);
-    return () => {
-      document.removeEventListener("selectionchange", onSelectionChange);
-    };
-  }, []);
+function useSelectionRange() {
+  const { selectionRange, setSelectionRange } = useContext(SelectionRangeContext);
   const restoreRange = useCallback((range2) => {
     const selection = getShadowRoot().getSelection();
     selection.removeAllRanges();
@@ -41367,6 +41390,16 @@ function Tools(props) {
     newRange.setEnd(range2.endContainer, range2.endOffset);
     selection.addRange(newRange);
   }, []);
+  return {
+    selectionRange,
+    setSelectionRange,
+    restoreRange
+  };
+}
+function Tools(props) {
+  const { container: container2 } = props;
+  const { mergeTags: mergeTags2 } = useEditorProps();
+  const { selectionRange, restoreRange } = useSelectionRange();
   const execCommand = (cmd, val) => {
     if (!container2) {
       console.error("No container");
@@ -41621,6 +41654,7 @@ function FieldWrapper(props) {
   const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
   const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
     input.onChange(val);
+    input.onBlur();
   }, 100), [input]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, {
     onChange: debounceCallbackChange
@@ -41997,11 +42031,12 @@ function getBlockTitle(blockData, isFromContent = true) {
     tempEle.innerHTML = blockData.data.value.content;
     return tempEle.innerText;
   }
-  const blockName = (_a = BlockManager.getBlockByType(blockData.type)) == null ? void 0 : _a.name;
+  const blockName = ((_a = BlockManager.getBlockByType(blockData.type)) == null ? void 0 : _a.name) || "";
   return blockName;
 }
-function BlockLayer() {
+function BlockLayer(props) {
   const { pageData: pageData2 } = useEditorContext();
+  const { renderTitle: propsRenderTitle } = props;
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
   const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
   const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock, values: values2 } = useBlock();
@@ -42018,7 +42053,7 @@ function BlockLayer() {
   }, [setValueByIdx2, valueRef]);
   const renderTitle = useCallback((data) => {
     const isPage = data.type === BasicType.PAGE;
-    const title2 = getBlockTitle(data);
+    const title2 = propsRenderTitle ? propsRenderTitle(data) : getBlockTitle(data);
     return /* @__PURE__ */ React__default.createElement("div", {
       "data-tree-idx": data.id,
       className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
@@ -42029,7 +42064,7 @@ function BlockLayer() {
       iconName: getIconNameByBlockType(data.type),
       style: { fontSize: 12, color: "#999" }
     }), /* @__PURE__ */ React__default.createElement("div", {
-      title: title2,
+      title: lodash.exports.isString(title2) ? title2 : "",
       style: { overflow: "hidden", whiteSpace: "nowrap", width: "5em" }
     }, /* @__PURE__ */ React__default.createElement(TextStyle, {
       size: "smallest"
@@ -42039,7 +42074,7 @@ function BlockLayer() {
       blockData: data,
       onToggleVisible
     })));
-  }, [onToggleVisible]);
+  }, [onToggleVisible, propsRenderTitle]);
   const treeData = useMemo(() => {
     const copyData = lodash.exports.cloneDeep(pageData2);
     const loop2 = (item2, id, parent2) => {
@@ -45173,7 +45208,9 @@ const SimpleLayout = (props) => {
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
     title: "Layout",
     style: { border: "none" }
-  }, /* @__PURE__ */ React__default.createElement(BlockLayer, null))))), /* @__PURE__ */ React__default.createElement(Layout$1, {
+  }, /* @__PURE__ */ React__default.createElement(BlockLayer, {
+    renderTitle: props.renderTitle
+  }))))), /* @__PURE__ */ React__default.createElement(Layout$1, {
     style: { height: containerHeight }
   }, props.children), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     style: {