refactor(editor): playground doc collection typing migration (#9593)

blocksuite/playground/apps/_common/components/collab-debug-menu.ts

@@ -30,7 +30,7 @@ import {
 import { type SerializedXYWH, SignalWatcher } from '@blocksuite/global/utils';
 import type { DeltaInsert } from '@blocksuite/inline';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -158,7 +158,9 @@ export class CollabDebugMenu extends SignalWatcher(ShadowlessElement) {
     const zipTransformer = this.rootService.transformers.zip;
     await zipTransformer.exportDocs(
       this.collection,
-      [...this.collection.docs.values()].map(collection => collection.getDoc())
+      Array.from(this.collection.docs.values()).map(collection =>
+        collection.getStore()
+      )
     );
   }
 
@@ -611,7 +613,7 @@ export class CollabDebugMenu extends SignalWatcher(ShadowlessElement) {
   private accessor _docMode: DocMode = 'page';
 
   @property({ attribute: false })
-  accessor collection!: DocCollection;
+  accessor collection!: Workspace;
 
   @property({ attribute: false })
   accessor docsPanel!: DocsPanel;

blocksuite/playground/apps/_common/components/starter-debug-menu.ts

@@ -50,7 +50,7 @@ import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import type { SerializedXYWH } from '@blocksuite/global/utils';
 import type { DeltaInsert } from '@blocksuite/inline/types';
 import { AffineEditorContainer, type CommentPanel } from '@blocksuite/presets';
-import { type DocCollection, Job, Text } from '@blocksuite/store';
+import { Job, Text, type Workspace } from '@blocksuite/store';
 import type { SlDropdown } from '@shoelace-style/shoelace';
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
 import { css, html } from 'lit';
@@ -329,7 +329,9 @@ export class StarterDebugMenu extends ShadowlessElement {
   private async _exportSnapshot() {
     await ZipTransformer.exportDocs(
       this.collection,
-      [...this.collection.docs.values()].map(collection => collection.getDoc())
+      Array.from(this.collection.docs.values()).map(collection =>
+        collection.getStore()
+      )
     );
   }
 
@@ -1019,7 +1021,7 @@ export class StarterDebugMenu extends ShadowlessElement {
   accessor blockTypeDropdown!: SlDropdown;
 
   @property({ attribute: false })
-  accessor collection!: DocCollection;
+  accessor collection!: Workspace;
 
   @property({ attribute: false })
   accessor commentPanel!: CommentPanel;

blocksuite/playground/apps/_common/mock-services.ts

@@ -20,7 +20,7 @@ import {
 } from '@blocksuite/blocks';
 import { Slot } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import { type DocCollection } from '@blocksuite/store';
+import { type Workspace } from '@blocksuite/store';
 import { Signal, signal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
 
@@ -109,14 +109,14 @@ export function mockNotificationService(editor: AffineEditorContainer) {
   return notificationService;
 }
 
-export function mockParseDocUrlService(collection: DocCollection) {
+export function mockParseDocUrlService(collection: Workspace) {
   const parseDocUrlService: ParseDocUrlService = {
     parseDocUrl: (url: string) => {
       if (url && URL.canParse(url)) {
         const path = decodeURIComponent(new URL(url).hash.slice(1));
         const item =
           path.length > 0
-            ? [...collection.docs.values()].find(doc => doc.id === path)
+            ? Array.from(collection.docs.values()).find(doc => doc.id === path)
             : null;
         if (item) {
           return {
@@ -185,7 +185,7 @@ export function mockPeekViewExtension(
   } satisfies PeekViewService);
 }
 
-export function mockGenerateDocUrlService(collection: DocCollection) {
+export function mockGenerateDocUrlService(collection: Workspace) {
   const generateDocUrlService: GenerateDocUrlService = {
     generateDocUrl: (docId: string, params?: ReferenceParams) => {
       const doc = collection.getDoc(docId);

blocksuite/playground/apps/default/utils/editor.ts

@@ -1,4 +1,4 @@
-import type { EditorHost, ExtensionType } from '@blocksuite/block-std';
+import type { EditorHost } from '@blocksuite/block-std';
 import {
   CommunityCanvasTextFonts,
   DocModeExtension,
@@ -14,7 +14,7 @@ import {
   SpecProvider,
 } from '@blocksuite/blocks';
 import { AffineEditorContainer } from '@blocksuite/presets';
-import type { Workspace } from '@blocksuite/store';
+import type { ExtensionType, Workspace } from '@blocksuite/store';
 
 import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel.js';
 import { CollabDebugMenu } from '../../_common/components/collab-debug-menu.js';

blocksuite/playground/apps/starter/data/affine-snapshot.ts

@@ -1,7 +1,7 @@
 import { ZipTransformer } from '@blocksuite/blocks';
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 
-export async function affineSnapshot(collection: DocCollection, id: string) {
+export async function affineSnapshot(collection: Workspace, id: string) {
   const doc = collection.createDoc({ id });
   doc.load();
   // Add root block and surface block at root level

blocksuite/playground/apps/starter/data/embed.ts

@@ -1,8 +1,8 @@
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 
 import type { InitFn } from './utils.js';
 
-export const embed: InitFn = (collection: DocCollection, id: string) => {
+export const embed: InitFn = (collection: Workspace, id: string) => {
   const doc = collection.getDoc(id) ?? collection.createDoc({ id });
   doc.clear();
 

blocksuite/playground/apps/starter/data/empty.ts

@@ -1,8 +1,8 @@
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 
 import type { InitFn } from './utils.js';
 
-export const empty: InitFn = (collection: DocCollection, id: string) => {
+export const empty: InitFn = (collection: Workspace, id: string) => {
   const doc = collection.getDoc(id) ?? collection.createDoc({ id });
   doc.clear();
 

blocksuite/playground/apps/starter/data/heavy-whiteboard.ts

@@ -2,12 +2,12 @@ import { DEFAULT_ROUGHNESS } from '@blocksuite/affine-model';
 import type { SerializedXYWH } from '@blocksuite/global/utils';
 import {
   Boxed,
-  type DocCollection,
   nanoid,
   native2Y,
   Text,
-  type Y,
+  type Workspace,
 } from '@blocksuite/store';
+import type * as Y from 'yjs';
 
 import type { InitFn } from './utils.js';
 
@@ -46,10 +46,7 @@ function createShapes(count: number): Record<string, unknown> {
 const SHAPES_COUNT = 100;
 const RANGE = 2000;
 
-export const heavyWhiteboard: InitFn = (
+export const heavyWhiteboard: InitFn = (collection: Workspace, id: string) => {
-  collection: DocCollection,
-  id: string
-) => {
   const count = Number(params.get('count')) || SHAPES_COUNT;
   const enableShapes = !!params.get('shapes');
 

blocksuite/playground/apps/starter/data/heavy.ts

@@ -1,10 +1,10 @@
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 
 import type { InitFn } from './utils.js';
 
 const params = new URLSearchParams(location.search);
 
-export const heavy: InitFn = (collection: DocCollection, docId: string) => {
+export const heavy: InitFn = (collection: Workspace, docId: string) => {
   const count = Number(params.get('count')) || 1000;
 
   const doc = collection.createDoc({ id: docId });

blocksuite/playground/apps/starter/data/linked.ts

@@ -1,8 +1,8 @@
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 
 import type { InitFn } from './utils.js';
 
-export const linked: InitFn = (collection: DocCollection, id: string) => {
+export const linked: InitFn = (collection: Workspace, id: string) => {
   const docA = collection.getDoc(id) ?? collection.createDoc({ id });
 
   const docBId = 'doc:linked-page';

blocksuite/playground/apps/starter/data/multiple-editor.ts

@@ -1,10 +1,10 @@
 import { RefNodeSlotsProvider } from '@blocksuite/affine-components/rich-text';
 import { AffineEditorContainer } from '@blocksuite/presets';
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 
 import type { InitFn } from './utils.js';
 
-export const multiEditor: InitFn = (collection: DocCollection, id: string) => {
+export const multiEditor: InitFn = (collection: Workspace, id: string) => {
   const doc = collection.createDoc({ id });
   doc.load(() => {
     // Add root block and surface block at root level
@@ -48,7 +48,7 @@ multiEditor.displayName = 'Multiple Editor Example';
 multiEditor.description = 'Multiple Editor basic example';
 
 export const multiEditorVertical: InitFn = (
-  collection: DocCollection,
+  collection: Workspace,
   docId: string
 ) => {
   const doc = collection.createDoc({ id: docId });

blocksuite/playground/apps/starter/data/pending-structs.ts

@@ -1,12 +1,9 @@
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 import * as Y from 'yjs';
 
 import type { InitFn } from './utils.js';
 
-export const pendingStructs: InitFn = (
+export const pendingStructs: InitFn = (collection: Workspace, id: string) => {
-  collection: DocCollection,
-  id: string
-) => {
   const doc = collection.createDoc({ id });
   const tempDoc = collection.createDoc({ id: 'tempDoc' });
   doc.load();

blocksuite/playground/apps/starter/data/preset.ts

@@ -1,11 +1,11 @@
 import { MarkdownTransformer } from '@blocksuite/blocks';
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 
 import type { InitFn } from './utils.js';
 
 const presetMarkdown = `Click the 🔁 button to switch between editors dynamically - they are fully compatible!`;
 
-export const preset: InitFn = async (collection: DocCollection, id: string) => {
+export const preset: InitFn = async (collection: Workspace, id: string) => {
   const doc = collection.createDoc({ id });
   doc.load();
   // Add root block and surface block at root level

blocksuite/playground/apps/starter/data/synced.ts

@@ -1,5 +1,5 @@
 import { MarkdownTransformer } from '@blocksuite/blocks';
-import { type DocCollection, Text } from '@blocksuite/store';
+import { Text, type Workspace } from '@blocksuite/store';
 
 import type { InitFn } from './utils';
 
@@ -11,7 +11,7 @@ This article has also been published [in PDF format](https://www.inkandswitch.co
 
 We welcome your feedback: [@inkandswitch](https://twitter.com/inkandswitch) or hello@inkandswitch.com.`;
 
-export const synced: InitFn = (collection: DocCollection, id: string) => {
+export const synced: InitFn = (collection: Workspace, id: string) => {
   const docMain = collection.getDoc(id) ?? collection.createDoc({ id });
 
   const docSyncedPageId = 'doc:synced-page';

blocksuite/playground/apps/starter/data/utils.ts

@@ -1,7 +1,7 @@
-import type { DocCollection } from '@blocksuite/store';
+import type { Workspace } from '@blocksuite/store';
 
 export interface InitFn {
-  (collection: DocCollection, docId: string): Promise<void> | void;
+  (collection: Workspace, docId: string): Promise<void> | void;
   id: string;
   displayName: string;
   description: string;

blocksuite/playground/apps/starter/data/version-mismatch.ts

@@ -1,12 +1,9 @@
-import type { DocCollection } from '@blocksuite/store';
+import type { Workspace } from '@blocksuite/store';
 import * as Y from 'yjs';
 
 import type { InitFn } from './utils.js';
 
-export const versionMismatch: InitFn = (
+export const versionMismatch: InitFn = (collection: Workspace, id: string) => {
-  collection: DocCollection,
-  id: string
-) => {
   const doc = collection.createDoc({ id });
   const tempDoc = collection.createDoc({ id: 'tempDoc' });
   doc.load();

blocksuite/playground/apps/starter/main.ts

@@ -2,7 +2,6 @@ import '../../style.css';
 import '../dev-format.js';
 
 import {
-  type ExtensionType,
   WidgetViewMapExtension,
   WidgetViewMapIdentifier,
 } from '@blocksuite/block-std';
@@ -19,6 +18,7 @@ import { effects as blocksEffects } from '@blocksuite/blocks/effects';
 import * as globalUtils from '@blocksuite/global/utils';
 import * as editor from '@blocksuite/presets';
 import { effects as presetsEffects } from '@blocksuite/presets/effects';
+import type { ExtensionType } from '@blocksuite/store';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as store from '@blocksuite/store';
 

blocksuite/playground/apps/starter/utils/collection.ts

@@ -1,7 +1,6 @@
 import { AffineSchemas, SpecProvider, TestUtils } from '@blocksuite/blocks';
 import type { BlockSuiteFlags } from '@blocksuite/global/types';
-import { assertExists } from '@blocksuite/global/utils';
+import { Job, nanoid, Schema } from '@blocksuite/store';
-import { type BlockCollection, Job, nanoid, Schema } from '@blocksuite/store';
 import {
   createAutoIncrementIdGenerator,
   type DocCollectionOptions,
@@ -50,7 +49,7 @@ export function createStarterDocCollection() {
   }
 
   const flags: Partial<BlockSuiteFlags> = Object.fromEntries(
-    [...params.entries()]
+    Array.from(params.entries())
       .filter(([key]) => key.startsWith('enable_'))
       .map(([k, v]) => [k, v === 'true'])
   );
@@ -98,32 +97,6 @@ export function createStarterDocCollection() {
 }
 
 export async function initStarterDocCollection(collection: TestWorkspace) {
-  // init from other clients
-  if (room && !params.has('init')) {
-    const firstCollection = collection.docs.values().next().value as
-      | BlockCollection
-      | undefined;
-    let firstDoc = firstCollection?.getDoc();
-    if (!firstDoc) {
-      await new Promise<string>(resolve =>
-        collection.slots.docCreated.once(resolve)
-      );
-      const firstCollection = collection.docs.values().next().value as
-        | BlockCollection
-        | undefined;
-      firstDoc = firstCollection?.getDoc();
-    }
-    assertExists(firstDoc);
-    const doc = firstDoc;
-
-    doc.load();
-    if (!doc.root) {
-      await new Promise(resolve => doc.slots.rootAdded.once(resolve));
-    }
-    doc.resetHistory();
-    return;
-  }
-
   // use built-in init function
   const functionMap = new Map<
     string,

blocksuite/playground/apps/starter/utils/editor.ts

@@ -1,8 +1,4 @@
-import {
+import { BlockServiceWatcher, type EditorHost } from '@blocksuite/block-std';
-  BlockServiceWatcher,
-  type EditorHost,
-  type ExtensionType,
-} from '@blocksuite/block-std';
 import {
   AffineFormatBarWidget,
   CommunityCanvasTextFonts,
@@ -19,7 +15,7 @@ import {
   toolbarDefaultConfig,
 } from '@blocksuite/blocks';
 import { AffineEditorContainer, CommentPanel } from '@blocksuite/presets';
-import type { DocCollection } from '@blocksuite/store';
+import type { ExtensionType, Workspace } from '@blocksuite/store';
 
 import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel.js';
 import { CustomFramePanel } from '../../_common/components/custom-frame-panel.js';
@@ -47,7 +43,7 @@ function configureFormatBar(formatBar: AffineFormatBarWidget) {
   toolbarDefaultConfig(formatBar);
 }
 
-export async function mountDefaultDocEditor(collection: DocCollection) {
+export async function mountDefaultDocEditor(collection: Workspace) {
   const app = document.getElementById('app');
   if (!app) return;