Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-12 23:56:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #326 from toeverything/feature-toc-mitsuha-dev

Browse Source 
Feature toc mitsuha dev
This commit is contained in:
mitsuha(XiWen TU)
2022-08-25 14:47:29 +08:00
committed by GitHub
parent 55da0596e6 aa5dfaf36f
commit 9633ebd486
10 changed files with 372 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
+33 -19
View File
@@ -22,16 +22,23 @@ import { type BlockEditor } from '@toeverything/components/editor-core';
import { useFlag } from '@toeverything/datasource/feature-flags';
import { CollapsiblePageTree } from './collapsible-page-tree';
import { Tabs } from './components/tabs';
import { TabMap, TAB_TITLE } from './components/tabs/Tabs';
import { TOC } from './components/toc';
import { WorkspaceName } from './workspace-name';
type PageProps = {
workspace: string;
};
export function Page(props: PageProps) {
const [activeTab, setActiveTab] = useState(
TabMap.get(TAB_TITLE.PAGES).value
);
const { page_id } = useParams();
const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
useShowSpaceSidebar();
const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
const onTabChange = v => setActiveTab(v);
return (
<LigoApp>
@@ -50,31 +57,37 @@ export function Page(props: PageProps) {
>
<WorkspaceName />
<Tabs />
<Tabs activeTab={activeTab} onTabChange={onTabChange} />
<WorkspaceSidebarContent>
<div>
{dailyNotesFlag && (
{activeTab === TabMap.get(TAB_TITLE.PAGES).value && (
<div>
{dailyNotesFlag && (
<div>
<CollapsibleTitle title="Daily Notes">
<CalendarHeatmap />
</CollapsibleTitle>
</div>
)}
<div>
<CollapsibleTitle title="Daily Notes">
<CalendarHeatmap />
<CollapsibleTitle
title="ACTIVITIES"
initialOpen={false}
>
<Activities />
</CollapsibleTitle>
</div>
)}
<div>
<CollapsibleTitle
title="ACTIVITIES"
initialOpen={false}
>
<Activities />
</CollapsibleTitle>
<div>
<CollapsiblePageTree title="PAGES">
{page_id ? <PageTree /> : null}
</CollapsiblePageTree>
</div>
</div>
<div>
<CollapsiblePageTree title="PAGES">
{page_id ? <PageTree /> : null}
</CollapsiblePageTree>
</div>
</div>
)}
{activeTab === TabMap.get(TAB_TITLE.TOC).value && (
<TOC />
)}
</WorkspaceSidebarContent>
</WorkspaceSidebar>
</LigoLeftContainer>
@@ -105,6 +118,7 @@ const EditorContainer = ({
const obv = new ResizeObserver(e => {
setPageClientWidth(e[0].contentRect.width);
});
obv.observe(scrollContainer);
return () => obv.disconnect();
}
apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx
+19 -17
View File
@@ -1,6 +1,5 @@
import { styled } from '@toeverything/components/ui';
import type { ValueOf } from '@toeverything/utils';
import { useState } from 'react';
const StyledTabs = styled('div')(({ theme }) => {
return {
@@ -56,32 +55,35 @@ const StyledTabTitle = styled('div')<{
}
`;
const TAB_TITLE = {
PAGES: 'pages',
GALLERY: 'gallery',
TOC: 'toc',
export const TAB_TITLE = {
PAGES: 'PAGES',
GALLERY: 'GALLERY',
TOC: 'TOC',
} as const;
const TabMap = new Map<TabKey, { value: TabValue; disabled?: boolean }>([
['PAGES', { value: 'pages' }],
['GALLERY', { value: 'gallery', disabled: true }],
['TOC', { value: 'toc' }],
export const TabMap = new Map<
TabValue,
{ value: TabValue; disabled?: boolean }
>([
[TAB_TITLE.PAGES, { value: TAB_TITLE.PAGES }],
[TAB_TITLE.GALLERY, { value: TAB_TITLE.GALLERY, disabled: true }],
[TAB_TITLE.TOC, { value: TAB_TITLE.TOC }],
]);
type TabKey = keyof typeof TAB_TITLE;
type TabValue = ValueOf<typeof TAB_TITLE>;
const Tabs = () => {
const [activeValue, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
interface Props {
activeTab: TabValue;
onTabChange: (v: TabValue) => void;
}
const onClick = (v: TabValue) => {
setActiveTab(v);
};
const Tabs = (props: Props) => {
const { activeTab, onTabChange } = props;
return (
<StyledTabs>
{[...TabMap.entries()].map(([k, { value, disabled = false }]) => {
const isActive = activeValue === value;
const isActive = activeTab === value;
return (
<StyledTabTitle
@@ -89,7 +91,7 @@ const Tabs = () => {
className={isActive ? 'active' : ''}
isActive={isActive}
isDisabled={disabled}
onClick={() => onClick(value)}
onClick={() => onTabChange(value)}
>
{k}
</StyledTabTitle>
apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
+184
View File
@@ -0,0 +1,184 @@
import type { Virgo } from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import { useCurrentEditors } from '@toeverything/datasource/state';
import {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useParams } from 'react-router';
import { BLOCK_TYPES } from './toc-enum';
import {
destroyEventList,
getContentByAsyncBlocks,
getPageTOC,
} from './toc-util';
import type { ListenerMap, TOCType } from './types';
const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>(
({ type, isActive }) => {
const common = {
height: '32px',
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
color: isActive ? '#3E6FDB' : '#4C6275',
};
if (type === BLOCK_TYPES.HEADING1) {
return {
...common,
padding: '0 12px',
fontWeight: '600',
fontSize: '16px',
};
}
if (type === BLOCK_TYPES.HEADING2) {
return {
...common,
padding: '0 32px',
fontSize: '14px',
};
}
if (type === BLOCK_TYPES.HEADING3) {
return {
...common,
padding: '0 52px',
fontSize: '12px',
};
}
if (type === BLOCK_TYPES.GROUP) {
return {
...common,
margin: '6px 0px',
height: '46px',
padding: '6px 12px',
fontWeight: '600',
fontSize: '16px',
borderTop: '0.5px solid #E0E6EB',
borderBottom: '0.5px solid #E0E6EB',
color: isActive ? '#3E6FDB' : '#98ACBD',
};
}
return {};
}
);
const StyledItem = styled('div')(props => {
return {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
};
});
const TOCContext = createContext(null);
const TOCItem = props => {
const { activeBlockId, onClick } = useContext(TOCContext);
const { id, type, text } = props;
const isActive = id === activeBlockId;
return (
<StyledTOCItem
key={id}
isActive={isActive}
type={type}
onClick={() => onClick(id)}
>
<StyledItem>{text}</StyledItem>
</StyledTOCItem>
);
};
const renderTOCContent = tocDataSource => {
return (
<>
{tocDataSource.map(tocItem => {
if (tocItem?.length) {
return renderTOCContent(tocItem);
}
const { id, type, text } = tocItem;
return <TOCItem key={id} id={id} type={type} text={text} />;
})}
</>
);
};
export const TOC = () => {
const { page_id } = useParams();
const [tocDataSource, setTocDataSource] = useState<TOCType[]>([]);
const [activeBlockId, setActiveBlockId] = useState('');
/* store page/block unmount-listener */
const listenerMapRef = useRef<ListenerMap>(new Map());
const { currentEditors } = useCurrentEditors();
const editor = currentEditors[page_id] as Virgo;
const updateTocDataSource = useCallback(async () => {
if (!editor) {
return null;
}
const listenerMap = listenerMapRef.current;
/* page listener: trigger update-notice when add new group */
const pageAsyncBlock = (await editor.getBlockByIds([page_id]))?.[0];
if (!listenerMap.has(pageAsyncBlock.id)) {
listenerMap.set(
pageAsyncBlock.id,
pageAsyncBlock.onUpdate(updateTocDataSource)
);
}
/* block listener: trigger update-notice when change block content */
const { children = [] } =
(await editor.queryByPageId(page_id))?.[0] || {};
const asyncBlocks = (await editor.getBlockByIds(children)) || [];
const { tocContents } = await getContentByAsyncBlocks(
asyncBlocks,
updateTocDataSource,
listenerMap
);
/* toc: flat content */
const tocDataSource = getPageTOC(asyncBlocks, tocContents);
setTocDataSource(tocDataSource);
}, [editor, page_id]);
/* init toc and add page/block update-listener & unmount-listener */
useEffect(() => {
(async () => {
await updateTocDataSource();
})();
/* remove listener when unmount component */
return () => destroyEventList(listenerMapRef.current);
}, [updateTocDataSource]);
const onClick = async (blockId?: string) => {
if (blockId === activeBlockId) {
return;
}
setActiveBlockId(blockId);
await editor.scrollManager.scrollIntoViewByBlockId(blockId);
};
return (
<TOCContext.Provider value={{ activeBlockId, onClick }}>
<div>{renderTOCContent(tocDataSource)}</div>
</TOCContext.Provider>
);
};
apps/ligo-virgo/src/pages/workspace/docs/components/toc/index.ts
+1
View File
@@ -0,0 +1 @@
export { TOC } from './TOC';
apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc-enum.ts
+6
View File
@@ -0,0 +1,6 @@
export enum BLOCK_TYPES {
GROUP = 'group',
HEADING1 = 'heading1',
HEADING2 = 'heading2',
HEADING3 = 'heading3',
}
apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc-util.ts
+96
View File
@@ -0,0 +1,96 @@
import { AsyncBlock } from '@toeverything/components/editor-core';
import { BLOCK_TYPES } from './toc-enum';
import type { ListenerMap, TOCType } from './types';
/* 😞😞sorry, I don't know how to define unlimited dimensions array */
const getContentByAsyncBlocks = async (
asyncBlocks: AsyncBlock[] = [],
callback: () => void,
listenerMap: ListenerMap
): Promise<{
tocContents: any[];
}> => {
const collect = async (asyncBlocks): Promise<any[]> => {
/* maybe should recast it to tail recursion */
return await Promise.all(
asyncBlocks.map(async (asyncBlock: AsyncBlock) => {
const asyncBlocks = await asyncBlock?.children();
if (asyncBlocks?.length) {
return collect(asyncBlocks);
}
/* add only once event listener for every block */
if (!listenerMap.has(asyncBlock?.id)) {
/* get update notice */
const destroyHandler = asyncBlock?.onUpdate(callback);
/* collect destroy handlers */
listenerMap.set(asyncBlock?.id, destroyHandler);
}
const { id, type } = asyncBlock;
switch (type) {
case BLOCK_TYPES.GROUP:
case BLOCK_TYPES.HEADING1:
case BLOCK_TYPES.HEADING2:
case BLOCK_TYPES.HEADING3: {
const properties = await asyncBlock?.getProperties();
return {
id,
type,
text: properties?.text?.value?.[0]?.text || '',
};
}
default:
return null;
}
})
);
};
return {
tocContents: await collect(asyncBlocks),
};
};
/**
* get flat toc
* @param asyncBlocks
* @param tocContents
*/
const getPageTOC = (asyncBlocks: AsyncBlock[], tocContents): TOCType[] => {
return tocContents
.reduce((tocGroupContent, tocContent, index) => {
const { id, type } = asyncBlocks[index];
const groupContent = {
id,
type,
text: 'Untitled Group',
};
tocGroupContent.push(
!tocContent.flat(Infinity).filter(Boolean).length
? groupContent
: tocContent
);
return tocGroupContent;
}, [])
.flat(Infinity)
.filter(Boolean);
};
/* destroy page/block update-listener */
const destroyEventList = (listenerMap: ListenerMap) => {
const eventListeners = listenerMap.values();
listenerMap.clear();
for (const eventListener of eventListeners) {
eventListener?.();
}
};
export { getPageTOC, getContentByAsyncBlocks, destroyEventList };
apps/ligo-virgo/src/pages/workspace/docs/components/toc/types.ts
+7
View File
@@ -0,0 +1,7 @@
export type TOCType = {
id: string;
type: string;
text: string;
};
export type ListenerMap = Map<string, () => void>;
libs/components/editor-core/src/editor/editor.ts
+13
View File
@@ -346,6 +346,12 @@ export class Editor implements Virgo {
return await this.getBlock({ workspace: this.workspace, id: blockId });
}
async getBlockByIds(ids: string[]): Promise<Awaited<AsyncBlock | null>[]> {
return await Promise.all(
ids.map(id => this.getBlock({ workspace: this.workspace, id }))
);
}
/**
* TODO: to be optimized
* get block`s dom by block`s id
@@ -490,6 +496,13 @@ export class Editor implements Virgo {
return await services.api.editorBlock.query(this.workspace, query);
}
async queryByPageId(pageId: string) {
return await services.api.editorBlock.get({
workspace: this.workspace,
ids: [pageId],
});
}
/** Hooks */
public getHooks(): HooksRunner & PluginHooks {
libs/components/editor-core/src/editor/types.ts
+6 -1
View File
@@ -9,7 +9,10 @@
* 6. Dependencies between plugins are not supported for the time being
*/
import type { PatchNode } from '@toeverything/components/ui';
import type { BlockFlavors } from '@toeverything/datasource/db-service';
import type {
BlockFlavors,
ReturnEditorBlock,
} from '@toeverything/datasource/db-service';
import type { IdList, SelectionInfo, SelectionManager } from './selection';
import { Point } from '@toeverything/utils';
@@ -67,6 +70,8 @@ export interface Virgo {
) => Promise<AsyncBlock>;
getRootBlockId: () => string;
getBlockById(blockId: string): Promise<AsyncBlock | null>;
getBlockByIds(blockId: string[]): Promise<(AsyncBlock | null)[]>;
queryByPageId(pageId: string): Promise<(ReturnEditorBlock | null)[]>;
setHotKeysScope(scope?: string): void;
getBlockList: () => Promise<AsyncBlock[]>;
getBlockListByLevelOrder: () => Promise<AsyncBlock[]>;
libs/datasource/state/src/page.ts
+7 -7
View File
@@ -1,5 +1,4 @@
import { atom, useAtom } from 'jotai';
import { useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
// import { Virgo } from '@toeverything/components/editor-core';
@@ -14,12 +13,13 @@ export const useCurrentEditors = () => {
const { pathname } = useLocation();
const [currentEditors, setCurrentEditors] = useAtom(_currentEditors);
useEffect(() => {
if (!workspaceId || !pageId) return;
if (pathname.split('/').length >= 3) {
setCurrentEditors({});
}
}, [pageId, pathname, setCurrentEditors, workspaceId]);
/* not useful: 2022.8.25 */
// useEffect(() => {
// if (!workspaceId || !pageId) return;
// if (pathname.split('/').length >= 3) {
// setCurrentEditors({});
// }
// }, [pageId, pathname, setCurrentEditors, workspaceId]);
return {
currentEditors,