update add random cover ui

pull/238/head
fantasticit 2023-01-08 14:05:57 +08:00
parent f1b73d16a5
commit a6138e93e5
1 changed files with 21 additions and 6 deletions

View File

@ -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>
);