diff --git a/packages/client/src/tiptap/core/wrappers/title/index.tsx b/packages/client/src/tiptap/core/wrappers/title/index.tsx index 820cd9f..d7e36c6 100644 --- a/packages/client/src/tiptap/core/wrappers/title/index.tsx +++ b/packages/client/src/tiptap/core/wrappers/title/index.tsx @@ -3,7 +3,7 @@ import { DOCUMENT_COVERS } from '@think/constants'; import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'; import cls from 'classnames'; import { ImageUploader } from 'components/image-uploader'; -import { useCallback, useMemo, useRef } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import { LazyLoadImage } from 'react-lazy-load-image-component'; @@ -41,7 +41,7 @@ export const TitleWrapper = ({ editor, node }) => { setCover(DOCUMENT_COVERS[~~(Math.random() * DOCUMENT_COVERS.length)]); }, [setCover]); - const portals = useMemo(() => { + const createAddCoverUIControl = useCallback(() => { if (!editor.isEditable) return null; if (!toolbarRef.current) { @@ -55,14 +55,29 @@ export const TitleWrapper = ({ editor, node }) => { } return createPortal( -
+
, toolbarRef.current ); - }, [editor, addRandomCover, cover]); + }, [editor, addRandomCover]); + + useEffect(() => { + const remove = () => { + if (cover && toolbarRef.current) { + toolbarRef.current?.remove(); + toolbarRef.current = null; + } + }; + + remove(); + + return () => { + remove(); + }; + }, [cover, createAddCoverUIControl]); return ( @@ -80,7 +95,7 @@ export const TitleWrapper = ({ editor, node }) => { ) : null}
) : null} - {portals} + {isEditable ? createAddCoverUIControl() : null} );