fix(plugin): make group menu invisible when leave

apps/ligo-virgo/src/index.tsx

@@ -16,13 +16,11 @@ if (!container) {
 }
 const root = createRoot(container);
 root.render(
-    <StrictMode>
+    <BrowserRouter>
-        <BrowserRouter>
+        <ThemeProvider>
-            <ThemeProvider>
+            <FeatureFlagsProvider>
-                <FeatureFlagsProvider>
+                <LigoVirgoRoutes />
-                    <LigoVirgoRoutes />
+            </FeatureFlagsProvider>
-                </FeatureFlagsProvider>
+        </ThemeProvider>
-            </ThemeProvider>
+    </BrowserRouter>
-        </BrowserRouter>
-    </StrictMode>
 );

libs/components/affine-board/src/Board.tsx

@@ -113,19 +113,19 @@ export const AffineBoardWitchContext = ({
     workspace,
     rootBlockId,
 }: AffineBoardProps) => {
-    const [editor, set_editor] = useState<BlockEditor>();
+    const [editor, setEditor] = useState<BlockEditor>();
     useEffect(() => {
-        const inner_editor = createEditor(workspace, true);
+        const innerEditor = createEditor(workspace, rootBlockId, true);
-        set_editor(inner_editor);
+        setEditor(innerEditor);
         return () => {
-            inner_editor.dispose();
+            innerEditor.dispose();
         };
-    }, [workspace]);
+    }, [workspace, rootBlockId]);
 
-    const [page, set_page] = useState<AsyncBlock>();
+    const [page, setPage] = useState<AsyncBlock>();
     useEffect(() => {
         editor?.getBlockById(rootBlockId).then(block => {
-            set_page(block);
+            setPage(block);
         });
     }, [editor, rootBlockId]);
     return page ? (

libs/components/affine-editor/src/Editor.tsx

@@ -20,46 +20,55 @@ interface AffineEditorProps {
     isWhiteboard?: boolean;
 }
 
-function useConstant<T>(init: () => T): T {
+function _useConstantWithDispose(
-    const ref = useRef<T>(null);
+    workspace: string,
-    ref.current ??= init();
+    rootBlockId: string,
+    isWhiteboard: boolean
+) {
+    const ref = useRef<{ data: BlockEditor; onInit: boolean }>(null);
+    const { setCurrentEditors } = useCurrentEditors();
+    ref.current ??= {
+        data: createEditor(workspace, rootBlockId, isWhiteboard),
+        onInit: true,
+    };
 
-    return ref.current;
+    useEffect(() => {
+        if (ref.current.onInit) {
+            ref.current.onInit = false;
+        } else {
+            ref.current.data = createEditor(
+                workspace,
+                rootBlockId,
+                isWhiteboard
+            );
+        }
+        setCurrentEditors(prev => ({
+            ...prev,
+            [rootBlockId]: ref.current.data,
+        }));
+        return () => ref.current.data.dispose();
+    }, [workspace, rootBlockId, isWhiteboard, setCurrentEditors]);
+
+    return ref.current.data;
 }
 
 export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
     ({ workspace, rootBlockId, scrollBlank = true, isWhiteboard }, ref) => {
-        const { setCurrentEditors } = useCurrentEditors();
+        const editor = _useConstantWithDispose(
-        const editor = useConstant(() => {
+            workspace,
-            const editor = createEditor(workspace, isWhiteboard);
+            rootBlockId,
-
+            isWhiteboard
-            // @ts-ignore
+        );
-            globalThis.virgo = editor;
-            return editor;
-        });
 
         useImperativeHandle(ref, () => editor);
 
-        useEffect(() => {
-            if (rootBlockId) {
-                editor.setRootBlockId(rootBlockId);
-            } else {
-                console.error('rootBlockId for page is required. ');
-            }
-        }, [editor, rootBlockId]);
-
-        useEffect(() => {
-            if (!rootBlockId) return;
-            setCurrentEditors(prev => ({ ...prev, [rootBlockId]: editor }));
-        }, [editor, rootBlockId, setCurrentEditors]);
-
         return (
             <RenderRoot
                 editor={editor}
                 editorElement={AffineEditor as any}
                 scrollBlank={scrollBlank}
             >
-                <RenderBlock blockId={rootBlockId} />
+                <RenderBlock blockId={editor.getRootBlockId()} />
             </RenderRoot>
         );
     }

libs/components/affine-editor/src/create-editor.ts

@@ -27,9 +27,14 @@ import {
 import { Protocol } from '@toeverything/datasource/db-service';
 import { plugins } from '@toeverything/components/editor-plugins';
 
-export const createEditor = (workspace: string, isWhiteboard?: boolean) => {
+export const createEditor = (
+    workspace: string,
+    rootBlockId: string,
+    isWhiteboard?: boolean
+) => {
     const blockEditor = new BlockEditor({
         workspace,
+        rootBlockId,
         views: {
             [Protocol.Block.Type.page]: new PageBlock(),
             [Protocol.Block.Type.reference]: new RefLinkBlock(),

libs/components/common/src/lib/list/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useState } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useNavigate } from 'react-router';
 import clsx from 'clsx';
 import style9 from 'style9';
 
@@ -17,7 +17,6 @@ import { BlockPreview } from '../block-preview';
 import { BackwardUndoIcon } from '@toeverything/components/icons';
 
 export const commonListContainer = 'commonListContainer';
-import { useFlag } from '@toeverything/datasource/feature-flags';
 
 type Content = {
     id: string;

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

@@ -40,7 +40,7 @@ export interface EditorCtorProps {
     workspace: string;
     views: Partial<Record<keyof BlockFlavors, BaseView>>;
     plugins: PluginCreator[];
-    rootBlockId?: string;
+    rootBlockId: string;
     isWhiteboard?: boolean;
 }
 
@@ -65,7 +65,7 @@ export class Editor implements Virgo {
     private views: Record<string, BaseView> = {};
     workspace: string;
     readonly = false;
-    private root_block_id: string;
+    private _rootBlockId: string;
     private storage_manager?: StorageManager;
     private clipboard?: BrowserClipboard;
     private clipboard_populator?: ClipboardPopulator;
@@ -79,7 +79,7 @@ export class Editor implements Virgo {
     constructor(props: EditorCtorProps) {
         this.workspace = props.workspace;
         this.views = props.views;
-        this.root_block_id = props.rootBlockId || '';
+        this._rootBlockId = props.rootBlockId;
         this.hooks = new Hooks();
         this.plugin_manager = new PluginManager(this, this.hooks);
         this.plugin_manager.registerAll(props.plugins);
@@ -108,9 +108,9 @@ export class Editor implements Virgo {
         }
         this.bdCommands = new Commands(props.workspace);
 
-        services.api.editorBlock.listenConnectivity(this.workspace, state => {
+        // services.api.editorBlock.listenConnectivity(this.workspace, state => {
-            console.log(this.workspace, state);
+        //     console.log(this.workspace, state);
-        });
+        // });
 
         services.api.editorBlock.onHistoryChange(
             this.workspace,
@@ -193,11 +193,7 @@ export class Editor implements Virgo {
 
     /** Root Block Id */
     getRootBlockId() {
-        return this.root_block_id;
+        return this._rootBlockId;
-    }
-
-    setRootBlockId(rootBlockId: string) {
-        this.root_block_id = rootBlockId;
     }
 
     setHotKeysScope(scope?: string) {

libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx

@@ -32,7 +32,11 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
                 await editor.dragDropManager.getGroupBlockByPoint(
                     new Point(e.clientX, e.clientY)
                 );
-            groupBlockNew && setGroupBlock(groupBlockNew || null);
+            if (groupBlockNew) {
+                setGroupBlock(groupBlockNew);
+            } else {
+                setGroupBlock(null);
+            }
         },
         [editor, setGroupBlock]
     );

libs/components/layout/src/settings-sidebar/Settings/util/handle-export.ts

@@ -11,8 +11,7 @@ const createClipboardParse = ({
     workspaceId,
     rootBlockId,
 }: CreateClipboardParseProps) => {
-    const editor = createEditor(workspaceId);
+    const editor = createEditor(workspaceId, rootBlockId);
-    editor.setRootBlockId(rootBlockId);
 
     return new ClipboardParse(editor);
 };