fix(editor): typecheck for tests and playground (#9897)

blocksuite/tests-legacy/basic.spec.ts

@@ -1,4 +1,4 @@
-import type { DeltaInsert } from '@inline/types.js';
+import type { DeltaInsert } from '@blocksuite/inline';
 import { expect } from '@playwright/test';
 
 import {

blocksuite/tests-legacy/bookmark.spec.ts

@@ -1,8 +1,8 @@
 import './utils/declare-test-window.js';
 
+import type { BlockSnapshot } from '@blocksuite/store';
 import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { BlockSnapshot } from '@store/index.js';
 import { ignoreSnapshotId } from 'utils/ignore.js';
 import { getEmbedCardToolbar } from 'utils/query.js';
 

blocksuite/tests-legacy/clipboard/list.spec.ts

@@ -1,5 +1,5 @@
+import type { BlockSnapshot } from '@blocksuite/store';
 import { expect } from '@playwright/test';
-import type { BlockSnapshot } from '@store/index.js';
 import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import { initDatabaseColumn } from '../database/actions.js';

blocksuite/tests-legacy/database/actions.ts

@@ -1,9 +1,8 @@
 import type {
   RichTextCell,
   RichTextCellEditing,
-} from '@blocks/database-block/properties/rich-text/cell-renderer.js';
-import { press } from '@inline/__tests__/utils.js';
-import { ZERO_WIDTH_SPACE } from '@inline/consts.js';
+} from '@blocksuite/affine-block-database';
+import { ZERO_WIDTH_SPACE } from '@blocksuite/inline';
 import { expect, type Locator, type Page } from '@playwright/test';
 
 import {
@@ -18,6 +17,11 @@ import {
   waitNextFrame,
 } from '../utils/actions/misc.js';
 
+export async function press(page: Page, content: string) {
+  await page.keyboard.press(content, { delay: 50 });
+  await page.waitForTimeout(50);
+}
+
 export async function initDatabaseColumn(page: Page, title = '') {
   const editor = getEditorLocator(page);
   await editor.locator('affine-data-view-table-group').first().hover();
@@ -265,7 +269,7 @@ export async function assertDatabaseCellLink(
           'affine-database-link-cell-editing'
         );
       if (!richText) throw new Error('Missing database rich text cell');
-      return richText.inlineEditor.yText.toString();
+      return richText.inlineEditor!.yText.toString();
     },
     { rowIndex, columnIndex }
   );

blocksuite/tests-legacy/database/statistics.spec.ts

@@ -1,4 +1,3 @@
-import { press } from '@inline/__tests__/utils.js';
 import { expect, type Page } from '@playwright/test';
 
 import { type } from '../utils/actions/index.js';
@@ -9,7 +8,12 @@ import {
   waitNextFrame,
 } from '../utils/actions/misc.js';
 import { test } from '../utils/playwright.js';
-import { changeColumnType, moveToCenterOf, pressKey } from './actions.js';
+import {
+  changeColumnType,
+  moveToCenterOf,
+  press,
+  pressKey,
+} from './actions.js';
 
 const addRow = async (page: Page, count: number = 1) => {
   await waitNextFrame(page);

blocksuite/tests-legacy/database/title.spec.ts

@@ -1,4 +1,3 @@
-import { press } from '@inline/__tests__/utils.js';
 import { expect } from '@playwright/test';
 
 import {
@@ -7,6 +6,7 @@ import {
   initEmptyDatabaseState,
 } from '../utils/actions/misc.js';
 import { test } from '../utils/playwright.js';
+import { press } from './actions.js';
 
 test.describe('title', () => {
   test('should able to link doc by press @', async ({ page }) => {

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

@@ -138,7 +138,9 @@ test('zoom by mouse without ctrl pressed when edgelessScrollZoom is enabled', as
 
   // enable edgelessScrollZoom
   await page.evaluate(() => {
+    // @ts-expect-error set a setting
     window.editorSetting$.value = {
+      // @ts-expect-error set a setting
       ...window.editorSetting$.value,
       edgelessScrollZoom: true,
     };
@@ -153,7 +155,9 @@ test('zoom by mouse without ctrl pressed when edgelessScrollZoom is enabled', as
 
   // disable edgelessScrollZoom
   await page.evaluate(() => {
+    // @ts-expect-error set a setting
     window.editorSetting$.value = {
+      // @ts-expect-error set a setting
       ...window.editorSetting$.value,
       edgelessScrollZoom: false,
     };

blocksuite/tests-legacy/edgeless/edgeless-text.spec.ts

@@ -1,4 +1,4 @@
-import type { EdgelessTextBlockComponent } from '@blocks/edgeless-text-block/edgeless-text-block.js';
+import type { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
 import { Bound } from '@blocksuite/global/utils';
 import { expect, type Page } from '@playwright/test';
 

blocksuite/tests-legacy/format-bar.spec.ts

@@ -1,4 +1,4 @@
-import type { DeltaInsert } from '@inline/types.js';
+import type { DeltaInsert } from '@blocksuite/inline';
 import { expect } from '@playwright/test';
 
 import {

blocksuite/tests-legacy/inline/inline-editor.spec.ts

@@ -1,17 +1,158 @@
-import {
-  assertSelection,
-  enterInlineEditorPlayground,
-  focusInlineRichText,
-  getDeltaFromInlineRichText,
-  getInlineRangeIndexRect,
-  getInlineRichTextLine,
-  press,
-  setInlineRichTextRange,
-  type,
-} from '@inline/__tests__/utils.js';
-import { ZERO_WIDTH_SPACE } from '@inline/consts.js';
-import type { InlineEditor } from '@inline/index.js';
-import { expect, test } from '@playwright/test';
+import type {
+  DeltaInsert,
+  InlineEditor,
+  InlineRange,
+} from '@blocksuite/inline';
+import { ZERO_WIDTH_SPACE } from '@blocksuite/inline';
+import { expect, type Page, test } from '@playwright/test';
+
+// FIXME(mirone): copy paste from framework/inline/__tests__/utils.ts
+const defaultPlaygroundURL = new URL(
+  `http://localhost:${process.env.CI ? 4173 : 5173}/`
+);
+
+async function type(page: Page, content: string) {
+  await page.keyboard.type(content, { delay: 50 });
+}
+
+async function press(page: Page, content: string) {
+  await page.keyboard.press(content, { delay: 50 });
+  await page.waitForTimeout(50);
+}
+
+async function enterInlineEditorPlayground(page: Page) {
+  const url = new URL('examples/inline/index.html', defaultPlaygroundURL);
+  await page.goto(url.toString());
+}
+
+async function focusInlineRichText(page: Page, index = 0): Promise<void> {
+  await page.evaluate(index => {
+    const richTexts = document
+      .querySelector('test-page')
+      ?.querySelectorAll('test-rich-text');
+
+    if (!richTexts) {
+      throw new Error('Cannot find test-rich-text');
+    }
+
+    (richTexts[index] as any).inlineEditor.focusEnd();
+  }, index);
+}
+
+async function getDeltaFromInlineRichText(
+  page: Page,
+  index = 0
+): Promise<DeltaInsert> {
+  await page.waitForTimeout(100);
+  return page.evaluate(index => {
+    const richTexts = document
+      .querySelector('test-page')
+      ?.querySelectorAll('test-rich-text');
+
+    if (!richTexts) {
+      throw new Error('Cannot find test-rich-text');
+    }
+
+    const editor = (richTexts[index] as any).inlineEditor as InlineEditor;
+    return editor.yText.toDelta();
+  }, index);
+}
+
+async function setInlineRichTextRange(
+  page: Page,
+  inlineRange: InlineRange,
+  index = 0
+): Promise<void> {
+  await page.evaluate(
+    ([inlineRange, index]) => {
+      const richTexts = document
+        .querySelector('test-page')
+        ?.querySelectorAll('test-rich-text');
+
+      if (!richTexts) {
+        throw new Error('Cannot find test-rich-text');
+      }
+
+      const editor = (richTexts[index as number] as any)
+        .inlineEditor as InlineEditor;
+      editor.setInlineRange(inlineRange as InlineRange);
+    },
+    [inlineRange, index]
+  );
+}
+
+async function getInlineRichTextLine(
+  page: Page,
+  index: number,
+  i = 0
+): Promise<readonly [string, number]> {
+  return page.evaluate(
+    ([index, i]) => {
+      const richTexts = document.querySelectorAll('test-rich-text');
+
+      if (!richTexts) {
+        throw new Error('Cannot find test-rich-text');
+      }
+
+      const editor = (richTexts[i] as any).inlineEditor as InlineEditor;
+      const result = editor.getLine(index);
+      if (!result) {
+        throw new Error('Cannot find line');
+      }
+      const { line, rangeIndexRelatedToLine } = result;
+      return [line.vTextContent, rangeIndexRelatedToLine] as const;
+    },
+    [index, i]
+  );
+}
+
+async function getInlineRangeIndexRect(
+  page: Page,
+  [richTextIndex, inlineIndex]: [number, number],
+  coordOffSet: { x: number; y: number } = { x: 0, y: 0 }
+) {
+  const rect = await page.evaluate(
+    ({ richTextIndex, inlineIndex: vIndex, coordOffSet }) => {
+      const richText = document.querySelectorAll('test-rich-text')[
+        richTextIndex
+      ] as any;
+      const domRange = richText.inlineEditor.toDomRange({
+        index: vIndex,
+        length: 0,
+      });
+      const pointBound = domRange.getBoundingClientRect();
+      return {
+        x: pointBound.left + coordOffSet.x,
+        y: pointBound.top + pointBound.height / 2 + coordOffSet.y,
+      };
+    },
+    {
+      richTextIndex,
+      inlineIndex,
+      coordOffSet,
+    }
+  );
+  return rect;
+}
+
+async function assertSelection(
+  page: Page,
+  richTextIndex: number,
+  rangeIndex: number,
+  rangeLength = 0
+) {
+  const actual = await page.evaluate(
+    ([richTextIndex]) => {
+      const richText =
+        document?.querySelectorAll('test-rich-text')[richTextIndex];
+      // @ts-expect-error getInlineRange
+      const inlineEditor = richText.inlineEditor;
+      return inlineEditor?.getInlineRange();
+    },
+    [richTextIndex]
+  );
+  expect(actual).toEqual({ index: rangeIndex, length: rangeLength });
+}
 
 test('basic input', async ({ page }) => {
   await enterInlineEditorPlayground(page);

blocksuite/tests-legacy/latex/inline.spec.ts

@@ -1,4 +1,4 @@
-import { ZERO_WIDTH_SPACE } from '@inline/consts.js';
+import { ZERO_WIDTH_SPACE } from '@blocksuite/inline';
 import { expect } from '@playwright/test';
 import {
   assertRichTextInlineDeltas,

blocksuite/tests-legacy/package.json

@@ -12,7 +12,9 @@
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
+    "@blocksuite/inline": "workspace:*",
     "@blocksuite/presets": "workspace:*",
+    "@blocksuite/store": "workspace:*",
     "@playwright/test": "=1.49.1",
     "@toeverything/theme": "^1.1.7"
   },

blocksuite/tests-legacy/paragraph.spec.ts

@@ -1,4 +1,4 @@
-import type { DeltaInsert } from '@inline/types.js';
+import type { DeltaInsert } from '@blocksuite/inline';
 import { expect } from '@playwright/test';
 
 import {

blocksuite/tests-legacy/slash-menu.spec.ts

@@ -835,7 +835,7 @@ test.describe('slash menu with customize menu', () => {
       const SlashMenuWidget = window.$blocksuite.blocks.AffineSlashMenuWidget;
 
       class CustomSlashMenu extends SlashMenuWidget {
-        config = {
+        override config = {
           ...SlashMenuWidget.DEFAULT_CONFIG,
           items: [
             { groupName: 'Custom Menu' },

blocksuite/tests-legacy/tsconfig.json

@@ -2,13 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "outDir": "./dist",
-    "paths": {
-      "@blocks/*": ["../blocks/src/*"],
-      "@inline/*": ["../framework/inline/src/*"],
-      "@store/*": ["../framework/store/src/*"],
-      "@playground/*": ["../playground/*"]
-    }
+    "outDir": "./dist"
   },
   "include": ["**.spec.ts", "**.test.ts", "**/**.ts"],
   "exclude": ["dist"],
@@ -18,6 +12,8 @@
     { "path": "../affine/shared" },
     { "path": "../framework/block-std" },
     { "path": "../framework/global" },
-    { "path": "../presets" }
+    { "path": "../framework/inline" },
+    { "path": "../presets" },
+    { "path": "../framework/store" }
   ]
 }

blocksuite/tests-legacy/utils/actions/block.ts

@@ -9,8 +9,7 @@ export async function updateBlockType(
 ) {
   await page.evaluate(
     ([flavour, type]) => {
-      window.host.std.command
-        .chain()
+      (window.host.std.command.chain() as any)
         .updateBlockType({
           flavour,
           props: {

blocksuite/tests-legacy/utils/actions/click.ts

@@ -1,6 +1,6 @@
 import type { IPoint } from '@blocksuite/global/utils';
+import type { Store } from '@blocksuite/store';
 import type { Page } from '@playwright/test';
-import type { Store } from '@store/index.js';
 
 import { toViewCoord } from './edgeless.js';
 import { waitNextFrame } from './misc.js';

blocksuite/tests-legacy/utils/actions/edgeless.ts

@@ -1,6 +1,6 @@
 import '../declare-test-window.js';
 
-import type { NoteBlockModel, NoteDisplayMode } from '@blocks/index.js';
+import type { NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model';
 import type { IPoint, IVec } from '@blocksuite/global/utils';
 import { assertExists, sleep } from '@blocksuite/global/utils';
 import type { Locator, Page } from '@playwright/test';

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

@@ -1,20 +1,20 @@
 import '../declare-test-window.js';
 
-import type { DatabaseBlockModel, ListType, RichText } from '@blocks/index.js';
-import type { EditorHost, ExtensionType } from '@blocksuite/block-std';
-import type { BlockSuiteFlags } from '@blocksuite/global/types';
+import type { EditorHost } from '@blocksuite/block-std';
+import type {
+  BlockSuiteFlags,
+  DatabaseBlockModel,
+  ListType,
+  RichText,
+} from '@blocksuite/blocks';
+import type { Container } from '@blocksuite/global/di';
 import { assertExists } from '@blocksuite/global/utils';
+import type { InlineRange, InlineRootElement } from '@blocksuite/inline';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import type { InlineRange, InlineRootElement } from '@inline/index.js';
-import type { CustomFramePanel } from '@playground/apps/_common/components/custom-frame-panel.js';
-import type { CustomOutlinePanel } from '@playground/apps/_common/components/custom-outline-panel.js';
-import type { CustomOutlineViewer } from '@playground/apps/_common/components/custom-outline-viewer.js';
-import type { DocsPanel } from '@playground/apps/_common/components/docs-panel.js';
-import type { StarterDebugMenu } from '@playground/apps/_common/components/starter-debug-menu.js';
+import type { BlockModel, ExtensionType } from '@blocksuite/store';
+import { uuidv4 } from '@blocksuite/store';
 import type { ConsoleMessage, Locator, Page } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { BlockModel } from '@store/schema/index.js';
-import { uuidv4 } from '@store/utils/id-generator.js';
 import lz from 'lz-string';
 
 import { currentEditorIndex, multiEditor } from '../multiple-editor.js';
@@ -95,7 +95,7 @@ async function initEmptyEditor({
           for (const [key, value] of Object.entries(flags)) {
             doc
               .get(window.$blocksuite.blocks.FeatureFlagService)
-              .setFlag(key, value);
+              .setFlag(key as keyof BlockSuiteFlags, value);
           }
           doc
             .get(window.$blocksuite.blocks.FeatureFlagService)
@@ -105,7 +105,7 @@ async function initEmptyEditor({
           const defaultExtensions: ExtensionType[] = [
             ...window.$blocksuite.defaultExtensions(),
             {
-              setup: di => {
+              setup: (di: Container) => {
                 di.addImpl(window.$blocksuite.identifiers.ParseDocUrlService, {
                   parseDocUrl() {
                     return undefined;
@@ -114,12 +114,13 @@ async function initEmptyEditor({
               },
             },
             {
-              setup: di => {
+              setup: (di: Container) => {
                 di.override(
                   window.$blocksuite.identifiers.DocModeProvider,
+                  // @ts-expect-error set mock service
                   window.$blocksuite.mockServices.mockDocModeService(
                     () => editor.mode,
-                    mode => editor.switchEditor(mode)
+                    (mode: 'page' | 'edgeless') => editor.switchEditor(mode)
                   )
                 );
               },
@@ -149,28 +150,35 @@ async function initEmptyEditor({
 
         editor.updateComplete
           .then(() => {
-            const debugMenu: StarterDebugMenu =
-              document.createElement('starter-debug-menu');
-            const docsPanel: DocsPanel = document.createElement('docs-panel');
-            const framePanel: CustomFramePanel =
-              document.createElement('custom-frame-panel');
-            const outlinePanel: CustomOutlinePanel = document.createElement(
-              'custom-outline-panel'
-            );
-            const outlineViewer: CustomOutlineViewer = document.createElement(
+            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'
             );
+            // @ts-expect-error set test editor
             docsPanel.editor = editor;
+            // @ts-expect-error set test editor
             framePanel.editor = editor;
+            // @ts-expect-error set test editor
             outlinePanel.editor = editor;
+            // @ts-expect-error set test editor
             outlineViewer.editor = editor;
+            // @ts-expect-error set test collection
             debugMenu.collection = collection;
+            // @ts-expect-error set test editor
             debugMenu.editor = editor;
+            // @ts-expect-error set test docsPanel
             debugMenu.docsPanel = docsPanel;
+            // @ts-expect-error set test framePanel
             debugMenu.framePanel = framePanel;
+            // @ts-expect-error set test outlineViewer
             debugMenu.outlineViewer = outlineViewer;
+            // @ts-expect-error set test outlinePanel
             debugMenu.outlinePanel = outlinePanel;
             const leftSidePanel = document.createElement('left-side-panel');
+            // @ts-expect-error set test leftSidePanel
             debugMenu.leftSidePanel = leftSidePanel;
             document.body.append(debugMenu);
             document.body.append(leftSidePanel);

blocksuite/tests-legacy/utils/asserts.ts

@@ -1,20 +1,20 @@
 import './declare-test-window.js';
 
-import type {
-  AffineInlineEditor,
-  NoteBlockModel,
-  RichText,
-  RootBlockModel,
-} from '@blocks/index.js';
 import type {
   BlockComponent,
   EditorHost,
   TextSelection,
 } from '@blocksuite/block-std';
+import type {
+  AffineInlineEditor,
+  NoteBlockModel,
+  RichText,
+  RootBlockModel,
+} from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
-import type { InlineRootElement } from '@inline/inline-editor.js';
+import type { InlineRootElement } from '@blocksuite/inline';
+import type { BlockModel } from '@blocksuite/store';
 import { expect, type Locator, type Page } from '@playwright/test';
-import type { BlockModel } from '@store/index.js';
 
 import {
   DEFAULT_NOTE_HEIGHT,
@@ -462,7 +462,9 @@ export async function assertBlockChildrenFlavours(
 ) {
   const actual = await page.evaluate(
     ({ blockId }) => {
-      const element = document.querySelector(`[data-block-id="${blockId}"]`);
+      const element = document.querySelector<BlockComponent>(
+        `[data-block-id="${blockId}"]`
+      );
       // @ts-ignore
       const model = element.model as BlockModel;
       return model.children.map(child => child.flavour);

blocksuite/tests-legacy/utils/declare-test-window.ts

@@ -1,17 +1,24 @@
-import type { RefNodeSlotsProvider, TestUtils } from '@blocks/index.js';
+import type {
+  DocModeProvider,
+  DocModeService,
+  ParseDocUrlProvider,
+  QuickSearchProvider,
+  ThemeProvider,
+} from '@blocksuite/affine-shared/services';
 import type {
   EditorHost,
-  ExtensionType,
+  WidgetViewMapExtension,
   WidgetViewMapIdentifier,
 } from '@blocksuite/block-std';
+import type { RefNodeSlotsProvider, TestUtils } from '@blocksuite/blocks';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import type { StarterDebugMenu } from '@playground/apps/_common/components/starter-debug-menu.js';
 import type {
   BlockModel,
-  Blocks,
+  ExtensionType,
+  Store,
   Transformer,
   Workspace,
-} from '@store/index.js';
+} from '@blocksuite/store';
 
 declare global {
   interface Window {
@@ -19,32 +26,32 @@ declare global {
      * the following instance are initialized in `packages/playground/apps/starter/main.ts`
      */
     $blocksuite: {
-      store: typeof import('../../framework/store/src/index.js');
-      blocks: typeof import('../../blocks/src/index.js');
+      store: typeof import('@blocksuite/store');
+      blocks: typeof import('@blocksuite/blocks');
       global: {
-        utils: typeof import('../../framework/global/src/utils.js');
+        utils: typeof import('@blocksuite/global/utils');
       };
-      editor: typeof import('../../presets/src/index.js');
+      editor: typeof import('@blocksuite/presets');
       identifiers: {
         WidgetViewMapIdentifier: typeof WidgetViewMapIdentifier;
-        QuickSearchProvider: typeof import('../../affine/shared/src/services/quick-search-service.js').QuickSearchProvider;
-        DocModeProvider: typeof import('../../affine/shared/src/services/doc-mode-service.js').DocModeProvider;
-        ThemeProvider: typeof import('../../affine/shared/src/services/theme-service.js').ThemeProvider;
+        QuickSearchProvider: typeof QuickSearchProvider;
+        DocModeProvider: typeof DocModeProvider;
+        ThemeProvider: typeof ThemeProvider;
         RefNodeSlotsProvider: typeof RefNodeSlotsProvider;
-        ParseDocUrlService: typeof import('../../affine/shared/src/services/parse-url-service.js').ParseDocUrlProvider;
+        ParseDocUrlService: typeof ParseDocUrlProvider;
       };
       defaultExtensions: () => ExtensionType[];
       extensions: {
-        WidgetViewMapExtension: typeof import('../../framework/block-std/src/extension/widget-view-map.js').WidgetViewMapExtension;
+        WidgetViewMapExtension: typeof WidgetViewMapExtension;
       };
       mockServices: {
-        mockDocModeService: typeof import('../../playground/apps/_common/mock-services.js').mockDocModeService;
+        mockDocModeService: typeof DocModeService;
       };
     };
     collection: Workspace;
     blockSchema: Record<string, typeof BlockModel>;
-    doc: Blocks;
-    debugMenu: StarterDebugMenu;
+    doc: Store;
+    debugMenu: HTMLElement;
     editor: AffineEditorContainer;
     host: EditorHost;
     testUtils: TestUtils;

blocksuite/tests-legacy/utils/ignore.ts

@@ -1,4 +1,4 @@
-import type { BlockSnapshot } from '@store/index.js';
+import type { BlockSnapshot } from '@blocksuite/store';
 
 export function ignoreFields(target: unknown, keys: string[]): unknown {
   if (Array.isArray(target)) {