From a6138e93e5764d33b867476405fa54821011095a Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sun, 8 Jan 2023 14:05:57 +0800
Subject: [PATCH] update add random cover ui

---
 .../src/tiptap/core/wrappers/title/index.tsx  | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/tiptap/core/wrappers/title/index.tsx b/packages/client/src/tiptap/core/wrappers/title/index.tsx
index 820cd9f7..d7e36c6c 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(
-      <div style={{ transform: `translateY(1.5em)`, zIndex: 100 }}>
+      <div style={{ transform: `translate(10px, 1.5em)`, zIndex: 100 }}>
         <Button onClick={addRandomCover} size={'small'} theme="light" type="tertiary">
-          {cover ? '随机封面' : '添加封面'}
+          添加封面
         </Button>
       </div>,
       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 (
     <NodeViewWrapper className={cls(styles.wrap, 'title')}>
@@ -80,7 +95,7 @@ export const TitleWrapper = ({ editor, node }) => {
           ) : null}
         </div>
       ) : null}
-      {portals}
+      {isEditable ? createAddCoverUIControl() : null}
       <NodeViewContent></NodeViewContent>
     </NodeViewWrapper>
   );