Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/components/editor/index.tsx
View File

@@ -22,27 +22,16 @@ export const Editor = ({ page, workspace, setEditor }: Props) => {
const editorContainer = useRef<HTMLDivElement>(null);
// const { currentWorkspace, currentPage, setEditor } = useAppState();
useEffect(() => {
let blockHubElement: HTMLElement | null = null;
const ret = () => {
const node = editorContainer.current;
while (node?.firstChild) {
node.removeChild(node.firstChild);
}
blockHubElement?.remove();
};
const editor = new EditorContainer();
editor.page = page;
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;
toolWrapper.appendChild(blockHub);
});
editorContainer.current?.appendChild(editor);
if (page.isEmpty) {
const isFirstPage = workspace?.meta.pageMetas.length === 1;

19
apps/web/src/components/help-island/index.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
StyledIsland,
StyledIconWrapper,
@@ -11,6 +11,7 @@ import { Tooltip } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { useModal } from '@/store/globalModal';
import { MuiFade } from '@affine/component';
import { useAppState } from '@/providers/app-state-provider';
export type IslandItemNames = 'contact' | 'shortcuts';
export const HelpIsland = ({
showList = ['contact', 'shortcuts'],
@@ -19,7 +20,23 @@ export const HelpIsland = ({
}) => {
const [spread, setShowSpread] = useState(false);
const { triggerShortcutsModal, triggerContactModal } = useModal();
const { blockHub } = useAppState();
const { t } = useTranslation();
useEffect(() => {
blockHub?.blockHubStatusUpdated.on(status => {
if (status) {
setShowSpread(false);
}
});
return () => {
blockHub?.blockHubStatusUpdated.dispose();
};
}, [blockHub]);
useEffect(() => {
spread && blockHub?.toggleMenu(false);
}, [blockHub, spread]);
return (
<StyledIsland
spread={spread}

43
apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
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 />
</>
)}
</>
);

11
apps/web/src/providers/app-state-provider/Provider.tsx
View File

@@ -44,6 +44,7 @@ export const AppStateProvider = ({
pageList: [],
currentPage: null,
editor: null,
blockHub: null,
synced: true,
isOwner: false,
});
@@ -127,6 +128,7 @@ export const AppStateProvider = ({
pageList: pageList,
currentPage: null,
editor: null,
blockHub: null,
isOwner,
});
@@ -161,6 +163,14 @@ export const AppStateProvider = ({
editor,
});
};
const setBlockHub: AppStateFunction['setBlockHub'] =
useRef() as AppStateFunction['setBlockHub'];
setBlockHub.current = blockHub => {
setAppState({
...appState,
blockHub,
});
};
const login = async () => {
const { dataCenter } = appState;
@@ -184,6 +194,7 @@ export const AppStateProvider = ({
value={{
...appState,
setEditor,
setBlockHub,
loadPage: loadPage.current,
loadWorkspace: loadWorkspace,
login,

3
apps/web/src/providers/app-state-provider/interface.ts
View File

@@ -1,5 +1,6 @@
import { DataCenter, User, WorkspaceUnit } from '@affine/datacenter';
import type { EditorContainer } from '@blocksuite/editor';
import { BlockHub } from '@blocksuite/blocks';
import type {
Page as StorePage,
@@ -22,6 +23,7 @@ export type AppStateValue = {
pageList: PageMeta[];
currentPage: StorePage | null;
editor?: EditorContainer | null;
blockHub?: BlockHub | null;
synced: boolean;
isOwner?: boolean;
blobDataSynced?: boolean;
@@ -29,6 +31,7 @@ export type AppStateValue = {
export type AppStateFunction = {
setEditor: MutableRefObject<(page: EditorContainer) => void>;
setBlockHub: MutableRefObject<(BlockHub: BlockHub) => void>;
loadWorkspace: MutableRefObject<
(workspaceId: string) => Promise<WorkspaceUnit | null>