feat: add introduction

packages/app/src/components/header/editor-header.tsx

@@ -19,12 +19,15 @@ export const EditorHeader = () => {
 
   useEffect(() => {
     onPropsUpdated(editor => {
-      setTitle(editor.model.title || 'Untitled');
+      setTitle(editor.model?.title || 'Untitled');
     });
   }, [onPropsUpdated]);
 
   useEffect(() => {
-    setTitle(editor?.model.title || 'Untitled');
+    setTimeout(() => {
+      // If first time in, need to wait for editor to be inserted into DOM
+      setTitle(editor?.model?.title || 'Untitled');
+    }, 300);
   }, [editor]);
 
   const pageMeta = getPageMeta();

packages/app/src/providers/editor-provider/editor-reactor.tsx

@@ -2,8 +2,13 @@ import '@blocksuite/blocks';
 import '@blocksuite/blocks/style';
 import type { EditorContainer } from '@blocksuite/editor';
 import { BlockSchema, createEditor } from '@blocksuite/editor';
-import { generateDefaultPageId, initEmptyPage } from './utils';
-import { useEffect } from 'react';
+import {
+  generateDefaultPageId,
+  getEditor,
+  initIntroduction,
+  initIntroductionMeta,
+} from './utils';
+import { useEffect, useRef } from 'react';
 import pkg from '../../../package.json';
 import {
   createWebsocketDocProvider,
@@ -46,6 +51,7 @@ const EditorReactor = ({
   setWorkspace: (workspace: Workspace) => void;
   setCurrentPage: (Page: Page) => void;
 }) => {
+  const shouldInitIntroduction = useRef(false);
   const {
     query: { pageId: routerPageId },
   } = useRouter();
@@ -80,7 +86,8 @@ const EditorReactor = ({
         setCurrentPage(page);
       } else {
         createPage(workspace!, pageId).then(page => {
-          initEmptyPage(page);
+          shouldInitIntroduction.current = true;
+          initIntroductionMeta(workspace!, page);
           setCurrentPage(page);
         });
       }
@@ -94,7 +101,8 @@ const EditorReactor = ({
     }
 
     createPage(workspace!, generateDefaultPageId()).then(page => {
-      initEmptyPage(page);
+      shouldInitIntroduction.current = true;
+      initIntroductionMeta(workspace!, page);
       setCurrentPage(page);
     });
   }, [workspace, routerPageId, setCurrentPage]);
@@ -118,7 +126,28 @@ const EditorReactor = ({
       editor.readonly = true;
     }
 
+    const onEditorInsertHandler = () => {
+      const editor = getEditor();
+      // Editor is different from the previous one witch is not inserted into the DOM
+      setEditor(editor as EditorContainer);
+      if (shouldInitIntroduction.current) {
+        shouldInitIntroduction.current = false;
+        initIntroduction(workspace!, editor as EditorContainer);
+      }
+    };
+
+    editor.addEventListener(
+      'DOMNodeInsertedIntoDocument',
+      onEditorInsertHandler
+    );
     setEditor(editor);
+
+    return () => {
+      editor.removeEventListener(
+        'DOMNodeInsertedIntoDocument',
+        onEditorInsertHandler
+      );
+    };
   }, [workspace, currentPage, setEditor]);
 
   useEffect(() => {

packages/app/src/providers/editor-provider/hooks/usePropsUpdated.ts

@@ -10,10 +10,9 @@ export const usePropsUpdated: UsePropsUpdated = editor => {
   const callbackQueue = useRef<((editor: EditorContainer) => void)[]>([]);
 
   useEffect(() => {
-    if (!editor?.model) {
+    if (!editor) {
       return;
     }
-
     setTimeout(() => {
       editor.model?.propsUpdated.on(() => {
         callbackQueue.current.forEach(callback => {

packages/app/src/providers/editor-provider/utils.ts

@@ -2,14 +2,24 @@ import { EditorContainer } from '@blocksuite/editor';
 import exampleMarkdown from '@/providers/editor-provider/example-markdown';
 import { Page, Workspace } from '@blocksuite/store';
 
-export const initDefaultContent = (editor: EditorContainer) => {
+export const initIntroductionMeta = (workspace: Workspace, page: Page) => {
+  workspace!.meta.setPage(page.id.replace('space:', ''), {
+    title: 'Welcome to the AFFiNE Alpha',
+  });
+};
+export const initIntroduction = (
+  workspace: Workspace,
+  editor: EditorContainer
+) => {
   const { page } = editor;
+  const title = 'Welcome to the AFFiNE Alpha';
   const pageId = page.addBlock({
     flavour: 'affine:page',
-    title: 'Welcome to the AFFiNE Alpha',
+    title,
   });
   const groupId = page.addBlock({ flavour: 'affine:group' }, pageId);
   editor.clipboard.importMarkdown(exampleMarkdown, `${groupId}`);
+  workspace.setPageMeta(page.id, { title });
   page.resetHistory();
 };
 
@@ -51,6 +61,10 @@ export const generateDefaultPageId = () => {
   return new Date().getTime().toString();
 };
 
+export const getEditor = () => {
+  return document.querySelector('editor-container') as EditorContainer | null;
+};
+
 export const getEditorMode = () => {
   const editorContainer = document.querySelector('editor-container');
   return editorContainer?.mode;