easy-email-pro-theme 1.47.0 → 1.49.0

package/lib/index.js

@@ -54,17 +54,17 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useEventCallback, useSelectedNode, ActiveTabKeys, toggleFormat, TextFormat, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, useForceUpdate, IframeComponent, HtmlStringToReactNodes } from "easy-email-pro-editor";
+import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useEventCallback, useSelectedNode, ActiveTabKeys, toggleFormat, TextFormat, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, useForceUpdate, IframeComponent, HtmlStringToReactNodes, useEqualState } 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";
 import { NodeUtils, BlockManager, ElementType, EditorCore, t, ElementCategory, classnames as classnames$1, StandardType, PluginManager, EditorAuth, HtmlNodeAdapter, ConditionOperator, ConditionOperatorSymbol, EmailRenderProvider, components, I18nManager } from "easy-email-pro-core";
+import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, uniqueId, isString as isString$1, isFunction as isFunction$4, isNumber as isNumber$1, upperFirst, sum, flatMap } from "lodash";
 import { Editor, Range, Node, Transforms, Path, Text as Text$2, createEditor } from "slate";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
-import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, uniqueId, isString as isString$1, isFunction as isFunction$4, isNumber as isNumber$1, upperFirst, sum, flatMap } from "lodash";
-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 } from "@arco-design/web-react";
 import { nanoid } from "nanoid";
-import { IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconPlus, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconLock, IconUnlock, IconQuestionCircle, IconLink, IconCloud, IconSend, IconDown } from "@arco-design/web-react/icon";
+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, IconSend, IconDown } from "@arco-design/web-react/icon";
 import mjml from "mjml-browser";
 import { renderToStaticMarkup } from "react-dom/server";
 import { HistoryEditor } from "slate-history";
@@ -512,7 +512,7 @@ const styleText$g = `@font-face {
 }
 
 `;
-const RetroStyleText = '[data-slate-block=page] {\n  min-height: 300px;\n}\n\n[data-slate-category=navbar]::after,\n[data-slate-category=social]::after {\n  content: "";\n  left: 0;\n  top: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: default;\n}\n\n[data-slate-hover=true] {\n  z-index: 4;\n}\n\n[data-slate-focus=true] {\n  z-index: 3;\n}\n\n[data-slate-selected=true] {\n  z-index: 3;\n}\n\n[data-slate-hover=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-selected=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-void=true] [data-slate-node=element][data-slate-block=button]:hover,\n[data-slate-void=true] [data-slate-node=element][data-slate-block=text]:hover {\n  outline: 2px solid var(--hover-color);\n}\n\n.text-mergetag {\n  outline: 1px solid rgb(78, 89, 105);\n  outline-offset: 1px;\n  padding: 0 2px;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s linear;\n  border: none;\n  font-weight: inherit;\n  outline-color: #00a0ac;\n  color: inherit;\n  background-color: #ebf9fc;\n  max-width: 10em;\n  font-style: inherit;\n  text-decoration-line: inherit;\n  position: relative;\n}\n\n.text-mergetag [data-slate-string=true] {\n  font-size: 0px;\n}\n\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\n\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\n\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\n\n[data-layer-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n[data-is-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n#dragging-placeholder .element-tools-container {\n  opacity: 1 !important;\n}\n\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}\n\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  opacity: 0.8;\n}\n\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\n\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\n\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\n\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.unset-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-slate-universal-editing=true] .universal-element-mask {\n  display: none;\n}\n\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}\n\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}\n\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] {\n  min-height: 300px;\n}\n\n[data-slate-category=navbar]::after,\n[data-slate-category=social]::after {\n  content: "";\n  left: 0;\n  top: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: default;\n}\n\n[data-slate-hover=true] {\n  z-index: 4;\n}\n\n[data-slate-focus=true] {\n  z-index: 3;\n}\n\n[data-slate-selected=true] {\n  z-index: 3;\n}\n\n[data-slate-hover=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-selected=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-void=true] [data-slate-node=element][data-slate-block=button]:hover,\n[data-slate-void=true] [data-slate-node=element][data-slate-block=text]:hover {\n  outline: 2px solid var(--hover-color);\n}\n\n.text-mergetag {\n  outline: 1px solid rgb(78, 89, 105);\n  outline-offset: 1px;\n  padding: 0 2px;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s linear;\n  border: none;\n  font-weight: inherit;\n  outline-color: #00a0ac;\n  color: inherit;\n  background-color: #ebf9fc;\n  max-width: 10em;\n  font-style: inherit;\n  text-decoration-line: inherit;\n  position: relative;\n}\n\n.text-mergetag [data-slate-string=true] {\n  font-size: 0px;\n}\n\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\n\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\n\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\n\n[data-layer-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n[data-is-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n#dragging-placeholder .element-tools-container {\n  opacity: 1 !important;\n}\n\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}\n\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  opacity: 0.8;\n}\n\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\n\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\n\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\n\n.standalone-element-mask,\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.unset-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-slate-universal-editing=true] .universal-element-mask,\n[data-slate-standalone-editing=true] .standalone-element-mask {\n  display: none;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask,\n[data-slate-standalone-editing=true] .standalone-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::before,\n[data-slate-standalone-editing=true] .standalone-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}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::after,\n[data-slate-standalone-editing=true] .standalone-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, apply: apply2, insertSoftBreak } = editor;
   editor.insertBreak = (...args) => {
@@ -588,6 +588,25 @@ const withTheme$1 = (editor) => {
       if (touchElements.length === 1 && parentEle.children.length === 1) {
         return;
       }
+    } else if (NodeUtils.isStandaloneElement(parentEle)) {
+      if (parentEle.children.length === 1) {
+        const clonedNode = cloneDeep(currentNode);
+        const loopChildren = (node) => {
+          if (NodeUtils.isTextNode(node)) {
+            node.text = "";
+            return;
+          }
+          if (node.children) {
+            node.children.forEach(loopChildren);
+          }
+        };
+        loopChildren(clonedNode);
+        editor.replaceNode({
+          node: clonedNode,
+          path: removePath
+        });
+        return;
+      }
     }
     apply2({
       type: "remove_node",
@@ -677,6 +696,23 @@ function IconFont(props) {
     }
   );
 }
+const assignIdsToElementTree = (element, overwrite = false) => {
+  const newElement = cloneDeep(element);
+  const loop2 = (node) => {
+    if (NodeUtils.isElement(node)) {
+      if (overwrite) {
+        node.id = nanoid();
+      } else {
+        node.id = node.id || nanoid();
+      }
+      if (node.children) {
+        node.children.forEach(loop2);
+      }
+    }
+  };
+  loop2(newElement);
+  return newElement;
+};
 const DraggingProviderContext = React__default.createContext({});
 const DraggingProvider = ({
   children
@@ -687,12 +723,14 @@ const DraggingProvider = ({
     setDragoverNodePath,
     setHoverNodePath,
     dragNodePath,
-    setSelectedNodePath
+    setSelectedNodePath,
+    standaloneElementEditing
   } = useEditorState();
   const editorProps = useEditorProps();
   const quantityLimitCheck = useRefState(editorProps.quantityLimitCheck);
   const editor = useSlate();
   const [inited, setInited] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   let root2 = null;
   try {
     root2 = ReactEditor.getWindow(editor).document;
@@ -720,7 +758,7 @@ const DraggingProvider = ({
       clearInterval(timer);
     };
   }, [editor]);
-  const isDragging = useRefState(dragNodePath);
+  const isElementDragging = useRefState(dragNodePath);
   const removePlaceholder = useCallback(() => {
     var _a;
     const rootDoc = ReactEditor.getWindow(editor).document;
@@ -772,6 +810,17 @@ const DraggingProvider = ({
             removeSelectedStyle();
             return;
           }
+          if (!standaloneElementEditing) {
+            const [standaloneElementEntry] = Editor.nodes(editor, {
+              at: dropPath,
+              match: (node2) => {
+                return NodeUtils.isStandaloneElement(node2);
+              }
+            });
+            if (standaloneElementEntry) {
+              return;
+            }
+          }
           const [dropNodeEntry] = Editor.nodes(editor, {
             at: dropPath,
             match: (node2, path2) => {
@@ -862,6 +911,7 @@ const DraggingProvider = ({
     };
     const onDrop = (ev) => {
       removePlaceholder();
+      setIsDragging(false);
       const propsData = propsDataRef.current;
       if (!propsData)
         return;
@@ -993,7 +1043,10 @@ const DraggingProvider = ({
               }, 0);
             }
           } else {
-            const cloneElement2 = cloneDeep(propsData.element);
+            const cloneElement2 = assignIdsToElementTree(
+              cloneDeep(propsData.element),
+              true
+            );
             if (isInsert) {
               targetPath = [...targetPath, 0];
               Transforms.insertNodes(editor, cloneElement2, {
@@ -1015,7 +1068,7 @@ const DraggingProvider = ({
       setHoverNodePath(null);
     };
     const onMousemove = (event) => {
-      if (isDragging.current) {
+      if (isElementDragging.current) {
         removeDraggingStyle();
         setHoverNodePath(null);
         removePlaceholder();
@@ -1033,14 +1086,15 @@ const DraggingProvider = ({
     editor,
     editorProps.readOnly,
     inited,
-    isDragging,
+    isElementDragging,
     quantityLimitCheck,
     removeDraggingStyle,
     removePlaceholder,
     root2,
     setDragoverNodePath,
     setHoverNodePath,
-    setSelectedNodePath
+    setSelectedNodePath,
+    standaloneElementEditing
   ]);
   const dragHandle = useMemo(() => {
     return {
@@ -1075,11 +1129,13 @@ const DraggingProvider = ({
         if ((propsData == null ? void 0 : propsData.action) === "move") {
           setDragNodePath(ReactEditor.findPath(editor, propsData.element));
         }
+        setIsDragging(true);
       },
       onDragEnd() {
         removeDraggingStyle();
         setHoverNodePath(null);
         removePlaceholder();
+        setIsDragging(false);
       },
       draggable: true
     };
@@ -1094,9 +1150,10 @@ const DraggingProvider = ({
   const value = useMemo(() => {
     return {
       propsDataRef,
-      dragHandle
+      dragHandle,
+      isDragging
     };
-  }, [dragHandle]);
+  }, [dragHandle, isDragging]);
   return /* @__PURE__ */ React__default.createElement(DraggingProviderContext.Provider, { value }, children);
 };
 const loop$1 = () => {
@@ -1581,23 +1638,6 @@ const useElementDefault = ({
     mobileAttributes
   };
 };
-const assignIdsToElementTree = (element, overwrite = false) => {
-  const newElement = cloneDeep(element);
-  const loop2 = (node) => {
-    if (NodeUtils.isElement(node)) {
-      if (overwrite) {
-        node.id = nanoid();
-      } else {
-        node.id = node.id || nanoid();
-      }
-      if (node.children) {
-        node.children.forEach(loop2);
-      }
-    }
-  };
-  loop2(newElement);
-  return newElement;
-};
 const useElementInteract = () => {
   const editor = useSlate();
   const { setSelectedNodePath, setHoverNodePath, selectedNodePath, lock } = useEditorState();
@@ -1770,7 +1810,7 @@ const defaultFontList = [
 ].map((item2) => ({ value: item2, label: item2 }));
 function useFontFamily() {
   const { fontList: propsFontList } = useEditorProps();
-  const { values } = useEditorContext();
+  const { values, setFieldValue } = useEditorContext();
   const addFonts = values.content.data.fonts;
   const fontList = useMemo(() => {
     const fonts = [];
@@ -1793,8 +1833,35 @@ function useFontFamily() {
       href: item2.href
     }));
   }, [addFonts, propsFontList]);
+  const addFont = (val) => {
+    const webFontList = val.split(",").map((item2) => {
+      const match = fontList.find(
+        (font) => font.value === item2 && !!font.href
+      );
+      if (!match)
+        return null;
+      return {
+        name: match.value,
+        label: match.label,
+        href: match.href
+      };
+    }).filter(Boolean);
+    if (webFontList.length > 0) {
+      const fonts = cloneDeep(values.content.data.fonts || []);
+      webFontList.forEach((item2) => {
+        if (!fonts.find((font) => font.name === item2.name)) {
+          fonts.push({
+            name: item2.name,
+            href: item2.href
+          });
+        }
+      });
+      setFieldValue([0], "data.fonts", fonts);
+    }
+  };
   return {
-    fontList
+    fontList,
+    addFont
   };
 }
 const useEditorThemeState = () => {
@@ -1932,6 +1999,12 @@ const MinimalistProvider = ({ children }) => {
     columnsOverlay,
     imageUploaderOverlay,
     moreActionsMenusOverlay,
+    serColumnsOverlayVisible,
+    serImageUploaderOverlayPosition,
+    serImageUploaderOverlayVisible,
+    setBlockMenusOverlayVisible,
+    setMoreActionsMenusOverlayPosition,
+    setMoreActionsMenusOverlayVisible,
     setSearch
   ]);
   return /* @__PURE__ */ React__default.createElement(MinimalistContext.Provider, { value: data }, children);
@@ -1951,7 +2024,14 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
     showPreviousLevelIcon
   } = useEditorProps();
   const { open } = useUniversalContent();
-  const { setSelectedNodePath, universalElementEditing, universalElementPath } = useEditorState();
+  const {
+    setSelectedNodePath,
+    selectedNodePath,
+    universalElementEditing,
+    universalElementPath,
+    standaloneElementEditing,
+    standaloneElementPath
+  } = useEditorState();
   const isPage = NodeUtils.isPageElement(element);
   const { dragHandle } = useDragging({
     element,
@@ -2006,8 +2086,19 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
   ).category.includes(ElementCategory.WRAPPER);
   const isFullWidth = get(element, "attributes.full-width") === "full-width";
   const isTopEnough = nodeElement.getBoundingClientRect().top >= 60;
-  const isUniversalElement = NodeUtils.isUniversalElement(element);
+  NodeUtils.isUniversalElement(element);
   const isEditingUniversalElement = universalElementPath && Path.equals(universalElementPath, path2) && universalElementEditing;
+  const isEditingStandaloneElement = standaloneElementPath && Path.equals(standaloneElementPath, path2) && standaloneElementEditing;
+  const isChildOfUniversalElement = universalElementPath && selectedNodePath && Path.isAncestor(universalElementPath, selectedNodePath);
+  const isChildOfStandaloneElement = standaloneElementPath && selectedNodePath && Path.isAncestor(standaloneElementPath, selectedNodePath);
+  let isHideBackIcon = false;
+  if (universalElementPath && !isChildOfUniversalElement) {
+    isHideBackIcon = true;
+  }
+  if (standaloneElementPath && !isChildOfStandaloneElement) {
+    isHideBackIcon = true;
+  }
+  const hideAddToCollection = universalElementEditing || standaloneElementEditing;
   const renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
@@ -2035,13 +2126,13 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
       },
       /* @__PURE__ */ React__default.createElement(
         "div",
-        __spreadProps(__spreadValues({}, isEditingUniversalElement ? {} : dragHandle), {
+        __spreadProps(__spreadValues({}, isEditingUniversalElement || isEditingStandaloneElement ? {} : dragHandle), {
           style: {
-            cursor: isEditingUniversalElement ? "default" : "grab",
+            cursor: isEditingUniversalElement || isEditingStandaloneElement ? "default" : "grab",
             display: "flex"
           }
         }),
-        isUniversalElement && /* @__PURE__ */ React__default.createElement(
+        !universalElementEditing && !standaloneElementEditing && /* @__PURE__ */ React__default.createElement(
           IconFont,
           {
             iconName: "icon-start",
@@ -2057,23 +2148,16 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
           nodeElement,
           path: path2
         }
-      ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, showPreviousLevelIcon && !isPage && /* @__PURE__ */ React__default.createElement(
+      ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, showPreviousLevelIcon && !isPage && !isHideBackIcon && /* @__PURE__ */ React__default.createElement(
         "div",
         {
           className: "element-tools-item",
           onPointerDown: onSelectParent
         },
         /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-back-parent" })
-      ), !isEditingUniversalElement && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: onCopy }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-copy" })), universalElementSetting && !universalElementEditing && !isUniversalElement && /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          className: "element-tools-item",
-          onPointerDown: openModal
-        },
-        /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-collection" })
-      ), !isEditingUniversalElement && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: onDelete }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-delete" })))
+      ), !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: onCopy }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-copy" })), !hideAddToCollection && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: openModal }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-collection" })), !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: onDelete }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-delete" })))
     ),
-    showDragMoveIcon && !isEditingUniversalElement && /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "element-tools-move-handle" }, dragHandleV2), /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-move" }))
+    showDragMoveIcon && !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "element-tools-move-handle" }, dragHandleV2), /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-move" }))
   ), /* @__PURE__ */ React__default.createElement("div", { className: "element-dragover" }), /* @__PURE__ */ React__default.createElement("style", null, styleText$f));
   const isContentElement = NodeUtils.isContentElement(element);
   if (isContentElement) {
@@ -2182,13 +2266,15 @@ const UniversalListItem = ({
     )
   );
 };
-const index$c = "";
+const index$e = "";
 function BlockItem({
   type,
   payload,
   title,
   icon,
-  universalElementEditing
+  universalElementEditing,
+  standaloneElementEditing,
+  initialStandaloneElement
 }) {
   const block = BlockManager.getBlockByType(type);
   if (!block) {
@@ -2203,9 +2289,30 @@ function BlockItem({
   });
   if (universalElementEditing && !NodeUtils.isContentElement(element))
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "block-list-grid-item" }, dragHandle), /* @__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)));
+  if (standaloneElementEditing && initialStandaloneElement && !NodeUtils.isParentCategoryType(element.type, initialStandaloneElement.type))
+    return null;
+  const displayTitle = !isUndefined$1(title) ? title : block == null ? void 0 : block.name;
+  return /* @__PURE__ */ React__default.createElement("div", { className: "block-list-grid-item" }, /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "blockItemContainer" }, dragHandle), /* @__PURE__ */ React__default.createElement("div", null, icon), /* @__PURE__ */ React__default.createElement("div", { style: { width: "100%" } }, displayTitle)), /* @__PURE__ */ React__default.createElement(
+    SharedComponents.ElementStyleGallery,
+    {
+      type,
+      payload,
+      title: displayTitle
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "block-list-grid-item-more",
+        onPointerDown: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(IconPlus, null)
+    )
+  ));
 }
-const index$b = "";
+const index$d = "";
 const LayoutItem = ({
   columns,
   title
@@ -2262,7 +2369,7 @@ const ColumnElement = ({ column: column2 }) => {
     );
   }))));
 };
-const index$a = "";
+const index$c = "";
 const defaultCategories = [
   {
     get label() {
@@ -2439,7 +2546,11 @@ const BlockList = ({ tab }) => {
 };
 const DefaultBlockList = () => {
   const editorProps = useEditorProps();
-  const { universalElementEditing } = useEditorState();
+  const {
+    universalElementEditing,
+    standaloneElementEditing,
+    initialStandaloneElement
+  } = useEditorState();
   const categories = editorProps.categories || defaultCategories;
   const defaultActiveKey = useMemo(
     () => [
@@ -2471,6 +2582,8 @@ const DefaultBlockList = () => {
                 BlockItem,
                 __spreadValues({
                   universalElementEditing,
+                  standaloneElementEditing,
+                  initialStandaloneElement,
                   key: index22
                 }, item2)
               );
@@ -2478,6 +2591,12 @@ const DefaultBlockList = () => {
           );
         }
         if (category2.displayType === "column" && !universalElementEditing) {
+          if (standaloneElementEditing && initialStandaloneElement && !NodeUtils.isParentCategoryType(
+            ElementType.SECTION,
+            initialStandaloneElement.type
+          )) {
+            return null;
+          }
           return /* @__PURE__ */ React__default.createElement(
             Collapse.Item,
             {
@@ -2504,7 +2623,7 @@ const DefaultBlockList = () => {
             /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical" }, /* @__PURE__ */ React__default.createElement("div", null))
           );
         }
-        if (category2.displayType === "custom" && !universalElementEditing) {
+        if (category2.displayType === "custom" && !universalElementEditing && !standaloneElementEditing) {
           return /* @__PURE__ */ React__default.createElement(
             Collapse.Item,
             {
@@ -2526,6 +2645,8 @@ const DefaultBlockList = () => {
     defaultActiveKey,
     editorProps.compact,
     editorProps.widgetMode,
+    initialStandaloneElement,
+    standaloneElementEditing,
     universalElementEditing
   ]);
 };
@@ -6934,7 +7055,7 @@ function ComponentItem({
       text = childrenText;
     }
     return text;
-  }, [label]);
+  }, [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(
     "div",
     {
@@ -7061,7 +7182,12 @@ const BlockLayer = () => {
   ));
 };
 const BlockSideBar = ({ height }) => {
-  const { setSelectedNodePath, selectedNodePath, universalElementEditing } = useEditorState();
+  const {
+    setSelectedNodePath,
+    selectedNodePath,
+    universalElementEditing,
+    standaloneElementEditing
+  } = useEditorState();
   const { showLayer, compact, widgetMode } = useEditorProps();
   const { selectedNode } = useSelectedNode();
   const [activeTab, setActiveTab] = useState("Content");
@@ -7102,6 +7228,20 @@ const BlockSideBar = ({ height }) => {
           onClose
         }
       ), /* @__PURE__ */ React__default.createElement("style", null, stylesText$1));
+    } else if (standaloneElementEditing) {
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+        SharedComponents.FullHeightOverlayScrollbars,
+        {
+          height: `calc(${height} - 60px)`
+        },
+        /* @__PURE__ */ React__default.createElement(BlocksPanel, null)
+      ), !compact && /* @__PURE__ */ React__default.createElement(
+        SharedComponents.ConfigurationDrawer,
+        {
+          height: `calc(${height} - 60px)`,
+          onClose
+        }
+      ), /* @__PURE__ */ React__default.createElement("style", null, stylesText$1));
     }
     const isCustomizeUI = EditorAuth.getFeatureEnabled("CUSTOM_UI");
     const isWidgetModeEnabled = EditorAuth.getFeatureEnabled("STUDIO");
@@ -7176,11 +7316,12 @@ const BlockSideBar = ({ height }) => {
     onChange,
     onClose,
     showLayer,
+    standaloneElementEditing,
     universalElementEditing,
     widgetMode
   ]);
 };
-const index$9 = "";
+const index$b = "";
 const LayoutItemList = ({
   columns,
   onSelect,
@@ -7297,7 +7438,7 @@ const ColumnLayout = ({
     }
   ));
 };
-const index$8 = "";
+const index$a = "";
 const UniversalElementPanel = () => {
   const { selectedNodePath } = useSelectedNode();
   const { setUniversalElementPath } = useEditorState();
@@ -7356,7 +7497,9 @@ const ConfigurationPanel = ({
   const {
     selectedNodePath,
     universalElementEditing,
+    standaloneElementEditing,
     universalElementPath,
+    standaloneElementPath,
     lock
   } = useEditorState();
   const { quantityLimitCheck, compact } = useEditorProps();
@@ -7385,7 +7528,8 @@ const ConfigurationPanel = ({
     if (!element || !selectedNodePath)
       return null;
     const isSelectedUniversalElement = universalElementPath && Path.equals(selectedNodePath, universalElementPath);
-    const isHideBackIcon = universalElementEditing && compact;
+    const isSelectedStandaloneElement = standaloneElementPath && Path.equals(selectedNodePath, standaloneElementPath);
+    const isHideBackIcon = (universalElementEditing || standaloneElementEditing) && compact;
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
       "div",
       {
@@ -7417,8 +7561,19 @@ const ConfigurationPanel = ({
           )
         }
       ),
-      /* @__PURE__ */ React__default.createElement("div", { style: { flex: 1 } }, " ", BlockManager.getBlockTitle(element)),
-      !isSelectedUniversalElement && /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap"
+          }
+        },
+        BlockManager.getBlockTitle(element)
+      ),
+      !isSelectedUniversalElement && !isSelectedStandaloneElement && /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
         Button$2,
         {
           onClick: () => onCopy(selectedNodePath),
@@ -7486,10 +7641,12 @@ const ConfigurationPanel = ({
     isChanged,
     resetSelectedNode,
     onCopy,
-    deleteBlock
+    deleteBlock,
+    standaloneElementEditing,
+    standaloneElementPath
   ]);
 };
-const index$7 = "";
+const index$9 = "";
 const Controller = () => {
   const editor = useSlate();
   const getRoot = () => {
@@ -7624,7 +7781,10 @@ const hoverUnderline = "_hoverUnderline_8d8dl_1";
 const styles$2 = {
   hoverUnderline
 };
-function BlockPaths() {
+function BlockPaths({
+  standaloneElementPath,
+  universalElementPath
+}) {
   const { selectedNodePath, setSelectedNodePath } = useSelectedNode();
   const editor = useSlate();
   const paths = useMemo(() => {
@@ -7638,11 +7798,16 @@ function BlockPaths() {
       if (NodeUtils.isPageElement(current)) {
         prev = null;
       } else {
+        if (standaloneElementPath && Path.equals(prev, standaloneElementPath)) {
+          break;
+        } else if (universalElementPath && Path.equals(prev, universalElementPath)) {
+          break;
+        }
         prev = Path.parent(prev);
       }
     }
     return paths2.reverse();
-  }, [editor, selectedNodePath]);
+  }, [editor, selectedNodePath, standaloneElementPath, universalElementPath]);
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(
       "div",
@@ -7696,7 +7861,13 @@ const EditorTabs = (props) => {
     ev.preventDefault();
     clearCanvas();
   };
-  const { universalElementEditing, lock } = useEditorState();
+  const {
+    universalElementEditing,
+    standaloneElementEditing,
+    standaloneElementPath,
+    universalElementPath,
+    lock
+  } = useEditorState();
   const canPreview = useMemo(() => {
     if (!isUndefined$1(showPreview)) {
       return showPreview;
@@ -7734,7 +7905,7 @@ const EditorTabs = (props) => {
     TabHeader,
     {
       className: "easy-email-pro-editor-tabs",
-      right: /* @__PURE__ */ React__default.createElement(Space, null, !universalElementEditing && !readOnly && /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("clear the entire canvas") }, /* @__PURE__ */ React__default.createElement(
+      right: /* @__PURE__ */ React__default.createElement(Space, null, !universalElementEditing && !standaloneElementEditing && !readOnly && /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("clear the entire canvas") }, /* @__PURE__ */ React__default.createElement(
         Button$2,
         {
           className: "easy-email-pro-editor-tabs-clear-btn",
@@ -7756,7 +7927,13 @@ const EditorTabs = (props) => {
         },
         /* @__PURE__ */ React__default.createElement(IconEye, null)
       )))), /* @__PURE__ */ React__default.createElement("div", null)),
-      left: /* @__PURE__ */ React__default.createElement("div", null, showBlockPaths && /* @__PURE__ */ React__default.createElement(BlockPaths, null))
+      left: /* @__PURE__ */ React__default.createElement("div", null, showBlockPaths && /* @__PURE__ */ React__default.createElement(
+        BlockPaths,
+        {
+          standaloneElementPath,
+          universalElementPath
+        }
+      ))
     }
   ), /* @__PURE__ */ React__default.createElement(
     "div",
@@ -8155,9 +8332,10 @@ const Hotkeys = () => {
   ]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
-const index$6 = "";
+const index$8 = "";
 const UniversalElementEditorDrawer = ({ children }) => {
   const [loading, setLoading] = React__default.useState(false);
+  const [isEditing, setIsEditing] = React__default.useState(false);
   const editor = useSlate();
   const {
     universalElementEditing,
@@ -8279,25 +8457,24 @@ const UniversalElementEditorDrawer = ({ children }) => {
             {
               style: {
                 height: 40,
-                position: "absolute",
-                width: 300,
-                top: 18,
                 display: "flex"
               }
             },
-            /* @__PURE__ */ React__default.createElement(
-              Typography$1.Title,
+            /* @__PURE__ */ React__default.createElement(Space, { style: { width: "100%" }, align: "center" }, isEditing ? /* @__PURE__ */ React__default.createElement(
+              Input,
               {
-                heading: 5,
-                style: {
-                  margin: 0
-                },
-                editable: {
-                  onChange: onChangeTitle
-                }
+                value: universalElement ? BlockManager.getBlockTitle(universalElement) : "",
+                onChange: onChangeTitle,
+                onBlur: () => setIsEditing(false)
+              }
+            ) : /* @__PURE__ */ React__default.createElement("div", null, universalElement ? BlockManager.getBlockTitle(universalElement) : ""), /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Edit") }, /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                style: { cursor: "pointer" },
+                onClick: () => setIsEditing((d) => !d)
               },
-              universalElement && BlockManager.getBlockTitle(universalElement)
-            )
+              /* @__PURE__ */ React__default.createElement(IconEdit, null)
+            )))
           ),
           extra: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Space, null, hasChanged ? /* @__PURE__ */ React__default.createElement(
             Popconfirm,
@@ -8343,7 +8520,8 @@ const UniversalElementEditorDrawer = ({ children }) => {
     onChangeTitle,
     onPublishElement,
     universalElement,
-    visible
+    visible,
+    isEditing
   ]);
 };
 const PreviewEmail = ({
@@ -14080,7 +14258,7 @@ const HoveringToolbar = () => {
     return /* @__PURE__ */ React__default.createElement("div", null, content);
   }
   return createPortal(
-    /* @__PURE__ */ React__default.createElement("div", { style: { position: "fixed", top: 0, left: 0, zIndex: 1 } }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { style: { position: "fixed", top: 0, left: 0, zIndex: 9999 } }, /* @__PURE__ */ React__default.createElement(
       "div",
       {
         ref,
@@ -15317,6 +15495,7 @@ const TurnInto = () => {
 const RichTextBar$1 = "";
 const MergeTag = React__default.memo(() => {
   const [popupVisible, setPopupVisible] = useState(false);
+  const [mergeTagRef, setMergeTagRef] = useState(null);
   const editor = useSlate();
   const { mergetags } = useEditorProps();
   const formatMergetags = useMemo(() => {
@@ -15334,7 +15513,7 @@ const MergeTag = React__default.memo(() => {
   const onClose = useCallback(() => {
     setPopupVisible(false);
   }, []);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref: setMergeTagRef }, /* @__PURE__ */ React__default.createElement(
     SharedComponents.MergeTagComponent,
     {
       mergetags: formatMergetags,
@@ -15343,6 +15522,7 @@ const MergeTag = React__default.memo(() => {
       onChange,
       onClose,
       value: "",
+      getPopupContainer: mergeTagRef ? () => mergeTagRef : void 0,
       triggerElement: /* @__PURE__ */ React__default.createElement(
         FormatButton,
         {
@@ -15352,7 +15532,7 @@ const MergeTag = React__default.memo(() => {
         }
       )
     }
-  );
+  ));
 });
 const TextAlign$1 = () => {
   const editor = useSlate();
@@ -15393,6 +15573,7 @@ const TextAlign$1 = () => {
 };
 const options$7 = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
 const FontSize$2 = () => {
+  const [selectRef, setSelectRef] = useState(null);
   const { fontSizeList } = useEditorProps();
   const [fontSizeValue, setFontSizeValue] = useState();
   const { setFieldValue } = useEditorContext();
@@ -15458,7 +15639,7 @@ const FontSize$2 = () => {
       setFieldValue(contentNodePath, "attributes.font-size", val);
     }
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { ref: setSelectRef }, /* @__PURE__ */ React__default.createElement(
     Select$1,
     {
       className: "easy-email-pro-font-size",
@@ -15468,18 +15649,20 @@ const FontSize$2 = () => {
       triggerProps: {
         autoAlignPopupWidth: false,
         autoAlignPopupMinWidth: true
-      }
+      },
+      getPopupContainer: selectRef ? () => selectRef : void 0
     },
     optionsList.map((option, index2) => {
       return /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: index2, value: option.value }, option.label);
     })
-  ), /* @__PURE__ */ React__default.createElement("style", null, `
+  )), /* @__PURE__ */ React__default.createElement("style", null, `
       .easy-email-pro-font-size .arco-select-view { border-width: 0px !important; }
       .easy-email-pro-font-size .arco-select-view-value { font-size: calc(var(--hovering-bar-icon-size) + 1px) !important; }
       `));
 };
 const FontFamily$2 = () => {
-  const { fontList } = useFontFamily();
+  const { fontList, addFont } = useFontFamily();
+  const [selectRef, setSelectRef] = useState(null);
   const editor = useSlate();
   const { setFieldValue } = useEditorContext();
   const [fontFamilyValue, setFontFamilyValue] = useState();
@@ -15544,8 +15727,9 @@ const FontFamily$2 = () => {
     } else {
       setFieldValue(contentNodePath, "attributes.font-family", val);
     }
+    addFont(val);
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { ref: setSelectRef }, /* @__PURE__ */ React__default.createElement(
     Select$1,
     {
       className: "easy-email-pro-font-family",
@@ -15555,12 +15739,13 @@ const FontFamily$2 = () => {
       triggerProps: {
         autoAlignPopupWidth: false,
         autoAlignPopupMinWidth: true
-      }
+      },
+      getPopupContainer: selectRef ? () => selectRef : void 0
     },
     optionsList.map((option, index2) => {
       return /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: index2, value: option.value }, option.label);
     })
-  ), /* @__PURE__ */ React__default.createElement("style", null, `
+  )), /* @__PURE__ */ React__default.createElement("style", null, `
       .easy-email-pro-font-family .arco-select-view { border-width: 0px !important; }
       .easy-email-pro-font-family .arco-select-view-value { font-size: calc(var(--hovering-bar-icon-size) + 1px) !important; }
       `));
@@ -24080,7 +24265,7 @@ lib.exports = MasonryComponent;
 lib.exports.default = MasonryComponent;
 var libExports = lib.exports;
 const Masonry$1 = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
-const index$5 = "";
+const index$7 = "";
 const defaultQueryList = [
   {
     query: "Staff Favorites",
@@ -26389,11 +26574,8 @@ function EditPanelList(props) {
     },
     [list, itemIds]
   );
-  const onDragOver = useCallback(
-    (event) => {
-    },
-    [list, props, prevActiveKey, itemIds]
-  );
+  const onDragOver = useCallback(() => {
+  }, []);
   const onDragEnd = useCallback(
     (event) => {
       const { active, over } = event;
@@ -27491,35 +27673,11 @@ function Border(props) {
   }, [isEnabledBorder, label, name, path2]);
 }
 function FontFamily$1(props) {
-  const { values, setFieldValue, getFieldValue } = useEditorContext();
-  const { fontList } = useFontFamily();
+  const { fontList, addFont } = useFontFamily();
   const node = useElementDefault({ path: props.path, type: null });
   const value = get(node, props.name);
   const onChange = useEventCallback((val) => {
-    const webFontList = val.split(",").map((item2) => {
-      const match = fontList.find(
-        (font) => font.value === item2 && !!font.href
-      );
-      if (!match)
-        return null;
-      return {
-        name: match.value,
-        label: match.label,
-        href: match.href
-      };
-    }).filter(Boolean);
-    if (webFontList.length > 0) {
-      const fonts = cloneDeep(values.content.data.fonts || []);
-      webFontList.forEach((item2) => {
-        if (!fonts.find((font) => font.name === item2.name)) {
-          fonts.push({
-            name: item2.name,
-            href: item2.href
-          });
-        }
-      });
-      setFieldValue([0], "data.fonts", fonts);
-    }
+    addFont(val);
   });
   return useMemo(
     () => value ? /* @__PURE__ */ React__default.createElement(Tooltip, { content: Array.isArray(value) ? value.join(",") : value }, /* @__PURE__ */ React__default.createElement(
@@ -28757,7 +28915,7 @@ const ConditionModal = ({
       onOk: form.submit,
       onCancel: onClose,
       style: {
-        width: 550
+        width: 750
       }
     },
     /* @__PURE__ */ React__default.createElement(
@@ -28965,20 +29123,18 @@ function ConditionItem({
       placeholder: "customer.country",
       keepName: true
     }
-  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 5, style: { paddingLeft: 5 } }, /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: hideRight ? 13 : 5, style: { paddingLeft: 5 } }, /* @__PURE__ */ React__default.createElement(
     Form.Item,
     {
       label: t("Operator"),
       field: `${name}.operator`,
       layout: "vertical",
-      style: {
-        minWidth: 150
-      }
+      style: {}
     },
     /* @__PURE__ */ React__default.createElement(Select$1, { options: options$4 }, options$4.map((item2) => {
       return /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: item2.value, value: item2.value }, /* @__PURE__ */ React__default.createElement("div", null, item2.label));
     }))
-  )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 8, style: { paddingLeft: 5 } }, !hideRight && /* @__PURE__ */ React__default.createElement(
+  )), !hideRight && /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 8, style: { paddingLeft: 5 } }, /* @__PURE__ */ React__default.createElement(
     Form.Item,
     {
       label: t("Value"),
@@ -29084,7 +29240,7 @@ function Iteration({
     )))))
   ));
 }
-const index$4 = "";
+const index$6 = "";
 const DisplayOptions = ({
   enabledResponsive
 }) => {
@@ -29820,7 +29976,7 @@ const defaultAttributeFields = {
   FieldItem
 };
 const AttributeField = __spreadValues({}, defaultAttributeFields);
-const index$3 = "";
+const index$5 = "";
 const AttributesPanelWrapper = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", { id: "AttributesPanelWrapper", className: "AttributesPanelWrapper" }, /* @__PURE__ */ React__default.createElement("div", { style: __spreadValues({ padding: "1px 0px" }, props.style) }, props.children));
 };
@@ -30917,6 +31073,20 @@ function SocialItem$1({ index: index2, path: path2 }) {
       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],
@@ -31856,6 +32026,7 @@ const ConfigPanelsMap = {
   [ElementType.WRAPPER_WIDGET]: Widget,
   [ElementType.DANGEROUS_CODE]: Code,
   //text
+  [ElementType.TEXT]: Text$1,
   [ElementType.STANDARD_TEXT]: Text$1,
   [ElementType.STANDARD_PARAGRAPH]: Text$1,
   [ElementType.STANDARD_TEXT_LIST]: Text$1,
@@ -31904,7 +32075,12 @@ const AttributePanel = () => {
   }, [Com, nodePath, selectedNode]);
 };
 const ConfigurationSideBar = ({ height }) => {
-  const { setSelectedNodePath, selectedNodePath, universalElementEditing } = useEditorState();
+  const {
+    setSelectedNodePath,
+    selectedNodePath,
+    universalElementEditing,
+    standaloneElementEditing
+  } = useEditorState();
   const { compact } = useEditorProps();
   const [activeTab, setActiveTab] = useState("Style");
   const lastActiveTab = useRef(activeTab);
@@ -31920,7 +32096,7 @@ const ConfigurationSideBar = ({ height }) => {
   const onClose = useCallback(() => {
     setActiveTab(lastActiveTab.current);
   }, []);
-  if (universalElementEditing) {
+  if (universalElementEditing || standaloneElementEditing) {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
       SharedComponents.FullHeightOverlayScrollbars,
       {
@@ -32460,7 +32636,7 @@ const MergeTagComponent = React__default.memo((props) => {
     )
   );
 });
-const index$2 = "";
+const index$4 = "";
 const SvgMoreIcon = (props) => /* @__PURE__ */ React$2.createElement("svg", __spreadValues({ viewBox: "0 0 13 3", style: {
   display: "block",
   fill: "currentColor"
@@ -33248,7 +33424,7 @@ const EditorTopBar = () => {
     )), /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(Button$2.Group, null, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: !undoable }, /* @__PURE__ */ React__default.createElement(Tooltip, { position: "top", content: t("Undo") }, /* @__PURE__ */ React__default.createElement(IconUndo, { width: 40, onClick: editor.undo }))), /* @__PURE__ */ React__default.createElement(Button$2, { disabled: !redoable }, /* @__PURE__ */ React__default.createElement(Tooltip, { position: "top", content: t("Redo") }, /* @__PURE__ */ React__default.createElement(IconRedo, { onClick: editor.redo })))), canPreview && (lock ? /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Email preview") }, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: lock }, /* @__PURE__ */ React__default.createElement(IconEye, null))) : /* @__PURE__ */ React__default.createElement(SharedComponents.PreviewEmailDrawer, null, /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Email preview") }, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: lock }, /* @__PURE__ */ React__default.createElement(IconEye, null)))))), /* @__PURE__ */ React__default.createElement("div", null)))
   ), /* @__PURE__ */ React__default.createElement("style", null, styleText$6));
 };
-const index$1 = "";
+const index$3 = "";
 const PopupCard = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     Popover,
@@ -33627,7 +33803,7 @@ const Link$1 = ({ path: path2, name }) => {
     ))
   );
 };
-const index = "";
+const index$2 = "";
 const ConfigurationToolbarAttributeField = {
   Image: Image$3,
   Link: Link$1,
@@ -35933,6 +36109,232 @@ const ElementIcon = (_i) => {
   const Icon2 = getElementIcon(type);
   return /* @__PURE__ */ React__default.createElement(Icon2, __spreadValues({}, props));
 };
+const index$1 = "";
+const ElementStyles = {};
+function ElementStyleGallery({
+  type,
+  payload,
+  title,
+  children
+}) {
+  const { selectedNodePath } = useSelectedNode();
+  const [popupVisible, setPopupVisible] = useState(false);
+  const { isDragging } = useContext(DraggingProviderContext);
+  useEffect(() => {
+    if (isDragging || selectedNodePath) {
+      setPopupVisible(false);
+    }
+  }, [isDragging, selectedNodePath]);
+  const MatchedElement = get(ElementStyles, type);
+  if (!MatchedElement) {
+    console.warn(`ElementStyles: ${type} not found`);
+    return null;
+  }
+  const renderMenu = () => {
+    return /* @__PURE__ */ React__default.createElement(
+      Card,
+      {
+        title: title ? /* @__PURE__ */ React__default.createElement("p", { style: { textAlign: "left" } }, title) : void 0,
+        bodyStyle: { padding: 0 },
+        style: { borderRadius: 4, padding: 0 }
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "block-list-menu-item-card-wrapper" }, /* @__PURE__ */ React__default.createElement(FullHeightOverlayScrollbars, { maxHeight: "60vh" }, /* @__PURE__ */ React__default.createElement("div", { className: "block-list-menu-item-card" }, /* @__PURE__ */ React__default.createElement(MatchedElement, null))))
+    );
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Trigger,
+    {
+      popupVisible,
+      popupStyle: {
+        transform: "translate(10px)"
+      },
+      popup: renderMenu,
+      trigger: ["click"],
+      clickToClose: true,
+      position: "rt",
+      autoFitPosition: true,
+      onVisibleChange: setPopupVisible
+    },
+    children
+  ));
+}
+const DragItem = ({
+  element,
+  children,
+  style
+}) => {
+  const { dragHandle } = useDragging({
+    element,
+    nodeElement: null,
+    action: "copy",
+    cloneGhost: false
+  });
+  return /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({}, dragHandle), { style }), children);
+};
+const index = "";
+const StandaloneElementEditorDrawer = ({ children }) => {
+  const [isEditing, setIsEditing] = React__default.useState(false);
+  const editor = useSlate();
+  const {
+    standaloneElementEditing,
+    setStandaloneElementPath,
+    setSelectedNodePath,
+    standaloneElementPath,
+    initialStandaloneElement,
+    standaloneElementSaveButton,
+    setStandaloneElementSaveButton
+  } = useEditorState();
+  const standaloneElement = standaloneElementPath && Node.get(editor, standaloneElementPath);
+  const hasChanged = useMemo(() => {
+    if (!standaloneElementPath || !initialStandaloneElement)
+      return false;
+    return !isEqual(standaloneElement, initialStandaloneElement);
+  }, [initialStandaloneElement, standaloneElement, standaloneElementPath]);
+  const { setFieldValue } = useEditorContext();
+  const onChangeTitle = useEventCallback((value) => {
+    if (!standaloneElementPath)
+      return;
+    setFieldValue(standaloneElementPath, "title", value);
+  });
+  const onCancelStandaloneElementEditing = useCallback(() => {
+    if (!hasChanged) {
+      setStandaloneElementPath(null);
+      setSelectedNodePath(null);
+      setStandaloneElementSaveButton(null);
+      return;
+    }
+    editor.replaceNode({
+      path: standaloneElementPath,
+      node: initialStandaloneElement
+    });
+    setTimeout(() => {
+      setStandaloneElementPath(null);
+      setSelectedNodePath(null);
+      setStandaloneElementSaveButton(null);
+    }, 0);
+  }, [
+    editor,
+    hasChanged,
+    initialStandaloneElement,
+    setSelectedNodePath,
+    setStandaloneElementPath,
+    setStandaloneElementSaveButton,
+    standaloneElementPath
+  ]);
+  const visible = standaloneElementEditing;
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !visible && children, /* @__PURE__ */ React__default.createElement(
+      Drawer,
+      {
+        className: "StandaloneElementEditorDrawer",
+        width: "100%",
+        title: null,
+        closable: false,
+        focusLock: false,
+        placement: "left",
+        bodyStyle: { padding: 0, transition: "none" },
+        visible,
+        footer: null
+      },
+      /* @__PURE__ */ React__default.createElement(
+        PageHeader,
+        {
+          backIcon: hasChanged ? /* @__PURE__ */ React__default.createElement(
+            Popconfirm,
+            {
+              focusLock: true,
+              title: t("Do you want to discard?"),
+              okText: t("Discard"),
+              cancelText: t("Cancel"),
+              okButtonProps: {
+                status: "danger"
+              },
+              onOk: () => {
+                onCancelStandaloneElementEditing();
+              }
+            },
+            /* @__PURE__ */ React__default.createElement(IconLeft, { style: { fontSize: 24 } })
+          ) : /* @__PURE__ */ React__default.createElement(
+            IconLeft,
+            {
+              onClick: () => {
+                onCancelStandaloneElementEditing();
+              },
+              style: { fontSize: 24 }
+            }
+          ),
+          className: "StandaloneElementEditorDrawer-header",
+          title: /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                height: 40,
+                width: 500,
+                display: "flex"
+              }
+            },
+            /* @__PURE__ */ React__default.createElement(Space, { style: { width: "100%" }, align: "center" }, isEditing ? /* @__PURE__ */ React__default.createElement(
+              Input,
+              {
+                value: standaloneElement ? BlockManager.getBlockTitle(standaloneElement) : "",
+                onChange: onChangeTitle,
+                onBlur: () => setIsEditing(false)
+              }
+            ) : /* @__PURE__ */ React__default.createElement("div", null, standaloneElement ? BlockManager.getBlockTitle(standaloneElement) : ""), /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Edit") }, /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                style: { cursor: "pointer" },
+                onClick: () => setIsEditing((d) => !d)
+              },
+              /* @__PURE__ */ React__default.createElement(IconEdit, null)
+            )))
+          ),
+          extra: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Space, null, hasChanged ? /* @__PURE__ */ React__default.createElement(
+            Popconfirm,
+            {
+              title: t("Do you want to discard?"),
+              okText: t("Discard"),
+              cancelText: t("Cancel"),
+              okButtonProps: {
+                status: "danger"
+              },
+              onOk: () => {
+                onCancelStandaloneElementEditing();
+              }
+            },
+            /* @__PURE__ */ React__default.createElement(Button$2, null, t(`Cancel`))
+          ) : /* @__PURE__ */ React__default.createElement(
+            Button$2,
+            {
+              onClick: () => {
+                onCancelStandaloneElementEditing();
+              }
+            },
+            t(`Cancel`)
+          ), standaloneElementSaveButton && /* @__PURE__ */ React__default.createElement(Button$2, __spreadValues({}, standaloneElementSaveButton))))
+        }
+      ),
+      visible && children
+    ));
+  }, [
+    visible,
+    children,
+    hasChanged,
+    isEditing,
+    standaloneElement,
+    onChangeTitle,
+    standaloneElementSaveButton,
+    onCancelStandaloneElementEditing
+  ]);
+};
+const StandaloneElementSaveButtonPortal = (props) => {
+  const { setStandaloneElementSaveButton } = useEditorState();
+  const cacheProps = useEqualState(props);
+  useEffect(() => {
+    setStandaloneElementSaveButton(cacheProps);
+  }, [cacheProps, setStandaloneElementSaveButton]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+};
 const SharedComponents = {
   PreviewEmailDrawer,
   PreviewEmail,
@@ -35946,6 +36348,7 @@ const SharedComponents = {
   CollapseWrapper,
   EditorTabs,
   UniversalElementEditorDrawer,
+  StandaloneElementEditorDrawer,
   RichTextBar,
   HoveringToolbar,
   TextHTMLEditor,
@@ -35966,7 +36369,10 @@ const SharedComponents = {
   ConfigurationToolbar,
   AIAssistant,
   AIPromptModal,
-  SourceCodePanel
+  SourceCodePanel,
+  DragItem,
+  ElementStyleGallery,
+  StandaloneElementSaveButtonPortal
 };
 const table2SelectedDataType = "data-standard-table2-selected";
 const table2TdSelectedDataType = "data-standard-table2-td-selected";
@@ -36650,6 +37056,7 @@ const ElementPlaceholder$1 = (props) => {
   }
   let isContentElement = NodeUtils.isContentElement(element);
   const isUniversalElement = NodeUtils.isUniversalElement(element);
+  const isStandaloneElement = NodeUtils.isStandaloneElement(element);
   const isUnsetElement = NodeUtils.isUnsetElement(element);
   if (isUnsetElement) {
     renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
@@ -36663,17 +37070,21 @@ const ElementPlaceholder$1 = (props) => {
       },
       renderContent
     ));
-  } else if (isUniversalElement) {
-    renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "universal-element-mask" }), /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: "universal-element-editing-mask",
-        onMouseMove: (e) => e.stopPropagation(),
-        onMouseDown: (e) => e.stopPropagation(),
-        onPointerDown: (e) => e.stopPropagation(),
-        onClick: (e) => e.stopPropagation()
-      }
-    ));
+  } else if (isUniversalElement || isStandaloneElement) {
+    if (isUniversalElement) {
+      renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "universal-element-mask" }), /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "universal-element-editing-mask",
+          onMouseMove: (e) => e.stopPropagation(),
+          onMouseDown: (e) => e.stopPropagation(),
+          onPointerDown: (e) => e.stopPropagation(),
+          onClick: (e) => e.stopPropagation()
+        }
+      ));
+    } else if (isStandaloneElement) {
+      renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "standalone-element-mask" }), /* @__PURE__ */ React__default.createElement("div", { className: "standalone-element-editing-mask" }));
+    }
     if (isSectionCategory) {
       renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderContent, /* @__PURE__ */ React__default.createElement("div", { className: "section-category-hover" }));
     }
@@ -36920,9 +37331,9 @@ const Layout$1 = ({ children, footer, header }) => {
     } else {
       setZoom(100);
     }
-  }, [isLayerItemDragging, root2]);
+  }, [isLayerItemDragging, root2, setZoom]);
   const layoutContent = useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SharedComponents.UniversalElementEditorDrawer, null, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React__default.createElement(SharedComponents.StandaloneElementEditorDrawer, null, /* @__PURE__ */ React__default.createElement(SharedComponents.UniversalElementEditorDrawer, null, /* @__PURE__ */ React__default.createElement(
       Card,
       {
         style: { padding: 0, border: "none" },
@@ -36947,7 +37358,12 @@ const Layout$1 = ({ children, footer, header }) => {
               zIndex: 1
             }
           },
-          /* @__PURE__ */ React__default.createElement(SharedComponents.WidgetConfigPanel, { containerHeight: height })
+          /* @__PURE__ */ React__default.createElement(
+            SharedComponents.WidgetConfigPanel,
+            {
+              containerHeight: height
+            }
+          )
         ),
         showSidebar && /* @__PURE__ */ React__default.createElement(
           Layout$2.Sider,
@@ -36984,7 +37400,7 @@ const Layout$1 = ({ children, footer, header }) => {
           /* @__PURE__ */ React__default.createElement(SharedComponents.ConfigurationSideBar, { height })
         )
       )
-    ));
+    )));
   }, [
     children,
     compact,
@@ -38681,6 +39097,7 @@ export {
   ControllerProvider,
   DraggingProvider,
   DraggingProviderContext,
+  ElementStyles,
   IconFont,
   Minimalist,
   PluginsProvider,
@@ -38689,6 +39106,7 @@ export {
   Retro,
   SharedComponents,
   WidgetTypeOptions,
+  assignIdsToElementTree,
   enhancer,
   getMergeTagsByType,
   mjmlToJson,