easy-email-pro-theme 1.54.2 → 1.55.0

package/lib/style.css

@@ -1758,6 +1758,350 @@ THEMES:
 }
 .StandaloneElementEditorDrawer-header .arco-typography-operation-edit {
   color: var(--color-text-2) !important;
+}._blocksDrawer_ek6hr_1 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--color-bg-1);
+}
+
+._content_ek6hr_8 {
+  overflow-y: auto;
+  padding: 0;
+  background-color: var(--color-bg-1);
+}
+
+._category_ek6hr_14 {
+  margin-bottom: 0;
+}
+._category_ek6hr_14:first-child {
+  margin-top: 0;
+}
+
+._categoryHeader_ek6hr_21 {
+  padding: 12px 20px;
+  background-color: var(--color-fill-2);
+  border-bottom: 1px solid var(--color-border-2);
+}
+
+._blockList_ek6hr_27 {
+  background-color: var(--color-bg-1);
+}
+._blockList_ek6hr_27 .arco-list-item {
+  padding: 14px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-bottom: 1px solid var(--color-border-2);
+}
+._blockList_ek6hr_27 .arco-list-item:hover {
+  background-color: var(--color-fill-1);
+}
+._blockList_ek6hr_27 .arco-list-item:hover ._addButton_ek6hr_39 {
+  opacity: 1;
+  visibility: visible;
+}
+._blockList_ek6hr_27 .arco-list-item:hover ._badge_ek6hr_43 {
+  opacity: 0;
+  visibility: hidden;
+}
+._blockList_ek6hr_27 .arco-list-item:active {
+  background-color: var(--color-fill-2);
+}
+._blockList_ek6hr_27 .arco-list-item:last-child {
+  border-bottom: none;
+}
+._blockList_ek6hr_27 .arco-list-item-main {
+  flex: 1;
+}
+
+._blockItem_ek6hr_57 {
+  width: 100%;
+}
+
+._blockIcon_ek6hr_61 * {
+  max-width: 24px !important;
+  max-height: 24px !important;
+}
+._blockIcon_ek6hr_61 img {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 24px !important;
+  max-height: 24px !important;
+  object-fit: contain !important;
+}
+._blockIcon_ek6hr_61 svg {
+  max-width: 24px !important;
+  max-height: 24px !important;
+}
+._blockIcon_ek6hr_61 div {
+  max-width: 24px !important;
+  max-height: 24px !important;
+}
+
+._layoutPreview_ek6hr_81:hover {
+  background-color: var(--color-fill-1);
+}
+
+._layoutAddButton_ek6hr_85 {
+  white-space: nowrap;
+}
+
+.LayoutWrapperItemList *, .LayoutItemList * {
+  box-sizing: border-box;
+}
+
+._blockActions_ek6hr_94 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
+._badge_ek6hr_43 {
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  opacity: 1;
+  visibility: visible;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 600;
+  line-height: 1.2;
+  padding: 2px 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+._addButton_ek6hr_39 {
+  transition: all 0.2s ease;
+  opacity: 0;
+  visibility: hidden;
+  white-space: nowrap;
+}._blocksModal_oes30_1 {
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+  max-height: 600px;
+  background-color: var(--color-bg-1);
+}
+
+._modalHeader_oes30_9 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+._headerActions_oes30_16 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+._searchInput_oes30_22 {
+  width: 240px;
+}
+
+._modalTitle_oes30_26 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1);
+}
+
+._contentArea_oes30_32 {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+}
+
+._category_oes30_38 {
+  margin-bottom: 32px;
+}
+._category_oes30_38:first-child {
+  margin-top: 0;
+}
+
+._categoryHeader_oes30_45 {
+  padding: 12px 0;
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-2);
+  border-bottom: 1px solid var(--color-border-2);
+}
+
+._gridContainer_oes30_56 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+._gridItem_oes30_65 {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 16px;
+  border: 2px solid var(--color-border-2);
+  border-radius: 8px;
+  background-color: var(--color-bg-1);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  min-width: 0;
+}
+._gridItem_oes30_65:hover {
+  border-color: rgb(var(--primary-3));
+  background-color: var(--color-fill-1);
+}
+._gridItem_oes30_65._selected_oes30_84 {
+  border: 2px solid rgb(var(--primary-6));
+}
+
+._gridItemIcon_oes30_88 {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  flex-shrink: 0;
+  position: relative;
+}
+._gridItemIcon_oes30_88 * {
+  max-width: 48px !important;
+  max-height: 48px !important;
+}
+._gridItemIcon_oes30_88 img {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 48px !important;
+  max-height: 48px !important;
+  object-fit: contain !important;
+}
+._gridItemIcon_oes30_88 svg {
+  max-width: 48px !important;
+  max-height: 48px !important;
+}
+._gridItemIcon_oes30_88 div {
+  max-width: 48px !important;
+  max-height: 48px !important;
+}
+
+._gridItemLabel_oes30_118 {
+  font-size: 13px;
+  color: var(--color-text-1);
+  text-align: center;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+._checkIcon_oes30_126 {
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  width: 20px;
+  height: 20px;
+  transform: translate(10px, 5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(var(--primary-6));
+  border-radius: 50%;
+  color: white;
+  font-size: 12px;
+  z-index: 1;
+}
+
+._emptyState_oes30_143 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 24px;
+  color: var(--color-text-3);
+  font-size: 14px;
+}
+
+._layoutPreview_oes30_153 {
+  border-bottom: 1px solid var(--color-border-2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  border: 1px solid var(--color-border-2);
+  border-radius: 4px;
+  background-color: var(--color-fill-1);
+  padding: 12px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+}
+._layoutPreview_oes30_153:hover {
+  background-color: var(--color-fill-3);
+}
+._layoutPreview_oes30_153._layoutSelected_oes30_169 {
+  border: 1px solid rgb(var(--primary-6));
+  background-color: rgba(var(--primary-1), 0.3);
+  box-shadow: 0 2px 4px rgba(var(--primary-6), 0.1);
+}
+
+._layoutRowLabel_oes30_175 {
+  font-size: 11px;
+  color: var(--color-text-3);
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+._layoutRow_oes30_175 {
+  height: 50px;
+  display: flex;
+  border: 1px solid var(--color-border-2);
+  border-radius: 3px;
+  margin-bottom: 8px;
+  position: relative;
+  background-color: var(--color-bg-1);
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+._layoutRow_oes30_175:last-child {
+  margin-bottom: 0;
+}
+
+._layoutColumn_oes30_200 {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: var(--color-text-2);
+  font-weight: 500;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  min-width: 0;
+  flex-shrink: 1;
+}
+._layoutColumn_oes30_200:not(:last-child) {
+  border-right: 1px solid var(--color-border-2);
+}
+
+._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutRow_oes30_175 {
+  border-color: rgba(var(--primary-6), 0.3);
+  background-color: rgba(var(--primary-1), 0.1);
+}
+._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutColumn_oes30_200 {
+  color: rgb(var(--primary-6));
+  font-weight: 600;
+}
+._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutColumn_oes30_200:not(:last-child) {
+  border-right-color: rgba(var(--primary-6), 0.2);
 }/*---------------------------------------------------------------------------------------------
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const BlocksDrawer: () => React.JSX.Element | null;

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const BlocksModal: () => React.JSX.Element;

package/lib/typings/components/ConfigurationPanel/Elements/PageFooter/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Path } from "slate";
+export declare const PageFooter: ({ nodePath }: {
+    nodePath: Path;
+}) => React.JSX.Element;

package/lib/typings/components/ConfigurationPanel/Elements/PageHeader/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Path } from "slate";
+export declare const PageHeader: ({ nodePath }: {
+    nodePath: Path;
+}) => React.JSX.Element;

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

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

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

@@ -53,6 +53,10 @@ export declare const SharedComponents: {
         onClose: () => void;
     }) => import("react").JSX.Element;
     ConfigurationPanel: ({ height, onClose, }: import("./ConfigurationPanel").ConfigurationPanelProps) => import("react").JSX.Element | null;
+    MergetagPopover: import("react").FC<{
+        element: import("../easy-email-pro-core/lib/typings").MergetagElement;
+        onSave: (val?: string | undefined) => void;
+    }> | undefined;
     CollapseWrapper: import("react").FC<import("./ConfigurationPanel/components/CollapseWrapper/CollapseWrapper").CollapseWrapperProps>;
     EditorTabs: import("react").FC<{
         children: import("react").ReactNode;
@@ -146,6 +150,15 @@ export declare const SharedComponents: {
         target?: string | undefined;
         anchorProps?: import("react").HTMLProps<HTMLAnchorElement> | undefined;
     } & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "className" | "onClick">>) => import("react").JSX.Element;
+    BlocksDrawer: () => import("react").JSX.Element | null;
+    BlocksModal: () => import("react").JSX.Element;
+    TableTools: import("react").FC<{
+        element: import("../easy-email-pro-core/lib/typings").Element;
+        isSelected: boolean;
+        isHover: boolean;
+        nodeElement: HTMLElement;
+        path: import("slate").Path;
+    }>;
 };
 export { CollapseWrapper } from "./ConfigurationPanel/components/CollapseWrapper";
 export { AttributesPanelWrapper } from "./ConfigurationPanel/components/AttributesPanelWrapper";

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

@@ -7,3 +7,4 @@ export { useFontFamily } from "./useFontFamily";
 export { useEditorThemeState } from "./useEditorThemeState";
 export { useColorContext } from "./useColorContext";
 export { useMinimalistContext } from "./useMinimalistContext";
+export { useBlocksDrawer } from "./useBlocksDrawer";

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

@@ -0,0 +1,9 @@
+import { Path } from "slate";
+import { ElementCategoryType } from "easy-email-pro-core";
+export declare const useBlocksDrawer: () => {
+    openBlocksDrawer: (insertPath: Path, parentCategory: ElementCategoryType) => void;
+    closeBlocksDrawer: () => void;
+    visible: boolean;
+    insertPath: Path | undefined;
+    parentCategory: ElementCategoryType | undefined;
+};

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

@@ -6,6 +6,9 @@ export declare const useLastSelectedNode: () => {
     isChanged: boolean;
 };
 export declare const useCopyBlock: () => (path: Path) => void;
+export declare const useAddBlock: () => (block: Partial<Element> & {
+    type: Element["type"];
+}, path: Path, toNext?: boolean) => void;
 export declare const useMoveUp: () => (path: Path) => Path | undefined;
 export declare const useMoveDown: () => (path: Path) => Path | undefined;
 export declare const useDeleteBlock: () => (path: Path) => void;
@@ -19,4 +22,7 @@ export declare const useElementInteract: () => {
     resetSelectedNode: () => void;
     moveUp: (path: Path) => Path | undefined;
     moveDown: (path: Path) => Path | undefined;
+    addBlock: (block: Partial<Element> & {
+        type: Element["type"];
+    }, path: Path, toNext?: boolean) => void;
 };

package/lib/typings/index.d.ts

@@ -3,3 +3,5 @@ export * from "./hooks";
 export * from "./typings";
 export * from "./components";
 export * from "./utils";
+export * from "./components/Form/adapter";
+export declare const IconFontStyle: string;

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

@@ -2,3 +2,4 @@ export * from "./mjmlToJson";
 export * from "./previewLoadImage";
 export * from "./getMergeTagsByType";
 export * from "./assignIdsToElementTree";
+export * from "./getFallbackValue";

package/package.json

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