diff --git a/packages/client/src/tiptap/core/index.tsx b/packages/client/src/tiptap/core/index.tsx index 87be85c4..9d8ee889 100644 --- a/packages/client/src/tiptap/core/index.tsx +++ b/packages/client/src/tiptap/core/index.tsx @@ -23,6 +23,10 @@ export const useEditor = (options: Partial = {}, deps: Dependency const forceUpdate = useForceUpdate(); useEffect(() => { + let isUnmount = false; + let timer1: ReturnType = null; + let timer2: ReturnType = null; + options.editorProps = options.editorProps || {}; if (options.editable) { @@ -49,14 +53,22 @@ export const useEditor = (options: Partial = {}, deps: Dependency } instance.on('transaction', () => { - requestAnimationFrame(() => { - requestAnimationFrame(() => { - forceUpdate(); + if (!isUnmount) { + 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 diff --git a/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx b/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx index f69aefc2..96e80881 100644 --- a/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx +++ b/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) => { - exportToSvgRef.current = res.exportToSvg; + if (!isUnmount) { + exportToSvgRef.current = res.exportToSvg; + } }) - .catch(setError) - .finally(() => toggleLoading(false)); + .catch((err) => !isUnmount && setError(err)) + .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 ( diff --git a/packages/client/src/tiptap/core/wrappers/flow/index.tsx b/packages/client/src/tiptap/core/wrappers/flow/index.tsx index e6437651..b24f763d 100644 --- a/packages/client/src/tiptap/core/wrappers/flow/index.tsx +++ b/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) - .finally(() => toggleLoading(false)); + .catch((err) => !isUnmount && setError(err)) + .finally(() => !isUnmount && toggleLoading(false)); + + return () => { + isUnmount = true; + }; }, [toggleLoading, data]); return ( diff --git a/packages/client/src/tiptap/core/wrappers/mind/index.tsx b/packages/client/src/tiptap/core/wrappers/mind/index.tsx index 8ea6118b..e606303f 100644 --- a/packages/client/src/tiptap/core/wrappers/mind/index.tsx +++ b/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>(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) - .finally(() => toggleLoading(false)); + .catch((err) => !isUnmount && setError(err)) + .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 ( diff --git a/packages/client/src/tiptap/core/wrappers/status/index.tsx b/packages/client/src/tiptap/core/wrappers/status/index.tsx index 4f8b5f44..bcb6d63f 100644 --- a/packages/client/src/tiptap/core/wrappers/status/index.tsx +++ b/packages/client/src/tiptap/core/wrappers/status/index.tsx @@ -56,20 +56,32 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => { ); useEffect(() => { + let timer: ReturnType = 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 = null; + if (visible) { - setTimeout(() => { + timer = setTimeout(() => { ref.current?.focus(); }, 200); } else { updateAttributes({ text: currentText }); } + + return () => { + clearTimeout(timer); + }; }, [visible, updateAttributes, currentText]); return (