easy-email-extensions 3.0.5 → 3.0.9

package/lib/components/Form/{ChexkBoxGroup.d.ts → CheckBoxGroup.d.ts}

@@ -11,4 +11,4 @@ export interface CheckboxGroupProps extends ArcoCheckboxGroupProps<any> {
     checkboxStyle?: Partial<React.CSSProperties>;
     vertical?: boolean;
 }
-export declare function ChexkBoxGroup(props: CheckboxGroupProps): JSX.Element;
+export declare function CheckBoxGroup(props: CheckboxGroupProps): JSX.Element;

package/lib/components/Form/InlineTextField/index.d.ts

@@ -3,6 +3,5 @@ export interface InlineTextProps {
     idx: string;
     children?: React.ReactNode;
     onChange: (content: string) => void;
-    mutators: Record<string, (...args: any[]) => any>;
 }
-export declare function InlineText({ idx, onChange, children, mutators: { setFieldTouched }, }: InlineTextProps): JSX.Element | null;
+export declare function InlineText({ idx, onChange, children }: InlineTextProps): JSX.Element | null;

package/lib/components/Form/enhancer.d.ts

@@ -17,4 +17,4 @@ export interface EnhancerProps<T> extends Partial<FieldProps<T, any>> {
     wrapper?: boolean;
     size?: InputProps['size'];
 }
-export default function enhancer<P>(Component: any, changeAdapter: (e: any) => any): (props: EnhancerProps<P> & Omit<P, 'value' | 'onChange' | 'mutators'>) => JSX.Element;
+export default function enhancer<P, C extends (...rest: any[]) => any = any>(Component: any, changeAdapter: C): (props: EnhancerProps<P> & Omit<P, 'value' | 'onChange' | 'mutators'>) => JSX.Element;

package/lib/components/RenderCount/index.d.ts

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

package/lib/index2.js

@@ -55,10 +55,10 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import React__default, { useCallback, useState, useRef, useEffect, useMemo, Children, isValidElement, cloneElement, createContext, useContext, Component, memo, forwardRef, useLayoutEffect, createRef, useImperativeHandle, PureComponent, useReducer, createElement, Suspense } from "react";
-import { IconFont, Stack as Stack$6, 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 { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, 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 { ReactSortable } from "react-sortablejs";
-import { useForm as useForm$1, useField, Form as Form$3, version as version$2 } from "react-final-form";
+import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
 var arco = "";
 const title = "_title_1gyaq_1";
@@ -5715,14 +5715,16 @@ function BlockTree(props) {
       if (node) {
         node.classList.remove(styles$8.treeNodeSelected);
       }
-      const selectedNode = eleRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${selectedId}"]`);
-      if (selectedNode) {
-        selectedNode.classList.add(styles$8.treeNodeSelected);
-        selectedNode.scrollIntoView({
-          block: "center",
-          behavior: "smooth"
-        });
-      }
+      setTimeout(() => {
+        const selectedNode = eleRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${selectedId}"]`);
+        if (selectedNode) {
+          selectedNode.classList.add(styles$8.treeNodeSelected);
+          selectedNode.scrollIntoView({
+            block: "center",
+            behavior: "smooth"
+          });
+        }
+      }, 50);
     }
   }, [eleRef, selectedId]);
   const onDragStart = useCallback((evt, sortable, store) => {
@@ -38481,75 +38483,88 @@ function enhancer(Component2, changeAdapter) {
       "wrapper",
       "debounceTime"
     ]);
-    const id = useMemo(() => {
-      return `enhancer-${primaryId++}`;
-    }, []);
-    const { change, mutators } = useForm$1();
     const {
-      input: { value, onBlur: onBlur3 },
-      meta: { touched, error: error2 }
+      input: { value, onChange }
     } = useField(name, {
       validate: validate3
     });
-    const onFieldChange = useCallback(lodash.exports.debounce((e) => {
-      const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
-      change(name, newVal);
-      onBlur3();
-    }), [change, name, onBlur3, onChangeAdapter]);
-    if (!wrapper2)
-      return /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({}, rest), {
-        mutators,
+    const [currentValue, setCurrentValue] = useState(value);
+    const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
+      onChange(val);
+    }, 100, {
+      maxWait: 500
+    }), []);
+    useEffect(() => {
+      setCurrentValue(value);
+    }, [value]);
+    const id = useMemo(() => {
+      return `enhancer-${primaryId++}`;
+    }, []);
+    return /* @__PURE__ */ React__default.createElement(Field, {
+      name,
+      validate: validate3
+    }, ({ input: { onBlur: onBlur3 }, meta: { touched, error: error2 } }) => {
+      const onFieldChange = useCallback((e) => {
+        const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
+        setCurrentValue(newVal);
+        debounceCallbackChange(newVal);
+        onBlur3();
+      }, [onBlur3, onChangeAdapter, debounceCallbackChange]);
+      if (!wrapper2)
+        return /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({}, rest), {
+          id,
+          name,
+          checked: valueAdapter ? valueAdapter(currentValue) : currentValue,
+          value: valueAdapter ? valueAdapter(currentValue) : currentValue,
+          onChange: onFieldChange
+        }));
+      return /* @__PURE__ */ React__default.createElement(Form.Item, {
+        noStyle: true,
+        validateStatus: touched && error2 ? "error" : void 0,
+        help: touched && error2
+      }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+        vertical: true,
+        spacing: "extraTight"
+      }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+        spacing: inline ? void 0 : "extraTight",
+        wrap: false,
+        vertical: !inline,
+        alignment: alignment ? alignment : inline ? "center" : void 0,
+        distribution
+      }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
+        className: labelHidden2 ? styles$5["label-hidden"] : void 0,
+        htmlFor: id
+      }, /* @__PURE__ */ React__default.createElement("span", {
+        style: { whiteSpace: "pre" }
+      }, required && /* @__PURE__ */ React__default.createElement("span", {
+        style: { color: "#ff4d4f" }
+      }, "* "), /* @__PURE__ */ React__default.createElement(TextStyle, {
+        size: size === "small" ? "smallest" : "small"
+      }, label)))), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+        fill: inline
+      }, /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
+        size
+      }, rest), {
         id,
         name,
-        checked: valueAdapter ? valueAdapter(value) : value,
-        value: valueAdapter ? valueAdapter(value) : value,
+        checked: valueAdapter ? valueAdapter(currentValue) : currentValue,
+        value: valueAdapter ? valueAdapter(currentValue) : currentValue,
         onChange: onFieldChange
-      }));
-    return /* @__PURE__ */ React__default.createElement(Form.Item, {
-      noStyle: true,
-      validateStatus: touched && error2 ? "error" : void 0,
-      help: touched && error2
-    }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-      spacing: inline ? void 0 : "extraTight",
-      wrap: false,
-      vertical: !inline,
-      alignment: alignment ? alignment : inline ? "center" : void 0,
-      distribution
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
-      className: labelHidden2 ? styles$5["label-hidden"] : void 0,
-      htmlFor: id
-    }, /* @__PURE__ */ React__default.createElement("span", {
-      style: { whiteSpace: "pre" }
-    }, required && /* @__PURE__ */ React__default.createElement("span", {
-      style: { color: "#ff4d4f" }
-    }, "* "), /* @__PURE__ */ React__default.createElement(TextStyle, {
-      size: size === "small" ? "smallest" : "small"
-    }, label)))), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: inline
-    }, /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
-      size
-    }, rest), {
-      mutators,
-      id,
-      name,
-      checked: valueAdapter ? valueAdapter(value) : value,
-      value: valueAdapter ? valueAdapter(value) : value,
-      onChange: onFieldChange
-    })))), /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$5.helperText
-    }, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
+      })))), /* @__PURE__ */ React__default.createElement("div", {
+        className: styles$5.helperText
+      }, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
+    });
   };
 }
 function Input(props) {
   const { quickchange, value = "", onKeyDown: onPropsKeyDown } = props;
   const onChange = useCallback((val) => {
     props.onChange(val);
-  }, [props]);
+  }, [props.onChange]);
   const onKeyDown = useCallback((ev) => {
-    onPropsKeyDown == null ? void 0 : onPropsKeyDown(ev);
+    if (onPropsKeyDown) {
+      onPropsKeyDown == null ? void 0 : onPropsKeyDown(ev);
+    }
     if (quickchange) {
       let step = 0;
       if (ev.key === "ArrowUp") {
@@ -38560,6 +38575,7 @@ function Input(props) {
       }
       if (step) {
         if (/^\d+/.test(value)) {
+          ev.preventDefault();
           onChange(String(value).replace(/^(\d+)/, (_, match) => {
             return (Number(match) + step).toString();
           }));
@@ -38572,7 +38588,7 @@ function Input(props) {
     onKeyDown
   }));
 }
-function ChexkBoxGroup(props) {
+function CheckBoxGroup(props) {
   const _a = props, { vertical = false } = _a, rest = __objRest(_a, ["vertical"]);
   return /* @__PURE__ */ React__default.createElement(Checkbox$1.Group, {
     style: lodash.exports.merge({ width: "100%" }, rest.style),
@@ -38635,33 +38651,10 @@ function awaitForElement$1(idx) {
   });
   return promiseObj;
 }
-function getEditNode(node) {
-  if (!node.classList)
-    return null;
-  if (node.classList.contains("node-type-text")) {
-    return node.querySelector("div");
-  }
-  if (node.classList.contains("node-type-button")) {
-    return node.querySelector("a") || node.querySelector("p");
-  }
-  return null;
-}
-function getEditContent(node) {
-  var _a, _b;
-  if (node.classList.contains("node-type-text")) {
-    return ((_a = getEditNode(node)) == null ? void 0 : _a.innerHTML) || "";
-  }
-  if (node.classList.contains("node-type-button")) {
-    return ((_b = getEditNode(node)) == null ? void 0 : _b.innerText) || "";
-  }
-  return "";
-}
-function InlineText({
-  idx,
-  onChange,
-  children,
-  mutators: { setFieldTouched }
-}) {
+function InlineText({ idx, onChange, children }) {
+  const {
+    mutators: { setFieldTouched }
+  } = useForm$1();
   const [isFocus, setIsFocus] = useState(false);
   const [textContainer, setTextContainer] = useState(null);
   useField(idx);
@@ -38752,8 +38745,9 @@ function InlineText({
 }
 function AutoComplete(props) {
   const options2 = useMemo(() => {
+    const selectedValue = (props.value || "").toLowerCase();
     return props.options.filter((item2) => {
-      return lodash.exports.isString(item2.value) && item2.value.toLowerCase().startsWith(props.value.toLowerCase()) || lodash.exports.isString(item2.label) && item2.label.toLowerCase().startsWith(props.value.toLowerCase());
+      return lodash.exports.isString(item2.value) && item2.value.toLowerCase().startsWith(selectedValue) || lodash.exports.isString(item2.label) && item2.label.toLowerCase().startsWith(selectedValue);
     }).map((item2) => __spreadProps(__spreadValues({}, item2), { name: item2.label }));
   }, [props.options, props.value]);
   return /* @__PURE__ */ React__default.createElement(ArcoAutoComplete, __spreadProps(__spreadValues({}, props), {
@@ -38869,14 +38863,16 @@ function Link$1(props) {
       trigger: "click",
       color: "#fff",
       position: "tl",
-      content: /* @__PURE__ */ React__default.createElement(Stack$6, {
+      content: /* @__PURE__ */ React__default.createElement("div", {
+        style: { color: "#333" }
+      }, /* @__PURE__ */ React__default.createElement(Stack$6, {
         vertical: true,
         spacing: "tight"
       }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(SearchField, {
         name: "link",
         label: "Link",
         labelHidden: true,
-        enterButton: "Apply",
+        searchButton: "Apply",
         placeholder: "https://www.example.com",
         onSearch: () => handleSubmit()
       }), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(SwitchField, {
@@ -38891,7 +38887,7 @@ function Link$1(props) {
         checkedText: "off",
         uncheckedText: "on",
         inline: true
-      })))
+      }))))
     }), /* @__PURE__ */ React__default.createElement(Button$4, {
       title: "Link",
       size: "mini",
@@ -39288,8 +39284,8 @@ const RichTextField = (props) => {
   }, props));
 };
 const TextField = enhancer(Input, (value) => value);
-const SearchField = enhancer(Input$5.Search, (e) => e.target.value);
-const TextAreaField = enhancer(Input$5.TextArea, (e) => e.target.value);
+const SearchField = enhancer(Input$5.Search, (val) => val);
+const TextAreaField = enhancer(Input$5.TextArea, (val) => val);
 const NumberField = enhancer(InputNumber$1, (e) => e);
 const SliderField = enhancer(Slider$2, (e) => e);
 const ColorPickerField = enhancer(ColorPicker, (e) => e);
@@ -39300,7 +39296,7 @@ const AutoCompleteField = enhancer(AutoComplete, (e) => e);
 const RadioGroupField = enhancer(RadioGroup, (value) => value);
 const SwitchField = enhancer(Switch$1, (e) => e);
 const DatePickerField = enhancer(DatePicker$1, (date) => date);
-const CheckboxField = enhancer(ChexkBoxGroup, (e) => e);
+const CheckboxField = enhancer(CheckBoxGroup, (e) => e);
 const EditTabField = enhancer(EditTab, (e) => e);
 const InlineTextField = enhancer(InlineText, (value) => value);
 const AddToCollection = ({ visible, setVisible }) => {
@@ -39986,32 +39982,39 @@ function Page() {
 }
 function Padding(props = {}) {
   const { title: title2 = "Padding", attributeName = "padding" } = props;
-  const { focusBlock: focusBlock2 } = useBlock();
+  const { focusBlock: focusBlock2, change } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  const defaultConfig = useMemo(() => focusBlock2 && createBlockDataByType(focusBlock2.type), [focusBlock2]);
-  const getVal = useCallback((index2) => {
-    return () => {
-      var _a, _b;
-      return ((_a = focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName]) == null ? void 0 : _a.split(" ")[index2]) || ((_b = defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName]) == null ? void 0 : _b.split(" ")[index2]);
-    };
-  }, [attributeName, defaultConfig == null ? void 0 : defaultConfig.attributes, focusBlock2 == null ? void 0 : focusBlock2.attributes]);
-  const setVal = useCallback((index2) => {
-    return (newVal) => {
-      if (newVal === "") {
-        newVal = "0px";
-      }
-      const vals = [
-        getVal(0)(),
-        getVal(1)(),
-        getVal(2)(),
-        getVal(3)()
-      ];
-      vals[index2] = newVal;
-      return vals.join(" ");
+  const type = focusBlock2 && focusBlock2.type;
+  const defaultConfig = useMemo(() => type ? createBlockDataByType(type) : void 0, [type]);
+  const paddingValue = focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName];
+  const defaultPaddingValue = defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName];
+  const paddingList = paddingValue == null ? void 0 : paddingValue.split(" ");
+  const defaultPaddingList = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
+  const paddingFormValues = useMemo(() => {
+    const paddingList2 = paddingValue == null ? void 0 : paddingValue.split(" ");
+    const defaultPaddingList2 = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
+    const top = paddingList2 ? paddingList2[0] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[0]) || "";
+    const right = paddingList2 ? paddingList2[1] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[1]) || "";
+    const bottom = paddingList2 ? paddingList2[2] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[2]) || "";
+    const left = paddingList2 ? paddingList2[3] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[3]) || "";
+    return {
+      top,
+      left,
+      bottom,
+      right
     };
-  }, [getVal]);
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+  }, [paddingList, defaultPaddingList]);
+  const onChancePadding = useCallback((val) => {
+    change(focusIdx2 + `.attributes[${attributeName}]`, val);
+  }, [focusIdx2, attributeName]);
+  return /* @__PURE__ */ React__default.createElement(Form$3, {
+    initialValues: paddingFormValues,
+    subscription: { submitting: true, pristine: true },
+    enableReinitialize: true,
+    onSubmit: () => {
+    }
+  }, () => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Stack$6, {
       vertical: true,
       spacing: "extraTight"
     }, /* @__PURE__ */ React__default.createElement(TextStyle, {
@@ -40023,18 +40026,14 @@ function Padding(props = {}) {
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       label: /* @__PURE__ */ React__default.createElement("span", null, "Top\xA0"),
       quickchange: true,
-      name: `${focusIdx2}.attributes.${attributeName}`,
-      valueAdapter: getVal(0),
-      onChangeAdapter: setVal(0),
+      name: "top",
       inline: true
     })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       label: "Bottom",
       quickchange: true,
-      name: `${focusIdx2}.attributes.${attributeName}`,
-      valueAdapter: getVal(2),
-      onChangeAdapter: setVal(2),
+      name: "bottom",
       inline: true
     }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
       wrap: false
@@ -40043,22 +40042,29 @@ function Padding(props = {}) {
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       label: /* @__PURE__ */ React__default.createElement("span", null, "Left"),
       quickchange: true,
-      name: `${focusIdx2}.attributes.${attributeName}`,
-      valueAdapter: getVal(3),
-      onChangeAdapter: setVal(3),
+      name: "left",
       inline: true
     })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       label: /* @__PURE__ */ React__default.createElement("span", null, "Right\xA0"),
       quickchange: true,
-      name: `${focusIdx2}.attributes.${attributeName}`,
-      valueAdapter: getVal(1),
-      onChangeAdapter: setVal(1),
+      name: "right",
       inline: true
-    }))));
-  }, [attributeName, focusIdx2, getVal, setVal, title2]);
+    })))), /* @__PURE__ */ React__default.createElement(PaddingChangeWrapper, {
+      onChange: onChancePadding
+    }));
+  });
 }
+const PaddingChangeWrapper = (props) => {
+  const {
+    values: { top, right, bottom, left }
+  } = useFormState();
+  useEffect(() => {
+    props.onChange([top, right, bottom, left].join(" "));
+  }, [top, right, bottom, left]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+};
 function BackgroundColor({
   title: title2 = "Background color"
 }) {
@@ -44229,7 +44235,7 @@ function Toolbar({
     style: {
       position: "absolute",
       left: 0,
-      top: direction === "top" ? 0 : "100%",
+      top: direction === "top" || isPage ? 0 : "100%",
       fontSize: 14,
       zIndex: 3,
       color: "#000",
@@ -44240,7 +44246,7 @@ function Toolbar({
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
       color: "#ffffff",
-      transform: direction === "top" ? "translateY(-100%)" : void 0,
+      transform: direction !== "top" || isPage ? void 0 : "translateY(-100%)",
       display: "flex"
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
@@ -44347,7 +44353,7 @@ function FocusTooltip() {
       return null;
     return BlockManager.getBlockByType(focusBlock2.type);
   }, [focusBlock2]);
-  if (isPage || !block2 || !blockNode)
+  if (!block2 || !blockNode)
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement("div", {
     style: {