diff --git a/packages/app/next.config.js b/packages/app/next.config.js
index 93226e064f..8e3c3d3fe7 100644
--- a/packages/app/next.config.js
+++ b/packages/app/next.config.js
@@ -4,7 +4,7 @@ const { getGitVersion, getCommitHash } = require('./scripts/gitInfo');
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   productionBrowserSourceMaps: true,
-  reactStrictMode: true,
+  reactStrictMode: false,
   swcMinify: false,
   publicRuntimeConfig: {
     NODE_ENV: process.env.NODE_ENV,
diff --git a/packages/app/package.json b/packages/app/package.json
index 792cc18994..a0176aecdd 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -9,10 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@blocksuite/blocks": "0.3.0-alpha.7",
-    "@blocksuite/editor": "0.3.0-alpha.7",
+    "@blocksuite/blocks": "0.3.0-alpha.8",
+    "@blocksuite/editor": "0.3.0-alpha.8",
     "@blocksuite/icons": "^2.0.0",
-    "@blocksuite/store": "0.3.0-alpha.7",
+    "@blocksuite/store": "0.3.0-alpha.8",
     "@emotion/css": "^11.10.0",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.10.0",
diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx
index e5f0db27d9..30a2d43573 100644
--- a/packages/app/src/components/edgeless-toolbar/index.tsx
+++ b/packages/app/src/components/edgeless-toolbar/index.tsx
@@ -75,18 +75,14 @@ const toolbarList2 = [
 const UndoRedo = () => {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
-  const { currentPage } = useEditor();
-  useEffect(() => {
-    if (!currentPage) return;
+  const { onHistoryUpdated, page } = useEditor();
 
-    currentPage.signals.historyUpdated.on(() => {
-      setCanUndo(currentPage.canUndo);
-      setCanRedo(currentPage.canRedo);
+  useEffect(() => {
+    onHistoryUpdated(page => {
+      setCanUndo(page.canUndo);
+      setCanRedo(page.canRedo);
     });
-    return () => {
-      currentPage.signals.historyUpdated.dispose();
-    };
-  }, [currentPage]);
+  }, [onHistoryUpdated]);
 
   return (
     <StyledToolbarWrapper>
@@ -94,7 +90,7 @@ const UndoRedo = () => {
         <StyledToolbarItem
           disable={!canUndo}
           onClick={() => {
-            currentPage?.undo();
+            page?.undo();
           }}
         >
           <UndoIcon />
@@ -104,7 +100,7 @@ const UndoRedo = () => {
         <StyledToolbarItem
           disable={!canRedo}
           onClick={() => {
-            currentPage?.redo();
+            page?.redo();
           }}
         >
           <RedoIcon />
diff --git a/packages/app/src/components/edgeless-toolbar/style.ts b/packages/app/src/components/edgeless-toolbar/style.ts
index 0b3a6d0b82..9f5150acd7 100644
--- a/packages/app/src/components/edgeless-toolbar/style.ts
+++ b/packages/app/src/components/edgeless-toolbar/style.ts
@@ -2,7 +2,7 @@ import { styled, displayFlex } from '@/styles';
 
 export const StyledEdgelessToolbar = styled.div(({ theme }) => ({
   height: '320px',
-  position: 'fixed',
+  position: 'absolute',
   left: '12px',
   top: 0,
   bottom: 0,
diff --git a/packages/app/src/components/editor.tsx b/packages/app/src/components/editor.tsx
index dfb2a924c5..d1aa9f639b 100644
--- a/packages/app/src/components/editor.tsx
+++ b/packages/app/src/components/editor.tsx
@@ -3,7 +3,7 @@ import { useEditor, initDefaultContent } from '@/providers/editor-provider';
 
 export const Editor = () => {
   const editorContainer = useRef<HTMLDivElement>(null);
-  const { editor } = useEditor();
+  const { editor, onHistoryUpdated } = useEditor();
   const ref = useRef<any>();
   useEffect(() => {
     if (editor && ref.current?.page.id !== editor?.page.id) {
diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index a33b24e84b..7859953dbc 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -142,12 +142,8 @@ const HeaderRight = () => {
 };
 
 export const Header = ({ children }: PropsWithChildren<{}>) => {
-  const { pageList } = useEditor();
-
   const [showWarning, setShowWarning] = useState(shouldShowWarning());
-  const router = useRouter();
-  const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
-  const isTrash = !!currentPageMeta?.trash;
+
   return (
     <StyledHeaderContainer hasWarning={showWarning}>
       <BrowserWarning
diff --git a/packages/app/src/components/header/page-header.tsx b/packages/app/src/components/header/page-header.tsx
index 4a29358dc2..1cccd703f0 100644
--- a/packages/app/src/components/header/page-header.tsx
+++ b/packages/app/src/components/header/page-header.tsx
@@ -18,18 +18,17 @@ export const PageHeader = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
 
-  const { editor } = useEditor();
+  const { editor, onPropsUpdated } = useEditor();
   const { triggerQuickSearchModal } = useModal();
+
   useEffect(() => {
-    if (editor?.model) {
-      setTitle(editor.model.title || 'Untitled');
-      editor.model.propsUpdated.on(() => {
-        setTitle(editor.model.title);
-      });
-    }
-    return () => {
-      editor?.model?.propsUpdated.dispose();
-    };
+    onPropsUpdated(editor => {
+      setTitle(editor.model.title);
+    });
+  }, [onPropsUpdated]);
+
+  useEffect(() => {
+    setTitle(editor?.model.title || 'Untitled');
   }, [editor]);
 
   return (
diff --git a/packages/app/src/components/page-list/date-cell.tsx b/packages/app/src/components/page-list/date-cell.tsx
index 3b01a8bea8..249a07c99e 100644
--- a/packages/app/src/components/page-list/date-cell.tsx
+++ b/packages/app/src/components/page-list/date-cell.tsx
@@ -16,7 +16,9 @@ export const DateCell = ({
   // dayjs().format('L LT');
   return (
     <TableCell ellipsis={true}>
-      {dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:MM')}
+      {pageMeta[dateKey] === undefined
+        ? '--'
+        : dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:mm')}
     </TableCell>
   );
 };
diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx
index 20030c06bc..70b232d026 100644
--- a/packages/app/src/components/page-list/index.tsx
+++ b/packages/app/src/components/page-list/index.tsx
@@ -1,16 +1,21 @@
 import { PageMeta, useEditor } from '@/providers/editor-provider';
-import { FavouritedIcon, FavouritesIcon } from '@blocksuite/icons';
+import {
+  FavouritedIcon,
+  FavouritesIcon,
+  PaperIcon,
+  EdgelessIcon,
+} from '@blocksuite/icons';
 import {
   StyledFavoriteButton,
   StyledTableContainer,
   StyledTableRow,
-  StyledTitleContent,
+  StyledTitleLink,
   StyledTitleWrapper,
 } from './styles';
 import { Table, TableBody, TableCell, TableHead, TableRow } from '@/ui/table';
 import { OperationCell, TrashOperationCell } from './operation-cell';
 import Empty from './empty';
-import Link from 'next/link';
+import { Content } from '@/ui/layout';
 import React from 'react';
 import DateCell from '@/components/page-list/date-cell';
 const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => {
@@ -50,7 +55,7 @@ export const PageList = ({
             <TableCell proportion={0.5}>Documents</TableCell>
             <TableCell proportion={0.2}>Created</TableCell>
             <TableCell proportion={0.2}>
-              {isTrash ? 'Moved to Trash' : 'Uploaded'}
+              {isTrash ? 'Moved to Trash' : 'Updated'}
             </TableCell>
             <TableCell proportion={0.1}></TableCell>
           </TableRow>
@@ -61,20 +66,25 @@ export const PageList = ({
               <StyledTableRow key={`${pageMeta.id}-${index}`}>
                 <TableCell>
                   <StyledTitleWrapper>
-                    <Link
+                    <StyledTitleLink
                       href={{ pathname: '/', query: { pageId: pageMeta.id } }}
                     >
-                      <StyledTitleContent>
-                        {pageMeta.title || pageMeta.id}
-                      </StyledTitleContent>
-                    </Link>
+                      {pageMeta.mode === 'edgeless' ? (
+                        <EdgelessIcon />
+                      ) : (
+                        <PaperIcon />
+                      )}
+                      <Content ellipsis={true} color="inherit">
+                        {pageMeta.title || 'Untitled'}
+                      </Content>
+                    </StyledTitleLink>
                     {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
                   </StyledTitleWrapper>
                 </TableCell>
                 <DateCell pageMeta={pageMeta} dateKey="createDate" />
                 <DateCell
                   pageMeta={pageMeta}
-                  dateKey={isTrash ? 'trashDate' : 'createDate'}
+                  dateKey={isTrash ? 'trashDate' : 'updatedDate'}
                 />
                 <TableCell style={{ padding: 0 }}>
                   {isTrash ? (
diff --git a/packages/app/src/components/page-list/styles.ts b/packages/app/src/components/page-list/styles.ts
index 46909847d5..629f0ffbfc 100644
--- a/packages/app/src/components/page-list/styles.ts
+++ b/packages/app/src/components/page-list/styles.ts
@@ -1,5 +1,6 @@
 import { displayFlex, styled, textEllipsis } from '@/styles';
 import { TableRow } from '@/ui/table';
+import Link from 'next/link';
 
 export const StyledTableContainer = styled.div(() => {
   return {
@@ -22,11 +23,23 @@ export const StyledTitleWrapper = styled.div(({ theme }) => {
     },
   };
 });
-export const StyledTitleContent = styled.div(({ theme }) => {
+export const StyledTitleLink = styled(Link)(({ theme }) => {
   return {
-    maxWidth: '90%',
+    maxWidth: '80%',
     marginRight: '18px',
-    ...textEllipsis(1),
+    ...displayFlex('flex-start', 'center'),
+    color: theme.colors.textColor,
+    '>svg': {
+      fontSize: '24px',
+      marginRight: '12px',
+      color: theme.colors.iconColor,
+    },
+    ':hover': {
+      color: theme.colors.textColor,
+      '>svg': {
+        color: theme.colors.primaryColor,
+      },
+    },
   };
 });
 export const StyledFavoriteButton = styled.button<{ favorite: boolean }>(
diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index b90da9808c..b47e7cbe9e 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -58,7 +58,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal, triggerImportModal } = useModal();
   const [show, setShow] = useState(false);
-  const [showSubFavorite, setShowSubFavorite] = useState(false);
+  const [showSubFavorite, setShowSubFavorite] = useState(true);
   const { createPage, getPageMeta, openPage } = useEditor();
   const router = useRouter();
 
diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx
index b64264e83c..5311547382 100644
--- a/packages/app/src/pages/_app.tsx
+++ b/packages/app/src/pages/_app.tsx
@@ -30,6 +30,7 @@ const StyledPage = styled('div')(({ theme }) => {
 const StyledWrapper = styled('div')(({ theme }) => {
   return {
     flexGrow: 1,
+    position: 'relative',
   };
 });
 
diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx
index 212427b0ae..9956cec2bf 100644
--- a/packages/app/src/providers/editor-provider/editor-provider.tsx
+++ b/packages/app/src/providers/editor-provider/editor-provider.tsx
@@ -4,29 +4,28 @@ import type { PropsWithChildren } from 'react';
 import dynamic from 'next/dynamic';
 import Loading from './loading';
 import { Page, Workspace } from '@blocksuite/store';
-import useEditorHandler from './useEditorHandler';
-import { EditorHandlers, PageMeta } from './interface';
-
+import useEditorHandler from './hooks/useEditorHandler';
+import {
+  EditorHandlers,
+  PageMeta,
+  EditorContextValue,
+  EditorContextProps,
+} from './interface';
+import usePropsUpdated from './hooks/usePropsUpdated';
+import useHistoryUpdated from './hooks/useHistoryUpdated';
+import useMode from './hooks/useMode';
 // Blocksuite has to be imported dynamically since it has a lot of effects
 const DynamicEditor = dynamic(() => import('./editor-reactor'), {
   ssr: false,
 });
 
-type EditorContextValue = {
-  mode: EditorContainer['mode'];
-  setMode: (mode: EditorContainer['mode']) => void;
-  currentPage: Page | void;
-  editor: EditorContainer | void;
-  pageList: PageMeta[];
-} & EditorHandlers;
-
-type EditorContextProps = PropsWithChildren<{}>;
-
 export const EditorContext = createContext<EditorContextValue>({
   mode: 'page',
   setMode: () => {},
   pageList: [],
-  currentPage: undefined,
+  page: undefined,
+  onPropsUpdated: () => {},
+  onHistoryUpdated: () => {},
   editor: undefined,
   ...({} as EditorHandlers),
 });
@@ -37,17 +36,24 @@ export const EditorProvider = ({
   children,
 }: PropsWithChildren<EditorContextProps>) => {
   const [workspace, setWorkspace] = useState<Workspace>();
-  const [currentPage, setCurrentPage] = useState<Page>();
+  const [page, setPage] = useState<Page>();
   const [pageList, setPageList] = useState<PageMeta[]>([]);
   const [editor, setEditor] = useState<EditorContainer>();
-  const [mode, setMode] = useState<EditorContainer['mode']>('page');
 
-  const editorHandlers = useEditorHandler(workspace);
+  const { mode, setMode } = useMode({ workspace, page });
 
+  const editorHandlers = useEditorHandler({ workspace, editor });
+  const onPropsUpdated = usePropsUpdated(editor);
+  const onHistoryUpdated = useHistoryUpdated(page);
+  // Modify the updatedDate when history change
   useEffect(() => {
-    const event = new CustomEvent('affine.switch-mode', { detail: mode });
-    window.dispatchEvent(event);
-  }, [mode]);
+    if (!workspace) {
+      return;
+    }
+    onHistoryUpdated(page => {
+      workspace.setPageMeta(page.id, { updatedDate: +new Date() });
+    });
+  }, [workspace, onHistoryUpdated]);
 
   useEffect(() => {
     if (!workspace) {
@@ -67,21 +73,23 @@ export const EditorProvider = ({
     <EditorContext.Provider
       value={{
         editor,
-        currentPage,
+        page,
         mode,
         setMode,
         pageList,
+        onHistoryUpdated,
+        onPropsUpdated,
         ...editorHandlers,
       }}
     >
       <DynamicEditor
         workspace={workspace}
-        currentPage={currentPage}
+        currentPage={page}
         setEditor={setEditor}
         setWorkspace={setWorkspace}
-        setCurrentPage={setCurrentPage}
+        setCurrentPage={setPage}
       />
-      {workspace && currentPage && editor ? children : <Loading />}
+      {workspace && page && editor ? children : <Loading />}
     </EditorContext.Provider>
   );
 };
diff --git a/packages/app/src/providers/editor-provider/editor-reactor.tsx b/packages/app/src/providers/editor-provider/editor-reactor.tsx
index 93019b5634..99387ab192 100644
--- a/packages/app/src/providers/editor-provider/editor-reactor.tsx
+++ b/packages/app/src/providers/editor-provider/editor-reactor.tsx
@@ -89,7 +89,7 @@ const EditorReactor = ({
 
     const savedPageId = workspace.meta.pageMetas[0]?.id;
     if (savedPageId) {
-      setCurrentPage(workspace.getPage(savedPageId));
+      setCurrentPage(workspace.getPage(savedPageId) as Page);
       return;
     }
 
@@ -103,8 +103,18 @@ const EditorReactor = ({
     if (!currentPage) {
       return;
     }
-    setEditor(createEditor(currentPage));
-  }, [currentPage, setEditor]);
+    const editor = createEditor(currentPage);
+    const pageMeta = workspace?.meta.pageMetas.find(
+      p => p.id === currentPage.pageId.replace('space:', '')
+    );
+
+    if (pageMeta?.mode) {
+      // @ts-ignore
+      editor.mode = pageMeta.mode;
+    }
+
+    setEditor(editor);
+  }, [workspace, currentPage, setEditor]);
 
   useEffect(() => {
     const version = pkg.dependencies['@blocksuite/editor'].substring(1);
diff --git a/packages/app/src/providers/editor-provider/useEditorHandler.ts b/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
similarity index 69%
rename from packages/app/src/providers/editor-provider/useEditorHandler.ts
rename to packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
index 04199ff486..383fb17994 100644
--- a/packages/app/src/providers/editor-provider/useEditorHandler.ts
+++ b/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
@@ -1,10 +1,17 @@
 import { QueryContent } from '@blocksuite/store/dist/workspace/search';
-import { createPage, initialPage, generateDefaultPageId } from './utils';
+import { createPage, initialPage, generateDefaultPageId } from '../utils';
 import { Workspace } from '@blocksuite/store';
 import { useRouter } from 'next/router';
-import { EditorHandlers } from './interface';
+import { EditorHandlers, PageMeta } from '../interface';
+import { EditorContainer } from '@blocksuite/editor';
 
-export const useEditorHandler = (workspace?: Workspace): EditorHandlers => {
+export const useEditorHandler = ({
+  editor,
+  workspace,
+}: {
+  workspace?: Workspace;
+  editor?: EditorContainer;
+}): EditorHandlers => {
   const router = useRouter();
 
   return {
@@ -15,7 +22,9 @@ export const useEditorHandler = (workspace?: Workspace): EditorHandlers => {
     },
     getPageMeta(pageId: string) {
       pageId = pageId.replace('space:', '');
-      return workspace!.meta.pageMetas.find(page => page.id === pageId);
+      return workspace!.meta.pageMetas.find(
+        page => page.id === pageId
+      ) as PageMeta;
     },
     openPage: (pageId, query = {}) => {
       return router.push({
@@ -29,8 +38,10 @@ export const useEditorHandler = (workspace?: Workspace): EditorHandlers => {
     toggleDeletePage: pageId => {
       const pageMeta = workspace!.meta.pageMetas.find(p => p.id === pageId);
       if (pageMeta) {
-        workspace!.meta.setPage(pageId, { trashDate: new Date().getTime() });
-        workspace!.setPageMeta(pageId, { trash: !pageMeta.trash });
+        workspace!.setPageMeta(pageId, {
+          trash: !pageMeta.trash,
+          trashDate: +new Date(),
+        });
       }
     },
     favoritePage: pageId => {
@@ -52,6 +63,10 @@ export const useEditorHandler = (workspace?: Workspace): EditorHandlers => {
     search: (query: QueryContent) => {
       return workspace!.search(query);
     },
+    changeEditorMode: (pageId: string) => {
+      editor!.mode = editor!.mode === 'page' ? 'edgeless' : 'page';
+      workspace?.setPageMeta(pageId, { mode: editor!.mode });
+    },
   };
 };
 
diff --git a/packages/app/src/providers/editor-provider/hooks/useHistoryUpdated.ts b/packages/app/src/providers/editor-provider/hooks/useHistoryUpdated.ts
new file mode 100644
index 0000000000..558925d32b
--- /dev/null
+++ b/packages/app/src/providers/editor-provider/hooks/useHistoryUpdated.ts
@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { Page } from '@blocksuite/store';
+import { EventCallBack } from '../interface';
+
+export type UseHistoryUpdated = (page?: Page) => EventCallBack<Page>;
+
+export const useHistoryUpdate: UseHistoryUpdated = page => {
+  const callbackQueue = useRef<((page: Page) => void)[]>([]);
+
+  useEffect(() => {
+    if (!page) {
+      return;
+    }
+
+    setTimeout(() => {
+      page.signals.historyUpdated.on(() => {
+        callbackQueue.current.forEach(callback => {
+          callback(page);
+        });
+      });
+    }, 300);
+
+    return () => {
+      callbackQueue.current = [];
+      page.signals.historyUpdated.dispose();
+    };
+  }, [page]);
+
+  return callback => {
+    callbackQueue.current.push(callback);
+  };
+};
+
+export default useHistoryUpdate;
diff --git a/packages/app/src/providers/editor-provider/hooks/useMode.ts b/packages/app/src/providers/editor-provider/hooks/useMode.ts
new file mode 100644
index 0000000000..61d7208a30
--- /dev/null
+++ b/packages/app/src/providers/editor-provider/hooks/useMode.ts
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { Page, Workspace } from '@blocksuite/store';
+import { EditorContainer } from '@blocksuite/editor';
+
+export const useMode = ({
+  page,
+  workspace,
+}: {
+  page?: Page;
+  workspace?: Workspace;
+}) => {
+  const [mode, setMode] = useState<EditorContainer['mode']>('page');
+
+  useEffect(() => {
+    if (!page || !workspace) {
+      return;
+    }
+    const pageMeta = workspace.meta.pageMetas.find(
+      p => p.id === page.pageId.replace('space:', '')
+    );
+
+    if (pageMeta?.mode) {
+      // @ts-ignore
+      setMode(pageMeta.mode);
+    }
+  }, [page, workspace]);
+
+  useEffect(() => {
+    // FIXME
+    const editorContainer = document.querySelector('editor-container');
+    editorContainer?.setAttribute('mode', mode as string);
+    if (page && workspace) {
+      workspace.setPageMeta(page.id, { mode });
+    }
+  }, [workspace, page, mode]);
+
+  return {
+    mode,
+    setMode,
+  };
+};
+
+export default useMode;
diff --git a/packages/app/src/providers/editor-provider/hooks/usePropsUpdated.ts b/packages/app/src/providers/editor-provider/hooks/usePropsUpdated.ts
new file mode 100644
index 0000000000..e48eec882d
--- /dev/null
+++ b/packages/app/src/providers/editor-provider/hooks/usePropsUpdated.ts
@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+import { EditorContainer } from '@blocksuite/editor';
+import { EventCallBack } from '../interface';
+
+export type UsePropsUpdated = (
+  editor?: EditorContainer
+) => EventCallBack<EditorContainer>;
+
+export const usePropsUpdated: UsePropsUpdated = editor => {
+  const callbackQueue = useRef<((editor: EditorContainer) => void)[]>([]);
+
+  useEffect(() => {
+    if (!editor?.model) {
+      return;
+    }
+
+    setTimeout(() => {
+      editor.model?.propsUpdated.on(() => {
+        callbackQueue.current.forEach(callback => {
+          callback(editor);
+        });
+      });
+    }, 300);
+
+    return () => {
+      callbackQueue.current = [];
+      editor?.model?.propsUpdated.dispose();
+    };
+  }, [editor]);
+
+  return callback => {
+    callbackQueue.current.push(callback);
+  };
+};
+
+export default usePropsUpdated;
diff --git a/packages/app/src/providers/editor-provider/interface.ts b/packages/app/src/providers/editor-provider/interface.ts
index e1fbfe514d..f4e876c7e4 100644
--- a/packages/app/src/providers/editor-provider/interface.ts
+++ b/packages/app/src/providers/editor-provider/interface.ts
@@ -1,14 +1,29 @@
+import { PropsWithChildren } from 'react';
 import { Page } from '@blocksuite/store';
 import { QueryContent } from '@blocksuite/store/dist/workspace/search';
+import { PageMeta as OriginalPageMeta } from '@blocksuite/store';
+import { EditorContainer } from '@blocksuite/editor';
 
-export interface PageMeta {
-  id: string;
-  title: string;
+export type EventCallBack<T> = (callback: (props: T) => void) => void;
+export type EditorContextProps = PropsWithChildren<{}>;
+
+export type EditorContextValue = {
+  mode: EditorContainer['mode'];
+  setMode: (mode: EditorContainer['mode']) => void;
+  page: Page | void;
+  editor: EditorContainer | void;
+  pageList: PageMeta[];
+  onHistoryUpdated: EventCallBack<Page>;
+  onPropsUpdated: EventCallBack<EditorContainer>;
+} & EditorHandlers;
+
+export type PageMeta = {
   favorite: boolean;
   trash: boolean;
-  createDate: number;
-  trashDate: number | null;
-}
+  trashDate: number | void;
+  updatedDate: number | void;
+  mode: EditorContainer['mode'];
+} & OriginalPageMeta;
 
 export type EditorHandlers = {
   createPage: (pageId?: string) => Promise<Page>;
@@ -23,4 +38,5 @@ export type EditorHandlers = {
   toggleFavoritePage: (pageId: string) => void;
   permanentlyDeletePage: (pageId: string) => void;
   search: (query: QueryContent) => Map<string, string | undefined>;
+  changeEditorMode: (pageId: string) => void;
 };
diff --git a/packages/app/src/providers/editor-provider/utils.ts b/packages/app/src/providers/editor-provider/utils.ts
index 39bb4b68b0..3c0ced7fc6 100644
--- a/packages/app/src/providers/editor-provider/utils.ts
+++ b/packages/app/src/providers/editor-provider/utils.ts
@@ -21,7 +21,7 @@ export const createPage = (
     workspace.createPage(pageId);
     workspace.signals.pageAdded.once(addedPageId => {
       const page = workspace!.getPage(addedPageId);
-      resolve(page);
+      resolve(page as Page);
     });
   });
 };
@@ -36,3 +36,13 @@ export const initialPage = (page: Page) => {
 export const generateDefaultPageId = () => {
   return new Date().getTime().toString();
 };
+
+export const getEditorMode = () => {
+  const editorContainer = document.querySelector('editor-container');
+  return editorContainer?.mode;
+};
+
+export const setEditorMode = (mode: EditorContainer['mode']) => {
+  const editorContainer = document.querySelector('editor-container');
+  editorContainer?.setAttribute('mode', mode as string);
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a9be78460..c1eed11335 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,10 +22,10 @@ importers:
 
   packages/app:
     specifiers:
-      '@blocksuite/blocks': 0.3.0-alpha.7
-      '@blocksuite/editor': 0.3.0-alpha.7
+      '@blocksuite/blocks': 0.3.0-alpha.8
+      '@blocksuite/editor': 0.3.0-alpha.8
       '@blocksuite/icons': ^2.0.0
-      '@blocksuite/store': 0.3.0-alpha.7
+      '@blocksuite/store': 0.3.0-alpha.8
       '@emotion/css': ^11.10.0
       '@emotion/react': ^11.10.4
       '@emotion/server': ^11.10.0
@@ -55,10 +55,10 @@ importers:
       react-dom: 18.2.0
       typescript: 4.8.3
     dependencies:
-      '@blocksuite/blocks': 0.3.0-alpha.7
-      '@blocksuite/editor': 0.3.0-alpha.7
+      '@blocksuite/blocks': 0.3.0-alpha.8
+      '@blocksuite/editor': 0.3.0-alpha.8
       '@blocksuite/icons': 2.0.0_w5j4k42lgipnm43s3brx6h3c34
-      '@blocksuite/store': 0.3.0-alpha.7
+      '@blocksuite/store': 0.3.0-alpha.8
       '@emotion/css': 11.10.0
       '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
       '@emotion/server': 11.10.0_@emotion+css@11.10.0
@@ -176,10 +176,11 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
-  /@blocksuite/blocks/0.3.0-alpha.7:
-    resolution: {integrity: sha512-RV6yiKSVIr3hRkT1MYp15Bt7i615aahqQ7CEJZQAuDMr2OVRzAGeXJpjt3e69HWW5os4fs4yOsC1PiS8VuuWRg==}
+  /@blocksuite/blocks/0.3.0-alpha.8:
+    resolution: {integrity: sha512-Q7md4N1H0lTMG0nX1PnAdSlTjBfNX4nFLlcX3SrdgjSM9QOu0G6E6OvfHHHCj4SJPnzyHH5xb6Lb0jU9Lpas6Q==}
     dependencies:
-      '@blocksuite/store': 0.3.0-alpha.7
+      '@blocksuite/store': 0.3.0-alpha.8
+      '@tldraw/intersect': 1.8.0
       '@tldraw/vec': 1.8.0
       hotkeys-js: 3.10.0
       lit: 2.4.0
@@ -192,11 +193,11 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/editor/0.3.0-alpha.7:
-    resolution: {integrity: sha512-vq5xgg2Ea1kbYDCYogBnmccg3Opw2DfQeiEQM5JRxqRBe6E2R4lZqZvksVj5fekY5Pl2Nrr73VgxTutjGS1u2g==}
+  /@blocksuite/editor/0.3.0-alpha.8:
+    resolution: {integrity: sha512-Sx5E69LMZkUcc37q2PLXAnNTHy9okn/UFBfcWG8i5LO/T8QpYJgbllZGJDx7A3qP8Uz+BQyhgI5gp8S/dnra7g==}
     dependencies:
-      '@blocksuite/blocks': 0.3.0-alpha.7
-      '@blocksuite/store': 0.3.0-alpha.7
+      '@blocksuite/blocks': 0.3.0-alpha.8
+      '@blocksuite/store': 0.3.0-alpha.8
       lit: 2.4.0
       marked: 4.1.1
       turndown: 7.1.1
@@ -216,8 +217,8 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@blocksuite/store/0.3.0-alpha.7:
-    resolution: {integrity: sha512-dO+hx/6V5aun5+U1M7qRSQLdHpXYNa2TDr9747f+Xy8CoToyYQ5jTJ/KcjKEdNm36xg66N3sNBDarhAUzs3QOg==}
+  /@blocksuite/store/0.3.0-alpha.8:
+    resolution: {integrity: sha512-u63FWZSiYID8++tEIaQZ5FSj7NZu9XM2ZdTaTU+7PDEwucK5Gqo8+YrEC9gVl+2jkSW5cp43pxf2kZolUgkyYg==}
     dependencies:
       buffer: 6.0.3
       flexsearch: 0.7.21
@@ -1091,6 +1092,12 @@ packages:
       tslib: 2.4.0
     dev: false
 
+  /@tldraw/intersect/1.8.0:
+    resolution: {integrity: sha512-0UarshNpyq2+O4o0xHMJIBgF0E630mes5CkMoO+D5xgYppSBIkeqYDcv0ujsmAhMKX1O6Y0ShuuHeflBEULUoQ==}
+    dependencies:
+      '@tldraw/vec': 1.8.0
+    dev: false
+
   /@tldraw/vec/1.8.0:
     resolution: {integrity: sha512-GiS5Df3CzXY/fPBFcM0CKFERZfI4Cg1X33VPZX+NLo7Fwm/h9zu/aU24N1mG75Q9LuMnwKm7woxKr8BiUXGYCg==}
     dev: false
@@ -1883,7 +1890,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
+      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
       debug: 3.2.7
       eslint: 8.22.0
       eslint-import-resolver-node: 0.3.6
@@ -1902,7 +1909,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
+      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9