refactor(editor): remove AbstractEditor type and feature flags in test (#10308)

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

@@ -1,7 +1,6 @@
-import { RefNodeSlotsProvider } from '@blocksuite/affine-components/rich-text';
-import { AffineEditorContainer } from '@blocksuite/presets';
 import { Text, type Workspace } from '@blocksuite/store';
 
+import { createTestEditor } from '../utils/extensions.js';
 import type { InitFn } from './utils.js';
 
 export const multiEditor: InitFn = (collection: Workspace, id: string) => {
@@ -24,18 +23,7 @@ export const multiEditor: InitFn = (collection: Workspace, id: string) => {
 
   const app = document.getElementById('app');
   if (app) {
-    const editor = new AffineEditorContainer();
-    editor.doc = doc;
-    editor.std
-      .get(RefNodeSlotsProvider)
-      .docLinkClicked.on(({ pageId: docId }) => {
-        const target = collection.getDoc(docId);
-        if (!target) {
-          throw new Error(`Failed to jump to doc ${docId}`);
-        }
-        target.load();
-        editor.doc = target;
-      });
+    const editor = createTestEditor(doc, collection);
     editor.style.borderRight = '1px solid var(--affine-border-color)';
 
     app.append(editor);
@@ -70,18 +58,7 @@ export const multiEditorVertical: InitFn = (
 
   const app = document.getElementById('app');
   if (app) {
-    const editor = new AffineEditorContainer();
-    editor.doc = doc;
-    editor.std
-      .get(RefNodeSlotsProvider)
-      .docLinkClicked.on(({ pageId: docId }) => {
-        const target = collection.getDoc(docId);
-        if (!target) {
-          throw new Error(`Failed to jump to doc ${docId}`);
-        }
-        target.load();
-        editor.doc = target;
-      });
+    const editor = createTestEditor(doc, collection);
     editor.style.borderBottom = '1px solid var(--affine-border-color)';
 
     app.append(editor);

blocksuite/playground/apps/starter/main.ts

@@ -14,7 +14,7 @@ import {
   createStarterDocCollection,
   initStarterDocCollection,
 } from './utils/collection.js';
-import { mountDefaultDocEditor } from './utils/editor.js';
+import { mountDefaultDocEditor } from './utils/setup-playground';
 import { prepareTestApp } from './utils/test';
 
 blocksEffects();

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

@@ -0,0 +1,73 @@
+import { CommentPanel } from '@blocksuite/presets';
+import type { Store, Workspace } from '@blocksuite/store';
+
+import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-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 { 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 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();
+  };
+
+  debugMenu.collection = collection;
+  debugMenu.editor = editor;
+  debugMenu.outlinePanel = outlinePanel;
+  debugMenu.outlineViewer = outlineViewer;
+  debugMenu.framePanel = framePanel;
+  debugMenu.leftSidePanel = leftSidePanel;
+  debugMenu.docsPanel = docsPanel;
+
+  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);
+
+  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/editor.ts

@@ -1,190 +0,0 @@
-import { BlockServiceWatcher, type EditorHost } from '@blocksuite/block-std';
-import {
-  AffineFormatBarWidget,
-  CommunityCanvasTextFonts,
-  DocModeProvider,
-  EditorSettingExtension,
-  FontConfigExtension,
-  GenerateDocUrlExtension,
-  NotificationExtension,
-  OverrideThemeExtension,
-  type PageRootService,
-  ParseDocUrlExtension,
-  RefNodeSlotsProvider,
-  SpecProvider,
-  toolbarDefaultConfig,
-} from '@blocksuite/blocks';
-import { AffineEditorContainer, CommentPanel } from '@blocksuite/presets';
-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';
-import { CustomOutlinePanel } from '../../_common/components/custom-outline-panel.js';
-import { CustomOutlineViewer } from '../../_common/components/custom-outline-viewer.js';
-import { DocsPanel } from '../../_common/components/docs-panel.js';
-import { LeftSidePanel } from '../../_common/components/left-side-panel.js';
-import { StarterDebugMenu } from '../../_common/components/starter-debug-menu.js';
-import {
-  getDocFromUrlParams,
-  listenHashChange,
-  setDocModeFromUrlParams,
-} from '../../_common/history.js';
-import {
-  mockDocModeService,
-  mockEditorSetting,
-  mockGenerateDocUrlService,
-  mockNotificationService,
-  mockParseDocUrlService,
-  themeExtension,
-} from '../../_common/mock-services';
-
-function configureFormatBar(formatBar: AffineFormatBarWidget) {
-  toolbarDefaultConfig(formatBar);
-}
-
-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 attachmentViewerPanel = new AttachmentViewerPanel();
-
-  const editor = new AffineEditorContainer();
-
-  class PatchPageServiceWatcher extends BlockServiceWatcher {
-    static override readonly flavour = 'affine:page';
-
-    override mounted() {
-      const pageRootService = this.blockService as PageRootService;
-      const onFormatBarConnected = pageRootService.specSlots.widgetConnected.on(
-        view => {
-          if (view.component instanceof AffineFormatBarWidget) {
-            configureFormatBar(view.component);
-          }
-        }
-      );
-      pageRootService.disposables.add(onFormatBarConnected);
-    }
-  }
-
-  const extensions: ExtensionType[] = [
-    PatchPageServiceWatcher,
-    FontConfigExtension(CommunityCanvasTextFonts),
-    ParseDocUrlExtension(mockParseDocUrlService(collection)),
-    GenerateDocUrlExtension(mockGenerateDocUrlService(collection)),
-    NotificationExtension(mockNotificationService(editor)),
-    OverrideThemeExtension(themeExtension),
-    EditorSettingExtension(mockEditorSetting()),
-    {
-      setup: di => {
-        di.override(DocModeProvider, () =>
-          mockDocModeService(getEditorModeCallback, setEditorModeCallBack)
-        );
-      },
-    },
-  ];
-
-  const pageSpecs = SpecProvider.getInstance().getSpec('page');
-  const setEditorModeCallBack = editor.switchEditor.bind(editor);
-  const getEditorModeCallback = () => editor.mode;
-  pageSpecs.extend([...extensions]);
-  editor.pageSpecs = pageSpecs.value;
-
-  const edgelessSpecs = SpecProvider.getInstance().getSpec('edgeless');
-  edgelessSpecs.extend([...extensions]);
-  editor.edgelessSpecs = edgelessSpecs.value;
-
-  SpecProvider.getInstance().extendSpec('edgeless:preview', [
-    OverrideThemeExtension(themeExtension),
-  ]);
-
-  editor.mode = 'page';
-  editor.doc = doc;
-  editor.std
-    .get(RefNodeSlotsProvider)
-    .docLinkClicked.on(({ pageId: docId }) => {
-      const target = collection.getDoc(docId);
-      if (!target) {
-        throw new Error(`Failed to jump to doc ${docId}`);
-      }
-      target.load();
-      editor.doc = target;
-    });
-
-  app.append(editor);
-  await editor.updateComplete;
-  const modeService = editor.std.provider.get(DocModeProvider);
-  editor.mode = modeService.getPrimaryMode(doc.id);
-  setDocModeFromUrlParams(modeService, url.searchParams, doc.id);
-
-  const outlinePanel = new CustomOutlinePanel();
-  outlinePanel.editor = editor;
-
-  const outlineViewer = new CustomOutlineViewer();
-  outlineViewer.editor = editor;
-  outlineViewer.toggleOutlinePanel = () => {
-    outlinePanel.toggleDisplay();
-  };
-
-  const framePanel = new CustomFramePanel();
-  framePanel.editor = editor;
-
-  const leftSidePanel = new LeftSidePanel();
-
-  const docsPanel = new DocsPanel();
-  docsPanel.editor = editor;
-
-  const commentPanel = new CommentPanel();
-  commentPanel.editor = editor;
-
-  const debugMenu = new StarterDebugMenu();
-  debugMenu.collection = collection;
-  debugMenu.editor = editor;
-  debugMenu.outlinePanel = outlinePanel;
-  debugMenu.outlineViewer = outlineViewer;
-  debugMenu.framePanel = framePanel;
-  debugMenu.leftSidePanel = leftSidePanel;
-  debugMenu.docsPanel = docsPanel;
-  debugMenu.commentPanel = commentPanel;
-
-  document.body.append(attachmentViewerPanel);
-  document.body.append(outlinePanel);
-  document.body.append(outlineViewer);
-  document.body.append(framePanel);
-  document.body.append(leftSidePanel);
-  document.body.append(debugMenu);
-
-  // 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 AffineEditorContainer) {
-        node.style.flex = '1';
-        if (init === 'multiple-editor-vertical') {
-          node.style.overflow = 'auto';
-        }
-      }
-    });
-  }
-
-  // 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;
-}

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

@@ -0,0 +1,62 @@
+import {
+  CommunityCanvasTextFonts,
+  DocModeProvider,
+  EdgelessEditorBlockSpecs,
+  EditorSettingExtension,
+  FeatureFlagService,
+  FontConfigExtension,
+  PageEditorBlockSpecs,
+  ParseDocUrlExtension,
+  RefNodeSlotsProvider,
+} from '@blocksuite/blocks';
+import { type AffineEditorContainer } from '@blocksuite/presets';
+import type { ExtensionType, Store, Workspace } from '@blocksuite/store';
+
+import {
+  mockDocModeService,
+  mockEditorSetting,
+  mockParseDocUrlService,
+} from '../../_common/mock-services';
+
+export function getTestCommonExtensions(
+  editor: AffineEditorContainer
+): ExtensionType[] {
+  return [
+    FontConfigExtension(CommunityCanvasTextFonts),
+    EditorSettingExtension(mockEditorSetting()),
+    ParseDocUrlExtension(mockParseDocUrlService(editor.doc.workspace)),
+    {
+      setup: di => {
+        di.override(DocModeProvider, mockDocModeService(editor));
+      },
+    },
+  ];
+}
+
+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 = [...PageEditorBlockSpecs, ...defaultExtensions];
+  editor.edgelessSpecs = [...EdgelessEditorBlockSpecs, ...defaultExtensions];
+
+  editor.std
+    .get(RefNodeSlotsProvider)
+    .docLinkClicked.on(({ pageId: docId }) => {
+      const target = workspace.getDoc(docId);
+      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/blocks';
+import { AffineEditorContainer } from '@blocksuite/presets';
+import type { Workspace } from '@blocksuite/store';
+
+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 AffineEditorContainer) {
+        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

@@ -1,34 +1,18 @@
-import {
-  type BlockSuiteFlags,
-  CommunityCanvasTextFonts,
-  DocModeProvider,
-  EditorSettingExtension,
-  FeatureFlagService,
-  FontConfigExtension,
-  ParseDocUrlProvider,
-  RefNodeSlotsProvider,
-} from '@blocksuite/blocks';
-import type { Container } from '@blocksuite/global/di';
-import type { ExtensionType, Store, Workspace } from '@blocksuite/store';
+import type { Store, Workspace } from '@blocksuite/store';
 
-import {
-  mockDocModeService,
-  mockEditorSetting,
-} from '../../_common/mock-services';
+import { createTestApp } from './app';
 
 export async function prepareTestApp(collection: Workspace) {
   const params = new URLSearchParams(location.search);
-  const allFlags = params.getAll('flag');
-  const flags = allFlags.reduce(
-    (acc, flag) => {
-      acc[flag] = true;
-      return acc;
-    },
-    {} as Record<string, boolean>
-  );
   const noInit = params.get('noInit') === 'true';
+
   const store = await getStore(collection, noInit);
-  await createTestApp(store, collection, flags);
+  store.load();
+  if (!store.root) {
+    await new Promise(resolve => store.slots.rootAdded.once(resolve));
+  }
+
+  await createTestApp(store, collection);
 }
 
 async function getStore(
@@ -63,114 +47,3 @@ async function getStore(
 
   return promise;
 }
-
-async function createTestApp(
-  doc: Store,
-  collection: Workspace,
-  flags: Partial<BlockSuiteFlags> = {}
-) {
-  doc.load();
-
-  if (!doc.root) {
-    await new Promise(resolve => doc.slots.rootAdded.once(resolve));
-  }
-
-  // add app root from https://github.com/toeverything/blocksuite/commit/947201981daa64c5ceeca5fd549460c34e2dabfa
-  const appRoot = document.querySelector('#app');
-  if (!appRoot) {
-    throw new Error('Cannot find app root element(#app).');
-  }
-
-  const editor = createEditor(doc, collection, appRoot, flags);
-  await editor.updateComplete;
-
-  const debugMenu = document.createElement('starter-debug-menu');
-  const docsPanel = document.createElement('docs-panel');
-  const framePanel = document.createElement('custom-frame-panel');
-  const outlinePanel = document.createElement('custom-outline-panel');
-  const outlineViewer = document.createElement('custom-outline-viewer');
-  const leftSidePanel = document.createElement('left-side-panel');
-  docsPanel.editor = editor;
-  framePanel.editor = editor;
-  outlinePanel.editor = editor;
-  outlineViewer.editor = editor;
-  debugMenu.collection = collection;
-  debugMenu.editor = editor;
-  debugMenu.docsPanel = docsPanel;
-  debugMenu.framePanel = framePanel;
-  debugMenu.outlineViewer = outlineViewer;
-  debugMenu.outlinePanel = outlinePanel;
-  debugMenu.leftSidePanel = leftSidePanel;
-  document.body.append(debugMenu);
-  document.body.append(leftSidePanel);
-  document.body.append(framePanel);
-  document.body.append(outlinePanel);
-  document.body.append(outlineViewer);
-
-  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;
-    },
-  });
-}
-
-function createEditor(
-  doc: Store,
-  collection: Workspace,
-  appRoot: Element,
-  flags: Partial<BlockSuiteFlags> = {}
-) {
-  const editor = document.createElement('affine-editor-container');
-  for (const [key, value] of Object.entries(flags)) {
-    doc.get(FeatureFlagService).setFlag(key as keyof BlockSuiteFlags, value);
-  }
-  doc.get(FeatureFlagService).setFlag('enable_advanced_block_visibility', true);
-
-  editor.doc = doc;
-  editor.autofocus = true;
-  const defaultExtensions: ExtensionType[] = [
-    FontConfigExtension(CommunityCanvasTextFonts),
-    EditorSettingExtension(mockEditorSetting()),
-    {
-      setup: (di: Container) => {
-        di.addImpl(ParseDocUrlProvider, {
-          parseDocUrl() {
-            return undefined;
-          },
-        });
-      },
-    },
-    {
-      setup: (di: Container) => {
-        di.override(
-          DocModeProvider,
-          mockDocModeService(
-            () => editor.mode,
-            (mode: 'page' | 'edgeless') => editor.switchEditor(mode)
-          )
-        );
-      },
-    },
-  ];
-  editor.pageSpecs = [...editor.pageSpecs, ...defaultExtensions];
-  editor.edgelessSpecs = [...editor.edgelessSpecs, ...defaultExtensions];
-
-  editor.std
-    .get(RefNodeSlotsProvider)
-    .docLinkClicked.on(({ pageId: docId }) => {
-      const newDoc = collection.getDoc(docId);
-      if (!newDoc) {
-        throw new Error(`Failed to jump to page ${docId}`);
-      }
-      editor.doc = newDoc;
-    });
-  appRoot.append(editor);
-  return editor;
-}