fix: jumping to edgeless-editor by "View in Edgeless" in the default …

…demo (#6486)
toeverything · Mar 19, 2024 · 5545f41 · 5545f41
1 parent 477a6e9
commit 5545f41
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 56 deletions.
diff --git a/packages/playground/apps/default/utils/editor.ts b/packages/playground/apps/default/utils/editor.ts
@@ -1,3 +1,4 @@
+import type { PageRootService } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import type { EditorHost } from '@blocksuite/lit';
 import { AffineEditorContainer } from '@blocksuite/presets';
@@ -24,8 +25,44 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
   const specs = getExampleSpecs();
 
   const editor = new AffineEditorContainer();
-  editor.pageSpecs = specs.pageModeSpecs;
-  editor.edgelessSpecs = specs.edgelessModeSpecs;
+  editor.pageSpecs = [...specs.pageModeSpecs].map(spec => {
+    if (spec.schema.model.flavour === 'affine:page') {
+      const setup = spec.setup;
+      spec = {
+        ...spec,
+        setup: (slots, disposable) => {
+          setup?.(slots, disposable);
+          slots.mounted.once(({ service }) => {
+            disposable.add(
+              (<PageRootService>service).slots.editorModeSwitch.on(
+                switchQuickEdgelessMenu
+              )
+            );
+          });
+        },
+      };
+    }
+    return spec;
+  });
+  editor.edgelessSpecs = [...specs.edgelessModeSpecs].map(spec => {
+    if (spec.schema.model.flavour === 'affine:page') {
+      const setup = spec.setup;
+      spec = {
+        ...spec,
+        setup: (slots, disposable) => {
+          setup?.(slots, disposable);
+          slots.mounted.once(({ service }) => {
+            disposable.add(
+              (<PageRootService>service).slots.editorModeSwitch.on(
+                switchQuickEdgelessMenu
+              )
+            );
+          });
+        },
+      };
+    }
+    return spec;
+  });
   editor.doc = doc;
   editor.slots.docLinkClicked.on(({ docId }) => {
     const target = collection.getDoc(docId);
@@ -51,6 +88,10 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
   quickEdgelessMenu.leftSidePanel = leftSidePanel;
   quickEdgelessMenu.docsPanel = docsPanel;
 
+  function switchQuickEdgelessMenu(mode: typeof defaultMode) {
+    quickEdgelessMenu.mode = mode;
+  }
+
   document.body.append(leftSidePanel);
   document.body.append(quickEdgelessMenu);
 

diff --git a/packages/playground/apps/starter/utils/editor.ts b/packages/playground/apps/starter/utils/editor.ts
@@ -1,4 +1,3 @@
-import type { PageRootService } from '@blocksuite/blocks';
 import {
   AffineFormatBarWidget,
   EdgelessEditorBlockSpecs,
@@ -60,14 +59,6 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
           });
 
           disposable.add(onFormatBarConnected);
-
-          slots.mounted.once(({ service }) => {
-            disposable.add(
-              (<PageRootService>service).slots.editorModeSwitch.on(mode => {
-                editor.mode = mode;
-              })
-            );
-          });
         },
       };
     }
@@ -78,19 +69,14 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
       spec = {
         ...spec,
         setup: (slots, disposable) => {
-          slots.mounted.once(({ service }) => {
+          slots.mounted.once(() => {
             const onFormatBarConnected = slots.widgetConnected.on(view => {
               if (view.component instanceof AffineFormatBarWidget) {
                 configureFormatBar(view.component);
               }
             });
 
             disposable.add(onFormatBarConnected);
-            disposable.add(
-              (<PageRootService>service).slots.editorModeSwitch.on(mode => {
-                editor.mode = mode;
-              })
-            );
           });
         },
       };

diff --git a/packages/presets/src/editors/editor-container.ts b/packages/presets/src/editors/editor-container.ts
@@ -18,7 +18,7 @@ import { assertExists, Slot } from '@blocksuite/global/utils';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/lit';
 import type { Doc } from '@blocksuite/store';
 import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 
 import type { EdgelessEditor } from './edgeless-editor.js';
@@ -80,44 +80,56 @@ export class AffineEditorContainer
   mode: 'page' | 'edgeless' = 'page';
 
   @property({ attribute: false })
-  pageSpecs = [...PageEditorBlockSpecs].map(spec => {
-    if (spec.schema.model.flavour === 'affine:page') {
-      const setup = spec.setup;
-      spec = {
-        ...spec,
-        setup: (slots, disposable) => {
-          setup?.(slots, disposable);
-          slots.mounted.once(({ service }) => {
-            disposable.add(
-              (<PageRootService>service).slots.editorModeSwitch.on(mode => {
-                this.mode = mode;
-              })
-            );
-          });
-        },
-      };
-    }
-    return spec;
-  });
+  pageSpecs = PageEditorBlockSpecs;
+
+  @state()
+  private get _pageSpecs() {
+    return [...this.pageSpecs].map(spec => {
+      if (spec.schema.model.flavour === 'affine:page') {
+        const setup = spec.setup;
+        spec = {
+          ...spec,
+          setup: (slots, disposable) => {
+            setup?.(slots, disposable);
+            slots.mounted.once(({ service }) => {
+              disposable.add(
+                (<PageRootService>service).slots.editorModeSwitch.on(
+                  this.switchEditor.bind(this)
+                )
+              );
+            });
+          },
+        };
+      }
+      return spec;
+    });
+  }
 
   @property({ attribute: false })
-  edgelessSpecs = [...EdgelessEditorBlockSpecs].map(spec => {
-    if (spec.schema.model.flavour === 'affine:page') {
-      spec = {
-        ...spec,
-        setup: (slots, disposable) => {
-          slots.mounted.once(({ service }) => {
-            disposable.add(
-              (<PageRootService>service).slots.editorModeSwitch.on(mode => {
-                this.mode = mode;
-              })
-            );
-          });
-        },
-      };
-    }
-    return spec;
-  });
+  edgelessSpecs = EdgelessEditorBlockSpecs;
+
+  @state()
+  private get _edgelessSpecs() {
+    return [...this.edgelessSpecs].map(spec => {
+      if (spec.schema.model.flavour === 'affine:page') {
+        const setup = spec.setup;
+        spec = {
+          ...spec,
+          setup: (slots, disposable) => {
+            setup?.(slots, disposable);
+            slots.mounted.once(({ service }) => {
+              disposable.add(
+                (<PageRootService>service).slots.editorModeSwitch.on(
+                  this.switchEditor.bind(this)
+                )
+              );
+            });
+          },
+        };
+      }
+      return spec;
+    });
+  }
 
   @property({ attribute: false })
   override autofocus = false;
@@ -144,6 +156,10 @@ export class AffineEditorContainer
     return this.doc.root;
   }
 
+  switchEditor(mode: typeof this.mode) {
+    this.mode = mode;
+  }
+
   override async getUpdateComplete(): Promise<boolean> {
     const result = await super.getUpdateComplete();
     const editor = this.editor;
@@ -235,15 +251,15 @@ export class AffineEditorContainer
 
               <page-editor
                 .doc=${this.doc}
-                .specs=${this.pageSpecs}
+                .specs=${this._pageSpecs}
                 .hasViewport=${false}
               ></page-editor>
             </div>
           `
         : html`
             <edgeless-editor
               .doc=${this.doc}
-              .specs=${this.edgelessSpecs}
+              .specs=${this._edgelessSpecs}
             ></edgeless-editor>
           `
     )}`;