feat: expose editor by ref

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

@@ -1,5 +1,5 @@
 /* eslint-disable filename-rules/match */
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router';
 import {
     MuiBox as Box,
@@ -24,6 +24,7 @@ import { WorkspaceName } from './workspace-name';
 import { CollapsiblePageTree } from './collapsible-page-tree';
 import TemplatesPortal from './templates-portal';
 import { useFlag } from '@toeverything/datasource/feature-flags';
+import { type BlockEditor } from '@toeverything/components/editor-core';
 
 type PageProps = {
     workspace: string;
@@ -36,6 +37,7 @@ export function Page(props: PageProps) {
     const { user } = useUserAndSpaces();
     const templatesPortalFlag = useFlag('BooleanTemplatesPortal', false);
     const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
+    const editor = useRef<BlockEditor>();
 
     useEffect(() => {
         if (!user?.id || !page_id) return;
@@ -107,6 +109,7 @@ export function Page(props: PageProps) {
                     <AffineEditor
                         workspace={props.workspace}
                         rootBlockId={page_id}
+                        ref={editor}
                     />
                 ) : (
                     <Box

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

@@ -1,6 +1,10 @@
-import { useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
-import { RenderRoot, RenderBlock } from '@toeverything/components/editor-core';
+import {
+    RenderRoot,
+    RenderBlock,
+    type BlockEditor,
+} from '@toeverything/components/editor-core';
 import { useCurrentEditors } from '@toeverything/datasource/state';
 
 import { createEditor } from './create-editor';
@@ -23,41 +27,40 @@ function useConstant<T>(init: () => T): T {
     return ref.current;
 }
 
-export const AffineEditor = ({
+export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
-    workspace,
+    ({ workspace, rootBlockId, scrollBlank = true, isWhiteboard }, ref) => {
-    rootBlockId,
+        const { setCurrentEditors } = useCurrentEditors();
-    scrollBlank = true,
+        const editor = useConstant(() => {
-    isWhiteboard,
+            const editor = createEditor(workspace, isWhiteboard);
-}: AffineEditorProps) => {
-    const { setCurrentEditors } = useCurrentEditors();
-    const editor = useConstant(() => {
-        const editor = createEditor(workspace, isWhiteboard);
 
-        // @ts-ignore
+            // @ts-ignore
-        globalThis.virgo = editor;
+            globalThis.virgo = editor;
-        return editor;
+            return editor;
-    });
+        });
 
-    useEffect(() => {
+        useImperativeHandle(ref, () => editor);
-        if (rootBlockId) {
-            editor.setRootBlockId(rootBlockId);
-        } else {
-            console.error('rootBlockId for page is required. ');
-        }
-    }, [editor, rootBlockId]);
 
-    useEffect(() => {
+        useEffect(() => {
-        if (!rootBlockId) return;
+            if (rootBlockId) {
-        setCurrentEditors(prev => ({ ...prev, [rootBlockId]: editor }));
+                editor.setRootBlockId(rootBlockId);
-    }, [editor, rootBlockId, setCurrentEditors]);
+            } else {
+                console.error('rootBlockId for page is required. ');
+            }
+        }, [editor, rootBlockId]);
 
-    return (
+        useEffect(() => {
-        <RenderRoot
+            if (!rootBlockId) return;
-            editor={editor}
+            setCurrentEditors(prev => ({ ...prev, [rootBlockId]: editor }));
-            editorElement={AffineEditor as any}
+        }, [editor, rootBlockId, setCurrentEditors]);
-            scrollBlank={scrollBlank}
+
-        >
+        return (
-            <RenderBlock blockId={rootBlockId} />
+            <RenderRoot
-        </RenderRoot>
+                editor={editor}
-    );
+                editorElement={AffineEditor as any}
-};
+                scrollBlank={scrollBlank}
+            >
+                <RenderBlock blockId={rootBlockId} />
+            </RenderRoot>
+        );
+    }
+);