chore: merge blocksuite source code (#9213)

blocksuite/playground/apps/default/main.ts

@@ -0,0 +1,27 @@
+import '../../style.css';
+import '../dev-format.js';
+
+import { effects as blocksEffects } from '@blocksuite/blocks/effects';
+import { effects as presetsEffects } from '@blocksuite/presets/effects';
+
+import { setupEdgelessTemplate } from '../_common/setup.js';
+import {
+  createDefaultDocCollection,
+  initDefaultDocCollection,
+} from './utils/collection.js';
+import { mountDefaultDocEditor } from './utils/editor.js';
+
+blocksEffects();
+presetsEffects();
+
+async function main() {
+  if (window.collection) return;
+
+  setupEdgelessTemplate();
+
+  const collection = await createDefaultDocCollection();
+  await initDefaultDocCollection(collection);
+  await mountDefaultDocEditor(collection);
+}
+
+main().catch(console.error);

blocksuite/playground/apps/default/specs-examples/custom-attachment/custom-attachment.ts

@@ -0,0 +1,50 @@
+import {
+  BlockFlavourIdentifier,
+  BlockServiceIdentifier,
+  type ExtensionType,
+  StdIdentifier,
+} from '@blocksuite/block-std';
+import {
+  AttachmentBlockService,
+  EdgelessEditorBlockSpecs,
+  PageEditorBlockSpecs,
+} from '@blocksuite/blocks';
+
+class CustomAttachmentBlockService extends AttachmentBlockService {
+  override mounted(): void {
+    super.mounted();
+    this.maxFileSize = 100 * 1000 * 1000; // 100MB
+  }
+}
+
+export function getCustomAttachmentSpecs() {
+  const pageModeSpecs: ExtensionType[] = [
+    ...PageEditorBlockSpecs,
+    {
+      setup: di => {
+        di.override(
+          BlockServiceIdentifier('affine:attachment'),
+          CustomAttachmentBlockService,
+          [StdIdentifier, BlockFlavourIdentifier('affine:attachment')]
+        );
+      },
+    },
+  ];
+  const edgelessModeSpecs: ExtensionType[] = [
+    ...EdgelessEditorBlockSpecs,
+    {
+      setup: di => {
+        di.override(
+          BlockServiceIdentifier('affine:attachment'),
+          CustomAttachmentBlockService,
+          [StdIdentifier, BlockFlavourIdentifier('affine:attachment')]
+        );
+      },
+    },
+  ];
+
+  return {
+    pageModeSpecs,
+    edgelessModeSpecs,
+  };
+}

blocksuite/playground/apps/default/specs-examples/index.ts

@@ -0,0 +1,26 @@
+import {
+  EdgelessEditorBlockSpecs,
+  PageEditorBlockSpecs,
+} from '@blocksuite/blocks';
+
+import { getCustomAttachmentSpecs } from './custom-attachment/custom-attachment.js';
+
+const params = new URLSearchParams(location.search);
+
+export function getExampleSpecs() {
+  const type = params.get('exampleSpec');
+
+  let pageModeSpecs = PageEditorBlockSpecs;
+  let edgelessModeSpecs = EdgelessEditorBlockSpecs;
+
+  if (type === 'attachment') {
+    const specs = getCustomAttachmentSpecs();
+    pageModeSpecs = specs.pageModeSpecs;
+    edgelessModeSpecs = specs.edgelessModeSpecs;
+  }
+
+  return {
+    pageModeSpecs,
+    edgelessModeSpecs,
+  };
+}

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

@@ -0,0 +1,109 @@
+import { AffineSchemas } from '@blocksuite/blocks';
+import type { BlockSuiteFlags } from '@blocksuite/global/types';
+import {
+  DocCollection,
+  type DocCollectionOptions,
+  IdGeneratorType,
+  Job,
+  Schema,
+  Text,
+} from '@blocksuite/store';
+import {
+  BroadcastChannelAwarenessSource,
+  BroadcastChannelDocSource,
+  IndexedDBBlobSource,
+  IndexedDBDocSource,
+} from '@blocksuite/sync';
+
+import { WebSocketAwarenessSource } from '../../_common/sync/websocket/awareness';
+import { WebSocketDocSource } from '../../_common/sync/websocket/doc';
+
+const BASE_WEBSOCKET_URL = new URL(import.meta.env.PLAYGROUND_WS);
+
+export async function createDefaultDocCollection() {
+  const idGenerator: IdGeneratorType = IdGeneratorType.NanoID;
+  const schema = new Schema();
+  schema.register(AffineSchemas);
+
+  const params = new URLSearchParams(location.search);
+  let docSources: DocCollectionOptions['docSources'] = {
+    main: new IndexedDBDocSource(),
+  };
+  let awarenessSources: DocCollectionOptions['awarenessSources'];
+  const room = params.get('room');
+  if (room) {
+    const ws = new WebSocket(new URL(`/room/${room}`, BASE_WEBSOCKET_URL));
+    await new Promise((resolve, reject) => {
+      ws.addEventListener('open', resolve);
+      ws.addEventListener('error', reject);
+    })
+      .then(() => {
+        docSources = {
+          main: new IndexedDBDocSource(),
+          shadows: [new WebSocketDocSource(ws)],
+        };
+        awarenessSources = [new WebSocketAwarenessSource(ws)];
+      })
+      .catch(() => {
+        docSources = {
+          main: new IndexedDBDocSource(),
+          shadows: [new BroadcastChannelDocSource()],
+        };
+        awarenessSources = [
+          new BroadcastChannelAwarenessSource('collabPlayground'),
+        ];
+      });
+  }
+
+  const flags: Partial<BlockSuiteFlags> = Object.fromEntries(
+    [...params.entries()]
+      .filter(([key]) => key.startsWith('enable_'))
+      .map(([k, v]) => [k, v === 'true'])
+  );
+
+  const options: DocCollectionOptions = {
+    id: 'collabPlayground',
+    schema,
+    idGenerator,
+    blobSources: {
+      main: new IndexedDBBlobSource('collabPlayground'),
+    },
+    docSources,
+    awarenessSources,
+    defaultFlags: {
+      enable_synced_doc_block: true,
+      enable_pie_menu: true,
+      enable_lasso_tool: true,
+      enable_color_picker: true,
+      ...flags,
+    },
+  };
+  const collection = new DocCollection(options);
+  collection.start();
+
+  // debug info
+  window.collection = collection;
+  window.blockSchemas = AffineSchemas;
+  window.job = new Job({ collection });
+  window.Y = DocCollection.Y;
+
+  return collection;
+}
+
+export async function initDefaultDocCollection(collection: DocCollection) {
+  const params = new URLSearchParams(location.search);
+
+  await collection.waitForSynced();
+
+  const shouldInit = collection.docs.size === 0 && !params.get('room');
+  if (shouldInit) {
+    collection.meta.initialize();
+    const doc = collection.createDoc({ id: 'doc:home' });
+    doc.load();
+    const rootId = doc.addBlock('affine:page', {
+      title: new Text(),
+    });
+    doc.addBlock('affine:surface', {}, rootId);
+    doc.resetHistory();
+  }
+}

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

@@ -0,0 +1,141 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { EditorHost, ExtensionType } from '@blocksuite/block-std';
+import {
+  CommunityCanvasTextFonts,
+  DocModeExtension,
+  DocModeProvider,
+  FontConfigExtension,
+  GenerateDocUrlExtension,
+  GenerateDocUrlProvider,
+  NotificationExtension,
+  OverrideThemeExtension,
+  ParseDocUrlExtension,
+  RefNodeSlotsExtension,
+  RefNodeSlotsProvider,
+  SpecProvider,
+} from '@blocksuite/blocks';
+import { AffineEditorContainer } from '@blocksuite/presets';
+import type { DocCollection } from '@blocksuite/store';
+
+import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel.js';
+import { CollabDebugMenu } from '../../_common/components/collab-debug-menu.js';
+import { DocsPanel } from '../../_common/components/docs-panel.js';
+import { LeftSidePanel } from '../../_common/components/left-side-panel.js';
+import {
+  getDocFromUrlParams,
+  listenHashChange,
+  setDocModeFromUrlParams,
+} from '../../_common/history.js';
+import {
+  mockDocModeService,
+  mockGenerateDocUrlService,
+  mockNotificationService,
+  mockParseDocUrlService,
+  mockPeekViewExtension,
+  themeExtension,
+} from '../../_common/mock-services.js';
+import { getExampleSpecs } from '../specs-examples/index.js';
+
+export async function mountDefaultDocEditor(collection: DocCollection) {
+  const app = document.getElementById('app');
+  if (!app) return;
+
+  const url = new URL(location.toString());
+  const doc = getDocFromUrlParams(collection, url);
+
+  const attachmentViewerPanel = new AttachmentViewerPanel();
+
+  const editor = new AffineEditorContainer();
+  const specs = getExampleSpecs();
+  const refNodeSlotsExtension = RefNodeSlotsExtension();
+  editor.pageSpecs = patchPageRootSpec([
+    refNodeSlotsExtension,
+    ...specs.pageModeSpecs,
+  ]);
+  editor.edgelessSpecs = patchPageRootSpec([
+    refNodeSlotsExtension,
+    ...specs.edgelessModeSpecs,
+  ]);
+
+  SpecProvider.getInstance().extendSpec('edgeless:preview', [
+    OverrideThemeExtension(themeExtension),
+  ]);
+  editor.doc = doc;
+  editor.mode = 'page';
+  editor.std
+    .get(RefNodeSlotsProvider)
+    .docLinkClicked.on(({ pageId: docId }) => {
+      const target = collection.getDoc(docId);
+      if (!target) {
+        throw new Error(`Failed to jump to doc ${docId}`);
+      }
+
+      const url = editor.std
+        .get(GenerateDocUrlProvider)
+        .generateDocUrl(target.id);
+      if (url) history.pushState({}, '', url);
+
+      target.load();
+      editor.doc = target;
+    });
+
+  app.append(editor);
+  await editor.updateComplete;
+  const modeService = editor.host!.std.get(DocModeProvider);
+  editor.mode = modeService.getPrimaryMode(doc.id);
+  setDocModeFromUrlParams(modeService, url.searchParams, doc.id);
+  editor.slots.docUpdated.on(({ newDocId }) => {
+    editor.mode = modeService.getPrimaryMode(newDocId);
+  });
+
+  const leftSidePanel = new LeftSidePanel();
+
+  const docsPanel = new DocsPanel();
+  docsPanel.editor = editor;
+
+  const collabDebugMenu = new CollabDebugMenu();
+  collabDebugMenu.collection = collection;
+  collabDebugMenu.editor = editor;
+  collabDebugMenu.leftSidePanel = leftSidePanel;
+  collabDebugMenu.docsPanel = docsPanel;
+
+  document.body.append(attachmentViewerPanel);
+  document.body.append(leftSidePanel);
+  document.body.append(collabDebugMenu);
+
+  // debug info
+  window.editor = editor;
+  window.doc = doc;
+  Object.defineProperty(globalThis, 'host', {
+    get() {
+      return document.querySelector<EditorHost>('editor-host');
+    },
+  });
+  Object.defineProperty(globalThis, 'std', {
+    get() {
+      return document.querySelector<EditorHost>('editor-host')?.std;
+    },
+  });
+
+  listenHashChange(collection, editor, docsPanel);
+
+  return editor;
+
+  function patchPageRootSpec(spec: ExtensionType[]) {
+    const setEditorModeCallBack = editor.switchEditor.bind(editor);
+    const getEditorModeCallback = () => editor.mode;
+    const newSpec: typeof spec = [
+      ...spec,
+      DocModeExtension(
+        mockDocModeService(getEditorModeCallback, setEditorModeCallBack)
+      ),
+      OverrideThemeExtension(themeExtension),
+      ParseDocUrlExtension(mockParseDocUrlService(collection)),
+      GenerateDocUrlExtension(mockGenerateDocUrlService(collection)),
+      NotificationExtension(mockNotificationService(editor)),
+      FontConfigExtension(CommunityCanvasTextFonts),
+      mockPeekViewExtension(attachmentViewerPanel),
+    ];
+    return newSpec;
+  }
+}

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

@@ -0,0 +1,26 @@
+function escapeHtml(html: string) {
+  const div = document.createElement('div');
+  div.textContent = html;
+  return div.innerHTML;
+}
+
+// Custom function to emit toast notifications
+export function notify(
+  message: string,
+  variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary',
+  icon = 'info-circle',
+  duration = 2000
+) {
+  const alert = Object.assign(document.createElement('sl-alert'), {
+    variant,
+    closable: true,
+    duration: duration,
+    innerHTML: `
+      <sl-icon name="${icon}" slot="icon"></sl-icon>
+      ${escapeHtml(message)}
+    `,
+  });
+
+  document.body.append(alert);
+  return alert.toast();
+}