refactor(admin): scope editor node dialogs to instances

apps/admin/src/common/wangeditor-customer/features/chapter-structure/section-node.js

@@ -117,7 +117,7 @@ const renderChapterSection = (elem, children, editor) => {
             size: size,
             family: family,
           };
-          localStorage.setItem("chapterItemNum", JSON.stringify(data));
+          editor.emit("wangeditor-customer:legacy-dialog", { key: "chapterItemNum", payload: data });
           callback && callback(data);
         } /* 其他... */,
       },

apps/admin/src/common/wangeditor-customer/features/chapter-structure/title-node.js

@@ -123,7 +123,7 @@ const renderChapterHeader = (elem, children, editor) => {
             size: size,
             family: family,
           };
-          localStorage.setItem("chapterTitleNum", JSON.stringify(data));
+          editor.emit("wangeditor-customer:legacy-dialog", { key: "chapterTitleNum", payload: data });
           callback && callback(data);
         } /* 其他... */,
       },

apps/admin/src/common/wangeditor-customer/features/expand-read/node.js

@@ -229,7 +229,7 @@ const renderExpandRead = (elem, children, editor) => {
             flex,
             theme,
           };
-          localStorage.setItem("chapterExpand", JSON.stringify(data));
+          editor.emit("wangeditor-customer:legacy-dialog", { key: "chapterExpand", payload: data });
         },
       },
     },

apps/admin/src/common/wangeditor-customer/features/expand-read/simple-node.js

@@ -115,7 +115,7 @@ const renderExpandRead = (elem, children, editor) => {
             theme,
             fontsize,
           };
-          localStorage.setItem("chapterExpand", JSON.stringify(data));
+          editor.emit("wangeditor-customer:legacy-dialog", { key: "chapterExpand", payload: data });
         },
       },
     },

apps/admin/src/common/wangeditor-customer/features/gallery/inline-node.js

@@ -83,9 +83,7 @@ const renderGalleryInline = (elem, children, editor) => {
           ev.stopPropagation();
           ev.preventDefault();
 
-          localStorage.setItem(
-            "galleryNum",
-            JSON.stringify({
+          editor.emit("wangeditor-customer:legacy-dialog", { key: "galleryNum", payload: {
               title,
               random: random,
               i: Math.random(),
@@ -93,8 +91,7 @@ const renderGalleryInline = (elem, children, editor) => {
               flex: flex,
               theme,
               fontsize,
-            }),
-          );
+          } });
         },
       },
     },

apps/admin/src/common/wangeditor-customer/features/gallery/node.js

@@ -205,16 +205,13 @@ const renderGallery = (elem, children, editor) => {
           ev.stopPropagation();
           ev.preventDefault();
 
-          localStorage.setItem(
-            "galleryNum",
-            JSON.stringify({
+          editor.emit("wangeditor-customer:legacy-dialog", { key: "galleryNum", payload: {
               title,
               random: random,
               i: Math.random(),
               galleryList: galleryList,
               flex: flex,
-            }),
-          );
+          } });
           callback && callback(title, random, galleryList, flex);
         },
       },
@@ -284,16 +281,13 @@ const renderGallery = (elem, children, editor) => {
             ev.stopPropagation();
             ev.preventDefault();
 
-            localStorage.setItem(
-              "galleryNum",
-              JSON.stringify({
+            editor.emit("wangeditor-customer:legacy-dialog", { key: "galleryNum", payload: {
                 title,
                 random: random,
                 i: Math.random(),
                 galleryList: galleryList,
                 flex: flex,
-              }),
-            );
+            } });
             callback && callback(title, random, galleryList, flex);
           },
         },

apps/admin/src/common/wangeditor-customer/features/link/node.js

@@ -90,9 +90,7 @@ const renderChapterLink = (elem, children, editor) => {
           ev.stopPropagation();
           ev.preventDefault();
 
-          localStorage.setItem(
-            "linkNum",
-            JSON.stringify({
+          editor.emit("wangeditor-customer:legacy-dialog", { key: "linkNum", payload: {
               title,
               linktype,
               random: random,
@@ -101,8 +99,7 @@ const renderChapterLink = (elem, children, editor) => {
               chapters,
               theme,
               fontsize,
-            }),
-          );
+          } });
         } /* 其他... */,
       },
     },

apps/admin/src/common/wangeditor-customer/features/practice/node.js

@@ -215,10 +215,10 @@ const renderPractice = (elem, children, editor) => {
           try {
             callback && callback(practiceNum, title);
           } catch (e) {}
-          localStorage.setItem(
-            "practiceNum",
-            JSON.stringify({ practiceNum, title, theme, random: Math.random() }),
-          );
+          editor.emit("wangeditor-customer:legacy-dialog", {
+            key: "practiceNum",
+            payload: { practiceNum, title, theme, random: Math.random() },
+          });
         } /* 其他... */,
       },
     },

apps/admin/src/common/wangeditor-customer/features/tooltip/node.js

@@ -118,9 +118,7 @@ const renderChapterTooltip = (elem, children, editor) => {
           ev.stopPropagation();
           ev.preventDefault();
 
-          localStorage.setItem(
-            "tooltipNum",
-            JSON.stringify({
+          editor.emit("wangeditor-customer:legacy-dialog", { key: "tooltipNum", payload: {
               title,
               tooltipType,
               random: random,
@@ -129,8 +127,7 @@ const renderChapterTooltip = (elem, children, editor) => {
               content,
               i: Math.random(),
               fontsize,
-            }),
-          );
+          } });
         } /* 其他... */,
       },
     },

apps/admin/src/common/wangeditor-customer/index.jsx

@@ -22,7 +22,6 @@ import timesave from "@/assets/images/timesave.png";
 import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 
-import { storageChange } from "@/utils/storage.js";
 
 import ImageModal from "./features/image/ImageDialog";
 import VideoModal from "./features/video/VideoDialog";
@@ -50,7 +49,6 @@ const tabsMenu = [
   { key: "style", title: "样式模版" },
 ];
 
-storageChange();
 
 const WangEditorCustomer = (props, ref) => {
   const {
@@ -102,59 +100,39 @@ const WangEditorCustomer = (props, ref) => {
 
   const [isOnline, setIsOnline] = useState(false);
 
-  const handleSetItemEvent = (e) => {
-    if (e.key === "chapterTitleNum") {
-      setTitleInfo(JSON.parse(e.newValue));
+  const handleLegacyDialog = ({ key, payload }) => {
+    if (key === "chapterTitleNum") {
+      setTitleInfo(payload);
       setTitleVisible(true);
-      setTimeout(() => {
-        window.localStorage.removeItem("chapterTitleNum");
-      }, 100);
-    } else if (e.key === "chapterItemNum") {
-      setSectionInfo(JSON.parse(e.newValue));
+    } else if (key === "chapterItemNum") {
+      setSectionInfo(payload);
       setSectionVisible(true);
-      setTimeout(() => {
-        window.localStorage.removeItem("chapterItemNum");
-      }, 100);
-    } else if (e.key === "practiceNum") {
-      const { practiceNum, title, theme } = JSON.parse(e.newValue);
+    } else if (key === "practiceNum") {
+      const { practiceNum, title, theme } = payload;
       dispatch(setPracticeRandom({ practiceNum, practiceTitle: title, practiceTheme: theme }));
       setPracticeVisible(true);
-      setTimeout(() => {
-        window.localStorage.removeItem("practiceNum");
-      }, 100);
-    } else if (e.key === "galleryNum") {
-      setGalleryInfo(JSON.parse(e.newValue));
+    } else if (key === "galleryNum") {
+      setGalleryInfo(payload);
       setGalleryVisible(true);
-      setTimeout(() => {
-        window.localStorage.removeItem("galleryNum");
-      }, 100);
-    } else if (e.key === "tooltipNum") {
-      setTooltipInfo(JSON.parse(e.newValue));
+    } else if (key === "tooltipNum") {
+      setTooltipInfo(payload);
       setTooltipVisible(true);
-      setTimeout(() => {
-        window.localStorage.removeItem("tooltipNum");
-      }, 100);
-    } else if (e.key === "linkNum") {
-      setLinkInfo(JSON.parse(e.newValue));
+    } else if (key === "linkNum") {
+      setLinkInfo(payload);
       setLinkVisible(true);
-      setTimeout(() => {
-        window.localStorage.removeItem("linkNum");
-      }, 100);
-    } else if (e.key === "chapterExpand") {
-      setExpandInfo(JSON.parse(e.newValue));
+    } else if (key === "chapterExpand") {
+      setExpandInfo(payload);
       setExpandVisible(true);
-      setTimeout(() => {
-        window.localStorage.removeItem("chapterExpand");
-      }, 100);
     }
   };
 
   useEffect(() => {
-    window.addEventListener("setItemEvent", handleSetItemEvent);
+    if (!editor) return;
+    editor.on("wangeditor-customer:legacy-dialog", handleLegacyDialog);
     return () => {
-      window.removeEventListener("setItemEvent", handleSetItemEvent);
+      editor.off("wangeditor-customer:legacy-dialog", handleLegacyDialog);
     };
-  }, []);
+  }, [editor]);
 
   const closePanel = () => {
     dispatch(setPracticeRandom({ practiceNum: null, practiceTitle: null }));

apps/admin/src/utils/storage.js

-export const storageChange = () => {
-  let orignalSetItem = localStorage.setItem;
-  localStorage.setItem = function (key, newValue) {
-    let setItemEvent = new Event("setItemEvent");
-    setItemEvent.key = key;
-    setItemEvent.newValue = newValue;
-    setItemEvent.oldValue = localStorage.getItem(key);
-    window.dispatchEvent(setItemEvent);
-    orignalSetItem.apply(this, arguments);
-  };
-};