snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,93 @@
+import type { Store, Workspace } from '@blocksuite/affine/store';
+import {
+  defaultImageProxyMiddleware,
+  docLinkBaseURLMiddlewareBuilder,
+  embedSyncedDocMiddleware,
+  titleMiddleware,
+} from '@blocksuite/affine-shared/adapters';
+
+import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel';
+import { CustomAdapterPanel } from '../../_common/components/custom-adapter-panel';
+import { CustomFramePanel } from '../../_common/components/custom-frame-panel';
+import { CustomOutlinePanel } from '../../_common/components/custom-outline-panel';
+import { CustomOutlineViewer } from '../../_common/components/custom-outline-viewer';
+import { DocsPanel } from '../../_common/components/docs-panel';
+import { LeftSidePanel } from '../../_common/components/left-side-panel';
+import { StarterDebugMenu } from '../../_common/components/starter-debug-menu';
+import { CommentPanel } from '../../comment/comment-panel';
+import { createTestEditor } from './extensions';
+
+export async function createTestApp(doc: Store, collection: Workspace) {
+  const app = document.querySelector('#app');
+  if (!app) {
+    throw new Error('Cannot find app root element(#app).');
+  }
+  const editor = createTestEditor(doc, collection);
+
+  app.append(editor);
+  await editor.updateComplete;
+
+  const debugMenu = new StarterDebugMenu();
+  const docsPanel = new DocsPanel();
+  const framePanel = new CustomFramePanel();
+  const outlinePanel = new CustomOutlinePanel();
+  const adapterPanel = new CustomAdapterPanel();
+  const outlineViewer = new CustomOutlineViewer();
+  const leftSidePanel = new LeftSidePanel();
+  const commentPanel = new CommentPanel();
+  const attachmentViewerPanel = new AttachmentViewerPanel();
+
+  docsPanel.editor = editor;
+  framePanel.editor = editor;
+  outlinePanel.editor = editor;
+  outlineViewer.editor = editor;
+  outlineViewer.toggleOutlinePanel = () => {
+    outlinePanel.toggleDisplay();
+  };
+  adapterPanel.editor = editor;
+  adapterPanel.transformerMiddlewares = [
+    docLinkBaseURLMiddlewareBuilder(
+      'https://example.com',
+      editor.doc.workspace.id
+    ).get(),
+    titleMiddleware(editor.doc.workspace.meta.docMetas),
+    embedSyncedDocMiddleware('content'),
+    defaultImageProxyMiddleware,
+  ];
+
+  debugMenu.collection = collection;
+  debugMenu.editor = editor;
+  debugMenu.outlinePanel = outlinePanel;
+  debugMenu.outlineViewer = outlineViewer;
+  debugMenu.framePanel = framePanel;
+  debugMenu.leftSidePanel = leftSidePanel;
+  debugMenu.docsPanel = docsPanel;
+  debugMenu.adapterPanel = adapterPanel;
+
+  debugMenu.commentPanel = commentPanel;
+
+  commentPanel.editor = editor;
+
+  document.body.append(attachmentViewerPanel);
+  document.body.append(outlinePanel);
+  document.body.append(outlineViewer);
+  document.body.append(framePanel);
+  document.body.append(leftSidePanel);
+  document.body.append(debugMenu);
+  document.body.append(adapterPanel);
+
+  window.editor = editor;
+  window.doc = doc;
+  Object.defineProperty(globalThis, 'host', {
+    get() {
+      return document.querySelector('editor-host');
+    },
+  });
+  Object.defineProperty(globalThis, 'std', {
+    get() {
+      return document.querySelector('editor-host')?.std;
+    },
+  });
+
+  return editor;
+}

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

@@ -0,0 +1,99 @@
+import type { StoreExtensionManager } from '@blocksuite/affine/ext-loader';
+import { AffineSchemas } from '@blocksuite/affine/schemas';
+import { nanoid, Schema, Transformer } from '@blocksuite/affine/store';
+import {
+  createAutoIncrementIdGenerator,
+  type DocCollectionOptions,
+  TestWorkspace,
+} from '@blocksuite/affine/store/test';
+import {
+  type BlobSource,
+  BroadcastChannelAwarenessSource,
+  BroadcastChannelDocSource,
+  IndexedDBBlobSource,
+  MemoryBlobSource,
+} from '@blocksuite/affine/sync';
+import * as Y from 'yjs';
+
+import { MockServerBlobSource } from '../../_common/sync/blob/mock-server.js';
+import type { InitFn } from '../data/utils.js';
+
+const params = new URLSearchParams(location.search);
+const room = params.get('room');
+const isE2E = room?.startsWith('playwright');
+const blobSourceArgs = (params.get('blobSource') ?? '').split(',');
+
+export function createStarterDocCollection(
+  storeExtensionManager: StoreExtensionManager
+) {
+  const collectionId = room ?? 'starter';
+  const schema = new Schema();
+  schema.register(AffineSchemas);
+  const idGenerator = isE2E ? createAutoIncrementIdGenerator() : nanoid;
+
+  let docSources: DocCollectionOptions['docSources'];
+  if (room) {
+    docSources = {
+      main: new BroadcastChannelDocSource(`broadcast-channel-${room}`),
+    };
+  }
+  const id = room ?? `starter-${Math.random().toString(16).slice(2, 8)}`;
+
+  const blobSources = {
+    main: new MemoryBlobSource(),
+    shadows: [] as BlobSource[],
+  } satisfies DocCollectionOptions['blobSources'];
+  if (blobSourceArgs.includes('mock')) {
+    blobSources.shadows.push(new MockServerBlobSource(collectionId));
+  }
+  if (blobSourceArgs.includes('idb')) {
+    blobSources.shadows.push(new IndexedDBBlobSource(collectionId));
+  }
+
+  const options: DocCollectionOptions = {
+    id: collectionId,
+    idGenerator,
+    awarenessSources: [new BroadcastChannelAwarenessSource(id)],
+    docSources,
+    blobSources,
+  };
+  const collection = new TestWorkspace(options);
+  collection.storeExtensions = storeExtensionManager.get('store');
+  collection.start();
+
+  // debug info
+  window.collection = collection;
+  window.blockSchemas = AffineSchemas;
+  window.job = new Transformer({
+    schema,
+    blobCRUD: collection.blobSync,
+    docCRUD: {
+      create: (id: string) => collection.createDoc(id).getStore({ id }),
+      get: (id: string) => collection.getDoc(id)?.getStore({ id }) ?? null,
+      delete: (id: string) => collection.removeDoc(id),
+    },
+  });
+  window.Y = Y;
+
+  return collection;
+}
+
+export async function initStarterDocCollection(collection: TestWorkspace) {
+  // use built-in init function
+  const functionMap = new Map<
+    string,
+    (collection: TestWorkspace, id: string) => Promise<void> | void
+  >();
+  Object.values(
+    (await import('../data/index.js')) as Record<string, InitFn>
+  ).forEach(fn => functionMap.set(fn.id, fn));
+  const init = params.get('init') || 'preset';
+  if (functionMap.has(init)) {
+    collection.meta.initialize();
+    await functionMap.get(init)?.(collection, 'doc:home');
+    const doc = collection.getDoc('doc:home');
+    if (!doc?.loaded) {
+      doc?.load();
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
+import {
+  CommunityCanvasTextFonts,
+  DocModeProvider,
+  EditorSettingExtension,
+  FeatureFlagService,
+  FontConfigExtension,
+  ParseDocUrlExtension,
+} from '@blocksuite/affine/shared/services';
+import type { ExtensionType, Store, Workspace } from '@blocksuite/affine/store';
+import { type TestAffineEditorContainer } from '@blocksuite/integration-test';
+import { getTestViewManager } from '@blocksuite/integration-test/view';
+
+import {
+  mockDocModeService,
+  mockEditorSetting,
+  mockParseDocUrlService,
+} from '../../_common/mock-services';
+
+const viewManager = getTestViewManager();
+
+export function getTestCommonExtensions(
+  editor: TestAffineEditorContainer
+): ExtensionType[] {
+  return [
+    FontConfigExtension(CommunityCanvasTextFonts),
+    EditorSettingExtension({
+      setting$: mockEditorSetting(),
+    }),
+    ParseDocUrlExtension(mockParseDocUrlService(editor.doc.workspace)),
+    {
+      setup: di => {
+        di.override(DocModeProvider, mockDocModeService(editor));
+      },
+    },
+    // CommentProviderExtension(mockCommentProvider()),
+  ];
+}
+
+export function createTestEditor(store: Store, workspace: Workspace) {
+  store
+    .get(FeatureFlagService)
+    .setFlag('enable_advanced_block_visibility', true);
+
+  const editor = document.createElement('affine-editor-container');
+
+  editor.autofocus = true;
+  editor.doc = store;
+
+  const defaultExtensions = getTestCommonExtensions(editor);
+  editor.pageSpecs = [...viewManager.get('page'), ...defaultExtensions];
+  editor.edgelessSpecs = [...viewManager.get('edgeless'), ...defaultExtensions];
+
+  editor.std
+    .get(RefNodeSlotsProvider)
+    .docLinkClicked.subscribe(({ pageId: docId }) => {
+      const target = workspace.getDoc(docId)?.getStore();
+      if (!target) {
+        throw new Error(`Failed to jump to doc ${docId}`);
+      }
+      target.load();
+      editor.doc = target;
+    });
+
+  return editor;
+}

blocksuite/playground/apps/starter/utils/setup-playground.ts

@@ -0,0 +1,42 @@
+import { DocModeProvider } from '@blocksuite/affine/shared/services';
+import type { Workspace } from '@blocksuite/affine/store';
+import { TestAffineEditorContainer } from '@blocksuite/integration-test';
+
+import {
+  getDocFromUrlParams,
+  listenHashChange,
+  setDocModeFromUrlParams,
+} from '../../_common/history.js';
+import { createTestApp } from './app.js';
+
+export async function mountDefaultDocEditor(collection: Workspace) {
+  const app = document.getElementById('app');
+  if (!app) return;
+
+  const url = new URL(location.toString());
+  const doc = getDocFromUrlParams(collection, url);
+
+  const editor = await createTestApp(doc, collection);
+
+  const modeService = editor.std.provider.get(DocModeProvider);
+  editor.mode = modeService.getPrimaryMode(doc.id);
+  setDocModeFromUrlParams(modeService, url.searchParams, doc.id);
+
+  // for multiple editor
+  const params = new URLSearchParams(location.search);
+  const init = params.get('init');
+  if (init && init.startsWith('multiple-editor')) {
+    app.childNodes.forEach(node => {
+      if (node instanceof TestAffineEditorContainer) {
+        node.style.flex = '1';
+        if (init === 'multiple-editor-vertical') {
+          node.style.overflow = 'auto';
+        }
+      }
+    });
+  }
+
+  listenHashChange(collection, editor);
+
+  return editor;
+}

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

@@ -0,0 +1,54 @@
+import type { Store, Workspace } from '@blocksuite/affine/store';
+
+import { createTestApp } from './app';
+
+export async function prepareTestApp(collection: Workspace) {
+  const params = new URLSearchParams(location.search);
+  const noInit = params.get('noInit') === 'true';
+
+  const store = await getStore(collection, noInit);
+  store.load();
+  if (!store.root) {
+    await new Promise(resolve => {
+      const subscription = store.slots.rootAdded.subscribe(value => {
+        subscription.unsubscribe();
+        resolve(value);
+      });
+    });
+  }
+
+  await createTestApp(store, collection);
+}
+
+async function getStore(
+  collection: Workspace,
+  noInit: boolean
+): Promise<Store> {
+  if (!noInit) {
+    collection.meta.initialize();
+    const doc = collection.createDoc('doc:home').getStore();
+    window.doc = doc;
+    return doc;
+  }
+
+  const doc = collection.docs.values().next().value;
+  const firstDoc = doc?.getStore();
+  if (firstDoc) {
+    window.doc = firstDoc;
+    return firstDoc;
+  }
+
+  const { resolve, reject, promise } = Promise.withResolvers<Store>();
+  collection.slots.docListUpdated.subscribe(() => {
+    const doc = collection.docs.values().next().value;
+    const firstDoc = doc?.getStore();
+    if (!firstDoc) {
+      reject(new Error(`Failed to get doc`));
+      return;
+    }
+    window.doc = firstDoc;
+    resolve(firstDoc);
+  });
+
+  return promise;
+}