easy-email-extensions 2.5.2-beta.1 → 2.6.0

package/lib/InteractivePrompt/components/Toolbar.d.ts

@@ -1,4 +1,5 @@
 import { IBlock } from 'easy-email-core';
-export declare function Toolbar({ block }: {
+export declare function Toolbar({ block, direction, }: {
     block: IBlock;
+    direction: 'top' | 'bottom';
 }): JSX.Element;

package/lib/index2.js

@@ -55,8 +55,8 @@ var __async = (__this, __arguments, generator2) => {
 };
 import * as React from "react";
 import React__default, { useCallback, useState, useRef, useEffect, useMemo as useMemo$1, createContext, useLayoutEffect as useLayoutEffect$2, Component, useContext, forwardRef, useImperativeHandle, isValidElement as isValidElement$1, PureComponent, createElement, Suspense } from "react";
-import { IconFont, Stack as Stack$5, TextStyle, getBlockNodeByIdx, useBlock, getShadowRoot, FIXED_CONTAINER_ID, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx, BlockAvatarWrapper, getBlockNodes, ActiveTabKeys } from "easy-email-editor";
-import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeIdxFromClassName, getNodeTypeFromClassName } from "easy-email-core";
+import { IconFont, Stack as Stack$5, TextStyle, getBlockNodeByIdx, useBlock, getShadowRoot, FIXED_CONTAINER_ID, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, ActiveTabKeys } from "easy-email-editor";
+import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
 import { useForm as useForm$2, useField, Form as Form$4, version as version$3 } from "react-final-form";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { findDOMNode as findDOMNode$1, createPortal } from "react-dom";
@@ -53984,12 +53984,50 @@ function FontFamily$1(props) {
     key: item2.value
   }, item2.label))));
 }
-const SelectionRangeContext = React__default.createContext({
-  selectionRange: null,
-  setSelectionRange: () => {
-  }
+var index$4 = "";
+const MergeTags$1 = React__default.memo((props) => {
+  const { mergeTags = {} } = useEditorProps();
+  const treeOptions = useMemo$1(() => {
+    const treeData = [];
+    const deep = (key2, title2, parent, mapData = []) => {
+      const currentMapData = {
+        key: `{{${key2}}}`,
+        value: `{{${key2}}}`,
+        title: title2,
+        children: []
+      };
+      mapData.push(currentMapData);
+      const current = parent[key2];
+      if (lodash.exports.isObject(current)) {
+        Object.keys(current).map((childKey) => deep(key2 + "." + childKey, childKey, current, currentMapData.children));
+      }
+    };
+    Object.keys(mergeTags).map((key2) => deep(key2, key2, mergeTags, treeData));
+    return treeData;
+  }, [mergeTags]);
+  const onSelect = useCallback((value) => {
+    return props.onChange(value);
+  }, [props]);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    style: { color: "#333" }
+  }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$2, {
+    value: props.value,
+    size: "small",
+    style: { width: 120 },
+    dropdownStyle: { maxHeight: 400, overflow: "auto" },
+    placeholder: "Please select",
+    treeData: treeOptions,
+    onSelect: (val) => onSelect(val)
+  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
+    style: { width: 120 },
+    selectedKeys: [],
+    treeData: treeOptions,
+    onSelect: (vals) => onSelect(vals[0])
+  }));
 });
-const SelectionRangeProvider = (props) => {
+function TextToolbar(props) {
+  const { container: container2 } = props;
+  const { mergeTags } = useEditorProps();
   const [selectionRange, setSelectionRange] = useState(null);
   useEffect(() => {
     const onSelectionChange = () => {
@@ -54006,15 +54044,6 @@ const SelectionRangeProvider = (props) => {
       document.removeEventListener("selectionchange", onSelectionChange);
     };
   }, []);
-  return /* @__PURE__ */ React__default.createElement(SelectionRangeContext.Provider, {
-    value: {
-      selectionRange,
-      setSelectionRange
-    }
-  }, props.children);
-};
-function useSelectionRange() {
-  const { selectionRange, setSelectionRange } = useContext(SelectionRangeContext);
   const restoreRange = useCallback((range2) => {
     const selection = getShadowRoot().getSelection();
     selection.removeAllRanges();
@@ -54023,30 +54052,20 @@ function useSelectionRange() {
     newRange.setEnd(range2.endContainer, range2.endOffset);
     selection.addRange(newRange);
   }, []);
-  return {
-    selectionRange,
-    setSelectionRange,
-    restoreRange
-  };
-}
-function TextToolbar(props) {
-  const { container: container2 } = props;
-  const { selectionRange: currentRange, restoreRange } = useSelectionRange();
-  useEditorProps();
   const execCommand = (cmd, val) => {
     if (!container2) {
       console.error("No container");
       return;
     }
-    if (!currentRange) {
-      console.error("No currentRange");
+    if (!selectionRange) {
+      console.error("No selectionRange");
       return;
     }
-    if (!(container2 == null ? void 0 : container2.contains(currentRange == null ? void 0 : currentRange.commonAncestorContainer)) && container2 !== (currentRange == null ? void 0 : currentRange.commonAncestorContainer)) {
+    if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
       console.error("Not commonAncestorContainer");
       return;
     }
-    restoreRange(currentRange);
+    restoreRange(selectionRange);
     if (cmd === "createLink") {
       const linkData = val;
       const target = linkData.blank ? "_blank" : "";
@@ -54136,10 +54155,24 @@ function TextToolbar(props) {
     }),
     title: "Background color"
   })), /* @__PURE__ */ React__default.createElement(Link$1, {
-    currentRange,
+    currentRange: selectionRange,
     onChange: (values2) => execCommand("createLink", values2),
     getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+  }), mergeTags && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
+    color: "#fff",
+    placement: "bottom",
+    title: /* @__PURE__ */ React__default.createElement(MergeTags$1, {
+      value: "",
+      onChange: (val) => execCommand("insertHTML", val)
+    }),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(Button$3, {
+    size: "small",
+    title: "Merge tag",
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-merge-tags"
+    })
+  })), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("removeFormat"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-close"
@@ -54452,7 +54485,10 @@ function ContextMenu({
   }), modal);
 }
 function BlockLayer() {
-  const { pageData: pageData2, values: values2 } = useEditorContext();
+  const {
+    pageData: pageData2,
+    formState: { values: values2 }
+  } = useEditorContext();
   const { onUploadImage, onAddCollection } = useEditorProps();
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
   const { setHoverIdx } = useHoverIdx();
@@ -54534,9 +54570,11 @@ function BlockLayer() {
   return useMemo$1(() => {
     if (!hasFocus)
       return null;
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
       id: "BlockLayerManager"
-    }, /* @__PURE__ */ React__default.createElement(BlockTree, {
+    }, {
+      [DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
+    }), /* @__PURE__ */ React__default.createElement(BlockTree, {
       selectedId: focusIdx2,
       defaultExpandAll: true,
       treeData,
@@ -54761,7 +54799,6 @@ function AddFont() {
     }
   });
 }
-var index$4 = "";
 var index$3 = "";
 const MergeTags = React__default.memo((props) => {
   const { mergeTags = {} } = useEditorProps();
@@ -56672,13 +56709,14 @@ class BlockAttributeConfigurationManager {
 __publicField(BlockAttributeConfigurationManager, "map", __spreadValues({}, blocks));
 function AttributePanel() {
   const { values: values2, focusBlock: focusBlock2 } = useBlock();
+  const { initialized } = useEditorContext();
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const value = getValueByIdx(values2, focusIdx2);
   const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
   const shadowRoot = getShadowRoot();
-  if (!value)
+  if (!value || !initialized)
     return null;
-  return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, /* @__PURE__ */ React__default.createElement(SelectionRangeProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
     style: { marginTop: 200, padding: "0 50px" }
   }, /* @__PURE__ */ React__default.createElement(TextStyle, {
     size: "extraLarge"
@@ -56695,7 +56733,7 @@ function AttributePanel() {
                 outline: none;
                 cursor: text;
               }
-              `), shadowRoot)));
+              `), shadowRoot));
 }
 var index$1 = "";
 const blockItem = "_blockItem_h5aqy_1";
@@ -59096,25 +59134,11 @@ function awaitForElement(idx) {
   });
   return promiseObj;
 }
-const BLOCK_SELECTED_CLASSNAME = "block-selected";
-const BLOCK_HOVER_CLASSNAME = "block-hover";
-const styleZIndex = {
-  SELECT_INDEX: 1,
-  HOVER_INDEX: 1,
-  DRAG_INDEX: 1,
-  SELECT_BLOCK_TOOLTIP: 1,
-  HOVER_BLOCK_TOOLTIP: 1,
-  DRAG_BLOCK_TOOLTIP: 1,
-  SELECT_BLOCK_CHILD: 2,
-  HOVER_BLOCK_CHILD: 2,
-  DRAG_BLOCK_CHILD: 2
-};
-function Toolbar({ block: block2 }) {
-  const {
-    moveBlock,
-    copyBlock,
-    removeBlock
-  } = useBlock();
+function Toolbar({
+  block: block2,
+  direction
+}) {
+  const { moveBlock, copyBlock, removeBlock } = useBlock();
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
   const { modal, setModalVisible } = useAddToCollection();
   const isPage = block2.type === BasicType.PAGE;
@@ -59134,7 +59158,7 @@ function Toolbar({ block: block2 }) {
     style: {
       position: "absolute",
       left: 0,
-      top: 0,
+      top: direction === "top" ? 0 : "100%",
       fontSize: 14,
       zIndex: 3,
       color: "#000",
@@ -59145,7 +59169,7 @@ function Toolbar({ block: block2 }) {
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
       color: "#ffffff",
-      transform: "translateY(-100%)",
+      transform: direction === "top" ? "translateY(-100%)" : void 0,
       display: "flex"
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
@@ -59208,6 +59232,7 @@ function FocusTooltip() {
   const [blockNode, setBlockNode] = useState(null);
   const { focusBlock: focusBlock2 } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
+  const [direction, setDirection] = useState("top");
   const isPage = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.PAGE;
   useEffect(() => {
     const promiseObj = awaitForElement(focusIdx2);
@@ -59219,17 +59244,33 @@ function FocusTooltip() {
     };
   }, [focusIdx2, focusBlock2]);
   useEffect(() => {
-    if (focusBlock2 && focusBlock2.type === BasicType.RAW) {
-      setBlockNode(null);
-      return;
-    }
-    if (blockNode && focusBlock2) {
-      blockNode.classList.add(BLOCK_SELECTED_CLASSNAME);
+    if (blockNode) {
+      const options2 = {
+        rootMargin: "-24px 0px -24px 0px",
+        root: getShadowRoot().host,
+        threshold: [0, 1e-3, 0.1, 0.999, 0.9, 1]
+      };
+      const checkDirection = (ev) => {
+        const [current] = ev;
+        const { top, bottom } = current.intersectionRect;
+        const rootBounds = current.rootBounds;
+        if (!rootBounds)
+          return;
+        if (rootBounds.bottom === bottom) {
+          setDirection("top");
+        } else if (rootBounds.top === top) {
+          setDirection("bottom");
+        } else {
+          setDirection("top");
+        }
+      };
+      const observer = new IntersectionObserver(checkDirection, options2);
+      observer.observe(blockNode);
       return () => {
-        blockNode.classList.remove(BLOCK_SELECTED_CLASSNAME);
+        observer.unobserve(blockNode);
       };
     }
-  }, [blockNode, focusBlock2]);
+  }, [blockNode]);
   const block2 = useMemo$1(() => {
     if (!focusBlock2)
       return null;
@@ -59245,9 +59286,14 @@ function FocusTooltip() {
       pointerEvents: "none",
       left: 0,
       top: 0,
-      zIndex: styleZIndex.SELECT_BLOCK_TOOLTIP
+      zIndex: 1
     }
-  }, /* @__PURE__ */ React__default.createElement(FocusStyle, null), /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("style", null, `
+                .email-block {
+                  position: relative;
+                }
+
+            `), /* @__PURE__ */ React__default.createElement("div", {
     style: {
       position: "absolute",
       zIndex: 9999,
@@ -59279,6 +59325,7 @@ function FocusTooltip() {
     iconName: "icon-move",
     style: { color: "#fff", cursor: "grab" }
   })))), /* @__PURE__ */ React__default.createElement(Toolbar, {
+    direction,
     block: block2
   }), /* @__PURE__ */ React__default.createElement("div", {
     style: {
@@ -59294,27 +59341,27 @@ function FocusTooltip() {
     }
   })), blockNode));
 }
-const FocusStyle = () => {
-  return /* @__PURE__ */ React__default.createElement("style", null, `
-      .block-selected {
-        position: relative;
-        z-index: 1;
-      }
-
-      .block-selected .email-block {
-        z-index: 2;
-      }
-
-      `);
-};
 function HoverTooltip() {
   const { hoverIdx, direction, isDragging } = useHoverIdx();
   const { focusIdx: focusIdx2 } = useFocusIdx();
+  const [isTop, setIsTop] = useState(false);
+  const { initialized } = useEditorContext();
   const [blockNode, setBlockNode] = useState(null);
+  const rootRef = useRef(null);
   useEffect(() => {
+    if (initialized) {
+      rootRef.current = getEditorRoot().getBoundingClientRect();
+    }
+  }, [initialized]);
+  useEffect(() => {
+    const rootBounds = rootRef.current;
+    if (!initialized || !rootBounds)
+      return;
     if (hoverIdx) {
       const promiseObj = awaitForElement(hoverIdx);
       promiseObj.promise.then((blockNode2) => {
+        const { top } = blockNode2.getBoundingClientRect();
+        setIsTop(rootBounds.top === top);
         setBlockNode(blockNode2);
       });
       return () => {
@@ -59323,16 +59370,7 @@ function HoverTooltip() {
     } else {
       setBlockNode(null);
     }
-  }, [hoverIdx]);
-  useEffect(() => {
-    getBlockNodes().forEach((blockNode2) => {
-      if (getNodeIdxFromClassName(blockNode2.classList) !== hoverIdx) {
-        blockNode2.classList.remove(BLOCK_HOVER_CLASSNAME);
-      } else {
-        blockNode2.classList.add(BLOCK_HOVER_CLASSNAME);
-      }
-    });
-  }, [hoverIdx]);
+  }, [hoverIdx, initialized]);
   const block2 = useMemo$1(() => {
     return blockNode ? BlockManager.getBlockByType(getNodeTypeFromClassName(blockNode.classList)) : null;
   }, [blockNode]);
@@ -59340,13 +59378,23 @@ function HoverTooltip() {
     return null;
   if (!block2 || !blockNode)
     return null;
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(TipNode, {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      top: 0,
+      left: 0,
+      zIndex: 2,
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */ React__default.createElement(TipNode, {
     type: isDragging ? "drag" : "hover",
     lineWidth: 1,
     title: block2.name,
-    direction,
+    direction: isTop ? "noEnoughTop" : direction,
     isDragging
-  }), blockNode));
+  })), blockNode));
 }
 function TipNode(props) {
   const { direction, title: title2, lineWidth, type: type2 } = props;
@@ -59373,14 +59421,19 @@ function TipNode(props) {
       left: 0,
       top: 0,
       fontSize: 14,
-      zIndex: styleZIndex.HOVER_BLOCK_TOOLTIP,
+      zIndex: 1,
       color: "#000",
       width: "100%",
       height: "100%",
       pointerEvents: "none",
       textAlign: "left"
     }
-  }, /* @__PURE__ */ React__default.createElement(HoverStyle, null), /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("style", null, `
+        .email-block {
+          position: relative;
+        }
+
+      `), /* @__PURE__ */ React__default.createElement("div", {
     style: {
       position: "absolute",
       left: 0,
@@ -59403,7 +59456,7 @@ function TipNode(props) {
       padding: "1px 5px",
       boxSizing: "border-box",
       whiteSpace: "nowrap",
-      transform: "translateY(-100%)"
+      transform: "translateX(-100%)"
     }
   }, title2))), props.isDragging && /* @__PURE__ */ React__default.createElement("div", {
     style: __spreadValues({
@@ -59427,28 +59480,13 @@ function TipNode(props) {
     }, positionStyleMap[props.direction || "none"])
   }, dragTitle)));
 }
-const HoverStyle = () => {
-  return /* @__PURE__ */ React__default.createElement("style", null, `
-      .block-hover {
-        position: relative;
-        z-index: 1;
-      }
-      .block-hover .email-block {
-        z-index: 2;
-      }
-
-      .block-dragover {
-        position: relative;
-        z-index: 2;
-      }
-
-
-      .block-dragover .email-block {
-        z-index: 3;
-      }
-      `);
-};
 const positionStyleMap = {
+  noEnoughTop: {
+    top: "0%",
+    left: "50%",
+    padding: "1px 5px",
+    transform: "translate(-50%, 0%)"
+  },
   top: {
     top: "0%",
     left: "50%",