easy-email-extensions 3.1.55 → 3.2.0

package/lib/AttributePanel/components/attributes/ClassName.d.ts

@@ -0,0 +1 @@
+export declare function ClassName(): JSX.Element;

package/lib/hooks/useFontFamily.d.ts

@@ -0,0 +1,6 @@
+export declare function useFontFamily(): {
+    fontList: {
+        value: string;
+        label: string;
+    }[];
+};

package/lib/index2.js

@@ -55,12 +55,12 @@ 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 { IconFont, useEditorProps, Stack as Stack$6, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, TextStyle, useEditorContext, useFocusIdx, 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, 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_15b2l_1";
+const title = "_title_1f523_1";
 var styles$6 = {
   title
 };
@@ -38408,14 +38408,14 @@ function RadioGroup(props) {
     value: item2.value
   }, item2.label))));
 }
-const helperText = "_helperText_fadvl_1";
-const labelHidden = "_label-hidden_fadvl_9";
-const editTab = "_editTab_fadvl_20";
-const inputWithUnit = "_inputWithUnit_fadvl_27";
-const inputWithUnitSelectOption = "_inputWithUnitSelectOption_fadvl_35";
+const helperText = "_helperText_k05ys_1";
+const labelHidden = "_label-hidden_k05ys_9";
+const editTab = "_editTab_k05ys_20";
+const inputWithUnit = "_inputWithUnit_k05ys_27";
+const inputWithUnitSelectOption = "_inputWithUnitSelectOption_k05ys_35";
 var styles$3 = {
   helperText,
-  "label-hidden": "_label-hidden_fadvl_9",
+  "label-hidden": "_label-hidden_k05ys_9",
   labelHidden,
   editTab,
   inputWithUnit,
@@ -38669,20 +38669,30 @@ function classnames(...rest) {
 const { TabPane } = Tabs$1;
 function EditTab(props) {
   const { value, additionItem } = props;
+  const [activeTab, setActiveTab] = useState("0");
   const onAddTab = () => {
+    setActiveTab(value.length.toString());
     props.onChange([...value, additionItem]);
   };
   const onDeleteTab = (index2) => {
+    if (index2 < activeTab) {
+      setActiveTab((Number(activeTab) - 1).toString());
+    }
+    if (index2 === activeTab) {
+      setActiveTab(Number(index2) > 0 ? `${Number(index2) - 1}` : "0");
+    }
     props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
   };
   return /* @__PURE__ */ React__default.createElement(Tabs$1, {
     className: classnames(styles$3.editTab),
     style: { border: "none" },
     type: "card",
+    activeTab,
     tabPosition: props.tabPosition,
     editable: true,
     onAddTab,
-    onDeleteTab
+    onDeleteTab,
+    onChange: setActiveTab
   }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane, {
     style: { paddingLeft: 12 },
     title: `${props.label || "Tab"} ${index2 + 1}`,
@@ -38947,8 +38957,27 @@ function FontSizeList(props) {
     key: item2.value
   }, item2.label))));
 }
+function useFontFamily() {
+  const { fontList: defaultFontList } = useEditorProps();
+  const { pageData: pageData2 } = useEditorContext();
+  const addFonts = pageData2.data.value.fonts;
+  const fontList2 = useMemo(() => {
+    const fonts = [];
+    if (defaultFontList) {
+      fonts.push(...defaultFontList);
+    }
+    if (addFonts) {
+      const options2 = addFonts.map((item2) => ({ value: item2.name, label: item2.name }));
+      fonts.unshift(...options2);
+    }
+    return fonts;
+  }, [addFonts, defaultFontList]);
+  return {
+    fontList: fontList2
+  };
+}
 function FontFamily$1(props) {
-  const { fontList: fontList2 = [] } = useEditorProps();
+  const { fontList: fontList2 } = useFontFamily();
   return /* @__PURE__ */ React__default.createElement("div", {
     style: {
       maxWidth: 150,
@@ -39140,13 +39169,11 @@ function AddFont() {
         }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
           fill: true
         }, /* @__PURE__ */ React__default.createElement(TextField, {
-          inline: true,
           name: `${focusIdx2}.data.value.fonts.${index2}.name`,
           label: "Name"
         })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
           fill: true
         }, /* @__PURE__ */ React__default.createElement(TextField, {
-          inline: true,
           name: `${focusIdx2}.data.value.fonts.${index2}.href`,
           label: "Href"
         })), /* @__PURE__ */ React__default.createElement(Button$4, {
@@ -39217,8 +39244,8 @@ function EyeIcon() {
   });
 }
 function FontFamily() {
-  const { fontList: fontList2 = [] } = useEditorProps();
   const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { fontList: fontList2 } = useFontFamily();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(AutoCompleteField, {
       style: { minWidth: 100, flex: 1 },
@@ -39298,7 +39325,10 @@ function Page() {
   }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
     label: "Content background",
     name: `${focusIdx2}.data.value.content-background-color`
-  }))), /* @__PURE__ */ React__default.createElement(AddFont, null))))));
+  }))), /* @__PURE__ */ React__default.createElement(TextAreaField, {
+    label: "Style",
+    name: `${focusIdx2}.data.value.user-style.content`
+  }), /* @__PURE__ */ React__default.createElement(AddFont, null))))));
 }
 function Padding(props = {}) {
   const { title: title2 = "Padding", attributeName = "padding" } = props;
@@ -39449,6 +39479,15 @@ function Border() {
     })));
   }, [focusIdx2]);
 }
+function ClassName() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Class name",
+      name: `${focusIdx2}.attributes.css-class`
+    });
+  }, [focusIdx2]);
+}
 function Section() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
@@ -39511,7 +39550,12 @@ function Section() {
   }, /* @__PURE__ */ React__default.createElement(Background, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
     header: "Border"
-  }, /* @__PURE__ */ React__default.createElement(Border, null))));
+  }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function Width({
   inline = false,
@@ -39581,7 +39625,12 @@ function Column() {
   }, /* @__PURE__ */ React__default.createElement(Background, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
     header: "Border"
-  }, /* @__PURE__ */ React__default.createElement(Border, null))));
+  }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 const options$9 = [
   {
@@ -39926,7 +39975,12 @@ function Text() {
   }), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
-  }))))), /* @__PURE__ */ React__default.createElement(HtmlEditor, {
+  })))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))), /* @__PURE__ */ React__default.createElement(HtmlEditor, {
     visible,
     setVisible
   }));
@@ -40018,7 +40072,12 @@ function Image$1() {
   }, /* @__PURE__ */ React__default.createElement(TextField, {
     label: "alt",
     name: `${focusIdx2}.attributes.alt`
-  }))))));
+  }))), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "class name",
+    name: `${focusIdx2}.attributes.css-class`
+  })))));
 }
 function Group() {
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Collapse$1, {
@@ -40039,7 +40098,12 @@ function Group() {
   }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
-  })))));
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 const options$5 = [
   {
@@ -40512,7 +40576,12 @@ function Button() {
   }, /* @__PURE__ */ React__default.createElement(LetterSpacing, null))), /* @__PURE__ */ React__default.createElement(Align, null), /* @__PURE__ */ React__default.createElement(FontStyle, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "3",
     header: "Border"
-  }, /* @__PURE__ */ React__default.createElement(Border, null))));
+  }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function Divider() {
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Collapse$1, {
@@ -40551,7 +40620,12 @@ function Divider() {
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
-  })))));
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function Wrapper() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -40585,7 +40659,12 @@ function Wrapper() {
     label: "Background border radius",
     name: `${focusIdx2}.attributes.border-radius`,
     inline: true
-  })))));
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function Spacer() {
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Collapse$1, {
@@ -40600,7 +40679,12 @@ function Spacer() {
     header: "Background"
   }, /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, {
     title: "Background color"
-  }))));
+  })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function Raw() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -40690,7 +40774,12 @@ function Accordion() {
   }))), /* @__PURE__ */ React__default.createElement(TextField, {
     label: "border",
     name: `${focusIdx2}.attributes.border`
-  })))));
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function AccordionElement() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -40913,7 +41002,12 @@ function Carousel() {
   }, /* @__PURE__ */ React__default.createElement(TextField, {
     label: "Border radius of the thumbnails",
     name: `${focusIdx2}.attributes.tb-border-radius`
-  }))))));
+  })))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function CarouselImage({
   item: item2,
@@ -41020,7 +41114,12 @@ function Hero() {
     unitOptions: "percent"
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
-  }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null)))))));
+  }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null))))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function Navbar() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -41054,7 +41153,12 @@ function Navbar() {
       color: "#1890ff",
       "font-size": "13px"
     }
-  }))));
+  })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function NavbarLink({
   item: item2,
@@ -41196,7 +41300,12 @@ function Social() {
   }), /* @__PURE__ */ React__default.createElement(Padding, {
     attributeName: "text-padding",
     title: "Text padding"
-  })))));
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: "Extra"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function SocialElement({
   index: index2
@@ -42062,7 +42171,12 @@ function BlockLayer(props) {
       style: { fontSize: 12, color: "#999" }
     }), /* @__PURE__ */ React__default.createElement("div", {
       title: lodash.exports.isString(title2) ? title2 : "",
-      style: { overflow: "hidden", whiteSpace: "nowrap", width: "5em" }
+      style: {
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        width: "5em",
+        textOverflow: "ellipsis"
+      }
     }, /* @__PURE__ */ React__default.createElement(TextStyle, {
       size: "smallest"
     }, title2))), /* @__PURE__ */ React__default.createElement("div", {
@@ -44899,7 +45013,6 @@ function TipNode(props) {
     }
   }, type === "hover" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      position: "fixed",
       backgroundColor: color,
       color: "#ffffff",
       height: "22px",
@@ -44908,7 +45021,8 @@ function TipNode(props) {
       padding: "1px 5px",
       boxSizing: "border-box",
       whiteSpace: "nowrap",
-      transform: "translateX(-100%)"
+      transform: "translateX(-100%)",
+      fontFamily: "sans-serif"
     }
   }, title2))), props.isDragging && /* @__PURE__ */ React__default.createElement("div", {
     style: __spreadValues({