test: add test case for blocksuite editor (#1528)

apps/web/src/components/__debug__/client/Editor.tsx

@@ -0,0 +1,71 @@
+'use client';
+import { EditorContainer } from '@blocksuite/editor';
+import { assertEquals, assertExists, Generator, Page } from '@blocksuite/store';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { createEmptyBlockSuiteWorkspace } from '../../../utils';
+import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
+
+const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
+  'test',
+  _ => undefined,
+  Generator.AutoIncrement
+);
+
+blockSuiteWorkspace.createPage('page0');
+
+const Editor: React.FC<{
+  onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
+  testType: 'empty' | 'importMarkdown';
+}> = ({ onInit, testType }) => {
+  const page = blockSuiteWorkspace.getPage('page0');
+  const [, rerender] = useState(false);
+  const onceRef = useRef(false);
+  if (!onceRef.current) {
+    if (testType === 'importMarkdown') {
+      if (page) {
+        page.workspace.meta.setPageMeta(page.id, {
+          init: true,
+        });
+      } else {
+        blockSuiteWorkspace.slots.pageAdded.on(id => {
+          const page = blockSuiteWorkspace.getPage(id);
+          assertExists(page);
+          assertEquals(id, 'page0');
+          page.workspace.meta.setPageMeta(page.id, {
+            init: true,
+          });
+        });
+      }
+    }
+  }
+
+  useEffect(() => {
+    const cb = () => rerender(v => !v);
+    const dispose = blockSuiteWorkspace.slots.pageAdded.on(cb);
+    return () => {
+      dispose.dispose();
+    };
+  }, []);
+  const onLoad = useCallback((page: Page, editor: EditorContainer) => {
+    // @ts-ignore
+    globalThis.page = page;
+    // @ts-ignore
+    globalThis.editor = editor;
+  }, []);
+
+  if (!page) {
+    return <>loading...</>;
+  }
+  return (
+    <BlockSuiteEditor
+      blockSuiteWorkspace={blockSuiteWorkspace}
+      page={page}
+      mode="page"
+      onInit={onInit}
+      onLoad={onLoad}
+    />
+  );
+};
+
+export default Editor;

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

@@ -11,23 +11,11 @@ export type EditorProps = {
   blockSuiteWorkspace: BlockSuiteWorkspace;
   page: Page;
   mode: 'page' | 'edgeless';
-  onInit?: (page: Page, editor: Readonly<EditorContainer>) => void;
+  onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
   onLoad?: (page: Page, editor: EditorContainer) => void;
   style?: CSSProperties;
 };
 
-import markdown from '../../../templates/Welcome-to-AFFiNE.md';
-
-const exampleTitle = markdown
-  .split('\n')
-  .splice(0, 1)
-  .join('')
-  .replaceAll('#', '')
-  .trim();
-const exampleText = markdown.split('\n').slice(1).join('\n');
-
-const kFirstPage = 'affine-first-page';
-
 declare global {
   // eslint-disable-next-line no-var
   var currentBlockSuiteWorkspace: BlockSuiteWorkspace | undefined;
@@ -60,31 +48,7 @@ export const BlockSuiteEditor = (props: EditorProps) => {
 
     editor.page = page;
     if (page.root === null) {
-      if (props.onInit) {
-        props.onInit(page, editor);
-      } else {
-        console.debug('Initializing page with default content');
-        // Add page block and surface block at root level
-        const isFirstPage = page.meta.init === true;
-        if (isFirstPage) {
-          page.workspace.setPageMeta(page.id, {
-            init: false,
-          });
-        }
-        const title = isFirstPage ? exampleTitle : undefined;
-        const pageBlockId = page.addBlockByFlavour('affine:page', {
-          title: new page.Text(title),
-        });
-        page.addBlockByFlavour('affine:surface', {}, null);
-        const frameId = page.addBlockByFlavour('affine:frame', {}, pageBlockId);
-        page.addBlockByFlavour('affine:paragraph', {}, frameId);
-        if (isFirstPage) {
-          editor.clipboard.importMarkdown(exampleText, frameId);
-          props.blockSuiteWorkspace.setPageMeta(page.id, { title });
-          localStorage.setItem(kFirstPage, 'true');
-        }
-        page.resetHistory();
-      }
+      props.onInit(page, editor);
     }
     if (config.exposeInternal) {
       globalThis.currentBlockSuiteWorkspace = props.blockSuiteWorkspace;

apps/web/src/components/page-detail-editor.tsx

@@ -15,7 +15,7 @@ export type PageDetailEditorProps = {
   isPreview?: boolean;
   blockSuiteWorkspace: BlockSuiteWorkspace;
   pageId: string;
-  onInit?: (page: Page, editor: Readonly<EditorContainer>) => void;
+  onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
   onLoad?: (page: Page, editor: EditorContainer) => void;
   header?: React.ReactNode;
 };