easy-email-extensions 3.1.39 → 3.1.47

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/components/ContextMenu/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useBlock } from '../../../../easy-email-editor';
+import { useBlock } from 'easy-email-editor';
 import { IBlockDataWithId } from '../../../BlockLayer';
 export declare function ContextMenu({ moveBlock, copyBlock, removeBlock, contextMenuData, onClose, }: {
     onClose: (ev?: React.MouseEvent) => void;

package/lib/BlockLayer/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IBlockData } from '../../easy-email-core';
+import { IBlockData } from 'easy-email-core';
 export interface IBlockDataWithId extends IBlockData {
     id: string;
     icon?: React.ReactElement;
@@ -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/ShortcutToolbar/components/BlockMaskWrapper/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BlockType } from '../../../../easy-email-core';
+import { BlockType } from 'easy-email-core';
 export declare const BlockMaskWrapper: React.FC<{
     type: BlockType | string;
     payload: any;

package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/index.d.ts

@@ -1,4 +1,4 @@
-import { BasicType } from '../../../../../easy-email-core';
+import { BasicType } from 'easy-email-core';
 import { TextBlockItem } from './TextBlockItem';
 import { ImageBlockItem } from './ImageBlockItem';
 export declare const defaultCategories: {

package/lib/ShortcutToolbar/utils/BlockMarketManager.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IBlockData } from '../../../easy-email-core';
+import { IBlockData } from 'easy-email-core';
 export interface BlockMarketCategory {
     name: string;
     title: string;

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/components/Form/enhancer.d.ts

@@ -1,4 +1,4 @@
-import { StackProps } from '../../../easy-email-editor';
+import { StackProps } from 'easy-email-editor';
 import { FieldProps } from 'react-final-form';
 import React from 'react';
 import { InputProps } from './Input';

package/lib/index.d.ts

@@ -8,3 +8,4 @@ export * from './SimpleLayout';
 export * from './components/Form';
 export { getContextMergeTags } from './utils/getContextMergeTags';
 export { getIconNameByBlockType } from './utils/getIconNameByBlockType';
+export { getBlockTitle } from './utils/getBlockTitle';

package/lib/index.js

@@ -1,4 +1,4 @@
-export { d as Align, A as AttributePanel, e as AttributesPanelWrapper, _ as AutoCompleteField, i as Background, l as BackgroundColor, b as BlockAttributeConfigurationManager, B as BlockLayer, w as BlockMarketManager, x as BlockMaskWrapper, o as Border, p as BorderColor, s as BorderStyle, u as BorderWidth, a2 as CheckboxField, C as Color, R as ColorPickerField, f as ContainerBackgroundColor, a1 as DatePickerField, D as Decoration, m as Direction, a3 as EditTabField, F as FontFamily, q as FontSize, t as FontStyle, v as FontWeight, H as Height, X as ImageUploaderField, a4 as InlineTextField, G as InputWithUnitField, I as InteractivePrompt, L as LetterSpacing, j as LineHeight, n as Link, M as Margin, r as MergeTags, N as NavbarLinkPadding, O as NumberField, P as Padding, $ as RadioGroupField, a6 as RichTextField, J as SearchField, Y as SelectField, S as ShortcutToolbar, z as SimpleLayout, Q as SliderField, y as SourceCodePanel, a0 as SwitchField, T as TextAlign, K as TextAreaField, h as TextDecoration, E as TextField, k as TextTransform, Z as TreeSelectField, U as UploadField, V as VerticalAlign, W as Width, a5 as enhancer, g as getContextMergeTags, a as getIconNameByBlockType } from "./index2.js";
+export { e as Align, A as AttributePanel, f as AttributesPanelWrapper, $ as AutoCompleteField, j as Background, m as BackgroundColor, d as BlockAttributeConfigurationManager, B as BlockLayer, x as BlockMarketManager, y as BlockMaskWrapper, p as Border, q as BorderColor, t as BorderStyle, v as BorderWidth, a3 as CheckboxField, C as Color, U as ColorPickerField, h as ContainerBackgroundColor, a2 as DatePickerField, D as Decoration, n as Direction, a4 as EditTabField, F as FontFamily, r as FontSize, u as FontStyle, w as FontWeight, H as Height, Y as ImageUploaderField, a5 as InlineTextField, J as InputWithUnitField, I as InteractivePrompt, L as LetterSpacing, k as LineHeight, o as Link, M as Margin, s as MergeTags, N as NavbarLinkPadding, Q as NumberField, P as Padding, a0 as RadioGroupField, a7 as RichTextField, K as SearchField, Z as SelectField, S as ShortcutToolbar, E as SimpleLayout, R as SliderField, z as SourceCodePanel, a1 as SwitchField, T as TextAlign, O as TextAreaField, i as TextDecoration, G as TextField, l as TextTransform, _ as TreeSelectField, X as UploadField, V as VerticalAlign, W as Width, a6 as enhancer, b as getBlockTitle, g as getContextMergeTags, a as getIconNameByBlockType } from "./index2.js";
 import "react";
 import "easy-email-editor";
 import "easy-email-core";

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");
@@ -41984,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"
 };
@@ -42000,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();
@@ -42021,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")
@@ -42032,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"
@@ -42042,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) => {
@@ -45176,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: {
@@ -45203,5 +45237,5 @@ const SimpleLayout = (props) => {
     title: "Source code"
   }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null)));
 };
-export { RadioGroupField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, TextField as E, FontFamily as F, InputWithUnitField as G, Height as H, InteractivePrompt as I, SearchField as J, TextAreaField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, NumberField as O, Padding as P, SliderField as Q, ColorPickerField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, ImageUploaderField as X, SelectField as Y, TreeSelectField as Z, AutoCompleteField as _, getIconNameByBlockType as a, SwitchField as a0, DatePickerField as a1, CheckboxField as a2, EditTabField as a3, InlineTextField as a4, enhancer as a5, RichTextField as a6, BlockAttributeConfigurationManager as b, commonjsGlobal as c, Align as d, AttributesPanelWrapper as e, ContainerBackgroundColor as f, getContextMergeTags as g, TextDecoration as h, Background as i, LineHeight as j, TextTransform as k, BackgroundColor as l, Direction as m, Link as n, Border as o, BorderColor as p, FontSize as q, MergeTags as r, BorderStyle as s, FontStyle as t, BorderWidth as u, FontWeight as v, BlockMarketManager as w, BlockMaskWrapper as x, SourceCodePanel as y, SimpleLayout as z };
+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 as r, MergeTags as s, BorderStyle as t, FontStyle as u, BorderWidth as v, FontWeight as w, BlockMarketManager as x, BlockMaskWrapper as y, SourceCodePanel as z };
 //# sourceMappingURL=index2.js.map