feat: modify blockhub & help island interation (#960)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>
This commit is contained in:
Qi
2023-02-14 11:22:39 +08:00
committed by GitHub
parent a47b612a2c
commit 36e6da52a5
6 changed files with 72 additions and 18 deletions

View File

@@ -16,9 +16,37 @@ import dynamic from 'next/dynamic';
import { EditorContainer } from '@blocksuite/editor';
import Head from 'next/head';
import { useTranslation } from '@affine/i18n';
import { BlockHub } from '@blocksuite/blocks';
const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
ssr: false,
});
const BlockHubAppender = () => {
const { setBlockHub, editor } = useAppState();
const setBlockHubHandler = useCallback(
(blockHub: BlockHub) => setBlockHub.current(blockHub),
[setBlockHub]
);
useEffect(() => {
let blockHubElement: HTMLElement | null = null;
editor?.createBlockHub().then(blockHub => {
const toolWrapper = document.querySelector('#toolWrapper');
if (!toolWrapper) {
// In an invitation page there is no toolWrapper, which contains helper icon and blockHub icon
return;
}
blockHubElement = blockHub;
// setBlockHubHandler(blockHub);
toolWrapper.appendChild(blockHub);
});
return () => {
blockHubElement?.remove();
};
}, [editor, setBlockHubHandler]);
return null;
};
const Page: NextPageWithLayout = () => {
const { currentPage, currentWorkspace, setEditor } = useAppState();
@@ -26,7 +54,9 @@ const Page: NextPageWithLayout = () => {
(editor: EditorContainer) => setEditor.current(editor),
[setEditor]
);
const { t } = useTranslation();
return (
<>
<Head>
@@ -36,11 +66,14 @@ const Page: NextPageWithLayout = () => {
<MobileModal />
{currentPage && currentWorkspace?.blocksuiteWorkspace && (
<DynamicBlocksuite
page={currentPage}
workspace={currentWorkspace.blocksuiteWorkspace}
setEditor={setEditorHandler}
/>
<>
<DynamicBlocksuite
page={currentPage}
workspace={currentWorkspace.blocksuiteWorkspace}
setEditor={setEditorHandler}
/>
<BlockHubAppender />
</>
)}
</>
);