easy-email-extensions 3.0.8 → 3.0.9

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

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

package/lib/index2.js

@@ -58,7 +58,7 @@ import React__default, { useCallback, useState, useRef, useEffect, useMemo, Chil
 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 { useField, useForm as useForm$1, 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";
@@ -38484,75 +38484,76 @@ function enhancer(Component2, changeAdapter) {
       "debounceTime"
     ]);
     const {
-      input: { value, onBlur: onBlur3 },
-      meta: { touched, error: error2 }
+      input: { value, onChange }
     } = useField(name, {
       validate: validate3
     });
     const [currentValue, setCurrentValue] = useState(value);
-    const id = useMemo(() => {
-      return `enhancer-${primaryId++}`;
-    }, []);
-    const { change, mutators } = useForm$1();
     const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
-      change(name, val);
-    }, 60, {
-      maxWait: 60
-    }), [change, name]);
+      onChange(val);
+    }, 100, {
+      maxWait: 500
+    }), []);
     useEffect(() => {
       setCurrentValue(value);
     }, [value]);
-    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), {
-        mutators,
+    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(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(currentValue) : currentValue,
-      value: valueAdapter ? valueAdapter(currentValue) : currentValue,
-      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) {
@@ -38650,12 +38651,10 @@ function awaitForElement$1(idx) {
   });
   return promiseObj;
 }
-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);
@@ -39983,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, {
@@ -40020,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
@@ -40040,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"
 }) {