diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx
index 72086fc89e..b177ffa65f 100644
--- a/packages/app/src/providers/editor-provider/editor-provider.tsx
+++ b/packages/app/src/providers/editor-provider/editor-provider.tsx
@@ -41,7 +41,7 @@ export const EditorProvider = ({
   const [editor, setEditor] = useState<EditorContainer>();
   const [mode, setMode] = useState<EditorContainer['mode']>('page');
 
-  const editorHandlers = useEditorHandler(workspace);
+  const editorHandlers = useEditorHandler({ workspace, editor });
   const onPropsUpdated = usePropsUpdated(editor);
   const onHistoryUpdated = useHistoryUpdated(page);
 
@@ -56,8 +56,9 @@ export const EditorProvider = ({
   }, [workspace, onHistoryUpdated]);
 
   useEffect(() => {
-    const event = new CustomEvent('affine.switch-mode', { detail: mode });
-    window.dispatchEvent(event);
+    // FIXME
+    const editorContainer = document.querySelector('editor-container');
+    editorContainer?.setAttribute('mode', mode as string);
   }, [mode]);
 
   useEffect(() => {
diff --git a/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts b/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
index 25c14ad7c2..383fb17994 100644
--- a/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
+++ b/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
@@ -3,8 +3,15 @@ import { createPage, initialPage, generateDefaultPageId } from '../utils';
 import { Workspace } from '@blocksuite/store';
 import { useRouter } from 'next/router';
 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 {
@@ -56,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/interface.ts b/packages/app/src/providers/editor-provider/interface.ts
index c0c8a2907f..997cd8a776 100644
--- a/packages/app/src/providers/editor-provider/interface.ts
+++ b/packages/app/src/providers/editor-provider/interface.ts
@@ -37,4 +37,5 @@ export type EditorHandlers = {
   toggleFavoritePage: (pageId: string) => void;
   permanentlyDeletePage: (pageId: string) => void;
   search: (query: QueryContent) => Map<string, string | undefined>;
+  changeEditorMode: (pageId: string) => void;
 };