feat: split components (#1530)

apps/web/src/components/blocksuite/block-suite-editor/index.tsx

@@ -1,97 +1,2 @@
-import { config } from '@affine/env';
-import { BlockHub } from '@blocksuite/blocks';
-import { EditorContainer } from '@blocksuite/editor';
-import type { Page } from '@blocksuite/store';
-import { assertExists } from '@blocksuite/store';
-import { CSSProperties, useEffect, useRef } from 'react';
-
-import { BlockSuiteWorkspace } from '../../../shared';
-
-export type EditorProps = {
-  blockSuiteWorkspace: BlockSuiteWorkspace;
-  page: Page;
-  mode: 'page' | 'edgeless';
-  onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
-  onLoad?: (page: Page, editor: EditorContainer) => void;
-  style?: CSSProperties;
-};
-
-declare global {
-  // eslint-disable-next-line no-var
-  var currentBlockSuiteWorkspace: BlockSuiteWorkspace | undefined;
-  // eslint-disable-next-line no-var
-  var currentPage: Page | undefined;
-}
-
-export const BlockSuiteEditor = (props: EditorProps) => {
-  const page = props.page;
-  const editorRef = useRef<EditorContainer | null>(null);
-  const blockHubRef = useRef<BlockHub | null>(null);
-  if (editorRef.current === null) {
-    editorRef.current = new EditorContainer();
-    // fixme(himself65): remove `globalThis.editor`
-    // @ts-expect-error
-    globalThis.editor = editorRef.current;
-  }
-  const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (editorRef.current) {
-      editorRef.current.mode = props.mode;
-    }
-  }, [props.mode]);
-
-  useEffect(() => {
-    const editor = editorRef.current;
-    if (!editor || !ref.current || !page) {
-      return;
-    }
-
-    editor.page = page;
-    if (page.root === null) {
-      props.onInit(page, editor);
-    }
-    if (config.exposeInternal) {
-      globalThis.currentBlockSuiteWorkspace = props.blockSuiteWorkspace;
-      globalThis.currentPage = page;
-    }
-    props.onLoad?.(page, editor);
-    return;
-  }, [page, props]);
-
-  useEffect(() => {
-    const editor = editorRef.current;
-    const container = ref.current;
-
-    if (!editor || !container || !page) {
-      return;
-    }
-    if (
-      page.awarenessStore.getFlag('enable_block_hub') &&
-      props.mode === 'page'
-    ) {
-      editor.createBlockHub().then(blockHub => {
-        if (blockHubRef.current) {
-          blockHubRef.current.remove();
-        }
-        blockHubRef.current = blockHub;
-        const toolWrapper = document.querySelector('#toolWrapper');
-        assertExists(toolWrapper);
-        toolWrapper.appendChild(blockHub);
-      });
-    }
-
-    container.appendChild(editor);
-    return () => {
-      blockHubRef.current?.remove();
-      container.removeChild(editor);
-    };
-  }, [page, props.mode]);
-  return (
-    <div
-      data-testid={`editor-${props.blockSuiteWorkspace.id}-${props.page.id}`}
-      className="editor-wrapper"
-      style={props.style}
-      ref={ref}
-    />
-  );
-};
+export type { EditorProps } from '@affine/component/block-suite-editor';
+export { BlockSuiteEditor } from '@affine/component/block-suite-editor';