fix: use editorModeSwitch slot to change mode (toeverything#6380)

packages/presets/src/fragments/frame-panel/body/frame-panel-body.ts

@@ -92,9 +92,6 @@ export class FramePanelBody extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   editorHost!: EditorHost;
 
-  @property({ attribute: false })
-  changeEditorMode!: (mode: 'page' | 'edgeless') => void;
-
   // Store the ids of the selected frames
   @state()
   private _selected: string[] = [];
@@ -255,7 +252,7 @@ export class FramePanelBody extends WithDisposable(ShadowlessElement) {
 
       const rootService = this.editorHost.spec.getService('affine:page');
       rootService.editSession.setItem('viewport', viewport);
-      this.changeEditorMode('edgeless');
+      rootService.slots.editorModeSwitch.emit('edgeless');
     } else {
       this.edgeless.service.viewport.setViewportByBound(
         bound,

packages/presets/src/fragments/frame-panel/frame-panel.ts

@@ -89,10 +89,6 @@ export class FramePanel extends WithDisposable(ShadowlessElement) {
     return this.editor.querySelector('affine-edgeless-root');
   }
 
-  private _changeEditorMode = (mode: 'page' | 'edgeless') => {
-    this.editor.mode = mode;
-  };
-
   private _editorDisposables: DisposableGroup | null = null;
 
   private _clearEditorDisposables() {
@@ -143,15 +139,13 @@ export class FramePanel extends WithDisposable(ShadowlessElement) {
     return html`<div class="frame-panel-container">
       <frame-panel-header
         .edgeless=${this.edgeless}
-        .changeEditorMode=${this._changeEditorMode}
         .editorHost=${this.host}
       ></frame-panel-header>
       <frame-panel-body
         class="frame-panel-body"
         .edgeless=${this.edgeless}
         .doc=${this.doc}
         .editorHost=${this.host}
-        .changeEditorMode=${this._changeEditorMode}
         .fitPadding=${this.fitPadding}
       ></frame-panel-body>
     </div>`;

packages/presets/src/fragments/frame-panel/header/frame-panel-header.ts

@@ -108,9 +108,6 @@ export class FramePanelHeader extends WithDisposable(LitElement) {
   @property({ attribute: false })
   edgeless!: EdgelessRootBlockComponent | null;
 
-  @property({ attribute: false })
-  changeEditorMode!: (mode: 'page' | 'edgeless') => void;
-
   @state()
   private _settingPopperShow = false;
 
@@ -127,16 +124,24 @@ export class FramePanelHeader extends WithDisposable(LitElement) {
   private _navigatorMode: NavigatorMode = 'fit';
   private _edgelessDisposables: DisposableGroup | null = null;
 
+  get rootService() {
+    return this.editorHost.spec.getService('affine:page');
+  }
+
   private _enterPresentationMode = () => {
-    if (!this.edgeless) this.changeEditorMode('edgeless');
-    this.edgeless?.updateComplete
-      .then(() => {
-        this.edgeless?.tools.setEdgelessTool({
-          type: 'frameNavigator',
-          mode: this._navigatorMode,
-        });
-      })
-      .catch(console.error);
+    if (!this.edgeless)
+      this.rootService.slots.editorModeSwitch.emit('edgeless');
+
+    setTimeout(() => {
+      this.edgeless?.updateComplete
+        .then(() => {
+          this.edgeless?.tools.setEdgelessTool({
+            type: 'frameNavigator',
+            mode: this._navigatorMode,
+          });
+        })
+        .catch(console.error);
+    }, 100);
   };
 
   private _tryLoadNavigatorStateLocalRecord() {