fix(editor): typecheck for tests and playground

blocksuite/playground/apps/_common/components/pdf/worker.ts

@@ -35,7 +35,6 @@ function renderToImageData(index: number, scale: number) {
   bitmap.fill(0, 0, width, height);
   page.render(bitmap, 0, 0, width, height, 0, flags);
 
-  // @ts-expect-error ignore
   const data = new Uint8ClampedArray(bitmap.toUint8Array());
 
   bitmap.close();

blocksuite/playground/apps/_common/history.ts

@@ -1,11 +1,11 @@
 import type { DocModeProvider } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import type { Blocks, Doc, Workspace } from '@blocksuite/store';
+import type { Doc, Store, Workspace } from '@blocksuite/store';
 import type { LitElement } from 'lit';
 
 export function getDocFromUrlParams(collection: Workspace, url: URL) {
-  let doc: Blocks | null = null;
+  let doc: Store | null = null;
 
   const docId = decodeURIComponent(url.hash.slice(1));
 

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

@@ -1,5 +1,4 @@
 import { AffineSchemas, SpecProvider, TestUtils } from '@blocksuite/blocks';
-import type { BlockSuiteFlags } from '@blocksuite/global/types';
 import { nanoid, Schema, Transformer } from '@blocksuite/store';
 import {
   createAutoIncrementIdGenerator,
@@ -48,27 +47,10 @@ export function createStarterDocCollection() {
     blobSources.shadows.push(new IndexedDBBlobSource(collectionId));
   }
 
-  const flags: Partial<BlockSuiteFlags> = Object.fromEntries(
-    Array.from(params.entries())
-      .filter(([key]) => key.startsWith('enable_'))
-      .map(([k, v]) => [k, v === 'true'])
-  );
-
   const options: DocCollectionOptions = {
     id: collectionId,
     schema,
     idGenerator,
-    defaultFlags: {
-      enable_synced_doc_block: true,
-      enable_pie_menu: true,
-      enable_lasso_tool: true,
-      enable_edgeless_text: true,
-      enable_color_picker: true,
-      enable_mind_map_import: true,
-      enable_advanced_block_visibility: true,
-      enable_shape_shadow_blur: false,
-      ...flags,
-    },
     awarenessSources: [new BroadcastChannelAwarenessSource(id)],
     docSources,
     blobSources,

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' },