refactor(component): adjust active editor atom (#5457)

before:

set global `blocksuiteEditorAtom` state in `<BlocksuiteEditorImpl />`

after:

Rename `blocksuiteEditorAtom` to `activeBlocksuiteEditorAtom`

And move the logic of setting this atom to `<PageDetailEditor />`.

benefit:

* make BlocksuiteEditor pure
* keep @toeverything/component clear
* Clarify the purpose of `activeBlocksuiteEditorAtom`

packages/frontend/component/src/components/block-suite-editor/index.tsx

@@ -1,11 +1,11 @@
 import { assertExists } from '@blocksuite/global/utils';
 import { AffineEditorContainer } from '@blocksuite/presets';
 import type { Page } from '@blocksuite/store';
-import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
 import clsx from 'clsx';
 import { use } from 'foxact/use';
 import type { CSSProperties, ReactElement } from 'react';
 import {
+  forwardRef,
   memo,
   Suspense,
   useEffect,
@@ -137,7 +137,9 @@ function usePageRoot(page: Page) {
   return page.root;
 }
 
-const BlockSuiteEditorImpl = ({
+const BlockSuiteEditorImpl = forwardRef<AffineEditorContainer, EditorProps>(
+  (
+    {
       mode,
       page,
       className,
@@ -145,10 +147,11 @@ const BlockSuiteEditorImpl = ({
       onLoadEditor,
       onModeChange,
       style,
-}: EditorProps): ReactElement => {
+    },
+    ref
+  ): ReactElement => {
     usePageRoot(page);
 
-  const [, setEditorContainer] = useBlocksuiteEditor();
     assertExists(page, 'page should not be null');
     const editorRef = useRef<AffineEditorContainer | null>(null);
     if (editorRef.current === null) {
@@ -168,6 +171,14 @@ const BlockSuiteEditorImpl = ({
       editor.edgelessSpecs = editorSpecs.edgelessModeSpecs;
     }
 
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(editor);
+      } else {
+        ref.current = editor;
+      }
+    }
+
     useLayoutEffect(() => {
       if (editor) {
         const disposes: (() => void)[] = [];
@@ -193,12 +204,10 @@ const BlockSuiteEditorImpl = ({
         return;
       }
       container.append(editor);
-    setEditorContainer(editor);
       return () => {
         editor.remove();
-      setEditorContainer(null);
       };
-  }, [editor, setEditorContainer]);
+    }, [editor]);
 
     const blockElement = useBlockElementById(
       containerRef.current,
@@ -234,7 +243,9 @@ const BlockSuiteEditorImpl = ({
         ref={containerRef}
       />
     );
-};
+  }
+);
+BlockSuiteEditorImpl.displayName = 'BlockSuiteEditorImpl';
 
 export const EditorLoading = memo(function EditorLoading() {
   return (
@@ -249,14 +260,16 @@ export const EditorLoading = memo(function EditorLoading() {
   );
 });
 
-export const BlockSuiteEditor = memo(function BlockSuiteEditor(
-  props: EditorProps
-): ReactElement {
+export const BlockSuiteEditor = memo(
+  forwardRef<AffineEditorContainer, EditorProps>(
+    function BlockSuiteEditor(props, ref): ReactElement {
       return (
         <Suspense fallback={<EditorLoading />}>
-      <BlockSuiteEditorImpl key={props.page.id} {...props} />
+          <BlockSuiteEditorImpl key={props.page.id} ref={ref} {...props} />
         </Suspense>
       );
-});
+    }
+  )
+);
 
 BlockSuiteEditor.displayName = 'BlockSuiteEditor';

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -3,12 +3,21 @@ import './page-detail-editor.css';
 import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Page, Workspace } from '@blocksuite/store';
+import { useActiveBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
 import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
 import { fontStyleOptions } from '@toeverything/infra/atom';
 import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
-import { memo, Suspense, useCallback, useMemo, useState } from 'react';
+import {
+  memo,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { type PageMode, pageSettingFamily } from '../atoms';
@@ -115,6 +124,13 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
     [onLoad, page]
   );
 
+  const [, setActiveBlocksuiteEditor] = useActiveBlocksuiteEditor();
+  const editor = useRef<AffineEditorContainer>(null);
+
+  useEffect(() => {
+    setActiveBlocksuiteEditor(editor.current);
+  }, [setActiveBlocksuiteEditor]);
+
   return (
     <Editor
       className={clsx(styles.editor, {
@@ -131,6 +147,7 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
       onModeChange={setEditorMode}
       defaultSelectedBlockId={blockId}
       onLoadEditor={onLoadEditor}
+      ref={editor}
     />
   );
 });

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.tsx

@@ -1,7 +1,7 @@
 import { assertExists } from '@blocksuite/global/utils';
 import { AiIcon } from '@blocksuite/icons';
 import { CopilotPanel } from '@blocksuite/presets';
-import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
+import { useActiveBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
 import { useCallback, useRef } from 'react';
 
 import type { EditorExtension } from '../types';
@@ -10,7 +10,7 @@ import * as styles from './outline.css';
 // A wrapper for CopilotPanel
 const EditorCopilotPanel = () => {
   const copilotPanelRef = useRef<CopilotPanel | null>(null);
-  const [editor] = useBlocksuiteEditor();
+  const [editor] = useActiveBlocksuiteEditor();
 
   const onRefChange = useCallback((container: HTMLDivElement | null) => {
     if (container) {

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.tsx

@@ -1,7 +1,7 @@
 import { assertExists } from '@blocksuite/global/utils';
 import { FrameIcon } from '@blocksuite/icons';
 import { FramePanel } from '@blocksuite/presets';
-import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
+import { useActiveBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
 import { useCallback, useRef } from 'react';
 
 import type { EditorExtension } from '../types';
@@ -11,7 +11,7 @@ import * as styles from './frame.css';
 const EditorFramePanel = () => {
   const framePanelRef = useRef<FramePanel | null>(null);
 
-  const [editor] = useBlocksuiteEditor();
+  const [editor] = useActiveBlocksuiteEditor();
 
   const onRefChange = useCallback((container: HTMLDivElement | null) => {
     if (container) {

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.tsx

@@ -1,7 +1,7 @@
 import { assertExists } from '@blocksuite/global/utils';
 import { TocIcon } from '@blocksuite/icons';
 import { TOCPanel } from '@blocksuite/presets';
-import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
+import { useActiveBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
 import { useCallback, useRef } from 'react';
 
 import type { EditorExtension } from '../types';
@@ -10,7 +10,7 @@ import * as styles from './outline.css';
 // A wrapper for TOCNotesPanel
 const EditorOutline = () => {
   const tocPanelRef = useRef<TOCPanel | null>(null);
-  const [editor] = useBlocksuiteEditor();
+  const [editor] = useActiveBlocksuiteEditor();
 
   const onRefChange = useCallback((container: HTMLDivElement | null) => {
     if (container) {

packages/frontend/hooks/src/use-block-suite-editor.ts

@@ -1,13 +1,15 @@
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import { atom, type SetStateAction, useAtom } from 'jotai';
 
-const editorContainerAtom = atom<AffineEditorContainer | null>(null);
+const activeEditorContainerAtom = atom<AffineEditorContainer | null>(null);
 
-export function useBlocksuiteEditor(): [
+export function useActiveBlocksuiteEditor(): [
   AffineEditorContainer | null,
   React.Dispatch<SetStateAction<AffineEditorContainer | null>>,
 ] {
-  const [editorContainer, setEditorContainer] = useAtom(editorContainerAtom);
+  const [editorContainer, setEditorContainer] = useAtom(
+    activeEditorContainerAtom
+  );
 
   return [editorContainer, setEditorContainer];
 }