easy-email-pro-theme 0.3.2 → 0.5.0

package/lib/index.js

@@ -54,7 +54,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useEditorContext, useEventCallback, validation, CustomEvent, ActiveTabKeys, EmailEditorProvider, EmailEditor, useSelectedNode, useForceUpdate, toggleFormat, TextFormat, IframeComponent, HtmlStringToReactNodes, isFormatActive } from "easy-email-pro-editor";
+import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useEditorContext, useEventCallback, useSelectedNode, validation, CustomEvent, ActiveTabKeys, EmailEditorProvider, EmailEditor, useForceUpdate, toggleFormat, TextFormat, IframeComponent, HtmlStringToReactNodes, isFormatActive } from "easy-email-pro-editor";
 import { useSlate, ReactEditor, useSlateStatic } from "slate-react";
 import * as React$2 from "react";
 import React__default, { useRef, useCallback as useCallback$1, useEffect, useMemo as useMemo$1, useState, forwardRef, memo, Component, PureComponent, useContext, useLayoutEffect, useReducer, Suspense } from "react";
@@ -62,7 +62,7 @@ import { NodeUtils, BlockManager, ElementType, t, EditorCore, ElementCategory, c
 import { Editor, Transforms, Path, Node as Node$1, createEditor, Text as Text$1, Range, Element as Element$1, Point } from "slate";
 import ReactDOM, { unstable_batchedUpdates, createPortal } from "react-dom";
 import { cloneDeep, debounce as debounce$2, get, isEqual as isEqual$3, set, omit as omit$2, merge as merge$1, isUndefined as isUndefined$1, isString as isString$1, isNumber as isNumber$1, uniqueId, upperFirst, flatMap, sum, camelCase } from "lodash";
-import { Form, Modal, Input, Collapse, Space, Grid, Empty, Card, Button as Button$1, Radio, Popover, Message, Spin, Select as Select$1, Drawer, Divider as Divider$1, Switch, Tabs, InputNumber, Tooltip, Tag, Link as Link$1, List, Alert, PageHeader, Popconfirm, Typography as Typography$1, Skeleton, Layout as Layout$2 } from "@arco-design/web-react";
+import { Form, Modal, Input, Collapse, Space, Grid, Empty, Card, Button as Button$1, Radio, Popover, Message, Spin, Select as Select$1, Drawer, Divider as Divider$1, Switch, Tabs, Slider, Typography as Typography$1, InputNumber, Tooltip, Tag, Link as Link$1, List, Alert, Popconfirm, PageHeader, Skeleton, Layout as Layout$2 } from "@arco-design/web-react";
 import { IconDelete, IconClose, IconPlus, IconCopy, IconDragArrow, IconLock, IconUnlock, IconQuestionCircle, IconLink, IconEdit, IconLeft, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconCheckCircleFill } from "@arco-design/web-react/icon";
 import mjml from "mjml-browser";
 import { HistoryEditor } from "slate-history";
@@ -402,7 +402,7 @@ const styleText$c = `@font-face {
 }
 
 `;
-const RetroStyleText = '[data-slate-block="page"] {\r\n  min-height: 300px;\r\n}\r\n\r\n[data-slate-hover="true"] {\r\n  z-index: 2;\r\n}\r\n\r\n[data-slate-focus="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n[data-slate-selected="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n.text-mergetag {\r\n  outline: 1px solid rgb(78, 89, 105);\r\n  outline-offset: 1px;\r\n  padding: 0 2px;\r\n  border-radius: 2px;\r\n  cursor: pointer;\r\n  transition: all 0.1s linear;\r\n  border: none;\r\n  font-weight: inherit;\r\n  outline-color: #00a0ac;\r\n  color: inherit;\r\n  background-color: #ebf9fc;\r\n  max-width: 10em;\r\n  font-style: inherit;\r\n  text-decoration-line: inherit;\r\n  position: relative;\r\n}\r\n\r\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n}\r\n\r\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\r\n\r\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\r\n\r\n[data-slate-dragover=true] {\n  z-index: 2;\n}\r\n\r\n[data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 10;\n  left: 0;\n  height: 4px;\n  opacity: 1;\n}\r\n\r\n[data-slate-dragging=true] .element-tools-container {\n  opacity: 0;\n}\r\n\r\n[data-slate-dragover-direction=top][data-slate-dragover=true]::after {\n  top: 0px;\n}\r\n\r\n[data-slate-dragover-direction=bottom][data-slate-dragover=true]::after {\n  top: auto;\n  bottom: 0px;\n}\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] {\n  outline: 2px dashed var(--drag-color);\n  z-index: 2;\n}\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 1;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  filter: opacity(10%);\n}\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] [data-slate-type=placeholder] {\n  outline: none;\n}\r\n\r\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\r\n\r\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n}\r\n\r\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n}\r\n\r\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\r\n\r\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n}\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}';
+const RetroStyleText = '[data-slate-block="page"] {\r\n  min-height: 300px;\r\n}\r\n\r\n[data-slate-hover="true"] {\r\n  z-index: 2;\r\n}\r\n\r\n[data-slate-focus="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n[data-slate-selected="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n.text-mergetag {\r\n  outline: 1px solid rgb(78, 89, 105);\r\n  outline-offset: 1px;\r\n  padding: 0 2px;\r\n  border-radius: 2px;\r\n  cursor: pointer;\r\n  transition: all 0.1s linear;\r\n  border: none;\r\n  font-weight: inherit;\r\n  outline-color: #00a0ac;\r\n  color: inherit;\r\n  background-color: #ebf9fc;\r\n  max-width: 10em;\r\n  font-style: inherit;\r\n  text-decoration-line: inherit;\r\n  position: relative;\r\n}\r\n\r\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 3;\n}\r\n\r\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\r\n\r\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\r\n\r\n[data-slate-dragover=true] {\n  z-index: 2;\n}\r\n\r\n[data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 10;\n  left: 0;\n  height: 4px;\n  opacity: 1;\n}\r\n\r\n[data-slate-dragging=true] .element-tools-container {\n  opacity: 0;\n}\r\n\r\n[data-slate-dragover-direction=top][data-slate-dragover=true]::after {\n  top: 0px;\n}\r\n\r\n[data-slate-dragover-direction=bottom][data-slate-dragover=true]::after {\n  top: auto;\n  bottom: 0px;\n}\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] {\n  outline: 2px dashed var(--drag-color);\n  z-index: 2;\n}\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 1;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  filter: opacity(10%);\n}\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] [data-slate-type=placeholder] {\n  outline: none;\n}\r\n\r\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\r\n\r\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n}\r\n\r\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n}\r\n\r\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\r\n\r\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n}\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}';
 const withTheme$1 = (editor) => {
   const { insertBreak, normalizeNode, deleteBackward } = editor;
   editor.insertBreak = (...args) => {
@@ -6223,7 +6223,17 @@ const useElementDefault = ({
 };
 const useElementInteract = () => {
   const editor = useSlate();
-  const { setSelectedNodePath, setHoverNodePath } = useEditorState();
+  const { setSelectedNodePath, setHoverNodePath, selectedNodePath } = useEditorState();
+  const { selectedNode } = useSelectedNode();
+  const lastSelectedNode = useRef(null);
+  const lastSelectedNodePath = useRef(null);
+  if (!isEqual$3(lastSelectedNodePath.current, selectedNodePath)) {
+    lastSelectedNode.current = null;
+  }
+  lastSelectedNodePath.current = selectedNodePath;
+  if (!lastSelectedNode.current && selectedNode) {
+    lastSelectedNode.current = cloneDeep(selectedNode);
+  }
   const copyBlock = useCallback$1(
     (path2) => {
       const block = Node$1.get(editor, path2);
@@ -6288,10 +6298,20 @@ const useElementInteract = () => {
     setSelectedNodePath(null);
     Transforms.deselect(editor);
   }, [editor, setSelectedNodePath]);
+  const resetSelectedNode = useEventCallback(() => {
+    if (!selectedNodePath || !lastSelectedNode.current)
+      return;
+    editor.replaceNode({
+      path: selectedNodePath,
+      node: lastSelectedNode.current
+    });
+  });
   return {
     copyBlock,
     deleteBlock,
-    clearCanvas
+    clearCanvas,
+    isChanged: !isEqual$3(lastSelectedNode.current, selectedNode),
+    resetSelectedNode
   };
 };
 const defaultFontList = [
@@ -6565,7 +6585,7 @@ function BlockItem({
   });
   if (universalElementEditing && !NodeUtils.isContentElement(element))
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "block-list-grid-item" }, dragHandle2), /* @__PURE__ */ React__default.createElement("div", { className: "blockItemContainer" }, /* @__PURE__ */ React__default.createElement("div", null, icon), /* @__PURE__ */ React__default.createElement("div", { style: { width: "100%" } }, title || (block == null ? void 0 : block.name))));
+  return /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "block-list-grid-item" }, dragHandle2), /* @__PURE__ */ React__default.createElement("div", { className: "blockItemContainer" }, /* @__PURE__ */ React__default.createElement("div", null, icon), /* @__PURE__ */ React__default.createElement("div", { style: { width: "100%" } }, !isUndefined$1(title) ? title : block == null ? void 0 : block.name)));
 }
 const index$9 = "";
 const LayoutItem = ({
@@ -21592,6 +21612,14 @@ const DefaultRichTextField = enhancer(RichtextBar);
 const RichTextField = (props) => {
   return /* @__PURE__ */ React__default.createElement(DefaultRichTextField, __spreadProps(__spreadValues({}, props), { formItem: { noStyle: true } }));
 };
+const DefaultSlider = (props) => {
+  const _a2 = props, { showLimit } = _a2, rest = __objRest(_a2, ["showLimit"]);
+  if (!showLimit) {
+    return /* @__PURE__ */ React__default.createElement(Slider, __spreadValues({}, rest));
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", flex: "1", alignItems: "center" } }, showLimit && rest.min && /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, rest.min), /* @__PURE__ */ React__default.createElement("div", { style: { flex: "1", marginLeft: 10, marginRight: 10 } }, /* @__PURE__ */ React__default.createElement(Slider, __spreadValues({}, rest))), showLimit && rest.max && /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, rest.max));
+};
+const SliderField = enhancer(DefaultSlider);
 const TextField = enhancer(Input);
 enhancer(Input.Search);
 const TextAreaField = enhancer(Input.TextArea);
@@ -23554,6 +23582,7 @@ const defaultAttributeFields = {
   PixelField,
   SelectField,
   ColorPickerField,
+  SliderField,
   SwitchField,
   ButtonGroupField,
   ImageUploaderField,
@@ -25573,7 +25602,7 @@ const ConfigurationPanel = ({
     lock
   } = useEditorState();
   const { quantityLimitCheck } = useEditorProps();
-  const { copyBlock, deleteBlock } = useElementInteract();
+  const { copyBlock, deleteBlock, isChanged, resetSelectedNode } = useElementInteract();
   const onCopy = useEventCallback((path2) => {
     if (quantityLimitCheck && !quantityLimitCheck({
       element: Node$1.get(editor, path2),
@@ -25647,25 +25676,53 @@ const ConfigurationPanel = ({
       {
         height: `calc(${height} - 60px)`
       },
-      lock && /* @__PURE__ */ React__default.createElement(
+      isChanged && lock && /* @__PURE__ */ React__default.createElement(
         Alert,
         {
           type: "warning",
-          content: /* @__PURE__ */ React__default.createElement("div", null, t(`Content has been modified. Please save before leaving.`))
+          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
+            },
+            /* @__PURE__ */ React__default.createElement(
+              "span",
+              {
+                style: {
+                  color: "rgb(var(--danger-6))",
+                  cursor: "pointer"
+                }
+              },
+              t("Discard")
+            )
+          ))
         }
       ),
       NodeUtils.isUniversalElement(element) && !universalElementEditing ? /* @__PURE__ */ React__default.createElement(UniversalElementPanel, null) : /* @__PURE__ */ React__default.createElement(AttributePanel, null)
     ));
   }, [
-    deleteBlock,
     element,
-    height,
-    onClose,
-    onCopy,
     selectedNodePath,
-    universalElementEditing,
     universalElementPath,
-    lock
+    lock,
+    onClose,
+    height,
+    isChanged,
+    resetSelectedNode,
+    universalElementEditing,
+    onCopy,
+    deleteBlock
   ]);
 };
 const index$3 = "";

package/lib/typings/components/BlockSideBar/BlockItem/index.d.ts

@@ -4,6 +4,6 @@ import "./index.scss";
 export declare function BlockItem({ type, payload, title, icon, }: {
     type: Element["type"];
     payload?: Partial<Element>;
-    title?: string;
+    title?: string | null;
     icon?: React.ReactNode;
 }): JSX.Element | null;

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

@@ -39,6 +39,11 @@ export declare const defaultAttributeFields: {
     PixelField: typeof PixelField;
     SelectField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<import("../../../Form/Select").SelectProps, "onChange" | "value">) => JSX.Element;
     ColorPickerField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<import("../../../Form/ColorPicker").ColorPickerProps, "onChange" | "value">) => JSX.Element;
+    SliderField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<import("@arco-design/web-react").SliderProps & import("react").RefAttributes<unknown> & {
+        value: boolean;
+        onChange: (val: boolean) => void;
+        showLimit?: boolean | undefined;
+    }, "onChange" | "value">) => JSX.Element;
     SwitchField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<import("@arco-design/web-react").SwitchProps & import("react").RefAttributes<unknown>, "onChange" | "value">) => JSX.Element;
     ButtonGroupField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<Partial<{
         htmlType?: "button" | "reset" | "submit" | undefined;

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

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const SliderField: (props: import("./enhancer").EnhancerProps & Omit<import("@arco-design/web-react").SliderProps & React.RefAttributes<unknown> & {
+    value: boolean;
+    onChange: (val: boolean) => void;
+    showLimit?: boolean | undefined;
+}, "onChange" | "value">) => JSX.Element;

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

@@ -10,6 +10,7 @@ import { WatchField } from "./WatchField";
 import { EditPanelTabsField } from "./EditPanelTabsField";
 import { SyncChildrenField } from "./SyncChildrenField";
 import { RichTextField } from "./RichTextField";
+import { SliderField } from "./SliderField";
 export declare const TextField: (props: import("./enhancer").EnhancerProps & Omit<import("@arco-design/web-react").InputProps & import("react").RefAttributes<import("@arco-design/web-react/es/Input/interface").RefInputType> & import("@arco-design/web-react/es/_util/hooks/useMergeProps").MergePropsOptions, "onChange" | "value">) => JSX.Element;
 export declare const InputTagField: (props: import("./enhancer").EnhancerProps & Omit<import("@arco-design/web-react").InputTagProps<any> & import("react").RefAttributes<{
     focus: () => void;
@@ -18,9 +19,8 @@ export declare const InputTagField: (props: import("./enhancer").EnhancerProps &
 export declare const SearchField: (props: import("./enhancer").EnhancerProps & Omit<import("@arco-design/web-react/es/Input").InputSearchProps & import("react").RefAttributes<import("@arco-design/web-react/es/Input/interface").RefInputType>, "onChange" | "value">) => JSX.Element;
 export declare const TextAreaField: (props: import("./enhancer").EnhancerProps & Omit<import("@arco-design/web-react").TextAreaProps & import("react").RefAttributes<import("@arco-design/web-react/es/Input/textarea").RefTextAreaType>, "onChange" | "value">) => JSX.Element;
 export declare const NumberField: (props: import("./enhancer").EnhancerProps & Omit<import("@arco-design/web-react").InputNumberProps & import("react").RefAttributes<import("@arco-design/web-react/es/Input/interface").RefInputType>, "onChange" | "value">) => JSX.Element;
-export declare const SliderField: (props: import("./enhancer").EnhancerProps & Omit<import("@arco-design/web-react").SliderProps & import("react").RefAttributes<unknown>, "onChange" | "value">) => JSX.Element;
 export declare const SelectField: (props: import("./enhancer").EnhancerProps & Omit<import("./Select").SelectProps, "onChange" | "value">) => JSX.Element;
 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">) => JSX.Element;
-export { enhancer, SwitchField, ButtonField, ButtonGroupField, WatchField, SyncChildrenField, ColorPickerField, ImageUploaderField, EditPanelListField, EditPanelTabsField, RichTextField, };
+export { enhancer, SwitchField, ButtonField, ButtonGroupField, WatchField, SyncChildrenField, ColorPickerField, ImageUploaderField, EditPanelListField, EditPanelTabsField, RichTextField, SliderField, };

package/lib/typings/hooks/useElementInteract.d.ts

@@ -3,4 +3,6 @@ export declare const useElementInteract: () => {
     copyBlock: (path: Path) => void;
     deleteBlock: (path: Path) => void;
     clearCanvas: () => void;
+    isChanged: boolean;
+    resetSelectedNode: () => void;
 };

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

@@ -20,7 +20,7 @@ export interface CategoryGridItem<T extends keyof ElementMap = any> {
     blocks: Array<{
         type: Element["type"];
         payload?: Partial<ElementMap[T]>;
-        title?: string | undefined;
+        title?: string | undefined | null;
         icon?: React.ReactNode;
     }>;
     displayType?: "grid";

package/package.json

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