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

blocksuite/blocks/src/_common/types.ts

@@ -1,16 +1,9 @@
 import type {
   BrushElementModel,
   ConnectorElementModel,
-  DocMode,
   GroupElementModel,
 } from '@blocksuite/affine-model';
 import type { GfxModel } from '@blocksuite/block-std/gfx';
-import type { Store } from '@blocksuite/store';
-
-export type AbstractEditor = {
-  doc: Store;
-  mode: DocMode;
-} & HTMLElement;
 
 export type Connectable = Exclude<
   GfxModel,

blocksuite/blocks/src/index.ts

@@ -9,7 +9,6 @@ import { isCanvasElement } from './root-block/edgeless/utils/query.js';
 export * from './_common/adapters/index.js';
 export { type NavigatorMode } from './_common/edgeless/frame/consts.js';
 export * from './_common/transformers/index.js';
-export { type AbstractEditor } from './_common/types.js';
 export * from './_specs/index.js';
 export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js';
 export type {

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

@@ -57,6 +57,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import * as lz from 'lz-string';
 import type { Pane } from 'tweakpane';
 
+import { createTestEditor } from '../../starter/utils/extensions.js';
 import { mockEdgelessTheme } from '../mock-services.js';
 import { AdaptersPanel } from './adapters-panel.js';
 import type { CustomFramePanel } from './custom-frame-panel.js';
@@ -643,8 +644,7 @@ export class StarterDebugMenu extends ShadowlessElement {
       ).length;
       if (currentEditorCount === 1) {
         // Add a second editor
-        const newEditor = document.createElement('affine-editor-container');
+        const newEditor = createTestEditor(this.doc, this.collection);
-        newEditor.doc = this.doc;
         app.append(newEditor);
         app.childNodes.forEach(child => {
           if (child instanceof AffineEditorContainer) {

blocksuite/playground/apps/_common/history.ts

@@ -2,7 +2,6 @@ import type { DocModeProvider } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc, Store, Workspace } from '@blocksuite/store';
-import type { LitElement } from 'lit';
 
 export function getDocFromUrlParams(collection: Workspace, url: URL) {
   let doc: Store | null = null;
@@ -41,9 +40,9 @@ export function setDocModeFromUrlParams(
 
 export function listenHashChange(
   collection: Workspace,
-  editor: AffineEditorContainer,
+  editor: AffineEditorContainer
-  panel?: LitElement
 ) {
+  const panel = document.querySelector('docs-panel');
   window.addEventListener('hashchange', () => {
     const url = new URL(location.toString());
     const doc = getDocFromUrlParams(collection, url);

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

@@ -37,10 +37,10 @@ export function removeModeFromStorage(docId: string) {
 const DEFAULT_MODE: DocMode = 'page';
 const slotMap = new Map<string, Slot<DocMode>>();
 
-export function mockDocModeService(
+export function mockDocModeService(editor: AffineEditorContainer) {
-  getEditorModeCallback: () => DocMode,
+  const getEditorModeCallback: () => DocMode = () => editor.mode;
-  setEditorModeCallback: (mode: DocMode) => void
+  const setEditorModeCallback: (mode: DocMode) => void = mode =>
-) {
+    editor.switchEditor(mode);
   const docModeService: DocModeProvider = {
     getPrimaryMode: (docId: string) => {
       try {

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();
+    const editor = createTestEditor(doc, collection);
-    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;
-      });
     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();
+    const editor = createTestEditor(doc, collection);
-    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;
-      });
     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 {
+import type { Store, Workspace } from '@blocksuite/store';
-  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 {
+import { createTestApp } from './app';
-  mockDocModeService,
-  mockEditorSetting,
-} from '../../_common/mock-services';
 
 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;
-}

blocksuite/presets/src/__tests__/utils/setup.ts

@@ -12,7 +12,9 @@ effects();
 import {
   CommunityCanvasTextFonts,
   type DocMode,
+  EdgelessEditorBlockSpecs,
   FontConfigExtension,
+  PageEditorBlockSpecs,
   StoreExtensions,
 } from '@blocksuite/blocks';
 import { AffineSchemas } from '@blocksuite/blocks/schemas';
@@ -71,14 +73,16 @@ async function createEditor(
   const editor = new AffineEditorContainer();
   editor.doc = doc;
   editor.mode = mode;
-  editor.pageSpecs = editor.pageSpecs.concat([
+  editor.pageSpecs = [
+    ...PageEditorBlockSpecs,
     FontConfigExtension(CommunityCanvasTextFonts),
     ...extensions,
-  ]);
+  ];
-  editor.edgelessSpecs = editor.edgelessSpecs.concat([
+  editor.edgelessSpecs = [
+    ...EdgelessEditorBlockSpecs,
     FontConfigExtension(CommunityCanvasTextFonts),
     ...extensions,
-  ]);
+  ];
   app.append(editor);
 
   window.editor = editor;

blocksuite/presets/src/editors/editor-container.ts

@@ -1,11 +1,5 @@
 import { BlockStdScope, ShadowlessElement } from '@blocksuite/block-std';
-import {
+import { type DocMode, ThemeProvider } from '@blocksuite/blocks';
-  type AbstractEditor,
-  type DocMode,
-  EdgelessEditorBlockSpecs,
-  PageEditorBlockSpecs,
-  ThemeProvider,
-} from '@blocksuite/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import {
   type BlockModel,
@@ -18,10 +12,9 @@ import { property } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { when } from 'lit/directives/when.js';
 
-export class AffineEditorContainer
+export class AffineEditorContainer extends SignalWatcher(
-  extends SignalWatcher(WithDisposable(ShadowlessElement))
+  WithDisposable(ShadowlessElement)
-  implements AbstractEditor
+) {
-{
   static override styles = css`
     .affine-page-viewport {
       position: relative;
@@ -90,13 +83,11 @@ export class AffineEditorContainer
 
   private readonly _doc = signal<Store>();
 
-  private readonly _edgelessSpecs = signal<ExtensionType[]>(
+  private readonly _edgelessSpecs = signal<ExtensionType[]>([]);
-    EdgelessEditorBlockSpecs
-  );
 
   private readonly _mode = signal<DocMode>('page');
 
-  private readonly _pageSpecs = signal<ExtensionType[]>(PageEditorBlockSpecs);
+  private readonly _pageSpecs = signal<ExtensionType[]>([]);
 
   private readonly _specs = computed(() =>
     this._mode.value === 'page'
@@ -163,9 +154,6 @@ export class AffineEditorContainer
     return this._std.value;
   }
 
-  /**
-   * @deprecated need to refactor
-   */
   override connectedCallback() {
     super.connectedCallback();
 

blocksuite/presets/src/editors/page-editor.ts

@@ -77,12 +77,7 @@ export class PageEditor extends SignalWatcher(
     const std = this.std;
     const theme = std.get(ThemeProvider).app$.value;
     return html`
-      <div
+      <div data-theme=${theme} class="page-editor-container">
-        data-theme=${theme}
-        class=${this.hasViewport
-          ? 'affine-page-viewport'
-          : 'page-editor-container'}
-      >
         ${guard([std], () => std.render())}
       </div>
     `;
@@ -103,9 +98,6 @@ export class PageEditor extends SignalWatcher(
   @property({ attribute: false })
   accessor doc!: Store;
 
-  @property({ type: Boolean })
-  accessor hasViewport = true;
-
   @property({ attribute: false })
   accessor specs = PageEditorBlockSpecs;
 

blocksuite/tests-legacy/e2e/basic.spec.ts

@@ -121,7 +121,6 @@ test(
 
     const pageB = await context.newPage();
     await enterPlaygroundRoom(pageB, {
-      flags: {},
       room,
       noInit: true,
     });
@@ -181,7 +180,7 @@ test(
 
     const room = await enterPlaygroundRoom(pageA);
     const pageB = await browser.newPage();
-    await enterPlaygroundRoom(pageB, { flags: {}, room });
+    await enterPlaygroundRoom(pageB, { room });
 
     await disconnectByClick(pageA);
     await disconnectByClick(pageB);

blocksuite/tests-legacy/e2e/edgeless/color-picker.spec.ts

@@ -15,7 +15,7 @@ import { parseStringToRgba } from '../utils/bs-alternative.js';
 import { test } from '../utils/playwright.js';
 
 async function setupWithColorPickerFunction(page: Page) {
-  await enterPlaygroundRoom(page, { flags: { enable_color_picker: true } });
+  await enterPlaygroundRoom(page);
   await initEmptyEdgelessState(page);
   await switchEditorMode(page);
 }

blocksuite/tests-legacy/e2e/utils/actions/misc.ts

@@ -1,7 +1,6 @@
 import '../declare-test-window.js';
 
 import type {
-  BlockSuiteFlags,
   DatabaseBlockModel,
   ListType,
   RichText,
@@ -111,7 +110,6 @@ export function expectConsoleMessage(
 }
 
 export type PlaygroundRoomOptions = {
-  flags?: Partial<BlockSuiteFlags>;
   room?: string;
   blobSource?: ('idb' | 'mock')[];
   noInit?: boolean;
@@ -128,11 +126,6 @@ export async function enterPlaygroundRoom(
   }
   url.searchParams.set('room', room);
   url.searchParams.set('blobSource', blobSource?.join(',') || 'idb');
-  for (const [key, value] of Object.entries(ops?.flags || {})) {
-    if (value) {
-      url.searchParams.append('flag', key);
-    }
-  }
   if (ops?.noInit) {
     url.searchParams.set('noInit', 'true');
   }

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -343,7 +343,6 @@ export const BlocksuiteDocEditor = forwardRef<
           ref={onDocRef}
           doc={page}
           specs={specs}
-          hasViewport={false}
         />
         <div
           className={styles.docEditorGap}