feature: 1. add TOC & adjust get eidtor style;

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -38,14 +38,8 @@ export function Page(props: PageProps) {
     const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
         useShowSpaceSidebar();
     const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
-    const editorRef = useRef(null);
-
     const onTabChange = v => setActiveTab(v);
 
-    const getEditor = editor => {
-        editorRef.current = editor;
-    };
-
     return (
         <LigoApp>
             <LigoLeftContainer style={{ width: fixedDisplay ? '300px' : 0 }}>
@@ -92,16 +86,12 @@ export function Page(props: PageProps) {
                         )}
 
                         {activeTab === TabMap.get(TAB_TITLE.TOC).value && (
-                            <TOC editor={editorRef.current}>TOC</TOC>
+                            <TOC />
                         )}
                     </WorkspaceSidebarContent>
                 </WorkspaceSidebar>
             </LigoLeftContainer>
-            <EditorContainer
+            <EditorContainer workspace={props.workspace} pageId={page_id} />
-                workspace={props.workspace}
-                pageId={page_id}
-                getEditor={getEditor}
-            />
         </LigoApp>
     );
 }
@@ -109,11 +99,9 @@ export function Page(props: PageProps) {
 const EditorContainer = ({
     pageId,
     workspace,
-    getEditor,
 }: {
     pageId: string;
     workspace: string;
-    getEditor: (editor: BlockEditor) => void;
 }) => {
     const [lockScroll, setLockScroll] = useState(false);
     const [scrollContainer, setScrollContainer] = useState<HTMLElement>();
@@ -131,7 +119,6 @@ const EditorContainer = ({
                 setPageClientWidth(e[0].contentRect.width);
             });
 
-            getEditor(editorRef.current);
             obv.observe(scrollContainer);
             return () => obv.disconnect();
         }

apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx

@@ -1,9 +1,12 @@
+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';
@@ -14,7 +17,7 @@ import {
     getContentByAsyncBlocks,
     getPageTOC,
 } from './toc-util';
-import type { ListenerMap, TOCProps, TOCType } from './types';
+import type { ListenerMap, TOCType } from './types';
 
 const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>(
     ({ type, isActive }) => {
@@ -112,8 +115,7 @@ const renderTOCContent = tocDataSource => {
     );
 };
 
-export const TOC = (props: TOCProps) => {
+export const TOC = () => {
-    const { editor } = props;
     const { page_id } = useParams();
     const [tocDataSource, setTocDataSource] = useState<TOCType[]>([]);
     const [activeBlockId, setActiveBlockId] = useState('');
@@ -121,6 +123,11 @@ export const TOC = (props: TOCProps) => {
     /* store page/block unmount-listener */
     const listenerMapRef = useRef<ListenerMap>(new Map());
 
+    const { currentEditors } = useCurrentEditors();
+    const editor = useMemo(() => {
+        return currentEditors[page_id] as Virgo;
+    }, [currentEditors, page_id]);
+
     const updateTocDataSource = useCallback(async () => {
         if (!editor) {
             return null;

apps/ligo-virgo/src/pages/workspace/docs/components/toc/types.ts

@@ -1,6 +1,3 @@
-import type { BlockEditor } from '@toeverything/components/editor-core';
-import type { ReactNode } from 'react';
-
 export type TOCType = {
     id: string;
     type: string;
@@ -8,8 +5,3 @@ export type TOCType = {
 };
 
 export type ListenerMap = Map<string, () => void>;
-
-export interface TOCProps {
-    children: ReactNode;
-    editor?: BlockEditor;
-}

libs/components/editor-core/src/editor/types.ts

@@ -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

@@ -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(() => {
+    /* not useful: 2022.8.25 */
-        if (!workspaceId || !pageId) return;
+    // useEffect(() => {
-        if (pathname.split('/').length >= 3) {
+    //     if (!workspaceId || !pageId) return;
-            setCurrentEditors({});
+    //     if (pathname.split('/').length >= 3) {
-        }
+    //         setCurrentEditors({});
-    }, [pageId, pathname, setCurrentEditors, workspaceId]);
+    //     }
+    // }, [pageId, pathname, setCurrentEditors, workspaceId]);
 
     return {
         currentEditors,