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,12 +27,8 @@ 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,
-    scrollBlank = true,
-    isWhiteboard,
-}: AffineEditorProps) => {
         const { setCurrentEditors } = useCurrentEditors();
         const editor = useConstant(() => {
             const editor = createEditor(workspace, isWhiteboard);
@@ -38,6 +38,8 @@ export const AffineEditor = ({
             return editor;
         });
 
+        useImperativeHandle(ref, () => editor);
+
         useEffect(() => {
             if (rootBlockId) {
                 editor.setRootBlockId(rootBlockId);
@@ -60,4 +62,5 @@ export const AffineEditor = ({
                 <RenderBlock blockId={rootBlockId} />
             </RenderRoot>
         );
-};
+    }
+);