luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 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 editorContainer = useRef<HTMLDivElement>(null);
// const { currentWorkspace, currentPage, setEditor } = useAppState(); // const { currentWorkspace, currentPage, setEditor } = useAppState();
useEffect(() => { useEffect(() => {
let blockHubElement: HTMLElement | null = null;
const ret = () => { const ret = () => {
const node = editorContainer.current; const node = editorContainer.current;
while (node?.firstChild) { while (node?.firstChild) {
node.removeChild(node.firstChild); node.removeChild(node.firstChild);
} }
blockHubElement?.remove();
}; };
const editor = new EditorContainer(); const editor = new EditorContainer();
editor.page = page; 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); editorContainer.current?.appendChild(editor);
if (page.isEmpty) { if (page.isEmpty) {
const isFirstPage = workspace?.meta.pageMetas.length === 1; 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 { import {
StyledIsland, StyledIsland,
StyledIconWrapper, StyledIconWrapper,
@@ -11,6 +11,7 @@ import { Tooltip } from '@affine/component';
import { useTranslation } from '@affine/i18n'; import { useTranslation } from '@affine/i18n';
import { useModal } from '@/store/globalModal'; import { useModal } from '@/store/globalModal';
import { MuiFade } from '@affine/component'; import { MuiFade } from '@affine/component';
import { useAppState } from '@/providers/app-state-provider';
export type IslandItemNames = 'contact' | 'shortcuts'; export type IslandItemNames = 'contact' | 'shortcuts';
export const HelpIsland = ({ export const HelpIsland = ({
showList = ['contact', 'shortcuts'], showList = ['contact', 'shortcuts'],
@@ -19,7 +20,23 @@ export const HelpIsland = ({
}) => { }) => {
const [spread, setShowSpread] = useState(false); const [spread, setShowSpread] = useState(false);
const { triggerShortcutsModal, triggerContactModal } = useModal(); const { triggerShortcutsModal, triggerContactModal } = useModal();
const { blockHub } = useAppState();
const { t } = useTranslation(); 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 ( return (
<StyledIsland <StyledIsland
spread={spread} 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 { EditorContainer } from '@blocksuite/editor';
import Head from 'next/head'; import Head from 'next/head';
import { useTranslation } from '@affine/i18n'; import { useTranslation } from '@affine/i18n';
import { BlockHub } from '@blocksuite/blocks';
const DynamicBlocksuite = dynamic(() => import('@/components/editor'), { const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
ssr: false, 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 Page: NextPageWithLayout = () => {
const { currentPage, currentWorkspace, setEditor } = useAppState(); const { currentPage, currentWorkspace, setEditor } = useAppState();
@@ -26,7 +54,9 @@ const Page: NextPageWithLayout = () => {
(editor: EditorContainer) => setEditor.current(editor), (editor: EditorContainer) => setEditor.current(editor),
[setEditor] [setEditor]
); );
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
<Head> <Head>
@@ -36,11 +66,14 @@ const Page: NextPageWithLayout = () => {
<MobileModal /> <MobileModal />
{currentPage && currentWorkspace?.blocksuiteWorkspace && ( {currentPage && currentWorkspace?.blocksuiteWorkspace && (
<DynamicBlocksuite <>
page={currentPage} <DynamicBlocksuite
workspace={currentWorkspace.blocksuiteWorkspace} page={currentPage}
setEditor={setEditorHandler} 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: [], pageList: [],
currentPage: null, currentPage: null,
editor: null, editor: null,
blockHub: null,
synced: true, synced: true,
isOwner: false, isOwner: false,
}); });
@@ -127,6 +128,7 @@ export const AppStateProvider = ({
pageList: pageList, pageList: pageList,
currentPage: null, currentPage: null,
editor: null, editor: null,
blockHub: null,
isOwner, isOwner,
}); });
@@ -161,6 +163,14 @@ export const AppStateProvider = ({
editor, editor,
}); });
}; };
const setBlockHub: AppStateFunction['setBlockHub'] =
useRef() as AppStateFunction['setBlockHub'];
setBlockHub.current = blockHub => {
setAppState({
...appState,
blockHub,
});
};
const login = async () => { const login = async () => {
const { dataCenter } = appState; const { dataCenter } = appState;
@@ -184,6 +194,7 @@ export const AppStateProvider = ({
value={{ value={{
...appState, ...appState,
setEditor, setEditor,
setBlockHub,
loadPage: loadPage.current, loadPage: loadPage.current,
loadWorkspace: loadWorkspace, loadWorkspace: loadWorkspace,
login, 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 { DataCenter, User, WorkspaceUnit } from '@affine/datacenter';
import type { EditorContainer } from '@blocksuite/editor'; import type { EditorContainer } from '@blocksuite/editor';
import { BlockHub } from '@blocksuite/blocks';
import type { import type {
Page as StorePage, Page as StorePage,
@@ -22,6 +23,7 @@ export type AppStateValue = {
pageList: PageMeta[]; pageList: PageMeta[];
currentPage: StorePage | null; currentPage: StorePage | null;
editor?: EditorContainer | null; editor?: EditorContainer | null;
blockHub?: BlockHub | null;
synced: boolean; synced: boolean;
isOwner?: boolean; isOwner?: boolean;
blobDataSynced?: boolean; blobDataSynced?: boolean;
@@ -29,6 +31,7 @@ export type AppStateValue = {
export type AppStateFunction = { export type AppStateFunction = {
setEditor: MutableRefObject<(page: EditorContainer) => void>; setEditor: MutableRefObject<(page: EditorContainer) => void>;
setBlockHub: MutableRefObject<(BlockHub: BlockHub) => void>;
loadWorkspace: MutableRefObject< loadWorkspace: MutableRefObject<
(workspaceId: string) => Promise<WorkspaceUnit | null> (workspaceId: string) => Promise<WorkspaceUnit | null>

1
packages/i18n/src/resources/ru.json
View File

@@ -167,6 +167,7 @@
"Shortcuts": "Ярлыки", "Shortcuts": "Ярлыки",
"Share with link": "Поделиться ссылкой", "Share with link": "Поделиться ссылкой",
"Set up an AFFiNE account to sync data": "Настройте учетную запись AFFiNE для синхронизации данных", "Set up an AFFiNE account to sync data": "Настройте учетную запись AFFiNE для синхронизации данных",
"Restore it": "Восстановить",
"Reduce indent": "Уменьшить отступ", "Reduce indent": "Уменьшить отступ",
"Got it": "Понятно", "Got it": "Понятно",
"Get in touch!": "Связаться!", "Get in touch!": "Связаться!",