easy-email-extensions 3.1.38 → 3.1.46

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

@@ -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);
@@ -40265,7 +40270,6 @@ const MergeTags = React__default.memo((props) => {
     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 {
@@ -40274,7 +40278,7 @@ const MergeTags = React__default.memo((props) => {
       });
       return;
     }
-    return props.onChange(mergeTagGenerate(value));
+    return props.onChange(mergeTagGenerate(key));
   }, [contextMergeTags, props, mergeTagGenerate]);
   const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
     onChange: props.onChange,
@@ -41315,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();
@@ -41324,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" }
@@ -41340,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();
@@ -41369,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");
@@ -41623,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
@@ -41983,7 +42015,7 @@ const iconsMap = {
   [BasicType.NAVBAR]: "icon-navbar",
   [BasicType.HERO]: "icon-hero",
   [BasicType.SPACER]: "icon-spacing",
-  [BasicType.SOCIAL]: "icon-soc",
+  [BasicType.SOCIAL]: "icon-social",
   [BasicType.CAROUSEL]: "icon-carousel",
   [BasicType.ACCORDION]: "icon-accordion"
 };
@@ -41999,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();
@@ -42020,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")
@@ -42031,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"
@@ -42041,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) => {
@@ -45175,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: {