easy-email-pro-theme 1.59.1 → 1.59.3

package/lib/index.js

@@ -751,6 +751,15 @@ const assignIdsToElementTree = (element, overwrite = false) => {
   loop2(newElement);
   return newElement;
 };
+function shouldInsertAfterHeroSibling({
+  canInsertIntoParent,
+  canInsertIntoTarget,
+  isAutoCompleteEnabled,
+  isBottomHalf,
+  isHeroTarget
+}) {
+  return isAutoCompleteEnabled && isHeroTarget && isBottomHalf && canInsertIntoTarget && canInsertIntoParent;
+}
 const DraggingProviderContext = React__default.createContext({});
 const DraggingProvider = ({
   children
@@ -1037,14 +1046,30 @@ const DraggingProvider = ({
           const node = ReactEditor.toDOMNode(editor, dropElement);
           const rect = node.getBoundingClientRect();
           const isTop = ev.clientY < rect.y + rect.height / 2;
+          const canInsertIntoDropElement = NodeUtils.isParentCategoryType(
+            propsData.element.type,
+            dropElement.type
+          ) && !NodeUtils.isVoidBlockElement(dropElement);
+          const dropParentElement = Node.get(
+            editor,
+            Path.parent(dropPath)
+          );
+          const canInsertIntoDropParent = NodeUtils.isElement(dropParentElement) && NodeUtils.isParentCategoryType(
+            propsData.element.type,
+            dropParentElement.type
+          );
+          const shouldInsertAfterHero = shouldInsertAfterHeroSibling({
+            canInsertIntoParent: canInsertIntoDropParent,
+            canInsertIntoTarget: canInsertIntoDropElement,
+            isAutoCompleteEnabled: Boolean(editorProps.enabledAutoComplete),
+            isBottomHalf: !isTop,
+            isHeroTarget: NodeUtils.isHeroElement(dropElement)
+          });
           let direction = "bottom";
           if (isTop) {
             direction = "top";
           }
-          if (NodeUtils.isParentCategoryType(
-            propsData.element.type,
-            dropElement.type
-          ) && !NodeUtils.isVoidBlockElement(dropElement)) {
+          if (canInsertIntoDropElement && !shouldInsertAfterHero) {
             direction = "middle";
           }
           root2.querySelectorAll("[data-slate-dragover='true']").forEach((item2) => {
@@ -1151,10 +1176,25 @@ const DraggingProvider = ({
           const node = ReactEditor.toDOMNode(editor, dropElement);
           const rect = node.getBoundingClientRect();
           const isTop = ev.clientY < rect.y + rect.height / 2;
-          const isInsert = NodeUtils.isParentCategoryType(
+          const canInsertIntoDropElement = NodeUtils.isParentCategoryType(
             propsData.element.type,
             dropElement.type
           ) && !NodeUtils.isVoidBlockElement(dropElement);
+          const dropParentElement = Node.get(
+            editor,
+            Path.parent(dropPath)
+          );
+          const canInsertIntoDropParent = NodeUtils.isElement(dropParentElement) && NodeUtils.isParentCategoryType(
+            propsData.element.type,
+            dropParentElement.type
+          );
+          const isInsert = canInsertIntoDropElement && !shouldInsertAfterHeroSibling({
+            canInsertIntoParent: canInsertIntoDropParent,
+            canInsertIntoTarget: canInsertIntoDropElement,
+            isAutoCompleteEnabled: Boolean(editorProps.enabledAutoComplete),
+            isBottomHalf: !isTop,
+            isHeroTarget: NodeUtils.isHeroElement(dropElement)
+          });
           let targetPath = [...dropPath];
           if (propsData.action === "move") {
             if (!source)
@@ -1261,24 +1301,7 @@ const DraggingProvider = ({
       root2 == null ? void 0 : root2.removeEventListener("drop", onDrop);
       root2 == null ? void 0 : root2.removeEventListener("mousemove", onMousemove);
     };
-  }, [
-    autoScrollConfig,
-    dragoverType,
-    editor,
-    editorProps.readOnly,
-    inited,
-    isElementDragging,
-    quantityLimitCheck,
-    removeDraggingStyle,
-    removePlaceholder,
-    root2,
-    rootWindow,
-    setDragoverDirection,
-    setDragoverNodePath,
-    setHoverNodePath,
-    setSelectedNodePath,
-    standaloneElementEditing
-  ]);
+  }, [autoScrollConfig, dragoverType, editor, editorProps.enabledAutoComplete, editorProps.readOnly, inited, isElementDragging, quantityLimitCheck, removeDraggingStyle, removePlaceholder, root2, rootWindow, setDragoverDirection, setDragoverNodePath, setHoverNodePath, setSelectedNodePath, standaloneElementEditing]);
   const dragHandle = useMemo(() => {
     return {
       onPointerDown(event) {
@@ -2129,6 +2152,17 @@ function useFontFamily() {
 const useEditorThemeState = () => {
   return useContext(EditorThemeStateContext);
 };
+const MAX_COLOR_PICKER_RECORD_SIZE = 10;
+function getColorPickerList({
+  cacheColors = [],
+  defaultColors = []
+}) {
+  const cachedColors = cacheColors.filter(Boolean);
+  if (cachedColors.length) {
+    return cachedColors.slice(-MAX_COLOR_PICKER_RECORD_SIZE);
+  }
+  return defaultColors.filter(Boolean).slice(-MAX_COLOR_PICKER_RECORD_SIZE);
+}
 const CURRENT_COLORS_KEY = "CURRENT_COLORS_KEY";
 const MAX_RECORD_SIZE = 10;
 const colorDivRef = document.createElement("div");
@@ -2154,9 +2188,10 @@ const ColorContext = React__default.createContext(
 );
 const ColorProvider = ({ children }) => {
   const [list, setList] = useState(
-    [...defaultPresetColor, ...getCacheColors()].slice(
-      -MAX_RECORD_SIZE
-    )
+    getColorPickerList({
+      cacheColors: getCacheColors(),
+      defaultColors: defaultPresetColor
+    })
   );
   const addCurrentColor = useCallback(
     debounce$2((newColor) => {
@@ -2174,9 +2209,10 @@ const ColorProvider = ({ children }) => {
   );
   useEffect(() => {
     const timer = setInterval(() => {
-      const newColors = [...defaultPresetColor, ...getCacheColors()].slice(
-        -MAX_RECORD_SIZE
-      );
+      const newColors = getColorPickerList({
+        cacheColors: getCacheColors(),
+        defaultColors: defaultPresetColor
+      });
       setList(newColors);
     }, 1e3);
     return () => {
@@ -29246,6 +29282,20 @@ const LegacyColorPicker$1 = (props) => {
     }
   ));
 };
+const NATIVE_COLOR_INPUT_FALLBACK = "#000000";
+function getNativeColorInputValue(value) {
+  if (!value)
+    return NATIVE_COLOR_INPUT_FALLBACK;
+  try {
+    return Color$1(value).hex().toUpperCase();
+  } catch (error2) {
+  }
+  try {
+    return Color$1(`#${value}`).hex().toUpperCase();
+  } catch (error2) {
+  }
+  return NATIVE_COLOR_INPUT_FALLBACK;
+}
 const getPickerValue$1 = (value) => {
   if (!value)
     return "";
@@ -29268,7 +29318,8 @@ const NewColorPicker$1 = (props) => {
     onBlur: _onBlur,
     showInput: _showInput,
     placeholder: _placeholder,
-    getPopupContainer
+    getPopupContainer,
+    allowClear = true
   } = _a, arcoColorPickerProps = __objRest(_a, [
     "value",
     "onChange",
@@ -29276,7 +29327,8 @@ const NewColorPicker$1 = (props) => {
     "onBlur",
     "showInput",
     "placeholder",
-    "getPopupContainer"
+    "getPopupContainer",
+    "allowClear"
   ]);
   const [popupVisible, setPopupVisible] = useState(false);
   const wasPopupVisibleRef = useRef(false);
@@ -29329,6 +29381,21 @@ const NewColorPicker$1 = (props) => {
     setPickerValue(value2);
     debouncedApplyPickerChange(value2);
   });
+  const onNativeInputChange = useEventCallback(
+    (event) => {
+      const value2 = event.target.value.toUpperCase();
+      debouncedApplyPickerChange.cancel();
+      setPickerValue(value2);
+      applyPickerChange(value2);
+    }
+  );
+  const onClear = useEventCallback((event) => {
+    event.stopPropagation();
+    debouncedApplyPickerChange.cancel();
+    setPickerValue("");
+    setPopupVisible(false);
+    onChange == null ? void 0 : onChange("");
+  });
   const onVisibleChange = useEventCallback((visible) => {
     if (!visible && wasPopupVisibleRef.current) {
       debouncedApplyPickerChange.flush();
@@ -29345,27 +29412,82 @@ const NewColorPicker$1 = (props) => {
       window.removeEventListener(CustomEvent.EDITOR_CLICK, onHandle);
     };
   }, [onVisibleChange]);
+  const showClearButton = allowClear && !arcoColorPickerProps.disabled && Boolean(value || pickerValue);
   return /* @__PURE__ */ React__default.createElement(ArcoColorPickerConfigProvider, null, /* @__PURE__ */ React__default.createElement(
-    ColorPicker$2,
-    __spreadProps(__spreadValues({}, arcoColorPickerProps), {
-      value: pickerValue,
-      format: "hex",
-      style: __spreadValues({ width: "100%", flex: 1 }, arcoColorPickerProps.style),
-      popupVisible,
-      onVisibleChange,
-      onChange: onPickerChange,
-      historyColors: colors,
-      disabledAlpha: true,
-      showHistory: true,
-      showText: true,
-      triggerProps: __spreadProps(__spreadValues({}, arcoColorPickerProps.triggerProps), {
-        getPopupContainer: ((_b = arcoColorPickerProps.triggerProps) == null ? void 0 : _b.getPopupContainer) || getPopupContainer,
-        className: [
-          (_c = arcoColorPickerProps.triggerProps) == null ? void 0 : _c.className,
-          "easy-email-pro-theme-color-picker-popup"
-        ].filter(Boolean).join(" ")
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        position: "relative",
+        width: "100%"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      ColorPicker$2,
+      __spreadProps(__spreadValues({}, arcoColorPickerProps), {
+        value: pickerValue,
+        format: "hex",
+        style: __spreadValues({ width: "100%", flex: 1 }, arcoColorPickerProps.style),
+        popupVisible,
+        onVisibleChange,
+        onChange: onPickerChange,
+        historyColors: colors,
+        disabledAlpha: true,
+        showHistory: true,
+        showText: true,
+        triggerProps: __spreadProps(__spreadValues({}, arcoColorPickerProps.triggerProps), {
+          getPopupContainer: ((_b = arcoColorPickerProps.triggerProps) == null ? void 0 : _b.getPopupContainer) || getPopupContainer,
+          className: [
+            (_c = arcoColorPickerProps.triggerProps) == null ? void 0 : _c.className,
+            "easy-email-pro-theme-color-picker-popup"
+          ].filter(Boolean).join(" ")
+        })
       })
-    })
+    ),
+    !arcoColorPickerProps.disabled ? /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Pick a color"), position: "top" }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: 32,
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        "input",
+        {
+          "aria-label": "Native color picker",
+          type: "color",
+          value: getNativeColorInputValue(pickerValue || mergeTagColor),
+          onChange: onNativeInputChange,
+          onClick: (event) => event.stopPropagation(),
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            opacity: 0,
+            cursor: "pointer",
+            border: 0,
+            padding: 0
+          }
+        }
+      )
+    )) : null,
+    showClearButton ? /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        "aria-label": "Clear color",
+        icon: /* @__PURE__ */ React__default.createElement(IconClose, null),
+        onClick: onClear,
+        size: "mini",
+        type: "text",
+        style: { marginLeft: 4, flex: "none" }
+      }
+    ) : null
   ));
 };
 const ColorPickerContainer = (props) => {
@@ -44845,11 +44967,92 @@ const normalizeElements = (element) => {
     children: sortedChildren
   }));
 };
+const HEX_COLOR_REGEXP = /#[0-9a-fA-F]{3,8}\b/g;
+const RGB_COLOR_REGEXP = /rgba?\([^)]*\)/gi;
+const COLOR_KEY_REGEXP = /color/i;
+const VARIABLE_COLOR_REGEXP = /(\{\{.*\}\}|\$\(|^var\()/i;
+function getInitialColorPickerHistoryColors(initialColors = []) {
+  return [...new Set(initialColors)].filter(Boolean).slice(-10);
+}
+function isValidColor(value) {
+  if (VARIABLE_COLOR_REGEXP.test(value))
+    return false;
+  try {
+    Color$1(value);
+    return true;
+  } catch (error2) {
+    return false;
+  }
+}
+function getColorMatchesInOrder(value) {
+  return [
+    ...[...value.matchAll(HEX_COLOR_REGEXP)].map((match) => ({
+      color: match[0],
+      index: match.index || 0
+    })),
+    ...[...value.matchAll(RGB_COLOR_REGEXP)].map((match) => ({
+      color: match[0],
+      index: match.index || 0
+    }))
+  ].sort((a, b) => a.index - b.index).map((match) => match.color).filter(isValidColor);
+}
+function collectColorsFromJson(value, key2, result) {
+  if (typeof value === "string") {
+    const colorMatches = getColorMatchesInOrder(value);
+    if (colorMatches.length) {
+      result.push(...colorMatches);
+      return;
+    }
+    const trimmedValue = value.trim();
+    if (key2 && COLOR_KEY_REGEXP.test(key2) && isValidColor(trimmedValue)) {
+      result.push(trimmedValue);
+    }
+    return;
+  }
+  if (Array.isArray(value)) {
+    value.forEach((item2) => collectColorsFromJson(item2, key2, result));
+    return;
+  }
+  if (!value || typeof value !== "object")
+    return;
+  Object.entries(value).forEach(
+    ([childKey, childValue]) => collectColorsFromJson(childValue, childKey, result)
+  );
+}
+function extractColorPickerColorsFromJson(value) {
+  const result = [];
+  collectColorsFromJson(value, void 0, result);
+  return [...new Set(result)];
+}
+function getInitialColorPickerColors({
+  colorPicker,
+  content: content2
+}) {
+  const initialColors = (colorPicker == null ? void 0 : colorPicker.initialColors) || [];
+  const extractedColors = (colorPicker == null ? void 0 : colorPicker.autoExtractColors) ? extractColorPickerColorsFromJson(content2) : [];
+  return [.../* @__PURE__ */ new Set([...initialColors, ...extractedColors])].filter(Boolean);
+}
+function syncInitialColorPickerColors({
+  colorPicker,
+  content: content2
+}) {
+  const initialColors = getInitialColorPickerColors({ colorPicker, content: content2 });
+  if (!initialColors.length)
+    return;
+  if (typeof localStorage === "undefined")
+    return;
+  localStorage.setItem(
+    "CURRENT_COLORS_KEY",
+    JSON.stringify(getInitialColorPickerHistoryColors(initialColors))
+  );
+}
 const useCreateConfig$1 = (_m) => {
   var _n = _m, {
+    colorPicker,
     interactiveStyle,
     hoveringToolbar
   } = _n, rest = __objRest(_n, [
+    "colorPicker",
     "interactiveStyle",
     "hoveringToolbar"
   ]);
@@ -44869,6 +45072,10 @@ const useCreateConfig$1 = (_m) => {
     initialValues.content.children = widgetElement.children;
     initialValues.widgetElement = widgetElement;
   }
+  syncInitialColorPickerColors({
+    colorPicker,
+    content: initialValues.content
+  });
   return __spreadProps(__spreadValues({
     editor,
     withEnhanceEditor: withTheme$1,

package/lib/typings/components/Form/ColorPicker/NewColorPicker.d.ts

@@ -9,5 +9,6 @@ export interface NewColorPickerProps extends Omit<ArcoColorPickerProps, "onChang
     showInput?: boolean;
     placeholder?: string;
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    allowClear?: boolean;
 }
 export declare const NewColorPicker: (props: NewColorPickerProps) => React.JSX.Element;

package/lib/typings/components/Form/ColorPicker/nativeColorInput.d.ts

@@ -0,0 +1,2 @@
+export declare const NATIVE_COLOR_INPUT_FALLBACK = "#000000";
+export declare function getNativeColorInputValue(value?: string): string;

package/lib/typings/components/Providers/colorPickerColorList.d.ts

@@ -0,0 +1,5 @@
+export declare const MAX_COLOR_PICKER_RECORD_SIZE = 10;
+export declare function getColorPickerList({ cacheColors, defaultColors, }: {
+    cacheColors?: string[];
+    defaultColors?: string[];
+}): string[];

package/lib/typings/components/Providers/draggingDropPosition.d.ts

@@ -0,0 +1,7 @@
+export declare function shouldInsertAfterHeroSibling({ canInsertIntoParent, canInsertIntoTarget, isAutoCompleteEnabled, isBottomHalf, isHeroTarget, }: {
+    canInsertIntoParent: boolean;
+    canInsertIntoTarget: boolean;
+    isAutoCompleteEnabled: boolean;
+    isBottomHalf: boolean;
+    isHeroTarget: boolean;
+}): boolean;

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

@@ -2,7 +2,7 @@ import { EmailEditorProps } from "easy-email-pro-editor";
 import React from "react";
 import { ThemeConfigProps } from "../../typings";
 export declare const Retro: {
-    useCreateConfig: ({ interactiveStyle, hoveringToolbar, ...rest }: Omit<ThemeConfigProps, "editor" | "widgetElement">) => Omit<EmailEditorProps, "children"> & Omit<EmailEditorProps, "children">;
+    useCreateConfig: ({ colorPicker, interactiveStyle, hoveringToolbar, ...rest }: Omit<ThemeConfigProps, "editor" | "widgetElement">) => Omit<EmailEditorProps, "children"> & Omit<EmailEditorProps, "children">;
     Layout: React.FC<{
         children?: React.ReactNode;
         header?: React.ReactNode;

package/lib/typings/themes/Retro/initialColorPickerColors.d.ts

@@ -0,0 +1,16 @@
+import { getColorPickerList } from "../../components/Providers/colorPickerColorList";
+export interface RetroColorPickerConfig {
+    initialColors?: string[];
+    autoExtractColors?: boolean;
+}
+export { getColorPickerList };
+export declare function getInitialColorPickerHistoryColors(initialColors?: string[]): string[];
+export declare function extractColorPickerColorsFromJson(value: unknown): string[];
+export declare function getInitialColorPickerColors({ colorPicker, content, }: {
+    colorPicker?: RetroColorPickerConfig;
+    content?: unknown;
+}): string[];
+export declare function syncInitialColorPickerColors({ colorPicker, content, }: {
+    colorPicker?: RetroColorPickerConfig;
+    content?: unknown;
+}): void;

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

@@ -206,6 +206,10 @@ export interface PluginsCustomEditorTypes {
             topTriggerArea?: number;
             scrollDelay?: number;
         } | true;
+        colorPicker?: {
+            initialColors?: string[];
+            autoExtractColors?: boolean;
+        };
     };
     EmailTemplate: BasicEmailTemplate;
 }

package/package.json

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