easy-email-pro-theme 1.0.2 → 1.1.0

package/lib/index.js

@@ -57,7 +57,7 @@ var __async = (__this, __arguments, generator) => {
 import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useEventCallback, useSelectedNode, validation, CustomEvent, ActiveTabKeys, EmailEditorProvider, EmailEditor, useForceUpdate, toggleFormat, TextFormat, IframeComponent, HtmlStringToReactNodes, isFormatActive } from "easy-email-pro-editor";
 import { useSlate, ReactEditor, useSlateStatic } from "slate-react";
 import * as React$2 from "react";
-import React__default, { useRef, useCallback as useCallback$1, useEffect, useMemo as useMemo$1, createContext, useState, useContext, useLayoutEffect, useReducer, memo, cloneElement, forwardRef, Suspense, Component, PureComponent } from "react";
+import React__default, { useRef, useState, useEffect, useCallback as useCallback$1, useMemo as useMemo$1, createContext, useContext, useLayoutEffect, useReducer, memo, cloneElement, forwardRef, Suspense, Component, PureComponent } from "react";
 import { NodeUtils, BlockManager, ElementType, EditorCore, t, ElementCategory, classnames as classnames$1, StandardType, PluginManager, ConditionOperator, ConditionOperatorSymbol } from "easy-email-pro-core";
 import { Editor, Transforms, Path, Node as Node$1, createEditor, Text as Text$2, Range, Element as Element$1, Point } from "slate";
 import ReactDOM, { createPortal, unstable_batchedUpdates } from "react-dom";
@@ -402,7 +402,7 @@ const styleText$c = `@font-face {
 }
 
 `;
-const RetroStyleText = '[data-slate-block="page"] {\r\n  min-height: 300px;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-focus="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-selected="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] .element-tools-container {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n.text-mergetag {\r\n  outline: 1px solid rgb(78, 89, 105);\r\n  outline-offset: 1px;\r\n  padding: 0 2px;\r\n  border-radius: 2px;\r\n  cursor: pointer;\r\n  transition: all 0.1s linear;\r\n  border: none;\r\n  font-weight: inherit;\r\n  outline-color: #00a0ac;\r\n  color: inherit;\r\n  background-color: #ebf9fc;\r\n  max-width: 10em;\r\n  font-style: inherit;\r\n  text-decoration-line: inherit;\r\n  position: relative;\r\n}\r\n\r\n\r\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\r\n\r\n\r\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\r\n\r\n\r\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\r\n\r\n\r\n[data-slate-dragover=true] {\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 10;\n  left: 0;\n  height: 4px;\n  opacity: 1;\n}\r\n\r\n\r\n[data-slate-dragging=true] .element-tools-container {\n  opacity: 0;\n}\r\n\r\n\r\n[data-slate-dragover-direction=top][data-slate-dragover=true]::after {\n  top: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=bottom][data-slate-dragover=true]::after {\n  top: auto;\n  bottom: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] {\n  outline: 2px dashed var(--drag-color);\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 1;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  filter: opacity(10%);\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] [data-slate-type=placeholder] {\n  outline: none;\n}\r\n\r\n\r\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\r\n\r\n\r\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-mask {\n  display: none;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}';
+const RetroStyleText = '[data-slate-block="page"] {\r\n  min-height: 300px;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-focus="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-selected="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] .element-tools-container {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n.text-mergetag {\r\n  outline: 1px solid rgb(78, 89, 105);\r\n  outline-offset: 1px;\r\n  padding: 0 2px;\r\n  border-radius: 2px;\r\n  cursor: pointer;\r\n  transition: all 0.1s linear;\r\n  border: none;\r\n  font-weight: inherit;\r\n  outline-color: #00a0ac;\r\n  color: inherit;\r\n  background-color: #ebf9fc;\r\n  max-width: 10em;\r\n  font-style: inherit;\r\n  text-decoration-line: inherit;\r\n  position: relative;\r\n}\r\n\r\n\r\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\r\n\r\n\r\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\r\n\r\n\r\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\r\n\r\n\r\n[data-slate-dragover=true] {\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 10;\n  left: 0;\n  height: 4px;\n  opacity: 1;\n}\r\n\r\n\r\n[data-slate-dragging=true] .element-tools-container {\n  opacity: 0;\n}\r\n\r\n\r\n[data-slate-dragover-direction=top][data-slate-dragover=true]::after {\n  top: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=bottom][data-slate-dragover=true]::after {\n  top: auto;\n  bottom: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] {\n  outline: 2px dashed var(--drag-color);\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 1;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  filter: opacity(10%);\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] [data-slate-type=placeholder] {\n  outline: none;\n}\r\n\r\n\r\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  opacity: 0.8;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\r\n\r\n\r\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-mask {\n  display: none;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}';
 const withTheme$1 = (editor) => {
   const { insertBreak, normalizeNode, deleteBackward } = editor;
   editor.insertBreak = (...args) => {
@@ -479,11 +479,25 @@ const DraggingProvider = ({
   const editorProps = useEditorProps();
   const quantityLimitCheck = useRefState(editorProps.quantityLimitCheck);
   const editor = useSlate();
+  const [inited, setInited] = useState(false);
   let root2 = null;
   try {
     root2 = ReactEditor.getWindow(editor).document;
   } catch (error2) {
   }
+  useEffect(() => {
+    const timer = setInterval(() => {
+      try {
+        if (ReactEditor.getWindow(editor).document) {
+          setInited(true);
+        }
+      } catch (error2) {
+      }
+    }, 200);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [editor]);
   const isDragging = useRefState(dragNodePath);
   const removePlaceholder3 = useCallback$1(() => {
     var _a2;
@@ -499,7 +513,7 @@ const DraggingProvider = ({
     setDragNodePath(null);
   }, [root2, setDragNodePath]);
   useEffect(() => {
-    if (!root2)
+    if (!root2 || !inited)
       return;
     if (editorProps.readOnly)
       return;
@@ -755,6 +769,7 @@ const DraggingProvider = ({
   }, [
     editor,
     editorProps.readOnly,
+    inited,
     isDragging,
     quantityLimitCheck,
     removeDraggingStyle,
@@ -1706,7 +1721,7 @@ const ElementSelected$1 = ({ element, nodeElement, path: path2 }) => {
     nodeElement
   ));
 };
-const styleText$8 = "[data-slate-block=page] {\n  --sectionElementOffset: 100px ;\n}\n\n@media screen and (max-width: 1600px) {\n  [data-slate-block=page] {\n    --sectionElementOffset: 50px ;\n  }\n}\n.section-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].section-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-section-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].wrapper-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}\n\n[data-is-wrapper-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}";
+const styleText$8 = "[data-slate-block=page] {\n  --sectionElementOffset: 100px ;\n}\n\n@media screen and (max-width: 850px) {\n  [data-slate-block=page] {\n    --sectionElementOffset: 70px ;\n  }\n}\n.section-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].section-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-section-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].wrapper-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}\n\n[data-is-wrapper-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}";
 const ElementPlaceholder$1 = ({ element, nodeElement, isSelected, isHover, path: path2 }) => {
   const { deleteBlock } = useElementInteract();
   const onPointerDown = (ev) => {
@@ -1736,7 +1751,7 @@ const ElementPlaceholder$1 = ({ element, nodeElement, isSelected, isHover, path:
       }
     )))) : /* @__PURE__ */ React__default.createElement("div", { className: "wrapper-category-hover" }));
   } else if (element.type === ElementType.PLACEHOLDER) {
-    renderContent = /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: "element-delete" }, /* @__PURE__ */ React__default.createElement(IconDelete, { onPointerDown })), /* @__PURE__ */ React__default.createElement("div", null, t("Drop content here")));
+    renderContent = /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: "element-delete" }, /* @__PURE__ */ React__default.createElement(IconDelete, { onPointerDown })), /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "center" } }, t("Drop content here")));
   }
   const isContentElement = NodeUtils.isContentElement(element);
   const isUniversalElement = NodeUtils.isUniversalElement(element);
@@ -16742,21 +16757,21 @@ const RichtextBar = (props) => {
   const lastTemplateRef = useRef(null);
   const calculateData = useMemo$1(() => {
     const pageElement = cloneDeep(omit$2(props.pageElement, "children"));
-    const template = {
+    const template2 = {
       subject: "Blank",
       content: pageElement
     };
     let path2 = [];
     if (NodeUtils.isPageElement(props.value)) {
-      template.content = props.value;
+      template2.content = props.value;
       path2 = [0];
     } else if (NodeUtils.isWrapperElement(props.value) || NodeUtils.isSectionElement(props.value) || NodeUtils.isHeroElement(props.value)) {
-      template.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
+      template2.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
         children: [props.value]
       }));
       path2 = [0, 0];
     } else if (NodeUtils.isColumnElement(props.value) || NodeUtils.isGroupElement(props.value)) {
-      template.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
+      template2.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
         children: [
           BlockManager.getBlockByType(ElementType.STANDARD_SECTION).create({
             children: [props.value],
@@ -16771,7 +16786,7 @@ const RichtextBar = (props) => {
       }));
       path2 = [0, 0, 0];
     } else if (NodeUtils.isContentElement(props.value)) {
-      template.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
+      template2.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
         children: [
           BlockManager.getBlockByType(ElementType.STANDARD_SECTION).create({
             children: [
@@ -16792,14 +16807,15 @@ const RichtextBar = (props) => {
       }));
       path2 = [0, 0, 0, 0];
     }
-    return [template, path2];
+    return [template2, path2];
   }, [props.pageElement, props.value]);
+  const template = calculateData[0];
   const initialValue = useMemo$1(() => {
-    if (!isEqual$3(lastTemplateRef.current, calculateData[0])) {
-      lastTemplateRef.current = calculateData[0];
+    if (!isEqual$3(lastTemplateRef.current, template)) {
+      lastTemplateRef.current = template;
     }
     return lastTemplateRef.current;
-  }, [calculateData[0]]);
+  }, [template]);
   const onPageChange = useEventCallback(
     (page, editor2) => {
       const currentElement = Node$1.get(editor2, calculateData[1]);
@@ -16829,7 +16845,7 @@ const RichtextBar = (props) => {
       /* @__PURE__ */ React__default.createElement(FormProvider, null, /* @__PURE__ */ React__default.createElement(ResetContent, { initialValue })),
       /* @__PURE__ */ React__default.createElement("style", null, styleText$c)
     );
-  }, [props.height, clientId, initialValue]);
+  }, [props.height, clientId, initialValue, editor, onPageChange]);
 };
 const ResetContent = ({ initialValue }) => {
   const { reset } = useEditorContext();
@@ -24903,7 +24919,8 @@ const TreeItem = forwardRef(
       moveable,
       removable,
       selected: selected2,
-      onSelect
+      onSelect,
+      onHover
     } = _f, props = __objRest(_f, [
       "childCount",
       "clone",
@@ -24924,7 +24941,8 @@ const TreeItem = forwardRef(
       "moveable",
       "removable",
       "selected",
-      "onSelect"
+      "onSelect",
+      "onHover"
     ]);
     return /* @__PURE__ */ React__default.createElement(
       "li",
@@ -24949,7 +24967,8 @@ const TreeItem = forwardRef(
           className: styles$1.TreeItem,
           ref: ref2,
           style: style2,
-          onClick: onSelect
+          onClick: onSelect,
+          onMouseEnter: onHover
         },
         onCollapse && /* @__PURE__ */ React__default.createElement(
           Action,
@@ -25010,7 +25029,8 @@ function SortableTreeItem(_g) {
     allowMove,
     allowRemove,
     isSelected,
-    onSelect
+    onSelect,
+    onHover
   } = _h, props = __objRest(_h, [
     "id",
     "depth",
@@ -25020,7 +25040,8 @@ function SortableTreeItem(_g) {
     "allowMove",
     "allowRemove",
     "isSelected",
-    "onSelect"
+    "onSelect",
+    "onHover"
   ]);
   const {
     attributes,
@@ -25039,7 +25060,7 @@ function SortableTreeItem(_g) {
     if (!activeItem)
       return false;
     return !allowDrop(activeItem, item2);
-  }, [activeItem, item2]);
+  }, [activeItem, allowDrop, item2]);
   const moveable = useMemo$1(() => {
     return allowMove(item2);
   }, [allowMove, item2]);
@@ -25057,19 +25078,26 @@ function SortableTreeItem(_g) {
     transform: CSS.Translate.toString(transform),
     transition
   };
-  const setRef = useCallback$1((node) => {
-    setNodeRef(node);
-    setDraggableNodeRef(node);
-  }, []);
+  const setRef = useCallback$1(
+    (node) => {
+      setNodeRef(node);
+      setDraggableNodeRef(node);
+    },
+    [setDraggableNodeRef, setNodeRef]
+  );
   const handleSelect = useCallback$1(() => {
     onSelect(item2);
-  }, [item2]);
+  }, [item2, onSelect]);
+  const handleHover = useCallback$1(() => {
+    onHover(item2);
+  }, [item2, onHover]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     TreeItem,
     __spreadValues({
       ref: setRef,
       wrapperRef: setDroppableNodeRef,
       onSelect: handleSelect,
+      onHover: handleHover,
       style: style2,
       depth,
       ghost: isDragging,
@@ -25194,6 +25222,7 @@ function SortableTree(_i) {
           id,
           item: props,
           onSelect: rest.onSelect,
+          onHover: rest.onHover,
           renderTitle: rest.renderTitle,
           depth: id === activeId && projected ? projected.depth : depth,
           activeItem,
@@ -25219,6 +25248,7 @@ function SortableTree(_i) {
           SortableTreeItem,
           {
             onSelect: rest.onSelect,
+            onHover: rest.onHover,
             isSelected: rest.isSelected,
             allowMove: rest.allowMove,
             allowRemove: rest.allowRemove,
@@ -25289,8 +25319,11 @@ const BlockLayer = () => {
   const { values: values2, inited } = useEditorContext();
   const editor = useSlate();
   const pageElement = values2.content;
-  const { selectedNodePath, setSelectedNodePath } = useEditorState();
+  const { selectedNodePath, setSelectedNodePath, setHoverNodePath } = useEditorState();
   const { deleteBlock } = useElementInteract();
+  const { layerConfig } = useEditorProps();
+  const scrollWhenSelect = layerConfig == null ? void 0 : layerConfig.scrollWhenSelect;
+  const scrollWhenHover = layerConfig == null ? void 0 : layerConfig.scrollWhenHover;
   const [items, setItems] = useState([]);
   useEffect(() => {
     const loop2 = (element, idx) => {
@@ -25345,13 +25378,10 @@ const BlockLayer = () => {
     },
     [editor]
   );
-  const allowRemove = useCallback$1(
-    (item2) => {
-      const isUnsetElement = NodeUtils.isUnsetElement(item2.data);
-      return !isUnsetElement;
-    },
-    [editor]
-  );
+  const allowRemove = useCallback$1((item2) => {
+    const isUnsetElement = NodeUtils.isUnsetElement(item2.data);
+    return !isUnsetElement;
+  }, []);
   const isSelected = useCallback$1(
     (item2) => {
       const currentPath = ReactEditor.findPath(editor, item2.data);
@@ -25366,8 +25396,37 @@ const BlockLayer = () => {
     (item2) => {
       const currentPath = ReactEditor.findPath(editor, item2.data);
       setSelectedNodePath(currentPath);
+      if (scrollWhenSelect) {
+        setTimeout(() => {
+          const node = ReactEditor.toDOMNode(editor, item2.data);
+          if (node) {
+            node.scrollIntoView({
+              block: "center",
+              behavior: "smooth",
+              inline: "center"
+            });
+          }
+        }, 200);
+      }
     },
-    [editor, selectedNodePath, setSelectedNodePath]
+    [editor, scrollWhenSelect, setSelectedNodePath]
+  );
+  const onHover = useMemo$1(
+    () => debounce$2((item2) => {
+      const currentPath = ReactEditor.findPath(editor, item2.data);
+      setHoverNodePath(currentPath);
+      if (scrollWhenHover) {
+        const node = ReactEditor.toDOMNode(editor, item2.data);
+        if (node) {
+          node.scrollIntoView({
+            block: "center",
+            behavior: "smooth",
+            inline: "center"
+          });
+        }
+      }
+    }, 500),
+    [editor, scrollWhenHover, setHoverNodePath]
   );
   const handleRemove = useCallback$1(
     (item2) => {
@@ -25389,7 +25448,7 @@ const BlockLayer = () => {
   );
   if (!inited)
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { onMouseOut: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.createElement(
     SortableTree,
     {
       collapsible: true,
@@ -25404,6 +25463,7 @@ const BlockLayer = () => {
       allowMove,
       isSelected,
       onSelect,
+      onHover,
       removable: true
     }
   ));
@@ -45512,7 +45572,7 @@ const ElementPlaceholder = ({ element, nodeElement, isSelected, isHover, path: p
       }
     )))) : /* @__PURE__ */ React__default.createElement("div", { className: "wrapper-category-hover" }));
   } else if (element.type === ElementType.PLACEHOLDER) {
-    renderContent = /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: "element-delete" }, /* @__PURE__ */ React__default.createElement(IconDelete, { onPointerDown })), /* @__PURE__ */ React__default.createElement("div", null, t("Drop content here")));
+    renderContent = /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: "element-delete" }, /* @__PURE__ */ React__default.createElement(IconDelete, { onPointerDown })), /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "center" } }, t("Drop content here")));
   }
   const isContentElement = NodeUtils.isContentElement(element);
   const isUniversalElement = NodeUtils.isUniversalElement(element);

package/lib/typings/components/BlockSideBar/BlockLayer/SortableTree.d.ts

@@ -13,6 +13,7 @@ interface Props<T extends TreeItem> {
     allowRemove(item: any): boolean;
     isSelected(item: any): boolean;
     onSelect(item: any): void;
+    onHover(item: any): void;
     handleRemove(item: any): void;
     handleDrop(dragItem: T, dropItem: T): void;
 }

package/lib/typings/components/BlockSideBar/BlockLayer/components/TreeItem/SortableTreeItem.d.ts

@@ -2,13 +2,14 @@
 import type { UniqueIdentifier } from "@dnd-kit/core";
 import { Props as TreeItemProps } from "./TreeItem";
 import { TreeItem as ITreeItem } from "../../types";
-interface Props extends Omit<TreeItemProps, "onSelect"> {
+interface Props extends Omit<TreeItemProps, "onSelect" | "onHover"> {
     id: UniqueIdentifier;
     allowDrop: (dragItem: ITreeItem, dropItem: ITreeItem) => boolean;
     allowMove: (item: ITreeItem) => boolean;
     allowRemove: (item: ITreeItem) => boolean;
     isSelected: (item: ITreeItem) => boolean;
     onSelect: (item: ITreeItem) => void;
+    onHover: (item: ITreeItem) => void;
 }
-export declare function SortableTreeItem({ id, depth, allowDrop, activeItem, item, allowMove, allowRemove, isSelected, onSelect, ...props }: Props): JSX.Element;
+export declare function SortableTreeItem({ id, depth, allowDrop, activeItem, item, allowMove, allowRemove, isSelected, onSelect, onHover, ...props }: Props): JSX.Element;
 export {};

package/lib/typings/components/BlockSideBar/BlockLayer/components/TreeItem/TreeItem.d.ts

@@ -21,5 +21,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, "id"> {
     item: ITreeItem;
     renderTitle(item: ITreeItem): React.ReactNode;
     onSelect(): void;
+    onHover(): void;
 }
 export declare const TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

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

@@ -81,6 +81,10 @@ export interface PluginsCustomEditorTypes {
         showSidebar?: boolean;
         showLogic?: boolean;
         showLayer?: boolean;
+        layerConfig?: {
+            scrollWhenSelect?: boolean;
+            scrollWhenHover?: boolean;
+        };
         compact?: boolean;
         height: string;
         unsplash?: {

package/package.json

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