refactor(editor): rename presets to integration test (#10340)

blocksuite/affine/all/package.json

@@ -17,7 +17,6 @@
     "@blocksuite/blocks": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
-    "@blocksuite/presets": "workspace:*",
     "@blocksuite/store": "workspace:*",
     "@blocksuite/sync": "workspace:*"
   },
@@ -37,7 +36,6 @@
     "./inline": "./src/inline/index.ts",
     "./inline/consts": "./src/inline/consts.ts",
     "./inline/types": "./src/inline/types.ts",
-    "./presets": "./src/presets/index.ts",
     "./blocks": "./src/blocks/index.ts",
     "./blocks/schemas": "./src/blocks/schemas.ts",
     "./sync": "./src/sync/index.ts"
@@ -83,9 +81,6 @@
       "inline/types": [
         "dist/inline/types.d.ts"
       ],
-      "presets": [
-        "dist/presets/index.d.ts"
-      ],
       "blocks": [
         "dist/blocks/index.d.ts"
       ],

blocksuite/affine/all/src/effects.ts

@@ -1,7 +1,5 @@
 import { effects as blocksEffects } from '@blocksuite/blocks/effects';
-import { effects as presetsEffects } from '@blocksuite/presets/effects';
 
 export function effects() {
   blocksEffects();
-  presetsEffects();
 }

blocksuite/affine/all/src/presets/index.ts

@@ -1 +0,0 @@
-export * from '@blocksuite/presets';

blocksuite/affine/all/tsconfig.json

@@ -11,7 +11,6 @@
     { "path": "../../blocks" },
     { "path": "../../framework/global" },
     { "path": "../../framework/inline" },
-    { "path": "../../presets" },
     { "path": "../../framework/store" },
     { "path": "../../framework/sync" }
   ]

blocksuite/integration-test/README.md

@@ -0,0 +1,3 @@
+# `@blocksuite/integration-test`
+
+Integration test for BlockSuite.

blocksuite/integration-test/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@blocksuite/presets",
-  "description": "Prebuilt BlockSuite editors and opt-in additional UI components.",
+  "name": "@blocksuite/integration-test",
+  "description": "Integration test for BlockSuite",
   "type": "module",
   "scripts": {
     "dev": "vite",

blocksuite/integration-test/src/__tests__/utils/edgeless.ts

@@ -5,9 +5,9 @@ import type {
 } from '@blocksuite/blocks';
 import type { Store } from '@blocksuite/store';
 
-import type { AffineEditorContainer } from '../../index.js';
+import type { TestAffineEditorContainer } from '../../index.js';
 
-export function getSurface(doc: Store, editor: AffineEditorContainer) {
+export function getSurface(doc: Store, editor: TestAffineEditorContainer) {
   const surfaceModel = doc.getBlockByFlavour('affine:surface');
 
   return editor.host!.view.getBlock(
@@ -17,17 +17,17 @@ export function getSurface(doc: Store, editor: AffineEditorContainer) {
 
 export function getDocRootBlock(
   doc: Store,
-  editor: AffineEditorContainer,
+  editor: TestAffineEditorContainer,
   mode: 'page'
 ): PageRootBlockComponent;
 export function getDocRootBlock(
   doc: Store,
-  editor: AffineEditorContainer,
+  editor: TestAffineEditorContainer,
   mode: 'edgeless'
 ): EdgelessRootBlockComponent;
 export function getDocRootBlock(
   doc: Store,
-  editor: AffineEditorContainer,
+  editor: TestAffineEditorContainer,
   _?: 'edgeless' | 'page'
 ) {
   return editor.host!.view.getBlock(doc.root!.id) as

blocksuite/integration-test/src/__tests__/utils/setup.ts

@@ -25,7 +25,7 @@ import {
   TestWorkspace,
 } from '@blocksuite/store/test';
 
-import { AffineEditorContainer } from '../../index.js';
+import { TestAffineEditorContainer } from '../../index.js';
 
 function createCollectionOptions() {
   const schema = new Schema();
@@ -70,7 +70,7 @@ async function createEditor(
   const blockCollection = collection.docs.values().next().value;
   assertExists(blockCollection, 'Need to create a doc first');
   const doc = blockCollection.getStore();
-  const editor = new AffineEditorContainer();
+  const editor = new TestAffineEditorContainer();
   editor.doc = doc;
   editor.mode = mode;
   editor.pageSpecs = [
@@ -127,12 +127,12 @@ export function cleanup() {
 }
 
 declare global {
-  const editor: AffineEditorContainer;
+  const editor: TestAffineEditorContainer;
   const doc: Store;
   const collection: TestWorkspace;
   const job: Transformer;
   interface Window {
-    editor: AffineEditorContainer;
+    editor: TestAffineEditorContainer;
     doc: Store;
     job: Transformer;
     collection: TestWorkspace;

blocksuite/integration-test/src/editors/editor-container.ts

@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { when } from 'lit/directives/when.js';
 
-export class AffineEditorContainer extends SignalWatcher(
+export class TestAffineEditorContainer extends SignalWatcher(
   WithDisposable(ShadowlessElement)
 ) {
   static override styles = css`
@@ -215,6 +215,6 @@ export class AffineEditorContainer extends SignalWatcher(
 
 declare global {
   interface HTMLElementTagNameMap {
-    'affine-editor-container': AffineEditorContainer;
+    'affine-editor-container': TestAffineEditorContainer;
   }
 }

blocksuite/integration-test/src/effects.ts

@@ -0,0 +1,7 @@
+import '@blocksuite/blocks/effects';
+
+import { TestAffineEditorContainer } from './editors/index.js';
+
+export function effects() {
+  customElements.define('affine-editor-container', TestAffineEditorContainer);
+}

blocksuite/integration-test/src/index.ts

@@ -0,0 +1 @@
+export * from './editors';

blocksuite/playground/apps/_common/components/adapters-panel.ts

@@ -15,7 +15,7 @@ import {
   titleMiddleware,
 } from '@blocksuite/blocks';
 import { WithDisposable } from '@blocksuite/global/utils';
-import type { AffineEditorContainer } from '@blocksuite/presets';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import { type DocSnapshot, Transformer } from '@blocksuite/store';
 import { effect } from '@preact/signals-core';
 import type SlTabPanel from '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
@@ -284,7 +284,7 @@ export class AdaptersPanel extends WithDisposable(ShadowlessElement) {
   private accessor _plainTextContent = '';
 
   @property({ attribute: false })
-  accessor editor!: AffineEditorContainer;
+  accessor editor!: TestAffineEditorContainer;
 }
 
 declare global {

blocksuite/playground/apps/_common/components/custom-frame-panel.ts

@@ -1,6 +1,6 @@
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
-import type { AffineEditorContainer } from '@blocksuite/presets';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import { effect } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -59,7 +59,7 @@ export class CustomFramePanel extends WithDisposable(ShadowlessElement) {
   private accessor _show = false;
 
   @property({ attribute: false })
-  accessor editor!: AffineEditorContainer;
+  accessor editor!: TestAffineEditorContainer;
 }
 
 declare global {

blocksuite/playground/apps/_common/components/custom-outline-panel.ts

@@ -1,6 +1,6 @@
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
-import type { AffineEditorContainer } from '@blocksuite/presets';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
@@ -45,7 +45,7 @@ export class CustomOutlinePanel extends WithDisposable(ShadowlessElement) {
   private accessor _show = false;
 
   @property({ attribute: false })
-  accessor editor!: AffineEditorContainer;
+  accessor editor!: TestAffineEditorContainer;
 }
 
 declare global {

blocksuite/playground/apps/_common/components/custom-outline-viewer.ts

@@ -1,5 +1,5 @@
 import { WithDisposable } from '@blocksuite/global/utils';
-import type { AffineEditorContainer } from '@blocksuite/presets';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
@@ -38,7 +38,7 @@ export class CustomOutlineViewer extends WithDisposable(LitElement) {
   private accessor _show = false;
 
   @property({ attribute: false })
-  accessor editor!: AffineEditorContainer;
+  accessor editor!: TestAffineEditorContainer;
 
   @property({ attribute: false })
   accessor toggleOutlinePanel: (() => void) | null = null;

blocksuite/playground/apps/_common/components/docs-panel.ts

@@ -5,7 +5,7 @@ import {
   GenerateDocUrlProvider,
 } from '@blocksuite/blocks';
 import { WithDisposable } from '@blocksuite/global/utils';
-import type { AffineEditorContainer } from '@blocksuite/presets';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import type { Doc, Workspace } from '@blocksuite/store';
 import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -163,7 +163,7 @@ export class DocsPanel extends WithDisposable(ShadowlessElement) {
   }
 
   @property({ attribute: false })
-  accessor editor!: AffineEditorContainer;
+  accessor editor!: TestAffineEditorContainer;
 
   @property({ attribute: false })
   accessor onClose!: () => void;

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

@@ -48,7 +48,7 @@ import {
 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 { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import { Text, Transformer, type Workspace } from '@blocksuite/store';
 import type { SlDropdown } from '@shoelace-style/shoelace';
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
@@ -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 type { CommentPanel } from '../../comment/index.js';
 import { createTestEditor } from '../../starter/utils/extensions.js';
 import { mockEdgelessTheme } from '../mock-services.js';
 import { AdaptersPanel } from './adapters-panel.js';
@@ -647,7 +648,7 @@ export class StarterDebugMenu extends ShadowlessElement {
         const newEditor = createTestEditor(this.doc, this.collection);
         app.append(newEditor);
         app.childNodes.forEach(child => {
-          if (child instanceof AffineEditorContainer) {
+          if (child instanceof TestAffineEditorContainer) {
             child.style.flex = '1';
           }
         });
@@ -1014,7 +1015,7 @@ export class StarterDebugMenu extends ShadowlessElement {
   accessor docsPanel!: DocsPanel;
 
   @property({ attribute: false })
-  accessor editor!: AffineEditorContainer;
+  accessor editor!: TestAffineEditorContainer;
 
   @property({ attribute: false })
   accessor framePanel!: CustomFramePanel;

blocksuite/playground/apps/_common/history.ts

@@ -1,6 +1,6 @@
 import type { DocModeProvider } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
-import type { AffineEditorContainer } from '@blocksuite/presets';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import type { Doc, Store, Workspace } from '@blocksuite/store';
 
 export function getDocFromUrlParams(collection: Workspace, url: URL) {
@@ -40,7 +40,7 @@ export function setDocModeFromUrlParams(
 
 export function listenHashChange(
   collection: Workspace,
-  editor: AffineEditorContainer
+  editor: TestAffineEditorContainer
 ) {
   const panel = document.querySelector('docs-panel');
   window.addEventListener('hashchange', () => {

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

@@ -12,7 +12,7 @@ import {
   toast,
 } from '@blocksuite/blocks';
 import { Slot } from '@blocksuite/global/utils';
-import type { AffineEditorContainer } from '@blocksuite/presets';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import { type Workspace } from '@blocksuite/store';
 import { Signal, signal } from '@preact/signals-core';
 
@@ -37,7 +37,7 @@ export function removeModeFromStorage(docId: string) {
 const DEFAULT_MODE: DocMode = 'page';
 const slotMap = new Map<string, Slot<DocMode>>();
 
-export function mockDocModeService(editor: AffineEditorContainer) {
+export function mockDocModeService(editor: TestAffineEditorContainer) {
   const getEditorModeCallback: () => DocMode = () => editor.mode;
   const setEditorModeCallback: (mode: DocMode) => void = mode =>
     editor.switchEditor(mode);
@@ -78,7 +78,7 @@ export function mockDocModeService(editor: AffineEditorContainer) {
   return docModeService;
 }
 
-export function mockNotificationService(editor: AffineEditorContainer) {
+export function mockNotificationService(editor: TestAffineEditorContainer) {
   const notificationService: NotificationService = {
     toast: (message, options) => {
       toast(editor.host!, message, options?.duration);

blocksuite/playground/apps/comment/comment-panel.ts

@@ -1,9 +1,9 @@
 import { ShadowlessElement, TextSelection } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import { css, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 
-import type { AffineEditorContainer } from '../../editors/editor-container.js';
 import { CommentInput } from './comment-input.js';
 import { CommentManager } from './comment-manager.js';
 
@@ -106,7 +106,7 @@ export class CommentPanel extends WithDisposable(ShadowlessElement) {
   private accessor _container!: HTMLDivElement;
 
   @property({ attribute: false })
-  accessor editor!: AffineEditorContainer;
+  accessor editor!: TestAffineEditorContainer;
 }
 
 declare global {

blocksuite/playground/apps/comment/effects.ts

@@ -0,0 +1,7 @@
+import { CommentInput } from './comment-input.js';
+import { CommentPanel } from './comment-panel.js';
+
+export function effects() {
+  customElements.define('comment-input', CommentInput);
+  customElements.define('comment-panel', CommentPanel);
+}

blocksuite/playground/apps/env.d.ts

@@ -1,5 +1,5 @@
 import type { EditorHost } from '@blocksuite/block-std';
-import type { AffineEditorContainer } from '@blocksuite/presets';
+import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import type { BlockSchema, Blocks, Workspace, Transformer } from '@blocksuite/store';
 import type { z } from 'zod';
 import type * as Y from 'yjs';
@@ -12,7 +12,7 @@ declare global {
   ];
 
   interface Window {
-    editor: AffineEditorContainer;
+    editor: TestAffineEditorContainer;
     doc: Blocks;
     collection: Workspace;
     blockSchemas: z.infer<typeof BlockSchema>[];

blocksuite/playground/apps/starter/main.ts

@@ -4,12 +4,13 @@ import * as blockStd from '@blocksuite/block-std';
 import * as blocks from '@blocksuite/blocks';
 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 * as editor from '@blocksuite/integration-test';
+import { effects as presetsEffects } from '@blocksuite/integration-test/effects';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as store from '@blocksuite/store';
 
 import { setupEdgelessTemplate } from '../_common/setup.js';
+import { effects as commentEffects } from '../comment/effects.js';
 import {
   createStarterDocCollection,
   initStarterDocCollection,
@@ -19,6 +20,7 @@ import { prepareTestApp } from './utils/test';
 
 blocksEffects();
 presetsEffects();
+commentEffects();
 
 async function main() {
   if (window.collection) return;

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

@@ -1,4 +1,3 @@
-import { CommentPanel } from '@blocksuite/presets';
 import type { Store, Workspace } from '@blocksuite/store';
 
 import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel';
@@ -8,6 +7,7 @@ import { CustomOutlineViewer } from '../../_common/components/custom-outline-vie
 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) {