easy-email-pro-theme 1.52.0 → 1.53.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, useEditorState, useForceUpdate, useEqualState, IframeComponent, HtmlStringToReactNodes, useStandaloneElementSaveButton, 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, useEditorState, useActiveTab, ActiveTabKeys, toggleFormat, TextFormat, useUniversalElement, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, 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, Tooltip, Divider as Divider$2, Alert, Popconfirm, 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, IconDownload, 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 { IconPlus, IconCopy, IconDelete, IconEdit, IconLeft, IconDownload, 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";
@@ -7095,19 +7095,23 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
   };
 }
 [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
-const item$2 = "_item_14paa_1";
-const itemContent = "_itemContent_14paa_8";
-const itemActions = "_itemActions_14paa_26";
-const itemLabelWrapper = "_itemLabelWrapper_14paa_30";
-const itemLabel = "_itemLabel_14paa_30";
-const action = "_action_14paa_43";
-const itemTitle = "_itemTitle_14paa_60";
-const itemCollapse = "_itemCollapse_14paa_66";
-const itemChildren = "_itemChildren_14paa_87";
+const item$2 = "_item_7uv5l_1";
+const itemContent = "_itemContent_7uv5l_8";
+const itemActions = "_itemActions_7uv5l_26";
+const itemHovered = "_itemHovered_7uv5l_30";
+const itemSelected = "_itemSelected_7uv5l_34";
+const itemLabelWrapper = "_itemLabelWrapper_7uv5l_43";
+const itemLabel = "_itemLabel_7uv5l_43";
+const action = "_action_7uv5l_56";
+const itemTitle = "_itemTitle_7uv5l_73";
+const itemCollapse = "_itemCollapse_7uv5l_79";
+const itemChildren = "_itemChildren_7uv5l_100";
 const styles$4 = {
   item: item$2,
   itemContent,
   itemActions,
+  itemHovered,
+  itemSelected,
   itemLabelWrapper,
   itemLabel,
   action,
@@ -7320,21 +7324,41 @@ function ComponentItem({
   onToggleCollapse,
   dragHandleProps = {}
 }) {
-  const { setSelectedNodePath } = useEditorActions();
-  const { deleteBlock } = useElementInteract();
+  const { setSelectedNodePath, setHoverNodePath } = useEditorActions();
+  const { hoverNodePath, selectedNodePath } = useEditorState();
+  const { deleteBlock, copyBlock } = useElementInteract();
   const editor = useSlateStatic();
+  const path2 = useMemo(() => {
+    try {
+      return ReactEditor.findPath(editor, component.block);
+    } catch (error2) {
+      return null;
+    }
+  }, [component.block, editor]);
   const onClick = () => {
-    let path2 = ReactEditor.findPath(editor, component.block);
+    if (!path2)
+      return;
+    let newPath = path2;
     if (NodeUtils.isUnsetElement(component.block)) {
-      path2 = Path.parent(path2);
+      newPath = Path.parent(newPath);
     }
-    setSelectedNodePath(path2);
+    setSelectedNodePath(newPath);
   };
   const onRemove = (e) => {
+    try {
+      e.stopPropagation();
+      const path22 = ReactEditor.findPath(editor, component.block);
+      deleteBlock(path22);
+      setSelectedNodePath(null);
+    } catch (error2) {
+      console.error(error2);
+    }
+  };
+  const onCopy = (e) => {
     e.stopPropagation();
-    const path2 = ReactEditor.findPath(editor, component.block);
-    deleteBlock(path2);
-    setSelectedNodePath(null);
+    if (!path2)
+      return;
+    copyBlock(path2);
   };
   const hasBlockChildren = component.block.children.every(
     (child) => NodeUtils.isBlockElement(child)
@@ -7369,56 +7393,99 @@ function ComponentItem({
     }
     return text;
   }, [component.block, label]);
-  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(
+  const isHovered = useMemo(() => {
+    if (!path2 || !hoverNodePath)
+      return false;
+    return Path.equals(path2, hoverNodePath);
+  }, [path2, hoverNodePath]);
+  const isSelected = useMemo(() => {
+    if (!path2 || !selectedNodePath)
+      return false;
+    return Path.equals(path2, selectedNodePath);
+  }, [path2, selectedNodePath]);
+  const handleMouseEnter = () => {
+    if (path2) {
+      setHoverNodePath(path2);
+    }
+  };
+  const handleMouseLeave = () => {
+    setHoverNodePath(null);
+  };
+  const itemClassName = useMemo(() => {
+    const classes = [styles$4.item];
+    if (isHovered)
+      classes.push(styles$4.itemHovered);
+    if (isSelected)
+      classes.push(styles$4.itemSelected);
+    return classes.join(" ");
+  }, [isHovered, isSelected]);
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: styles$4.itemCollapse,
-      style: { opacity: hasBlockChildren ? 1 : 0 },
-      onClick: handleCollapseClick
+      className: itemClassName,
+      onClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemTitle }, /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        style: {
-          transform: isCollapsed ? "rotate(-90deg)" : "rotate(0)",
-          transition: "transform 0.2s"
-        }
+        className: styles$4.itemCollapse,
+        style: { opacity: hasBlockChildren ? 1 : 0 },
+        onClick: handleCollapseClick
       },
-      collapseIcon
-    )
-  ), /* @__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$4.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: styles$4.itemActions,
-      onClick: (e) => e.stopPropagation()
-    },
-    /* @__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"
+      /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          style: {
+            transform: isCollapsed ? "rotate(-90deg)" : "rotate(0)",
+            transition: "transform 0.2s"
+          }
         },
-        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" }))
-    )
-  )));
+        collapseIcon
+      )
+    ), /* @__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$4.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: styles$4.itemActions,
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$4.action, onClick: onCopy }, /* @__PURE__ */ React__default.createElement(IconCopy, 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$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" }))
+      )
+    ))
+  );
 }
 const collapseIcon = /* @__PURE__ */ React__default.createElement("svg", { width: "10", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 70 41" }, /* @__PURE__ */ React__default.createElement("path", { d: "M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z" }));
 const BlockLayer = () => {
   const { values, inited } = useEditorContext();
   const pageElement = values.content;
-  const [allCollapsed, setAllCollapsed] = useState(false);
+  const { layerDefaultCollapsed, enabledAutoComplete } = useEditorProps();
+  const defaultCollapsedAll = useMemo(() => {
+    if (enabledAutoComplete && isUndefined$1(layerDefaultCollapsed)) {
+      return true;
+    }
+    return Boolean(layerDefaultCollapsed);
+  }, [enabledAutoComplete, layerDefaultCollapsed]);
+  const [allCollapsed, setAllCollapsed] = useState(defaultCollapsedAll);
   const [collapsedItems, setCollapsedItems] = useState(/* @__PURE__ */ new Set());
-  const handleCollapseToggle = (checked) => {
+  const handleCollapseToggle = useEventCallback((checked) => {
     setAllCollapsed(checked);
     if (checked) {
       const newCollapsedItems = /* @__PURE__ */ new Set();
@@ -7440,7 +7507,7 @@ const BlockLayer = () => {
     } else {
       setCollapsedItems(/* @__PURE__ */ new Set());
     }
-  };
+  });
   const toggleItemCollapse = (itemId, block) => {
     setCollapsedItems((prev) => {
       const newCollapsed = new Set(prev);
@@ -7464,6 +7531,11 @@ const BlockLayer = () => {
     });
     setAllCollapsed(false);
   };
+  useEffect(() => {
+    if (defaultCollapsedAll) {
+      handleCollapseToggle(defaultCollapsedAll);
+    }
+  }, [defaultCollapsedAll, handleCollapseToggle]);
   if (!inited)
     return null;
   return /* @__PURE__ */ React__default.createElement("div", { onMouseOut: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.createElement(
@@ -32277,7 +32349,7 @@ function AttributesContainer$9({
       tabPosition: "top",
       name: `children`,
       label: "",
-      renderItem: (item2, index2) => /* @__PURE__ */ React__default.createElement(NavbarLink, { index: index2, path: [...nodePath, index2] }),
+      renderItem: (item2, index2) => /* @__PURE__ */ React__default.createElement(NavbarLink$1, { index: index2, path: [...nodePath, index2] }),
       renderHeader: (item2, index2) => {
         return get(item2, "children.0.text") || "Custom";
       }
@@ -32323,7 +32395,7 @@ function AttributesContainer$9({
     }
   )));
 }
-function NavbarLink({ index: index2, path: path2 }) {
+function NavbarLink$1({ index: index2, path: path2 }) {
   return /* @__PURE__ */ React__default.createElement("div", { className: "NavbarLink" }, /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10 } }), /* @__PURE__ */ React__default.createElement(
     AttributeField.TextField,
     {
@@ -32519,7 +32591,7 @@ function AttributesContainer$8({
       tabPosition: "top",
       name: `children`,
       label: "",
-      renderItem: (item2, index2) => /* @__PURE__ */ React__default.createElement(SocialItem$1, { index: index2, path: [...nodePath, index2] }),
+      renderItem: (item2, index2) => /* @__PURE__ */ React__default.createElement(SocialItem$2, { index: index2, path: [...nodePath, index2] }),
       renderHeader: (item2, index2) => item2.content || "Custom"
     }
   ), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "0", header: t("Dimension") }, /* @__PURE__ */ React__default.createElement(
@@ -32590,7 +32662,7 @@ function AttributesContainer$8({
     }
   )));
 }
-function SocialItem$1({ index: index2, path: path2 }) {
+function SocialItem$2({ index: index2, path: path2 }) {
   return /* @__PURE__ */ React__default.createElement("div", { className: "SocialItem" }, /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10 } }), /* @__PURE__ */ React__default.createElement(
     AttributeField.ImageUrl,
     {
@@ -33550,17 +33622,346 @@ const ConfigPanelsMap = {
   [ElementType.STANDARD_TABLE2]: Table2,
   [ElementType.STANDARD_BLOCK_QUOTE]: Blockquote
 };
+const BlockSchemasMap = {
+  // // Text elements
+  // [ElementType.TEXT]: TextSchema,
+  // [ElementType.STANDARD_TEXT]: TextSchema,
+  // [ElementType.STANDARD_PARAGRAPH]: TextSchema,
+  // [ElementType.STANDARD_TEXT_LIST]: TextSchema,
+  // [ElementType.STANDARD_H1]: TextSchema,
+  // [ElementType.STANDARD_H2]: TextSchema,
+  // [ElementType.STANDARD_H3]: TextSchema,
+  // [ElementType.STANDARD_H4]: TextSchema,
+  // // Button
+  // [ElementType.STANDARD_BUTTON]: ButtonSchema,
+  // // Section
+  // [ElementType.STANDARD_SECTION]: SectionSchema,
+  // // Image
+  // [ElementType.STANDARD_IMAGE]: ImageSchema,
+  // // Page
+  // [ElementType.PAGE]: PageSchema,
+  // // Column
+  // [ElementType.STANDARD_COLUMN]: ColumnSchema,
+  // // Wrapper
+  // [ElementType.STANDARD_WRAPPER]: WrapperSchema,
+  // // Divider
+  // [ElementType.STANDARD_DIVIDER]: DividerSchema,
+  // // Spacer
+  // [ElementType.STANDARD_SPACER]: SpacerSchema,
+  // // Group
+  // [ElementType.STANDARD_GROUP]: GroupSchema,
+  // // Blockquote
+  // [ElementType.STANDARD_BLOCK_QUOTE]: BlockquoteSchema,
+  // // Table
+  // [ElementType.STANDARD_TABLE]: TableSchema,
+  // [ElementType.STANDARD_TABLE2]: Table2Schema,
+  // // Hero
+  // [ElementType.STANDARD_HERO]: HeroSchema,
+  // // Navbar
+  // [ElementType.STANDARD_NAVBAR]: NavbarSchema,
+  // // Social
+  // [ElementType.STANDARD_SOCIAL]: SocialSchema,
+  // Note: Code and Widget components are too complex for schema-based approach
+  // They will continue to use component-based configuration
+};
+const SchemaPanelRenderer = ({
+  schema,
+  nodePath
+}) => {
+  const isResponsive = isResponsiveTabsSchema(schema);
+  const desktop = useMemo(() => {
+    if (isResponsive) {
+      return /* @__PURE__ */ React__default.createElement(
+        SchemaFieldsRenderer,
+        {
+          fields: schema.desktop,
+          nodePath,
+          mode: ActiveTabKeys.DESKTOP
+        }
+      );
+    }
+    return null;
+  }, [isResponsive, schema, nodePath]);
+  const mobile = useMemo(() => {
+    if (isResponsive) {
+      const responsiveSchema = schema;
+      const mobileFields = responsiveSchema.mobile || responsiveSchema.desktop;
+      return /* @__PURE__ */ React__default.createElement(
+        SchemaFieldsRenderer,
+        {
+          fields: mobileFields,
+          nodePath,
+          mode: ActiveTabKeys.MOBILE
+        }
+      );
+    }
+    return null;
+  }, [isResponsive, schema, nodePath]);
+  const regularFields = useMemo(() => {
+    if (!isResponsive) {
+      return /* @__PURE__ */ React__default.createElement(
+        SchemaFieldsRenderer,
+        {
+          fields: schema,
+          nodePath
+        }
+      );
+    }
+    return null;
+  }, [isResponsive, schema, nodePath]);
+  if (isResponsive) {
+    return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(ResponsiveTabs, { desktop, mobile }));
+  }
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, regularFields);
+};
+const SchemaFieldsRenderer = ({
+  fields,
+  nodePath,
+  mode
+}) => {
+  const { selectedNode } = useSelectedNode();
+  const editorProps = useEditorProps();
+  const defaultActiveKeys = useMemo(() => {
+    const keys2 = [];
+    fields.filter((field) => field.type === "CollapseGroup").filter((field) => field.defaultActive !== false).forEach((field) => {
+      keys2.push(field.name);
+    });
+    fields.filter((field) => field.type === "EditPanelListField").forEach((field) => {
+      const headerKey = field.headerKey;
+      if (headerKey) {
+        keys2.push(headerKey);
+      }
+    });
+    return keys2;
+  }, [fields]);
+  return /* @__PURE__ */ React__default.createElement(CollapseWrapper$1, { defaultActiveKey: defaultActiveKeys }, fields.map((field, index2) => {
+    if (field.type === "CollapseGroup") {
+      return /* @__PURE__ */ React__default.createElement(
+        Collapse.Item,
+        {
+          key: field.name || index2,
+          name: field.name,
+          header: field.header,
+          extra: field.extra
+        },
+        /* @__PURE__ */ React__default.createElement(
+          SchemaFieldsRenderer,
+          {
+            fields: field.children,
+            nodePath,
+            mode
+          }
+        )
+      );
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      SchemaFieldRenderer,
+      {
+        key: index2,
+        field,
+        nodePath,
+        mode,
+        selectedNode,
+        editorProps
+      }
+    );
+  }));
+};
+const SchemaFieldRenderer = ({
+  field,
+  nodePath,
+  mode,
+  selectedNode,
+  editorProps
+}) => {
+  const actualPath = useMemo(() => {
+    if (field.path === "textPath") {
+      return [...nodePath, 0];
+    }
+    if (field.path === "nodePath") {
+      return nodePath;
+    }
+    return nodePath;
+  }, [field.path, nodePath]);
+  const FieldComponent = getFieldComponent(field.type);
+  if (!FieldComponent) {
+    console.warn(`Unknown field type: ${field.type}`);
+    return null;
+  }
+  const componentProps = __spreadValues({
+    path: actualPath,
+    name: field.name || ""
+  }, field);
+  if (field.type === "Typography" || field.type === "Buttons") {
+    const fieldMode = field.mode === "desktop" ? ActiveTabKeys.DESKTOP : field.mode === "mobile" ? ActiveTabKeys.MOBILE : mode;
+    componentProps.mode = fieldMode;
+    componentProps.type = field.elementType || (selectedNode == null ? void 0 : selectedNode.type);
+    if (field.hidePadding !== void 0) {
+      componentProps.hidePadding = field.hidePadding;
+    }
+  }
+  if (field.type === "Heading") {
+    const currentMode = mode || ActiveTabKeys.DESKTOP;
+    if (currentMode === ActiveTabKeys.MOBILE) {
+      return null;
+    }
+    if (selectedNode && NodeUtils.isTextListElement(selectedNode)) {
+      return null;
+    }
+  }
+  if (field.type === "ButtonIcon") {
+    if (!(editorProps == null ? void 0 : editorProps.enabledButtonIcon)) {
+      return null;
+    }
+  }
+  if (field.type === "EditPanelListField") {
+    if ((selectedNode == null ? void 0 : selectedNode.type) === ElementType.STANDARD_SOCIAL) {
+      componentProps.renderItem = (item2, index2) => /* @__PURE__ */ React__default.createElement(SocialItem$1, { index: index2, path: [...nodePath, index2] });
+      componentProps.renderHeader = (item2) => item2.content || "Custom";
+    } else if ((selectedNode == null ? void 0 : selectedNode.type) === ElementType.STANDARD_NAVBAR) {
+      componentProps.renderItem = (item2, index2) => /* @__PURE__ */ React__default.createElement(NavbarLink, { index: index2, path: [...nodePath, index2] });
+      componentProps.renderHeader = (item2) => get(item2, "children.0.text") || "Custom";
+    }
+  }
+  if (field.type === "EditPanelListField" && mode === ActiveTabKeys.MOBILE) {
+    return null;
+  }
+  if (field.type === "SyncChildrenField" && mode) {
+    componentProps.mode = mode;
+  }
+  if (field.responsive) {
+    return /* @__PURE__ */ React__default.createElement(
+      ResponsiveField,
+      __spreadProps(__spreadValues({
+        component: FieldComponent
+      }, componentProps), {
+        mode
+      })
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(FieldComponent, __spreadValues({}, componentProps));
+};
+const SocialItem$1 = ({ path: path2 }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "SocialItem" }, /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10 } }), /* @__PURE__ */ React__default.createElement(
+    AttributeField.ImageUrl,
+    {
+      path: path2,
+      label: t("Icon"),
+      name: `attributes.src`
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement(
+    AttributeField.ColorPickerField,
+    {
+      path: path2,
+      label: t("Background color"),
+      name: `attributes.background-color`
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    AttributeField.BorderRadius,
+    {
+      path: path2,
+      label: t("Border radius"),
+      name: `attributes.border-radius`
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    AttributeField.TextField,
+    {
+      path: [...path2, 0],
+      label: t("Text"),
+      name: `text`,
+      fallbackValue: ""
+    }
+  ), /* @__PURE__ */ React__default.createElement(AttributeField.Link, { required: true, path: path2, name: `attributes.href` }));
+};
+const NavbarLink = ({ path: path2 }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "NavbarLink" }, /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10 } }), /* @__PURE__ */ React__default.createElement(
+    AttributeField.TextField,
+    {
+      path: [...path2, 0],
+      label: t("Text"),
+      name: `text`
+    }
+  ), /* @__PURE__ */ React__default.createElement(AttributeField.Link, { required: true, path: path2, name: `attributes.href` }));
+};
+function isResponsiveTabsSchema(schema) {
+  return typeof schema === "object" && "type" in schema && schema.type === "ResponsiveTabs";
+}
+function getFieldComponent(fieldType) {
+  const fieldMap = {
+    // Basic fields
+    TextField: AttributeField.TextField,
+    NumberField: AttributeField.NumberField,
+    ColorPickerField: AttributeField.ColorPickerField,
+    SelectField: AttributeField.SelectField,
+    SwitchField: AttributeField.SwitchField,
+    SliderField: AttributeField.SliderField,
+    PixelField: AttributeField.PixelField,
+    ImageUploaderField: AttributeField.ImageUploaderField,
+    RichTextField: AttributeField.RichTextField,
+    TextAreaField: AttributeField.TextAreaField,
+    ButtonGroupField: AttributeField.ButtonGroupField,
+    GradientGeneratorField: AttributeField.GradientGeneratorField,
+    MergeTagSelectInputField: AttributeField.MergeTagSelectInputField,
+    EditPanelListField: AttributeField.EditPanelListField,
+    EditPanelTabsField: AttributeField.EditPanelTabsField,
+    SyncChildrenField: AttributeField.SyncChildrenField,
+    FieldItem: AttributeField.FieldItem,
+    // Composite fields
+    Typography: AttributeField.Typography,
+    Padding: AttributeField.Padding,
+    Border: AttributeField.Border,
+    BackgroundColor: AttributeField.BackgroundColor,
+    TextAlign: AttributeField.TextAlign,
+    Height: AttributeField.Height,
+    Width: AttributeField.Width,
+    Link: AttributeField.Link,
+    ButtonContent: AttributeField.ButtonContent,
+    BorderRadius: AttributeField.BorderRadius,
+    BackgroundImage: AttributeField.BackgroundImage,
+    FontFamily: AttributeField.FontFamily,
+    FontSize: AttributeField.FontSize,
+    Heading: AttributeField.Heading,
+    ButtonIcon: AttributeField.ButtonIcon,
+    Buttons: AttributeField.Buttons,
+    ImageUrl: AttributeField.ImageUrl,
+    VerticalAlign: AttributeField.VerticalAlign,
+    Direction: AttributeField.Direction,
+    DisplayOptions: AttributeField.DisplayOptions,
+    Columns: AttributeField.Columns,
+    BackgroundGradient: AttributeField.BackgroundGradient,
+    LetterSpacing: AttributeField.LetterSpacing,
+    LineHeight: AttributeField.LineHeight,
+    FontWeight: AttributeField.FontWeight,
+    TextAndHeadingStyle: AttributeField.TextAndHeadingStyle,
+    GlobalLink: AttributeField.GlobalLink,
+    ButtonCategory: AttributeField.ButtonCategory,
+    BackgroundPosition: AttributeField.BackgroundPosition,
+    StackOnMobile: AttributeField.StackOnMobile,
+    DividerLine: AttributeField.DividerLine,
+    RTLDirection: AttributeField.RTLDirection,
+    TableLayout: AttributeField.TableLayout,
+    Preheader: AttributeField.Preheader,
+    ImageWidth: AttributeField.ImageWidth,
+    TextAndHeadingList: AttributeField.TextAndHeadingList,
+    WebFonts: AttributeField.WebFonts,
+    PixelAndPercentField: AttributeField.PixelAndPercentField
+  };
+  return fieldMap[fieldType] || null;
+}
 const AttributePanel = () => {
   const { selectedNode } = useSelectedNode();
   const selectedNodePath = useSelectedNodePath();
   const { setSelectedNodePath } = useEditorActions();
   const editor = useSlateStatic();
   const nodePath = useMemo(() => selectedNodePath, [selectedNodePath]);
+  const schema = selectedNode && BlockSchemasMap[selectedNode.type];
   const Com = selectedNode && ConfigPanelsMap[selectedNode.type];
+  const hasSchema = !!schema;
+  const hasComponent = !!Com;
   useEffect(() => {
     if (!nodePath)
       return;
-    if (!Com) {
+    if (!hasSchema && !hasComponent) {
       console.log(
         `The current component  was not found and has been switched to the previous level.`
       );
@@ -33568,7 +33969,7 @@ const AttributePanel = () => {
         let path2 = Path.parent(nodePath);
         let parent2 = Node.get(editor, path2);
         while (parent2) {
-          if (ConfigPanelsMap[parent2.type]) {
+          if (BlockSchemasMap[parent2.type] || ConfigPanelsMap[parent2.type]) {
             setSelectedNodePath(path2);
             return;
           } else {
@@ -33579,14 +33980,31 @@ const AttributePanel = () => {
       } catch (error2) {
       }
     }
-  }, [Com, editor, nodePath, setSelectedNodePath]);
+  }, [hasSchema, hasComponent, editor, nodePath, setSelectedNodePath]);
   return useMemo(() => {
     if (!selectedNode || !nodePath)
       return null;
-    if (!Com)
-      return /* @__PURE__ */ React__default.createElement("div", null, "No match component ", selectedNode.type);
-    return /* @__PURE__ */ React__default.createElement(Com, { nodePath, key: selectedNode.type + nodePath.toString() });
-  }, [Com, nodePath, selectedNode]);
+    if (hasSchema) {
+      return /* @__PURE__ */ React__default.createElement(
+        SchemaPanelRenderer,
+        {
+          schema,
+          nodePath,
+          key: selectedNode.type + nodePath.toString()
+        }
+      );
+    }
+    if (hasComponent) {
+      return /* @__PURE__ */ React__default.createElement(
+        Com,
+        {
+          nodePath,
+          key: selectedNode.type + nodePath.toString()
+        }
+      );
+    }
+    return /* @__PURE__ */ React__default.createElement("div", null, "No match component ", selectedNode.type);
+  }, [hasSchema, hasComponent, schema, Com, nodePath, selectedNode]);
 };
 const ConfigurationSideBar = ({ height }) => {
   const standaloneElementEditing = useStandaloneElementEditing();
@@ -40822,6 +41240,7 @@ const Minimalist = { useCreateConfig, Layout };
 export {
   AttributeField,
   AttributesPanelWrapper,
+  BlockSchemasMap,
   CollapseWrapper$1 as CollapseWrapper,
   ConfigPanelsMap,
   ControllerProvider,

package/lib/style.css

@@ -197,14 +197,14 @@
 .block-list-grid-item:nth-last-child(2),
 .block-list-grid-item:nth-last-child(3) {
   margin-bottom: 0px;
-}._item_14paa_1 {
+}._item_7uv5l_1 {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   width: 100%;
 }
 
-._itemContent_14paa_8 {
+._itemContent_7uv5l_8 {
   display: flex;
   width: 100%;
   padding: 5px 10px 5px 5px;
@@ -219,27 +219,40 @@
   color: #222;
   box-sizing: border-box;
 }
-._itemContent_14paa_8:hover {
+._itemContent_7uv5l_8:hover {
   background-color: #f5f5f5;
 }
-._itemContent_14paa_8:hover ._itemActions_14paa_26 {
+._itemContent_7uv5l_8:hover ._itemActions_7uv5l_26 {
   opacity: 1;
 }
 
-._itemLabelWrapper_14paa_30 {
+._itemHovered_7uv5l_30 ._itemContent_7uv5l_8 {
+  background-color: rgba(var(--primary-6), 0.1);
+}
+
+._itemSelected_7uv5l_34 ._itemContent_7uv5l_8 {
+  background-color: rgba(var(--primary-6), 0.1);
+  border-left: 3px solid var(--primary-6);
+}
+
+._itemSelected_7uv5l_34._itemHovered_7uv5l_30 ._itemContent_7uv5l_8 {
+  background-color: #d4e9f0;
+}
+
+._itemLabelWrapper_7uv5l_43 {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-._itemLabel_14paa_30 {
+._itemLabel_7uv5l_43 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 200px;
 }
 
-._action_14paa_43 {
+._action_7uv5l_56 {
   display: flex;
   width: 30px;
   height: 30px;
@@ -248,21 +261,21 @@
   cursor: pointer;
   border-radius: 4px;
 }
-._action_14paa_43 svg {
+._action_7uv5l_56 svg {
   width: 16px;
   height: 16px;
 }
-._action_14paa_43:hover {
+._action_7uv5l_56:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-._itemTitle_14paa_60 {
+._itemTitle_7uv5l_73 {
   display: flex;
   align-items: center;
   width: 100%;
 }
 
-._itemCollapse_14paa_66 {
+._itemCollapse_7uv5l_79 {
   display: flex;
   width: 30px;
   height: 30px;
@@ -271,11 +284,11 @@
   cursor: pointer;
   border-radius: 4px;
 }
-._itemCollapse_14paa_66:hover {
+._itemCollapse_7uv5l_79:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-._itemActions_14paa_26 {
+._itemActions_7uv5l_26 {
   display: flex;
   align-items: center;
   opacity: 0;
@@ -283,7 +296,7 @@
   right: 10px;
 }
 
-._itemChildren_14paa_87 {
+._itemChildren_7uv5l_100 {
   display: flex;
   flex-direction: column;
   padding-left: 20px;

package/lib/typings/components/ConfigurationPanel/Schemas/Blockquote.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const BlockquoteSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Button.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const ButtonSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Column.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const ColumnSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Divider.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const DividerSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Group.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const GroupSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Hero.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const HeroSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Image.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const ImageSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Navbar.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const NavbarSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Page.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const PageSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Section.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const SectionSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Social.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const SocialSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Spacer.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const SpacerSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Table.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const TableSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Table2.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const Table2Schema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Text.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const TextSchema: BlockSchema;

package/lib/typings/components/ConfigurationPanel/Schemas/Wrapper.d.ts

@@ -0,0 +1,2 @@
+import { BlockSchema } from "../../../typings";
+export declare const WrapperSchema: BlockSchema;

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

@@ -0,0 +1,7 @@
+import { BlockSchema } from "../../../typings";
+/**
+ * BlockSchemasMap stores schema definitions for each block
+ * If a block has a schema definition, it will be used to render the configuration panel
+ * If no schema exists, it will fallback to ConfigPanelsMap
+ */
+export declare const BlockSchemasMap: Record<string, BlockSchema>;

package/lib/typings/components/ConfigurationPanel/components/SchemaPanelRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Path } from "slate";
+import { BlockSchema } from "../../../typings";
+interface SchemaPanelRendererProps {
+    schema: BlockSchema;
+    nodePath: Path;
+}
+export declare const SchemaPanelRenderer: React.FC<SchemaPanelRendererProps>;
+export {};

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

@@ -149,6 +149,7 @@ export { CollapseWrapper } from "./ConfigurationPanel/components/CollapseWrapper
 export { AttributesPanelWrapper } from "./ConfigurationPanel/components/AttributesPanelWrapper";
 export { AttributeField } from "./ConfigurationPanel/components/AttributeField";
 export { ConfigPanelsMap } from "./ConfigurationPanel/Elements";
+export { BlockSchemasMap } from "./ConfigurationPanel/Schemas";
 export { WidgetTypeOptions };
 export { ElementStyles } from "./ElementStyleGallery";
 export { ResponsiveField, ResponsiveTabs, } from "./ConfigurationPanel/components/ResponsiveTabs";

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

@@ -156,6 +156,7 @@ export interface PluginsCustomEditorTypes {
         enabledPreviewEmailSubjectEdit?: boolean;
         enabledGradientImage?: boolean;
         enabledButtonIcon?: boolean;
+        layerDefaultCollapsed?: boolean;
         hideSectionBackgroundImage?: boolean;
         layerConfig?: {
             scrollWhenSelect?: boolean;

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

@@ -1 +1,2 @@
 export * from "./custom-types";
+export * from "./schema";

package/lib/typings/typings/schema.d.ts

@@ -0,0 +1,46 @@
+import { Element } from "easy-email-pro-core";
+import { ActiveTabKeys } from "easy-email-pro-editor";
+import React from "react";
+export type BasicFieldType = "TextField" | "NumberField" | "ColorPickerField" | "SelectField" | "SwitchField" | "SliderField" | "PixelField" | "ImageUploaderField" | "RichTextField" | "TextAreaField" | "ButtonGroupField" | "GradientGeneratorField" | "MergeTagSelectInputField" | "EditPanelListField" | "EditPanelTabsField" | "PixelAndPercentField" | "SyncChildrenField" | "FieldItem";
+export type CompositeFieldType = "Typography" | "Padding" | "Border" | "BackgroundColor" | "TextAlign" | "Height" | "Width" | "Link" | "ButtonContent" | "BorderRadius" | "BackgroundImage" | "FontFamily" | "FontSize" | "Heading" | "ButtonIcon" | "Buttons" | "ImageUrl" | "VerticalAlign" | "Direction" | "DisplayOptions" | "Columns" | "BackgroundGradient" | "LetterSpacing" | "LineHeight" | "FontWeight" | "TextAndHeadingStyle" | "GlobalLink" | "ButtonCategory" | "BackgroundPosition" | "StackOnMobile" | "DividerLine" | "RTLDirection" | "TableLayout" | "Preheader" | "ImageWidth" | "TextAndHeadingList" | "WebFonts" | "PixelAndPercentField" | "SyncChildrenField" | "FieldItem";
+export interface BasicFieldSchema {
+    type: BasicFieldType;
+    name: string;
+    label?: string;
+    path?: string;
+    responsive?: boolean;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    formItem?: any;
+    [key: string]: any;
+}
+export interface CompositeFieldSchema {
+    type: CompositeFieldType;
+    name?: string;
+    label?: string;
+    path?: string;
+    responsive?: boolean;
+    fieldName?: string;
+    mode?: ActiveTabKeys | "desktop" | "mobile";
+    elementType?: Element["type"];
+    hidePadding?: boolean;
+    [key: string]: any;
+}
+export interface CollapseGroupSchema {
+    type: "CollapseGroup";
+    name: string;
+    header: string;
+    defaultActive?: boolean;
+    extra?: React.ReactNode;
+    children: SchemaField[];
+}
+export interface ResponsiveTabsSchema {
+    type: "ResponsiveTabs";
+    responsive: true;
+    desktop: SchemaField[];
+    mobile?: SchemaField[];
+}
+export type SchemaField = BasicFieldSchema | CompositeFieldSchema | CollapseGroupSchema;
+export type BlockSchema = SchemaField[] | ResponsiveTabsSchema;

package/package.json

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