From 1785e7a2208d8d680a86f8645acc726d994dc5c9 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Fri, 17 Jun 2022 21:31:47 +0800
Subject: [PATCH] tiptap: fix select title without cover

---
 .../src/tiptap/core/wrappers/title/index.tsx  | 39 ++++++++++++++-----
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/tiptap/core/wrappers/title/index.tsx b/packages/client/src/tiptap/core/wrappers/title/index.tsx
index b05fba2d..8c3f152a 100644
--- a/packages/client/src/tiptap/core/wrappers/title/index.tsx
+++ b/packages/client/src/tiptap/core/wrappers/title/index.tsx
@@ -1,9 +1,10 @@
-import { Button, ButtonGroup } from '@douyinfe/semi-ui';
+import { Button } from '@douyinfe/semi-ui';
 import { DOCUMENT_COVERS } from '@think/constants';
 import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { ImageUploader } from 'components/image-uploader';
-import { useCallback } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 import styles from './index.module.scss';
@@ -17,6 +18,7 @@ const images = [
 ];
 
 export const TitleWrapper = ({ editor, node }) => {
+  const toolbarRef = useRef<HTMLDivElement>(null);
   const isEditable = editor.isEditable;
   const { cover } = node.attrs;
 
@@ -39,11 +41,34 @@ export const TitleWrapper = ({ editor, node }) => {
     setCover(DOCUMENT_COVERS[~~(Math.random() * DOCUMENT_COVERS.length)]);
   }, [setCover]);
 
+  const portals = useMemo(() => {
+    if (!editor.isEditable) return null;
+
+    if (!toolbarRef.current) {
+      const editorDOM = editor.view.dom as HTMLDivElement;
+      const parent = editorDOM.parentElement;
+      const el = window.document.createElement('div');
+
+      parent.style.position = 'relative';
+      editorDOM.parentNode.insertBefore(el, editorDOM);
+      toolbarRef.current = el;
+    }
+
+    return createPortal(
+      <div style={{ transform: `translateY(1.5em)`, zIndex: 100 }}>
+        <Button onClick={addRandomCover} size={'small'} theme="light" type="tertiary">
+          {cover ? '随机封面' : '添加封面'}
+        </Button>
+      </div>,
+      toolbarRef.current
+    );
+  }, [editor, addRandomCover, cover]);
+
   return (
     <NodeViewWrapper className={cls(styles.wrap, 'title')}>
       {cover ? (
         <div className={styles.coverWrap} contentEditable={false}>
-          <img src={cover} alt="cover" />
+          <LazyLoadImage src={cover} alt="cover" />
           {isEditable ? (
             <div className={styles.toolbar}>
               <ImageUploader images={images} selectImage={setCover}>
@@ -55,13 +80,7 @@ export const TitleWrapper = ({ editor, node }) => {
           ) : null}
         </div>
       ) : null}
-      {isEditable && !cover ? (
-        <div className={styles.emptyToolbarWrap}>
-          <ButtonGroup size={'small'} theme="light" type="tertiary">
-            {!cover ? <Button onClick={addRandomCover}>添加封面</Button> : null}
-          </ButtonGroup>
-        </div>
-      ) : null}
+      {portals}
       <NodeViewContent></NodeViewContent>
     </NodeViewWrapper>
   );