fix: exhibition of edgeless

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

@@ -11,9 +11,9 @@ import {
   EditorContextValue,
   EditorContextProps,
 } from './interface';
-import usePropsUpdated from '@/providers/editor-provider/hooks/usePropsUpdated';
-import useHistoryUpdated from '@/providers/editor-provider/hooks/useHistoryUpdated';
-
+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,
@@ -39,12 +39,12 @@ export const EditorProvider = ({
   const [page, setPage] = useState<Page>();
   const [pageList, setPageList] = useState<PageMeta[]>([]);
   const [editor, setEditor] = useState<EditorContainer>();
-  const [mode, setMode] = useState<EditorContainer['mode']>('page');
+
+  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(() => {
     if (!workspace) {
@@ -55,12 +55,6 @@ export const EditorProvider = ({
     });
   }, [workspace, onHistoryUpdated]);
 
-  useEffect(() => {
-    // FIXME
-    const editorContainer = document.querySelector('editor-container');
-    editorContainer?.setAttribute('mode', mode as string);
-  }, [mode]);
-
   useEffect(() => {
     if (!workspace) {
       return;

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

@@ -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);

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;

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

@@ -22,6 +22,7 @@ export type PageMeta = {
   trash: boolean;
   trashDate: number | void;
   updatedDate: number | void;
+  mode: EditorContainer['mode'];
 } & OriginalPageMeta;
 
 export type EditorHandlers = {

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);
+};