feat: add useBlocksuiteEditor hooks (#5366)

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

@@ -1,4 +0,0 @@
-import type { AffineEditorContainer } from '@blocksuite/presets';
-import { atom } from 'jotai';
-
-export const editorContainerAtom = atom<AffineEditorContainer | null>(null);

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

@@ -1,9 +1,9 @@
 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 { useAtom } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
 import {
   memo,
@@ -20,11 +20,8 @@ import {
   blockSuiteEditorHeaderStyle,
   blockSuiteEditorStyle,
 } from './index.css';
-import { editorContainerAtom } from './index.jotai';
 import { editorSpecs } from './specs';
 
-export { editorContainerAtom } from './index.jotai';
-
 interface BlockElement extends Element {
   path: string[];
 }
@@ -151,7 +148,7 @@ const BlockSuiteEditorImpl = ({
 }: EditorProps): ReactElement => {
   usePageRoot(page);
 
-  const [, setEditorContainer] = useAtom(editorContainerAtom);
+  const [, setEditorContainer] = useBlocksuiteEditor();
   assertExists(page, 'page should not be null');
   const editorRef = useRef<AffineEditorContainer | null>(null);
   if (editorRef.current === null) {
@@ -191,8 +188,6 @@ const BlockSuiteEditorImpl = ({
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const editor = editorRef.current;
-    assertExists(editor);
     const container = containerRef.current;
     if (!container) {
       return;
@@ -201,6 +196,7 @@ const BlockSuiteEditorImpl = ({
     setEditorContainer(editor);
     return () => {
       editor.remove();
+      setEditorContainer(null);
     };
   }, [editor, setEditorContainer]);
 

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

@@ -1,8 +1,7 @@
-import { editorContainerAtom } from '@affine/component/block-suite-editor';
 import { assertExists } from '@blocksuite/global/utils';
 import { AiIcon } from '@blocksuite/icons';
 import { CopilotPanel } from '@blocksuite/presets';
-import { useAtom } from 'jotai';
+import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
 import { useCallback, useRef } from 'react';
 
 import type { EditorExtension } from '../types';
@@ -11,7 +10,7 @@ import * as styles from './outline.css';
 // A wrapper for CopilotPanel
 const EditorCopilotPanel = () => {
   const copilotPanelRef = useRef<CopilotPanel | null>(null);
-  const [editorContainer] = useAtom(editorContainerAtom);
+  const [editor] = useBlocksuiteEditor();
 
   const onRefChange = useCallback((container: HTMLDivElement | null) => {
     if (container) {
@@ -23,7 +22,7 @@ const EditorCopilotPanel = () => {
     }
   }, []);
 
-  if (!editorContainer) {
+  if (!editor) {
     return;
   }
 
@@ -31,8 +30,8 @@ const EditorCopilotPanel = () => {
     copilotPanelRef.current = new CopilotPanel();
   }
 
-  if (editorContainer !== copilotPanelRef.current?.editor) {
-    (copilotPanelRef.current as CopilotPanel).editor = editorContainer;
+  if (editor !== copilotPanelRef.current?.editor) {
+    (copilotPanelRef.current as CopilotPanel).editor = editor;
     // (copilotPanelRef.current as CopilotPanel).fitPadding = [20, 20, 20, 20];
   }
 

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

@@ -1,8 +1,7 @@
-import { editorContainerAtom } from '@affine/component/block-suite-editor';
 import { assertExists } from '@blocksuite/global/utils';
 import { FrameIcon } from '@blocksuite/icons';
 import { FramePanel } from '@blocksuite/presets';
-import { useAtom } from 'jotai';
+import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
 import { useCallback, useRef } from 'react';
 
 import type { EditorExtension } from '../types';
@@ -11,7 +10,8 @@ import * as styles from './frame.css';
 // A wrapper for FramePanel
 const EditorFramePanel = () => {
   const framePanelRef = useRef<FramePanel | null>(null);
-  const [editorContainer] = useAtom(editorContainerAtom);
+
+  const [editor] = useBlocksuiteEditor();
 
   const onRefChange = useCallback((container: HTMLDivElement | null) => {
     if (container) {
@@ -20,7 +20,7 @@ const EditorFramePanel = () => {
     }
   }, []);
 
-  if (!editorContainer) {
+  if (!editor) {
     return;
   }
 
@@ -28,8 +28,8 @@ const EditorFramePanel = () => {
     framePanelRef.current = new FramePanel();
   }
 
-  if (editorContainer !== framePanelRef.current?.editor) {
-    (framePanelRef.current as FramePanel).editor = editorContainer;
+  if (editor !== framePanelRef.current?.editor) {
+    (framePanelRef.current as FramePanel).editor = editor;
     (framePanelRef.current as FramePanel).fitPadding = [20, 20, 20, 20];
   }
 

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

@@ -1,8 +1,7 @@
-import { editorContainerAtom } from '@affine/component/block-suite-editor';
 import { assertExists } from '@blocksuite/global/utils';
 import { TocIcon } from '@blocksuite/icons';
 import { TOCPanel } from '@blocksuite/presets';
-import { useAtom } from 'jotai';
+import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
 import { useCallback, useRef } from 'react';
 
 import type { EditorExtension } from '../types';
@@ -11,7 +10,7 @@ import * as styles from './outline.css';
 // A wrapper for TOCNotesPanel
 const EditorOutline = () => {
   const tocPanelRef = useRef<TOCPanel | null>(null);
-  const [editorContainer] = useAtom(editorContainerAtom);
+  const [editor] = useBlocksuiteEditor();
 
   const onRefChange = useCallback((container: HTMLDivElement | null) => {
     if (container) {
@@ -20,7 +19,7 @@ const EditorOutline = () => {
     }
   }, []);
 
-  if (!editorContainer) {
+  if (!editor) {
     return;
   }
 
@@ -28,8 +27,8 @@ const EditorOutline = () => {
     tocPanelRef.current = new TOCPanel();
   }
 
-  if (editorContainer !== tocPanelRef.current?.editor) {
-    (tocPanelRef.current as TOCPanel).editor = editorContainer;
+  if (editor !== tocPanelRef.current?.editor) {
+    (tocPanelRef.current as TOCPanel).editor = editor;
     (tocPanelRef.current as TOCPanel).fitPadding = [20, 20, 20, 20];
   }
 

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

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