mirror of https://github.com/fantasticit/think.git
update add random cover ui
parent
f1b73d16a5
commit
a6138e93e5
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue