easy-email-pro-theme 1.50.19 → 1.51.0

package/lib/index.js

@@ -54,7 +54,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { classnames, useEditorActions, useDragNodePath, useStandaloneElementEditing, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useLockState, useEventCallback, useSelectedNodePath, useSelectedNode, useSetSelectedNodePath, useSetHoverNodePath, useUniversalElementEditing, useUniversalElementPath, useStandaloneElementPath, useStandaloneElement, useActiveTab, ActiveTabKeys, toggleFormat, TextFormat, useUniversalElement, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, useForceUpdate, IframeComponent, useEditorState, HtmlStringToReactNodes, useStandaloneElementSaveButton, useEqualState, ExternalComponents, useDragoverDirection } from "easy-email-pro-editor";
+import { classnames, useEditorActions, useDragNodePath, useStandaloneElementEditing, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useLockState, useEventCallback, useSelectedNodePath, useSelectedNode, useSetSelectedNodePath, useSetHoverNodePath, useUniversalElementEditing, useUniversalElementPath, useStandaloneElementPath, useStandaloneElement, useActiveTab, ActiveTabKeys, toggleFormat, TextFormat, useUniversalElement, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, useEditorState, useForceUpdate, useEqualState, IframeComponent, HtmlStringToReactNodes, useStandaloneElementSaveButton, ExternalComponents, useDragoverDirection } from "easy-email-pro-editor";
 import { useSlate, ReactEditor, useSlateStatic, useSelected } from "slate-react";
 import * as React$2 from "react";
 import React__default, { useRef, useState, useEffect, useCallback, useMemo, createContext, useContext, useLayoutEffect, memo, useReducer, cloneElement, forwardRef, Suspense, Component, createElement } from "react";
@@ -63,7 +63,7 @@ import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounc
 import { Editor, Range, Node, Transforms, Path, Text as Text$2, createEditor } from "slate";
 import { nanoid } from "nanoid";
 import { Form, Input, Modal, Collapse, Space, Empty, Card, Grid, Button as Button$2, Drawer, Switch, Typography as Typography$1, Tabs, Radio, Divider as Divider$2, Alert, Popconfirm, Tooltip, Message, PageHeader, Spin, Layout as Layout$2, Popover, Select as Select$1, Slider, InputNumber, Tag, Link as Link$3, List as List$1, Skeleton, Trigger } from "@arco-design/web-react";
-import { IconPlus, IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconLock, IconUnlock, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown } from "@arco-design/web-react/icon";
+import { IconPlus, IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconPalette, IconLock, IconUnlock, IconImage, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown } from "@arco-design/web-react/icon";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import mjml from "mjml-browser";
 import { HistoryEditor } from "slate-history";
@@ -6964,7 +6964,7 @@ const action = "_action_14paa_43";
 const itemTitle = "_itemTitle_14paa_60";
 const itemCollapse = "_itemCollapse_14paa_66";
 const itemChildren = "_itemChildren_14paa_87";
-const styles$3 = {
+const styles$4 = {
   item: item$2,
   itemContent,
   itemActions,
@@ -7154,7 +7154,7 @@ function SortableComponentItem({
   const isVoid = BlockManager.getBlockByType(component.block.type).void;
   const hasBlockChildren = !isVoid && component.block.children.every((child) => NodeUtils.isBlockElement(child));
   const hideWhenDragging = isDraggingLevel && !isCurrentDragging;
-  return /* @__PURE__ */ React__default.createElement("div", { ref: setNodeRef, style, className: styles$3.sortableItem }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref: setNodeRef, style, className: styles$4.sortableItem }, /* @__PURE__ */ React__default.createElement(
     ComponentItem,
     {
       component,
@@ -7164,7 +7164,7 @@ function SortableComponentItem({
       onToggleCollapse,
       dragHandleProps: __spreadValues(__spreadValues({}, attributes), listeners)
     }
-  ), hasBlockChildren && !isCollapsed && !isDragging && !hideWhenDragging && /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemChildren }, /* @__PURE__ */ React__default.createElement(
+  ), hasBlockChildren && !isCollapsed && !isDragging && !hideWhenDragging && /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemChildren }, /* @__PURE__ */ React__default.createElement(
     ElementList,
     {
       blocks: component.block.children,
@@ -7229,10 +7229,10 @@ function ComponentItem({
     }
     return text;
   }, [component.block, label]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: styles$3.item, onClick }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemTitle }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles$4.item, onClick }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemTitle }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: styles$3.itemCollapse,
+      className: styles$4.itemCollapse,
       style: { opacity: hasBlockChildren ? 1 : 0 },
       onClick: handleCollapseClick
     },
@@ -7246,27 +7246,27 @@ function ComponentItem({
       },
       collapseIcon
     )
-  ), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
     SharedComponents.ElementIcon,
     {
       type: component.block.type,
       width: 16,
       height: 16
     }
-  ), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: styles$3.itemActions,
+      className: styles$4.itemActions,
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: styles$3.action, onClick: onRemove }, /* @__PURE__ */ React__default.createElement(IconDelete, null)),
+    /* @__PURE__ */ React__default.createElement("div", { className: styles$4.action, onClick: onRemove }, /* @__PURE__ */ React__default.createElement(IconDelete, null)),
     /* @__PURE__ */ React__default.createElement(
       "div",
       __spreadValues({
         style: {
           cursor: "grab"
         },
-        className: styles$3.action
+        className: styles$4.action
       }, dragHandleProps),
       /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 20 20", width: "12" }, /* @__PURE__ */ React__default.createElement("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }))
     )
@@ -7948,7 +7948,7 @@ const TabHeader = (props) => {
   ));
 };
 const hoverUnderline = "_hoverUnderline_8d8dl_1";
-const styles$2 = {
+const styles$3 = {
   hoverUnderline
 };
 function BlockPaths({
@@ -8010,7 +8010,7 @@ function BlockPaths({
           /* @__PURE__ */ React__default.createElement(
             "span",
             {
-              className: styles$2.hoverUnderline,
+              className: styles$3.hoverUnderline,
               onClick: () => setSelectedNodePath(item2.path)
             },
             item2.name
@@ -26663,7 +26663,7 @@ const directionAdapter = {
 };
 const transparentIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABAElEQVRIie2WwW7CMBBEZ8NKOJd8CPRABVVJ+fxUUEgQPbT9kBziFAWbU4FkjXCBICExtxk9Z7KxZYWSJLFoiJmbEYwxMMaI/JC1dv+oQmvE8QTWWvDo5VUs/FwtHSUWvmxTwUniQhHRdUuIyJm3Oslf6dVLmtMQEfhjNhVgFEUiq6oCvmye5zXPSnUF1Os/iSxLF/BlZ9P3mm9tTw4/231uvKuo9RIA4MHzUITHrgpfNgxDFFrv/E0meZT8S/zz/SXCsvyVIDP82U7dr9cSGsdvIsvSBXzZm10rj5KzJf99AGTpXGRB4H4fF6uUgi7LfYnrCLq18eSAqtpAddXObwEoMVtvVloS0QAAAABJRU5ErkJggg==";
 const transparentColor$1 = "rgba(0,0,0,0)";
-function ColorPicker$1(props) {
+const ColorPickerContainer = (props) => {
   const {
     value = "",
     onChange,
@@ -26793,10 +26793,13 @@ function ColorPicker$1(props) {
       placeholder: placeholder == null ? void 0 : placeholder.replace("#", "")
     }
   ));
-}
+};
+const ColorPicker$1 = (props) => {
+  return /* @__PURE__ */ React__default.createElement(ColorProvider, null, /* @__PURE__ */ React__default.createElement(ColorPickerContainer, __spreadValues({}, props)));
+};
 const DefaultColorPicker = enhancer(ColorPicker$1);
 const ColorPickerField = (props) => {
-  return /* @__PURE__ */ React__default.createElement(ColorProvider, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     DefaultColorPicker,
     __spreadProps(__spreadValues({}, props), {
       formItem: __spreadValues(__spreadProps(__spreadValues({}, colorAdapter), {
@@ -26818,7 +26821,7 @@ const ColorPickerField = (props) => {
         ]
       }), props.formItem)
     })
-  ));
+  );
 };
 const idMap = /* @__PURE__ */ new Map();
 function reorder(list, startIndex, endIndex) {
@@ -27137,7 +27140,7 @@ const cardItemLeft = "_cardItemLeft_8uw8m_71";
 const cardItemRight = "_cardItemRight_8uw8m_85";
 const selectImage = "_selectImage_8uw8m_93";
 const exportFreeImage = "_exportFreeImage_8uw8m_110";
-const styles$1 = {
+const styles$2 = {
   container,
   error,
   item,
@@ -27356,7 +27359,7 @@ function ImageUploader(props) {
   );
   const content = useMemo(() => {
     if (isUploading) {
-      return /* @__PURE__ */ React__default.createElement("div", { className: styles$1["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$1["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$1["btn-wrap"] })));
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles$2["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$2["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$2["btn-wrap"] })));
     }
     if (!props.value) {
       return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
@@ -27377,10 +27380,10 @@ function ImageUploader(props) {
             lineHeight: "22px"
           }
         },
-        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
+        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$2.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$1.exportFreeImage,
+            className: styles$2.exportFreeImage,
             onClick: () => setUnsplashVisible(true)
           },
           t("Export free images")
@@ -27426,7 +27429,7 @@ function ImageUploader(props) {
         triggerProps: {
           popupStyle: { display: "inline-flex" }
         },
-        triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$1.actionItem }, t("Replace"))
+        triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$2.actionItem }, t("Replace"))
       },
       /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "1", onClick: onUpload }, t("Select image")),
       /* @__PURE__ */ React__default.createElement(
@@ -27437,10 +27440,10 @@ function ImageUploader(props) {
         },
         t("Export free images")
       )
-    ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$1.actionItem, onClick: onUpload }, t("Replace")), enablePreview && /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), enablePreview && /* @__PURE__ */ React__default.createElement(
+    ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$2.actionItem, onClick: onUpload }, t("Replace")), enablePreview && /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), enablePreview && /* @__PURE__ */ React__default.createElement(
       "span",
       {
-        className: styles$1.actionItem,
+        className: styles$2.actionItem,
         onClick: () => setPreview(true)
       },
       t("Preview")
@@ -27908,11 +27911,621 @@ function PixelField(props) {
     })
   );
 }
+const controlSection = "_controlSection_1t3ne_1";
+const controlGroup = "_controlGroup_1t3ne_7";
+const colorHeader = "_colorHeader_1t3ne_11";
+const colorList = "_colorList_1t3ne_18";
+const colorItem = "_colorItem_1t3ne_34";
+const positionControl = "_positionControl_1t3ne_44";
+const percentSign = "_percentSign_1t3ne_50";
+const deleteButton = "_deleteButton_1t3ne_55";
+const sizeInputs = "_sizeInputs_1t3ne_62";
+const styles$1 = {
+  controlSection,
+  controlGroup,
+  colorHeader,
+  colorList,
+  colorItem,
+  positionControl,
+  percentSign,
+  deleteButton,
+  sizeInputs
+};
+const MAX_COLORS = 4;
+const MIN_COLORS = 2;
+const GRADIENT_PRESETS = [
+  {
+    value: "1",
+    colors: [
+      { color: "#2CD8D5", position: 0 },
+      { color: "#C5C1FF", position: 56 },
+      { color: "#FFBAC3", position: 100 }
+    ],
+    label: "Prism"
+  },
+  {
+    value: "2",
+    colors: [
+      { color: "#00C6FB", position: 0 },
+      { color: "#005BEA", position: 100 }
+    ],
+    label: "Ocean"
+  },
+  {
+    value: "3",
+    colors: [
+      { color: "#F6D365", position: 0 },
+      { color: "#FDA085", position: 100 }
+    ],
+    label: "Sun"
+  },
+  {
+    value: "4",
+    colors: [
+      { color: "#21D4FD", position: 0 },
+      { color: "#B721FF", position: 100 }
+    ],
+    label: "Purple"
+  },
+  {
+    value: "5",
+    colors: [
+      { color: "#3EECAC", position: 0 },
+      { color: "#EE74E1", position: 100 }
+    ],
+    label: "Aurora"
+  },
+  {
+    value: "6",
+    colors: [
+      { color: "#FA8BFF", position: 0 },
+      { color: "#2BD2FF", position: 52 },
+      { color: "#2BFF88", position: 100 }
+    ],
+    label: "Rainbow"
+  },
+  {
+    value: "7",
+    colors: [
+      { color: "#08AEEA", position: 0 },
+      { color: "#2AF598", position: 100 }
+    ],
+    label: "Mint"
+  },
+  {
+    value: "8",
+    colors: [
+      { color: "#FBAB7E", position: 0 },
+      { color: "#F7CE68", position: 100 }
+    ],
+    label: "Amber"
+  },
+  {
+    value: "9",
+    colors: [
+      { color: "#85FFBD", position: 0 },
+      { color: "#FFFB7D", position: 100 }
+    ],
+    label: "Lime"
+  },
+  {
+    value: "10",
+    colors: [
+      { color: "#FF3CAC", position: 0 },
+      { color: "#784BA0", position: 50 },
+      { color: "#2B86C5", position: 100 }
+    ],
+    label: "Dream"
+  },
+  {
+    value: "11",
+    colors: [
+      { color: "#0093E9", position: 0 },
+      { color: "#80D0C7", position: 100 }
+    ],
+    label: "Aqua"
+  },
+  {
+    value: "12",
+    colors: [
+      { color: "#D9AFD9", position: 0 },
+      { color: "#97D9E1", position: 100 }
+    ],
+    label: "Lilac"
+  },
+  {
+    value: "13",
+    colors: [
+      { color: "#8BC6EC", position: 0 },
+      { color: "#9599E2", position: 100 }
+    ],
+    label: "Violet"
+  },
+  {
+    value: "14",
+    colors: [
+      { color: "#A9C9FF", position: 0 },
+      { color: "#FFBBEC", position: 100 }
+    ],
+    label: "Pink"
+  },
+  {
+    value: "15",
+    colors: [
+      { color: "#FEE140", position: 0 },
+      { color: "#FA709A", position: 100 }
+    ],
+    label: "Peach"
+  },
+  {
+    value: "16",
+    colors: [
+      { color: "#00DBDE", position: 0 },
+      { color: "#FC00FF", position: 100 }
+    ],
+    label: "Neon"
+  },
+  {
+    value: "17",
+    colors: [
+      { color: "#4158D0", position: 0 },
+      { color: "#C850C0", position: 46 },
+      { color: "#FFCC70", position: 100 }
+    ],
+    label: "Sunset"
+  },
+  {
+    value: "18",
+    colors: [
+      { color: "#0BA360", position: 0 },
+      { color: "#3CBA92", position: 100 }
+    ],
+    label: "Jade"
+  },
+  {
+    value: "19",
+    colors: [
+      { color: "#FFDEE9", position: 0 },
+      { color: "#B5FFFC", position: 100 }
+    ],
+    label: "Candy"
+  },
+  {
+    value: "20",
+    colors: [
+      { color: "#74EBD5", position: 0 },
+      { color: "#9FACE6", position: 100 }
+    ],
+    label: "Dawn"
+  }
+];
+function GradientGenerator(props) {
+  const [loading, setLoading] = useState(false);
+  const { setLock } = useEditorState();
+  const canvasRef = useRef(null);
+  const { isOpen, setIsOpen } = props;
+  const { resetSelectedNode } = useElementInteract();
+  const { lastSelectedNode, isChanged } = useLastSelectedNode();
+  const changeRef = useRefState(isChanged);
+  const { selectedNode } = useSelectedNode();
+  const data = props.data;
+  const colors = data.colors;
+  const lock = useLockState();
+  const onChangeRef = useRefState(props.onChange);
+  const setData = useCallback(
+    (val) => {
+      onChangeRef.current(val);
+    },
+    [onChangeRef]
+  );
+  const addColor = () => {
+    if (colors.length >= MAX_COLORS) {
+      Message.warning(t(`Maximum 4 colors allowed`));
+      return;
+    }
+    const newColor = {
+      id: nanoid(),
+      color: "#ffffff",
+      position: 50
+    };
+    setData(__spreadProps(__spreadValues({}, data), {
+      colors: [...colors, newColor].sort((a, b) => a.position - b.position)
+    }));
+  };
+  const previewRef = useRefState(props.onPreview);
+  const removeColor = (index2) => {
+    const newColors = cloneDeep(colors).filter((_, i) => i !== index2);
+    setData(__spreadProps(__spreadValues({}, data), {
+      colors: newColors.sort((a, b) => a.position - b.position)
+    }));
+  };
+  const generateGradientBlob = useCallback(
+    (params) => __async(this, null, function* () {
+      const { colors: colors2, gradientAngle, gradientSize, gradientType } = params;
+      const canvas = canvasRef.current;
+      if (!canvas)
+        return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx)
+        return;
+      const size = gradientSize;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      canvas.width = size.width;
+      canvas.height = size.height;
+      let gradient;
+      if (gradientType === "linear") {
+        const canvasAngle = (360 - gradientAngle + 90) % 360 * Math.PI / 180;
+        const x1 = size.width / 2 - Math.cos(canvasAngle) * size.width / 2;
+        const y1 = size.height / 2 - Math.sin(canvasAngle) * size.height / 2;
+        const x2 = size.width / 2 + Math.cos(canvasAngle) * size.width / 2;
+        const y2 = size.height / 2 + Math.sin(canvasAngle) * size.height / 2;
+        gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+      } else {
+        gradient = ctx.createRadialGradient(
+          size.width / 2,
+          size.height / 2,
+          0,
+          size.width / 2,
+          size.height / 2,
+          Math.min(size.width, size.height) / 2
+        );
+      }
+      colors2.forEach((color2) => {
+        gradient.addColorStop(color2.position / 100, color2.color);
+      });
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, size.width, size.height);
+      const blob = yield new Promise((resolve) => {
+        canvas.toBlob((blob2) => {
+          resolve(blob2);
+        });
+      });
+      return blob;
+    }),
+    []
+  );
+  const generatePreview = useCallback(
+    debounce$2(
+      (params) => {
+        generateGradientBlob(params).then((blob) => {
+          var _a;
+          if (!blob)
+            return;
+          const url = URL.createObjectURL(blob);
+          (_a = previewRef.current) == null ? void 0 : _a.call(previewRef, url);
+        });
+      },
+      100
+    ),
+    [generateGradientBlob, previewRef]
+  );
+  const handelSave = () => __async(this, null, function* () {
+    var _a;
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    try {
+      setLoading(true);
+      const blob = yield generateGradientBlob({
+        colors,
+        gradientAngle: data.angle,
+        gradientSize: { width: data.width, height: data.height },
+        gradientType: data.type
+      });
+      if (!blob)
+        return;
+      yield (_a = props.onSave) == null ? void 0 : _a.call(props, data, blob);
+      handleClose();
+    } catch (error2) {
+      console.error(error2);
+      Message.error(t(`Save failed`));
+    } finally {
+      setLoading(false);
+    }
+  });
+  useEffect(() => {
+    if (!isOpen)
+      return;
+    if (!changeRef.current)
+      return;
+    generatePreview({
+      colors,
+      gradientAngle: data.angle,
+      gradientSize: {
+        width: data.width,
+        height: data.height
+      },
+      gradientType: data.type
+    });
+    return () => {
+      generatePreview.cancel();
+    };
+  }, [
+    colors,
+    generatePreview,
+    data.angle,
+    data.width,
+    data.height,
+    data.type,
+    isOpen,
+    changeRef
+  ]);
+  useEffect(() => {
+    if (lastSelectedNode.current && !isEqual(lastSelectedNode.current, selectedNode)) {
+      console.log("set lock");
+      setLock(true);
+    } else {
+      resetSelectedNode();
+      setLock(false);
+    }
+  }, [lastSelectedNode, selectedNode, setLock, resetSelectedNode]);
+  const handleClose = () => {
+    lastSelectedNode.current = null;
+    setIsOpen(false);
+    setLock(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Drawer,
+    {
+      className: "GradientGeneratorDrawer",
+      bodyStyle: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 60
+      },
+      closable: false,
+      width: "100%",
+      visible: isOpen && props.enable,
+      getPopupContainer: () => {
+        return document.body.querySelector("#ConfigurationDrawer") || document.body;
+      },
+      title: /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "left" } }, /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
+        Button$2,
+        {
+          type: "text",
+          icon: /* @__PURE__ */ React__default.createElement(IconLeft, null),
+          disabled: lock,
+          onClick: handleClose
+        }
+      ), /* @__PURE__ */ React__default.createElement(IconPalette, null), " ", t(`Gradient Generator`))),
+      okButtonProps: {
+        type: "primary",
+        onClick: handelSave,
+        loading
+      },
+      okText: t(`Generate`),
+      cancelText: t(`Cancel`),
+      onCancel: handleClose,
+      cancelButtonProps: {
+        disabled: lock
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("div", { key: isOpen.toString() }, isChanged && lock && /* @__PURE__ */ React__default.createElement(
+      Alert,
+      {
+        type: "warning",
+        content: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("span", null, t(`Content has been modified. Please save before leaving.`)), " ", /* @__PURE__ */ React__default.createElement(
+          Popconfirm,
+          {
+            focusLock: true,
+            title: t("Do you want to discard?"),
+            okText: t("Discard"),
+            cancelText: t("Cancel"),
+            style: { zIndex: 9999 },
+            getPopupContainer: () => document.body,
+            okButtonProps: {
+              status: "danger"
+            },
+            onOk: () => {
+              resetSelectedNode();
+              handleClose();
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "span",
+            {
+              style: {
+                color: "rgb(var(--danger-6))",
+                cursor: "pointer"
+              }
+            },
+            t("Discard")
+          )
+        ))
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlSection }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(
+      Form.Item,
+      {
+        label: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                width: "20px",
+                height: "20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: "4px",
+                backgroundImage: "linear-gradient(to right, rgb(99, 102, 241), rgb(168, 85, 247))",
+                color: "white"
+              }
+            },
+            /* @__PURE__ */ React__default.createElement(IconPalette, { color: "white" })
+          ),
+          /* @__PURE__ */ React__default.createElement("span", null, "Preset")
+        )),
+        layout: "vertical"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Select$1,
+        {
+          style: { width: "100%" },
+          onChange: (value) => {
+            const preset = GRADIENT_PRESETS.find(
+              (p) => p.value === value
+            );
+            if (preset) {
+              setData(__spreadProps(__spreadValues({}, data), {
+                colors: preset.colors.map((c) => __spreadProps(__spreadValues({}, c), {
+                  id: nanoid()
+                }))
+              }));
+            }
+          }
+        },
+        GRADIENT_PRESETS.map((preset) => /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: preset.value, value: preset.value }, /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              width: "100%"
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                width: `calc(100% - 80px)`,
+                height: "24px",
+                borderRadius: "4px",
+                backgroundImage: `linear-gradient(to right, ${preset.colors.map((c) => `${c.color} ${c.position}%`).join(", ")})`,
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                fontSize: "12px",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              }
+            },
+            preset.label
+          )
+        )))
+      )
+    )), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: "0px 0 10px 0" } }), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Gradient Type`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+      Select$1,
+      {
+        style: { width: "100%" },
+        options: [
+          {
+            label: t(`Linear Gradient`),
+            value: "linear"
+          },
+          {
+            label: t(`Radial Gradient`),
+            value: "radial"
+          }
+        ],
+        value: data.type,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), {
+            type: value
+          }));
+        }
+      }
+    ))), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 11 }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Width`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+      InputNumber,
+      {
+        style: { width: "100%" },
+        value: data.width,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), { width: value }));
+        }
+      }
+    ))), /* @__PURE__ */ React__default.createElement(Grid.Col, { offset: 2, span: 11 }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Height`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+      InputNumber,
+      {
+        style: { width: "100%" },
+        value: data.height,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), { height: value }));
+        }
+      }
+    ))))), /* @__PURE__ */ React__default.createElement(Divider$2, null), data.type === "linear" && /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Angle`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+      Slider,
+      {
+        value: data.angle,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), { angle: value }));
+        },
+        style: { width: "100%" },
+        max: 360,
+        min: 0,
+        step: 1,
+        showInput: true
+      }
+    ))), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorHeader }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.label }, t(`Colors`), " (", colors.length, "/", MAX_COLORS, ")"), /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        type: "text",
+        icon: /* @__PURE__ */ React__default.createElement(IconPlus, null),
+        onClick: addColor,
+        size: "small",
+        disabled: colors.length >= MAX_COLORS
+      },
+      t(`Add Color`)
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorList }, colors.map((color2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: color2.id, className: styles$1.colorItem }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorInputs }, /* @__PURE__ */ React__default.createElement(
+      ColorPicker$1,
+      {
+        value: color2.color,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), {
+            colors: data.colors.map(
+              (c, i) => i === index2 ? __spreadProps(__spreadValues({}, c), { color: value }) : c
+            )
+          }));
+        }
+      }
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.positionControl }, /* @__PURE__ */ React__default.createElement(
+      InputNumber,
+      {
+        value: color2.position,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), {
+            colors: data.colors.map(
+              (c, i) => i === index2 ? __spreadProps(__spreadValues({}, c), { position: value }) : c
+            )
+          }));
+        },
+        style: { width: "80px" },
+        min: 0,
+        max: 100
+      }
+    ), /* @__PURE__ */ React__default.createElement("span", { className: styles$1.percentSign }, "%"), colors.length > MIN_COLORS && /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        type: "text",
+        icon: /* @__PURE__ */ React__default.createElement(IconDelete, null),
+        onClick: () => removeColor(index2),
+        className: styles$1.deleteButton
+      }
+    )))))))),
+    /* @__PURE__ */ React__default.createElement("canvas", { ref: canvasRef, style: { display: "none" } })
+  );
+}
 const TextField = enhancer(Input);
 enhancer(Input.Search);
 const TextAreaField = enhancer(Input.TextArea);
 const NumberField = enhancer(InputNumber);
 const SelectField = enhancer(Select);
+const GradientGeneratorField = enhancer(GradientGenerator);
 function BackgroundColor(props) {
   const { label = t("Background color") } = props;
   return useMemo(() => {
@@ -28843,11 +29456,73 @@ const backgroundSizeOptions = [
   }
 ];
 function BackgroundImage(props) {
-  const { getFieldValue } = useEditorContext();
-  const isEnabledImage = getFieldValue(
+  const { getFieldValue: useGetFieldValue, setFieldValue } = useEditorContext();
+  const editor = useSlateStatic();
+  const { enabledGradientImage } = useEditorProps();
+  const isEnabledImage = useGetFieldValue(
     props.path,
     props.name + ".background-image-enabled"
   );
+  const hasGradient = useGetFieldValue(props.path, "data.gradient");
+  const isEnabledGradient = useGetFieldValue(
+    props.path,
+    "data.gradient.enabled"
+  );
+  const handleChangeEnabledGradient = useCallback(
+    (value) => {
+      if (hasGradient) {
+        setFieldValue(
+          props.path,
+          "data.gradient.enabled",
+          value === "gradient"
+        );
+      } else {
+        let width = 600;
+        let height = 400;
+        const domNode = ReactEditor.toDOMNode(
+          editor,
+          Node.get(editor, props.path)
+        );
+        try {
+          width = domNode.offsetWidth;
+          height = parseInt((domNode.offsetHeight * 1.5).toString());
+        } catch (error2) {
+          console.log("error", error2);
+        }
+        const gradient = {
+          enabled: true,
+          colors: [
+            {
+              id: nanoid(),
+              color: "#4a90e2",
+              position: 0
+            },
+            {
+              id: nanoid(),
+              color: "#c6dffb",
+              position: 30
+            },
+            {
+              id: nanoid(),
+              color: "#ffffff",
+              position: 100
+            }
+          ],
+          angle: 45,
+          type: "linear",
+          width,
+          height
+        };
+        setFieldValue(props.path, "data.gradient", gradient);
+        setFieldValue(
+          props.path,
+          props.name + ".background-url",
+          "https://cdn.shopify.com/s/files/1/0863/8971/9346/files/vt4tumq_4aorkduqi2c-s_nwiysq709yi-nbxh-c8sk.png"
+        );
+      }
+    },
+    [editor, hasGradient, props.name, props.path, setFieldValue]
+  );
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
       AttributeField.SwitchField,
@@ -28856,7 +29531,52 @@ function BackgroundImage(props) {
         label: t("Image"),
         name: props.name + ".background-image-enabled"
       }
-    ), isEnabledImage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    ), isEnabledImage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, enabledGradientImage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 20, offset: 4 }, /* @__PURE__ */ React__default.createElement(
+      Radio.Group,
+      {
+        type: "button",
+        value: isEnabledGradient ? "gradient" : "image",
+        onChange: handleChangeEnabledGradient,
+        options: [
+          {
+            value: "image",
+            label: /* @__PURE__ */ React__default.createElement(
+              Space,
+              {
+                align: "center",
+                style: {
+                  minWidth: "100px",
+                  justifyContent: "center"
+                }
+              },
+              /* @__PURE__ */ React__default.createElement(IconImage, null),
+              t("Image")
+            )
+          },
+          {
+            value: "gradient",
+            label: /* @__PURE__ */ React__default.createElement(
+              Space,
+              {
+                align: "center",
+                style: {
+                  minWidth: "100px",
+                  justifyContent: "center"
+                }
+              },
+              /* @__PURE__ */ React__default.createElement(IconPalette, null),
+              t("Gradient")
+            )
+          }
+        ]
+      }
+    ))), /* @__PURE__ */ React__default.createElement(Divider$2, null)), isEnabledGradient ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      AttributeField.BackgroundGradient,
+      __spreadProps(__spreadValues({}, props), {
+        targetName: props.name + ".background-url",
+        formItem: __spreadValues({ layout: "vertical" }, props.formItem)
+      })
+    )) : /* @__PURE__ */ React__default.createElement(
       AttributeField.ImageUrl,
       __spreadProps(__spreadValues({}, props), {
         name: props.name + ".background-url",
@@ -28876,7 +29596,13 @@ function BackgroundImage(props) {
         name: props.name + ".background-position"
       })
     )));
-  }, [isEnabledImage, props]);
+  }, [
+    enabledGradientImage,
+    handleChangeEnabledGradient,
+    isEnabledGradient,
+    isEnabledImage,
+    props
+  ]);
 }
 function ImageUrl(props) {
   const { onUpload } = useEditorProps();
@@ -30237,6 +30963,76 @@ const MergeTagSelectInputField = (props) => {
     ))
   ));
 };
+function BackgroundGradient(props) {
+  const { onUpload } = useEditorProps();
+  const { getFieldValue, setFieldValue } = useEditorContext();
+  const editor = useSlateStatic();
+  const fieldName = "data.gradient";
+  const gradient = useEqualState(getFieldValue(props.path, fieldName));
+  const [isOpen, setIsOpen] = useState(false);
+  const handelSave = useCallback(
+    (val, blob) => __async(this, null, function* () {
+      if (!onUpload)
+        return;
+      const gradientUrl = yield onUpload(blob);
+      setFieldValue(props.path, props.targetName, gradientUrl);
+    }),
+    [onUpload, props.path, props.targetName, setFieldValue]
+  );
+  const handelPreview = useCallback(
+    (url) => {
+      HistoryEditor.withoutSaving(editor, () => {
+        setFieldValue(props.path, props.targetName, url);
+      });
+    },
+    [editor, props.path, props.targetName, setFieldValue]
+  );
+  const handleChange = useCallback(
+    (val) => {
+      setFieldValue(props.path, fieldName, val);
+    },
+    [props.path, fieldName, setFieldValue]
+  );
+  const enableGradient = useEqualState(
+    getFieldValue(props.path, `${fieldName}.enabled`)
+  );
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen && /* @__PURE__ */ React__default.createElement(
+    GradientGenerator,
+    {
+      data: gradient,
+      onSave: handelSave,
+      onPreview: handelPreview,
+      onChange: handleChange,
+      enable: enableGradient,
+      isOpen,
+      setIsOpen
+    }
+  ), /* @__PURE__ */ React__default.createElement(Form.Item, { wrapperCol: { offset: 8, span: 14 } }, /* @__PURE__ */ React__default.createElement(
+    Button$2,
+    {
+      onClick: () => setIsOpen(true),
+      type: "primary",
+      size: "large",
+      icon: /* @__PURE__ */ React__default.createElement(IconPalette, null),
+      style: {
+        width: "100%",
+        border: "none",
+        borderRadius: "6px",
+        fontWeight: "500",
+        background: "linear-gradient(to right, #9333ea, #db2777)",
+        transition: "background 0.3s ease",
+        marginBottom: "10px"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "linear-gradient(to right, #7e22ce, #be185d)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "linear-gradient(to right, #9333ea, #db2777)";
+      }
+    },
+    t("Create gradient")
+  )));
+}
 const defaultAttributeFields = {
   // Basic Form Field
   WatchField,
@@ -30264,6 +31060,7 @@ const defaultAttributeFields = {
   TextAreaField,
   Link: Link$2,
   BackgroundImage,
+  BackgroundGradient,
   DisplayOptions,
   Columns,
   BackgroundColor,
@@ -30292,7 +31089,8 @@ const defaultAttributeFields = {
   ButtonCategory,
   WebFonts,
   RichTextField,
-  FieldItem
+  FieldItem,
+  GradientGeneratorField
 };
 const AttributeField = __spreadValues({}, defaultAttributeFields);
 const index$5 = "";

package/lib/style.css

@@ -1319,6 +1319,71 @@ THEMES:
 }
 .presetColorItem:hover {
   border-color: #000;
+}._controlSection_1t3ne_1 {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+}
+
+._controlGroup_1t3ne_7 {
+  width: 100%;
+}
+
+._colorHeader_1t3ne_11 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+._colorList_1t3ne_18 {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+._colorList_1t3ne_18::-webkit-scrollbar {
+  width: 6px;
+}
+._colorList_1t3ne_18::-webkit-scrollbar-thumb {
+  background-color: var(--color-fill-3);
+  border-radius: 3px;
+}
+
+._colorItem_1t3ne_34 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  background-color: var(--color-bg-2);
+  border: 1px solid var(--color-border-2);
+}
+
+._positionControl_1t3ne_44 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+._percentSign_1t3ne_50 {
+  color: var(--color-text-3);
+  font-size: 12px;
+}
+
+._deleteButton_1t3ne_55 {
+  color: rgb(var(--red-6));
+}
+._deleteButton_1t3ne_55:hover {
+  color: rgb(var(--red-7));
+}
+
+._sizeInputs_1t3ne_62 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
 }.ResponsiveTabsItem {
   width: 95px;
   height: 95px;

package/lib/typings/components/ConfigurationPanel/components/AttributeField/BackgroundGradient.d.ts

@@ -0,0 +1,9 @@
+import { EnhancerProps } from "../../../../components/Form/enhancer";
+import React from "react";
+import { Path } from "slate";
+export declare function BackgroundGradient(props: Omit<EnhancerProps, "label"> & {
+    label?: React.ReactNode;
+    path: Path;
+    targetName: string;
+    hideBackgroundSize?: boolean;
+}): React.JSX.Element;

package/lib/typings/components/ConfigurationPanel/components/AttributeField/BackgroundImage.d.ts

@@ -1,6 +1,10 @@
 import { EnhancerProps } from "../../../../components/Form/enhancer";
 import React from "react";
 import { Path } from "slate";
+export declare const gradientAdapter: {
+    formatter(active: boolean): "gradient" | "image";
+    normalize(type: "gradient" | "image"): boolean;
+};
 export declare function BackgroundImage(props: Omit<EnhancerProps, "label"> & {
     label?: React.ReactNode;
     path: Path;

package/lib/typings/components/ConfigurationPanel/components/AttributeField/index.d.ts

@@ -36,6 +36,7 @@ import { Preheader } from "./Preheader";
 import { ButtonContent } from "./ButtonContent";
 import { RTLDirection } from "./RTLDirection";
 import { TableLayout } from "./TableLayout";
+import { BackgroundGradient } from "./BackgroundGradient";
 export declare const defaultAttributeFields: {
     WatchField: (props: import("../../../Form/WatchField").WatchFieldProps) => import("react").JSX.Element;
     SyncChildrenField: (props: import("../../../Form/SyncChildrenField").SyncChildrenFieldProps) => import("react").JSX.Element;
@@ -84,6 +85,7 @@ export declare const defaultAttributeFields: {
     TextAreaField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<import("@arco-design/web-react").TextAreaProps & import("react").RefAttributes<import("@arco-design/web-react/es/Input").RefTextAreaType>, "onChange" | "value">) => import("react").JSX.Element;
     Link: typeof Link;
     BackgroundImage: typeof BackgroundImage;
+    BackgroundGradient: typeof BackgroundGradient;
     DisplayOptions: ({ enabledResponsive, }: {
         enabledResponsive: boolean;
     }) => import("react").JSX.Element | null;
@@ -124,5 +126,6 @@ export declare const defaultAttributeFields: {
         height: string;
     }, "onChange" | "value">) => import("react").JSX.Element;
     FieldItem: typeof FieldItem;
+    GradientGeneratorField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<import("../../../Form/GradientGenerator").GradientGeneratorProps, "onChange" | "value">) => import("react").JSX.Element;
 };
 export declare const AttributeField: AttributeFieldsMap;

package/lib/typings/components/Form/ColorPicker/index.d.ts

@@ -9,6 +9,7 @@ export interface ColorPickerProps extends PopoverProps {
     showInput?: boolean;
     placeholder?: string;
 }
+declare const ColorPicker: (props: ColorPickerProps) => React.JSX.Element;
 declare const DefaultColorPicker: (props: import("../enhancer").EnhancerProps & Omit<ColorPickerProps, "onChange" | "value">) => React.JSX.Element;
 export declare const ColorPickerField: (props: ComponentProps<typeof DefaultColorPicker>) => React.JSX.Element;
-export {};
+export { ColorPicker };

package/lib/typings/components/Form/GradientGenerator/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { GradientConfigData } from "easy-email-pro-core";
+export interface GradientGeneratorProps {
+    onSave: (val: GradientConfigData, blob: Blob) => Promise<void>;
+    onChange: (val: GradientConfigData) => void;
+    onPreview: (url: string) => void;
+    children?: React.ReactNode;
+    data: GradientConfigData;
+    enable: boolean;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}
+export declare function GradientGenerator(props: GradientGeneratorProps): React.JSX.Element;

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

@@ -24,4 +24,5 @@ export declare const SelectField: (props: import("./enhancer").EnhancerProps & O
 export declare const TreeSelectField: (props: import("./enhancer").EnhancerProps & Omit<import("@arco-design/web-react").TreeSelectProps & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<import("@arco-design/web-react/es/TreeSelect").RefTreeSelectType>, "onChange" | "value">) => import("react").JSX.Element;
+export declare const GradientGeneratorField: (props: import("./enhancer").EnhancerProps & Omit<import("./GradientGenerator").GradientGeneratorProps, "onChange" | "value">) => import("react").JSX.Element;
 export { enhancer, SwitchField, ButtonField, ButtonGroupField, WatchField, SyncChildrenField, ColorPickerField, ImageUploaderField, EditPanelListField, EditPanelTabsField, RichTextField, SliderField, PixelField, };

package/lib/typings/typings/custom-types.d.ts

@@ -139,6 +139,7 @@ export interface PluginsCustomEditorTypes {
         showInsertTips?: boolean;
         enabledHtmlBlockNodeAlign?: boolean;
         enabledPreviewEmailSubjectEdit?: boolean;
+        enabledGradientImage?: boolean;
         hideSectionBackgroundImage?: boolean;
         layerConfig?: {
             scrollWhenSelect?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.50.19",
+  "version": "1.51.0",
   "description": "",
   "files": [
     "lib"