easy-email-pro-theme 1.60.0 → 1.60.1

package/lib/index.js

@@ -16874,6 +16874,54 @@ const HoveringToolbar = () => {
     editorContainer || document.body
   );
 };
+const RichTextBarContext = React__default.createContext({
+  activePopup: null,
+  setPopupVisible: () => void 0,
+  closePopup: () => void 0
+});
+const getNextActivePopup = (activePopup, popupId, visible) => {
+  if (visible)
+    return popupId;
+  return activePopup === popupId ? null : activePopup;
+};
+const useRichTextBarPopup = (popupId) => {
+  const { activePopup, setPopupVisible } = useContext(RichTextBarContext);
+  return {
+    popupVisible: activePopup === popupId,
+    onVisibleChange: useCallback(
+      (visible) => setPopupVisible(popupId, visible),
+      [popupId, setPopupVisible]
+    )
+  };
+};
+const useRichTextBarPopupCoordinator = () => {
+  const [activePopup, setActivePopup] = useState(
+    null
+  );
+  const setPopupVisible = useCallback(
+    (popupId, visible) => {
+      setActivePopup(
+        (current) => getNextActivePopup(current, popupId, visible)
+      );
+    },
+    []
+  );
+  const closePopup = useCallback(() => setActivePopup(null), []);
+  return useMemo(
+    () => ({ activePopup, setPopupVisible, closePopup }),
+    [activePopup, closePopup, setPopupVisible]
+  );
+};
+const useRichTextBarActionBoundary = (closePopup) => useCallback(
+  (event) => {
+    var _a;
+    const target = event.target;
+    if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, ".arco-trigger"))
+      return;
+    closePopup();
+  },
+  [closePopup]
+);
 var colorString$1 = { exports: {} };
 var colorName = {
   "aliceblue": [240, 248, 255],
@@ -18868,7 +18916,7 @@ const BgColorInner = () => {
   const { getPopupContainer } = useContext(RichTextBarContext);
   const { list: colors, addCurrentColor } = useColorContext();
   const { useNewColorPicker = true } = useEditorProps();
-  const [popupVisible, setPopupVisible] = useState(false);
+  const { popupVisible, onVisibleChange: setToolbarPopupVisible } = useRichTextBarPopup("background-color");
   let isSelectionCollapsed = true;
   if (editor.selection) {
     try {
@@ -18993,7 +19041,7 @@ const BgColorInner = () => {
     if (!visible) {
       debouncedApplyChange.flush();
     }
-    setPopupVisible(visible);
+    setToolbarPopupVisible(visible);
   });
   useEffect(() => {
     if (isSelectionCollapsed) {
@@ -19085,6 +19133,8 @@ const BgColorInner = () => {
         Popover,
         {
           trigger: "click",
+          popupVisible,
+          onVisibleChange,
           triggerProps: {
             popupStyle: { padding: "10px" }
           },
@@ -19138,7 +19188,18 @@ const BgColorInner = () => {
         triggerElement
       }
     ));
-  }, [colors, getPopupContainer, normalizedColor, onChange, onClose, onLegacyChange, onVisibleChange, pickerValue, popupVisible, useNewColorPicker]);
+  }, [
+    colors,
+    getPopupContainer,
+    normalizedColor,
+    onChange,
+    onClose,
+    onLegacyChange,
+    onVisibleChange,
+    pickerValue,
+    popupVisible,
+    useNewColorPicker
+  ]);
 };
 const BgColor = () => {
   return /* @__PURE__ */ React__default.createElement(ColorProvider, null, /* @__PURE__ */ React__default.createElement(BgColorInner, null));
@@ -19161,7 +19222,7 @@ const FontColorInner = () => {
   const { addCurrentColor, list: colors } = useColorContext();
   const { useNewColorPicker = true } = useEditorProps();
   const editor = useSlate();
-  const [popupVisible, setPopupVisible] = useState(false);
+  const { popupVisible, onVisibleChange: setToolbarPopupVisible } = useRichTextBarPopup("font-color");
   let isSelectionCollapsed = true;
   if (editor.selection) {
     try {
@@ -19282,7 +19343,7 @@ const FontColorInner = () => {
     if (!visible) {
       debouncedApplyChange.flush();
     }
-    setPopupVisible(visible);
+    setToolbarPopupVisible(visible);
   });
   useEffect(() => {
     if (isSelectionCollapsed) {
@@ -19332,35 +19393,45 @@ const FontColorInner = () => {
     }
   });
   return useMemo(() => {
-    const triggerElement = /* @__PURE__ */ React__default.createElement("span", { ref, className: classnames$1("formatButton"), title: t("Font color") }, /* @__PURE__ */ React__default.createElement(
+    const triggerElement = /* @__PURE__ */ React__default.createElement(
       "span",
       {
-        className: classnames$1("iconfont"),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "calc(var(--hovering-bar-icon-size) + 4px)",
-          textAlign: "center",
-          fontSize: "calc(var(--hovering-bar-icon-size) + 2px)",
-          borderRadius: "2px",
-          width: "calc(var(--hovering-bar-icon-size) + 4px)",
-          boxSizing: "border-box",
-          fontWeight: "500",
-          color: pickerValue.toLocaleLowerCase() === "#ffffff" ? void 0 : pickerValue,
-          borderColor: pickerValue.toLocaleLowerCase() === "#ffffff" ? void 0 : pickerValue,
-          borderWidth: "1px",
-          borderStyle: "solid",
-          overflow: "hidden"
-        }
+        ref,
+        className: classnames$1("formatButton"),
+        title: t("Font color")
       },
-      "A"
-    ));
+      /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          className: classnames$1("iconfont"),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "calc(var(--hovering-bar-icon-size) + 4px)",
+            textAlign: "center",
+            fontSize: "calc(var(--hovering-bar-icon-size) + 2px)",
+            borderRadius: "2px",
+            width: "calc(var(--hovering-bar-icon-size) + 4px)",
+            boxSizing: "border-box",
+            fontWeight: "500",
+            color: pickerValue.toLocaleLowerCase() === "#ffffff" ? void 0 : pickerValue,
+            borderColor: pickerValue.toLocaleLowerCase() === "#ffffff" ? void 0 : pickerValue,
+            borderWidth: "1px",
+            borderStyle: "solid",
+            overflow: "hidden"
+          }
+        },
+        "A"
+      )
+    );
     if (!useNewColorPicker) {
       return /* @__PURE__ */ React__default.createElement(
         Popover,
         {
           trigger: "click",
+          popupVisible,
+          onVisibleChange,
           triggerProps: {
             popupStyle: { padding: "10px" }
           },
@@ -19414,7 +19485,18 @@ const FontColorInner = () => {
         triggerElement
       }
     ));
-  }, [colors, getPopupContainer, normalizedColor, onChange, onClose, onLegacyChange, onVisibleChange, pickerValue, popupVisible, useNewColorPicker]);
+  }, [
+    colors,
+    getPopupContainer,
+    normalizedColor,
+    onChange,
+    onClose,
+    onLegacyChange,
+    onVisibleChange,
+    pickerValue,
+    popupVisible,
+    useNewColorPicker
+  ]);
 };
 const FontColor = () => {
   return /* @__PURE__ */ React__default.createElement(ColorProvider, null, /* @__PURE__ */ React__default.createElement(FontColorInner, null));
@@ -19816,8 +19898,9 @@ const TextLink = () => {
   const { getPopupContainer } = useContext(RichTextBarContext);
   const ref = useRef(null);
   const linkNode = linkNodeEntry == null ? void 0 : linkNodeEntry[0];
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("link");
   const selectedNodePath = useSelectedNodePath();
-  const [popupVisible, setPopupVisible] = useState(false);
+  const [mergeTagPopupVisible, setMergeTagPopupVisible] = useState(false);
   const { handleUploadClick, showSelectFileButton, onUpload, mergetags } = useEditorProps();
   const [isUploading, setIsUploading] = useState(false);
   const uploadHandlerRef = useRef(onUpload);
@@ -19830,7 +19913,7 @@ const TextLink = () => {
       const newHref = PluginManager.generateVariable(mergetag);
       from.setFieldValue("href", newHref);
       setFormState((old) => __spreadProps(__spreadValues({}, old), { href: newHref }));
-      setPopupVisible(false);
+      setMergeTagPopupVisible(false);
     },
     [from]
   );
@@ -19925,6 +20008,8 @@ const TextLink = () => {
     Popover,
     {
       trigger: "click",
+      popupVisible,
+      onVisibleChange,
       triggerProps: {
         position: "tr",
         popupStyle: { padding: "10px 0px 0px 0px", width: 400 }
@@ -19971,10 +20056,10 @@ const TextLink = () => {
             SharedComponents.MergeTagComponent,
             {
               mergetags: formatMergetags,
-              popupVisible,
-              onVisibleChange: setPopupVisible,
+              popupVisible: mergeTagPopupVisible,
+              onVisibleChange: setMergeTagPopupVisible,
               onChange: onChangeMergeTag,
-              onClose: () => setPopupVisible(false),
+              onClose: () => setMergeTagPopupVisible(false),
               value: "",
               triggerElement: /* @__PURE__ */ React__default.createElement(
                 Button$2,
@@ -20112,6 +20197,7 @@ const options$9 = [
 ];
 const TurnInto = () => {
   const editor = useSlate();
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("turn-into");
   let nodeEntry = null;
   try {
     if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
@@ -20148,6 +20234,8 @@ const TurnInto = () => {
     Select$1,
     {
       value: node.type,
+      popupVisible,
+      onVisibleChange,
       className: "easy-email-pro-turnInto",
       style: { minWidth: 95 },
       onChange,
@@ -20167,7 +20255,7 @@ const TurnInto = () => {
 };
 const RichTextBar$1 = "";
 const MergeTag = React__default.memo(() => {
-  const [popupVisible, setPopupVisible] = useState(false);
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("merge-tag");
   const [mergeTagRef, setMergeTagRef] = useState(null);
   const editor = useSlate();
   const { mergetags } = useEditorProps();
@@ -20179,19 +20267,19 @@ const MergeTag = React__default.memo(() => {
       editor.insertMergetag({
         mergetag
       });
-      setPopupVisible(false);
+      onVisibleChange(false);
     },
-    [editor]
+    [editor, onVisibleChange]
   );
   const onClose = useCallback(() => {
-    setPopupVisible(false);
-  }, []);
+    onVisibleChange(false);
+  }, [onVisibleChange]);
   return /* @__PURE__ */ React__default.createElement("div", { ref: setMergeTagRef }, /* @__PURE__ */ React__default.createElement(
     SharedComponents.MergeTagComponent,
     {
       mergetags: formatMergetags,
       popupVisible,
-      onVisibleChange: setPopupVisible,
+      onVisibleChange,
       onChange,
       onClose,
       value: "",
@@ -20201,7 +20289,7 @@ const MergeTag = React__default.memo(() => {
         {
           title: t("Merge Tag"),
           icon: "icon-merge-tags",
-          onClick: () => setPopupVisible(false)
+          onClick: () => onVisibleChange(false)
         }
       )
     }
@@ -20358,6 +20446,7 @@ const TextAlign$1 = () => {
 };
 const options$8 = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
 const FontSize$2 = () => {
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("font-size");
   const [selectRef, setSelectRef] = useState(null);
   const { fontSizeList } = useEditorProps();
   const [fontSizeValue, setFontSizeValue] = useState();
@@ -20470,6 +20559,8 @@ const FontSize$2 = () => {
     {
       className: "easy-email-pro-font-size",
       value: fontSizeValue,
+      popupVisible,
+      onVisibleChange,
       style: { width: 80 },
       onChange,
       triggerProps: {
@@ -20487,6 +20578,7 @@ const FontSize$2 = () => {
       `));
 };
 const FontFamily$2 = () => {
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("font-family");
   const { fontList, addFont } = useFontFamily();
   const [selectRef, setSelectRef] = useState(null);
   const editor = useSlate();
@@ -20589,6 +20681,8 @@ const FontFamily$2 = () => {
     {
       className: "easy-email-pro-font-family",
       value: fontFamilyValue,
+      popupVisible,
+      onVisibleChange,
       style: { minWidth: 80 },
       onChange,
       triggerProps: {
@@ -20701,6 +20795,7 @@ const Image$4 = () => {
   const editor = useSlate();
   const ref = useRef(null);
   const { onUpload } = useEditorProps();
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("image");
   const { lock } = useEditorState();
   const [from] = Form.useForm();
   const onSubmit = (values) => {
@@ -20739,6 +20834,8 @@ const Image$4 = () => {
     Popover,
     {
       trigger: "click",
+      popupVisible,
+      onVisibleChange,
       triggerProps: {
         position: "bl",
         popupStyle: { padding: "0px" }
@@ -20839,15 +20936,16 @@ const Image$4 = () => {
     /* @__PURE__ */ React__default.createElement("span", { ref, className: classnames$1("formatButton") }, /* @__PURE__ */ React__default.createElement("span", { className: classnames$1(" iconfont icon-img") }))
   );
 };
-const RichTextBarContext = React__default.createContext({});
 const RichTextBar = ({
   list,
   wrap: wrap2,
   getPopupContainer
 }) => {
+  const { activePopup, setPopupVisible, closePopup } = useRichTextBarPopupCoordinator();
+  const onClickCapture = useRichTextBarActionBoundary(closePopup);
   const contextValue = useMemo(
-    () => ({ getPopupContainer }),
-    [getPopupContainer]
+    () => ({ getPopupContainer, activePopup, setPopupVisible, closePopup }),
+    [activePopup, closePopup, getPopupContainer, setPopupVisible]
   );
   const { MergetagPopover: MergetagPopover2, mergetags, AIAssistant: AIAssistant2 } = useEditorProps();
   const { selectedNode } = useSelectedNode();
@@ -20953,6 +21051,7 @@ const RichTextBar = ({
     {
       id: "RichTextBar",
       className: "RichTextBar",
+      onClickCapture,
       style: {
         display: "inline-flex",
         alignItems: "center",
@@ -40918,6 +41017,7 @@ const AIPromptModal = (props) => {
 };
 const SvgMagic = (props) => /* @__PURE__ */ React$2.createElement("svg", __spreadValues({ className: "bi bi-magic", fill: "currentColor", height: 16, viewBox: "0 0 16 16", width: 16, xmlns: "http://www.w3.org/2000/svg" }, props), /* @__PURE__ */ React$2.createElement("path", { d: "M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z" }));
 function AIAssistant({ isCollapsed }) {
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("ai-assistant");
   const isEnabled = EditorAuth.getFeatureEnabled("AI_ASSISTANT");
   if (!isEnabled) {
     throw new Error(`Current plan do not support AIAssistant`);
@@ -41177,6 +41277,8 @@ function AIAssistant({ isCollapsed }) {
   return /* @__PURE__ */ React__default.createElement("div", { ref: setRefElement, style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React__default.createElement(
     Select$1,
     {
+      popupVisible,
+      onVisibleChange,
       getPopupContainer: (node) => {
         return Array.from(document.querySelectorAll(".RichTextBar")).find(
           (item2) => item2.contains(node)

package/lib/typings/components/HoveringToolbar/RichTextBar.d.ts

@@ -1,9 +1,7 @@
 import { TextFormat } from "easy-email-pro-editor";
 import React from "react";
 import "./RichTextBar.scss";
-export declare const RichTextBarContext: React.Context<{
-    getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
-}>;
+export { RichTextBarContext } from "./popupCoordinator";
 export declare const RichTextBar: ({ list, wrap, getPopupContainer, }: {
     list: Array<TextFormat | React.FC>;
     wrap?: boolean | undefined;

package/lib/typings/components/HoveringToolbar/popupCoordinator.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export type RichTextBarPopupId = string;
+export declare const RichTextBarContext: React.Context<{
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
+    activePopup: RichTextBarPopupId | null;
+    setPopupVisible: (popupId: RichTextBarPopupId, visible: boolean) => void;
+    closePopup: () => void;
+}>;
+export declare const getNextActivePopup: (activePopup: RichTextBarPopupId | null, popupId: RichTextBarPopupId, visible: boolean) => RichTextBarPopupId | null;
+export declare const useRichTextBarPopup: (popupId: RichTextBarPopupId) => {
+    popupVisible: boolean;
+    onVisibleChange: (visible: boolean) => void;
+};
+export declare const useRichTextBarPopupCoordinator: () => {
+    activePopup: string | null;
+    setPopupVisible: (popupId: RichTextBarPopupId, visible: boolean) => void;
+    closePopup: () => void;
+};
+export declare const useRichTextBarActionBoundary: (closePopup: () => void) => (event: React.MouseEvent<HTMLElement>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.60.0",
+  "version": "1.60.1",
   "description": "",
   "files": [
     "lib"
@@ -47,6 +47,8 @@
   },
   "scripts": {
     "build": "vite build && npm run typings",
+    "test": "npm run test:hovering-toolbar && npm run test:ai-agent",
+    "test:hovering-toolbar": "cd ../.. && packages/easy-email-pro-core/node_modules/.bin/tsx packages/easy-email-pro-theme/test/hoveringToolbarPopupCoordinator.test.ts && packages/easy-email-pro-core/node_modules/.bin/tsx packages/easy-email-pro-theme/test/hoveringToolbarPopupCoordinator.render.test.tsx",
     "test:ai-agent": "cd ../.. && packages/easy-email-pro-core/node_modules/.bin/tsx packages/easy-email-pro-theme/test/aiBatchUpdate.test.ts && packages/easy-email-pro-core/node_modules/.bin/tsx packages/easy-email-pro-theme/test/aiEditorTransaction.test.ts && packages/easy-email-pro-core/node_modules/.bin/tsx packages/easy-email-pro-theme/test/aiAgentBatchSummary.test.ts && packages/easy-email-pro-core/node_modules/.bin/tsx packages/easy-email-pro-theme/test/aiTransactionalMutation.test.ts && packages/easy-email-pro-core/node_modules/.bin/tsx packages/easy-email-pro-theme/test/aiSubjectUpdate.test.ts",
     "typings": "tsc --declaration --emitDeclarationOnly --project tsconfig.alias.json && tsc-alias -p tsconfig.alias.json",
     "lint": "eslint --fix --ext .tsx,.ts src/"