fix cleanUp in useEffect

packages/client/src/tiptap/core/index.tsx

@@ -23,6 +23,10 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
   const forceUpdate = useForceUpdate();
 
   useEffect(() => {
+    let isUnmount = false;
+    let timer1: ReturnType<typeof requestAnimationFrame> = null;
+    let timer2: ReturnType<typeof requestAnimationFrame> = null;
+
     options.editorProps = options.editorProps || {};
 
     if (options.editable) {
@@ -49,14 +53,22 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
     }
 
     instance.on('transaction', () => {
-      requestAnimationFrame(() => {
+      if (!isUnmount) {
-        requestAnimationFrame(() => {
+        timer1 = requestAnimationFrame(() => {
+          timer2 = requestAnimationFrame(() => {
             forceUpdate();
           });
         });
+      } else {
+        cancelAnimationFrame(timer1);
+        cancelAnimationFrame(timer2);
+      }
     });
 
     return () => {
+      cancelAnimationFrame(timer1);
+      cancelAnimationFrame(timer2);
+      isUnmount = true;
       instance.destroy();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx

@@ -45,27 +45,44 @@ export const _ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   useEffect(() => {
+    let isUnmount = false;
+
     import('@excalidraw/excalidraw')
       .then((res) => {
+        if (!isUnmount) {
           exportToSvgRef.current = res.exportToSvg;
+        }
       })
-      .catch(setError)
+      .catch((err) => !isUnmount && setError(err))
-      .finally(() => toggleLoading(false));
+      .finally(() => !isUnmount && toggleLoading(false));
+
+    return () => {
+      isUnmount = true;
+    };
   }, [toggleLoading, data]);
 
   useEffect(() => {
+    let isUnmount = false;
+
     const setContent = async () => {
-      if (loading || error || !visible || !data) return;
+      if (isUnmount || loading || error || !visible || !data) return;
 
       const svg: SVGElement = await exportToSvgRef.current(data);
 
+      if (isUnmount) return;
+
       svg.setAttribute('width', '100%');
       svg.setAttribute('height', '100%');
       svg.setAttribute('display', 'block');
 
       setSvg(svg);
     };
+
     setContent();
+
+    return () => {
+      isUnmount = true;
+    };
   }, [data, loading, error, visible]);
 
   return (

packages/client/src/tiptap/core/wrappers/flow/index.tsx

@@ -91,9 +91,15 @@ export const _FlowWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   useEffect(() => {
+    let isUnmount = false;
+
     load()
-      .catch(setError)
+      .catch((err) => !isUnmount && setError(err))
-      .finally(() => toggleLoading(false));
+      .finally(() => !isUnmount && toggleLoading(false));
+
+    return () => {
+      isUnmount = true;
+    };
   }, [toggleLoading, data]);
 
   return (

packages/client/src/tiptap/core/wrappers/mind/index.tsx

@@ -20,6 +20,7 @@ const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
 
 export const _MindWrapper = ({ editor, node, updateAttributes }) => {
   const $mind = useRef(null);
+  const $centerTimer = useRef<ReturnType<typeof setTimeout>>(null);
   const isEditable = editor.isEditable;
   const { width: maxWidth } = getEditorContainerDOMSize(editor);
   const { data, width, height } = node.attrs;
@@ -46,7 +47,7 @@ export const _MindWrapper = ({ editor, node, updateAttributes }) => {
   const onResize = useCallback(
     (size) => {
       updateAttributes({ width: size.width, height: size.height });
-      setTimeout(() => {
+      $centerTimer.current = setTimeout(() => {
         setCenter();
       });
     },
@@ -86,9 +87,15 @@ export const _MindWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   useEffect(() => {
+    let isUnmount = false;
+
     load()
-      .catch(setError)
+      .catch((err) => !isUnmount && setError(err))
-      .finally(() => toggleLoading(false));
+      .finally(() => !isUnmount && toggleLoading(false));
+
+    return () => {
+      isUnmount = true;
+    };
   }, [toggleLoading]);
 
   // 数据同步渲染
@@ -105,6 +112,12 @@ export const _MindWrapper = ({ editor, node, updateAttributes }) => {
     setCenter();
   }, [width, height, setCenter]);
 
+  useEffect(() => {
+    return () => {
+      clearTimeout($centerTimer.current);
+    };
+  }, []);
+
   return (
     <NodeViewWrapper className={cls(styles.wrap)}>
       <VisibilitySensor onChange={onViewportChange}>

packages/client/src/tiptap/core/wrappers/status/index.tsx

@@ -56,20 +56,32 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> = null;
+
     if (defaultShowPicker && user && user.id === createUser) {
       toggleVisible(true);
-      setTimeout(() => ref.current?.focus(), 200);
+      timer = setTimeout(() => ref.current?.focus(), 200);
     }
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, [defaultShowPicker, toggleVisible, createUser, user]);
 
   useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> = null;
+
     if (visible) {
-      setTimeout(() => {
+      timer = setTimeout(() => {
         ref.current?.focus();
       }, 200);
     } else {
       updateAttributes({ text: currentText });
     }
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, [visible, updateAttributes, currentText]);
 
   return (