fix: linked & synced starter examples

toeverything · Feb 3, 2024 · 5a66c53 · 5a66c53
1 parent b22d3a0
commit 5a66c53
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 68 deletions.
diff --git a/packages/blocks/src/synced-block/synced-block.ts b/packages/blocks/src/synced-block/synced-block.ts
@@ -14,12 +14,20 @@ export class SyncedBlockComponent extends BlockElement<SyncedBlockModel> {
       outline-offset: -2px;
     }
   `;
-  override render() {
+
+  private get _linkedDoc() {
     const page = this.std.workspace.getPage(this.model.pageId);
-    assertExists(page);
+    return page;
+  }
+
+  override render() {
+    const linkedDoc = this._linkedDoc;
+    assertExists(linkedDoc);
+
     const selected = this.selected?.is('block');
+
     return html`<div class="affine-synced-block ${selected ? 'selected' : ''}">
-      ${this.host.renderSpecPortal(page, DocEditorBlockSpecs)}
+      ${this.host.renderSpecPortal(linkedDoc, DocEditorBlockSpecs)}
     </div>`;
   }
 }
diff --git a/packages/playground/apps/default/main.ts b/packages/playground/apps/default/main.ts
@@ -13,7 +13,7 @@ async function main() {
 
   const workspace = createDefaultPageWorkspace();
   await initDefaultPageWorkspace(workspace);
-  mountDefaultPageEditor(workspace);
+  await mountDefaultPageEditor(workspace);
 }
 
 main().catch(console.error);
diff --git a/packages/playground/apps/default/utils/editor.ts b/packages/playground/apps/default/utils/editor.ts
@@ -12,7 +12,7 @@ import { getExampleSpecs } from '../specs-examples/index.js';
 const params = new URLSearchParams(location.search);
 const defaultMode = params.get('mode') === 'page' ? 'page' : 'edgeless';
 
-export function mountDefaultPageEditor(workspace: Workspace) {
+export async function mountDefaultPageEditor(workspace: Workspace) {
   const page = workspace.pages.values().next().value;
   assertExists(page, 'Need to create a page first');
 
@@ -37,18 +37,22 @@ export function mountDefaultPageEditor(workspace: Workspace) {
   });
 
   app.append(editor);
+  await editor.updateComplete;
 
-  const quickEdgelessMenu = new QuickEdgelessMenu();
-  const pagesPanel = new PagesPanel();
   const leftSidePanel = new LeftSidePanel();
+
+  const pagesPanel = new PagesPanel();
+  pagesPanel.editor = editor;
+
+  const quickEdgelessMenu = new QuickEdgelessMenu();
   quickEdgelessMenu.workspace = page.workspace;
   quickEdgelessMenu.editor = editor;
   quickEdgelessMenu.mode = defaultMode;
   quickEdgelessMenu.leftSidePanel = leftSidePanel;
   quickEdgelessMenu.pagesPanel = pagesPanel;
-  pagesPanel.editor = editor;
-  document.body.appendChild(quickEdgelessMenu);
+
   document.body.appendChild(leftSidePanel);
+  document.body.appendChild(quickEdgelessMenu);
 
   // debug info
   window.editor = editor;

diff --git a/packages/playground/apps/starter/data/utils.ts b/packages/playground/apps/starter/data/utils.ts
@@ -1,7 +1,7 @@
 import { type Workspace } from '@blocksuite/store';
 
 export interface InitFn {
-  (workspace: Workspace, pageId: string): void;
+  (workspace: Workspace, pageId: string): Promise<void>;
   id: string;
   displayName: string;
   description: string;

diff --git a/packages/playground/apps/starter/main.ts b/packages/playground/apps/starter/main.ts
@@ -37,7 +37,7 @@ async function main() {
   }
 
   await initStarterPageWorkspace(workspace);
-  mountDefaultPageEditor(workspace);
+  await mountDefaultPageEditor(workspace);
 }
 
 main().catch(console.error);
diff --git a/packages/playground/apps/starter/utils/editor.ts b/packages/playground/apps/starter/utils/editor.ts
@@ -12,14 +12,9 @@ import { PagesPanel } from '../../components/pages-panel.js';
 import { SidePanel } from '../../components/side-panel.js';
 
 const params = new URLSearchParams(location.search);
-const defaultMode =
-  params.get('mode') === 'page'
-    ? 'page'
-    : !params.get('mode')
-      ? 'page'
-      : 'edgeless';
-
-export function mountDefaultPageEditor(workspace: Workspace) {
+const defaultMode = params.get('mode') === 'edgeless' ? 'edgeless' : 'page';
+
+export async function mountDefaultPageEditor(workspace: Workspace) {
   const page = workspace.pages.values().next().value;
   assertExists(page, 'Need to create a page first');
 
@@ -40,53 +35,54 @@ export function mountDefaultPageEditor(workspace: Workspace) {
   });
 
   app.append(editor);
+  await editor.updateComplete;
+
+  const outlinePanel = new CustomOutlinePanel();
+  outlinePanel.editor = editor;
+
+  const framePanel = new CustomFramePanel();
+  framePanel.editor = editor;
+
+  const copilotPanelPanel = new CopilotPanel();
+  copilotPanelPanel.editor = editor;
+
+  const sidePanel = new SidePanel();
+
+  const leftSidePanel = new LeftSidePanel();
 
-  editor.updateComplete
-    .then(() => {
-      const debugMenu = new DebugMenu();
-      const outlinePanel = new CustomOutlinePanel();
-      const framePanel = new CustomFramePanel();
-      const copilotPanelPanel = new CopilotPanel();
-      const sidePanel = new SidePanel();
-      const leftSidePanel = new LeftSidePanel();
-      const pagesPanel = new PagesPanel();
-
-      debugMenu.workspace = workspace;
-      debugMenu.editor = editor;
-      debugMenu.mode = defaultMode;
-      debugMenu.outlinePanel = outlinePanel;
-      debugMenu.framePanel = framePanel;
-      debugMenu.copilotPanel = copilotPanelPanel;
-      debugMenu.sidePanel = sidePanel;
-      debugMenu.leftSidePanel = leftSidePanel;
-      debugMenu.pagesPanel = pagesPanel;
-
-      outlinePanel.editor = editor;
-      copilotPanelPanel.editor = editor;
-      framePanel.editor = editor;
-      pagesPanel.editor = editor;
-
-      document.body.appendChild(debugMenu);
-      document.body.appendChild(outlinePanel);
-      document.body.appendChild(sidePanel);
-      document.body.appendChild(leftSidePanel);
-      document.body.appendChild(framePanel);
-
-      // debug info
-      window.editor = editor;
-      window.page = page;
-      Object.defineProperty(globalThis, 'host', {
-        get() {
-          return document.querySelector<EditorHost>('editor-host');
-        },
-      });
-      Object.defineProperty(globalThis, 'std', {
-        get() {
-          return document.querySelector<EditorHost>('editor-host')?.std;
-        },
-      });
-    })
-    .catch(console.error);
+  const pagesPanel = new PagesPanel();
+  pagesPanel.editor = editor;
+
+  const debugMenu = new DebugMenu();
+  debugMenu.workspace = workspace;
+  debugMenu.editor = editor;
+  debugMenu.mode = defaultMode;
+  debugMenu.outlinePanel = outlinePanel;
+  debugMenu.framePanel = framePanel;
+  debugMenu.copilotPanel = copilotPanelPanel;
+  debugMenu.sidePanel = sidePanel;
+  debugMenu.leftSidePanel = leftSidePanel;
+  debugMenu.pagesPanel = pagesPanel;
+
+  document.body.appendChild(outlinePanel);
+  document.body.appendChild(framePanel);
+  document.body.appendChild(sidePanel);
+  document.body.appendChild(leftSidePanel);
+  document.body.appendChild(debugMenu);
+
+  // debug info
+  window.editor = editor;
+  window.page = page;
+  Object.defineProperty(globalThis, 'host', {
+    get() {
+      return document.querySelector<EditorHost>('editor-host');
+    },
+  });
+  Object.defineProperty(globalThis, 'std', {
+    get() {
+      return document.querySelector<EditorHost>('editor-host')?.std;
+    },
+  });
 
   return editor;
 }
diff --git a/packages/playground/apps/starter/utils/workspace.ts b/packages/playground/apps/starter/utils/workspace.ts
@@ -65,7 +65,7 @@ export function createStarterPageWorkspace() {
 export async function initStarterPageWorkspace(workspace: Workspace) {
   const functionMap = new Map<
     string,
-    (workspace: Workspace, id: string) => void
+    (workspace: Workspace, id: string) => Promise<void>
   >();
   Object.values(
     (await import('../data/index.js')) as Record<string, InitFn>
@@ -92,9 +92,11 @@ export async function initStarterPageWorkspace(workspace: Workspace) {
   const init = params.get('init') || 'preset';
   // Load built-in init function when `?init=heavy` param provided
   if (functionMap.has(init)) {
-    functionMap.get(init)?.(workspace, 'page:home');
+    await functionMap.get(init)?.(workspace, 'page:home');
     const page = workspace.getPage('page:home');
-    await page?.load();
+    if (!page?.loaded) {
+      await page?.load();
+    }
     page?.resetHistory();
   }
 }