refactor: use moduleResolution: "NodeNext" (#395)

package.json

@@ -1,6 +1,7 @@
 {
  "name": "blocksuite",
  "private": true,
+ "type": "module",
  "scripts": {
  "serve": "pnpm --filter @blocksuite/store serve",
  "dev": "run-p serve dev:playground",
@@ -30,7 +31,7 @@
  "@changesets/cli": "^2.25.0",
  "@playwright/test": "^1.28.1",
  "@types/node": "^18.7.16",
- "@types/quill": "^2.0.9",
+ "@types/quill": "^1.3.7",
  "@types/react": "^18.0.19",
  "@types/react-dom": "^18.0.6",
  "@typescript-eslint/eslint-plugin": "^5.36.2",

packages/blocks/src/__internal__/index.ts

@@ -1,3 +1,3 @@
 import './rich-text/rich-text';
 
-export * from './utils';
+export * from './utils/index.js';

packages/blocks/src/__internal__/rich-text/keyboard.ts

@@ -9,7 +9,7 @@ import {
  matchFlavours,
  noop,
  PREVENT_DEFAULT,
-} from '../utils';
+} from '../utils/index.js';
 import {
  handleLineStartBackspace,
  handleUnindent,
@@ -20,8 +20,8 @@ import {
  handleKeyDown,
  handleKeyUp,
  tryMatchSpaceHotkey,
-} from './rich-text-operations';
-import { Shortcuts } from './shortcuts';
+} from './rich-text-operations.js';
+import { Shortcuts } from './shortcuts.js';
 
 interface QuillRange {
  index: number;

packages/blocks/src/__internal__/rich-text/link-node/create-link.ts

@@ -1,14 +1,14 @@
 import type { Page } from '@blocksuite/store';
-import { showLinkPopover } from '../../../components/link-popover';
+import { showLinkPopover } from '../../../components/link-popover/index.js';
 import {
  assertExists,
  getRichTextByModel,
  getStartModelBySelection,
  hotkey,
  isRangeSelection,
-} from '../../utils';
+} from '../../utils/index.js';
 import './link-node';
-import { MockSelectNode } from './mock-select-node';
+import { MockSelectNode } from './mock-select-node.js';
 
 // Disable hotkey to fix common hotkey(ctrl+c, ctrl+v, etc) not working at edit link popover
 export const createLink = hotkey.withDisabledHotkeyFn(async (page: Page) => {

packages/blocks/src/__internal__/rich-text/link-node/index.ts

@@ -1,4 +1,4 @@
 import './link-node';
 
-export { LinkNodeComponent } from './link-node';
-export { createLink } from './create-link';
+export { LinkNodeComponent } from './link-node.js';
+export { createLink } from './create-link.js';

packages/blocks/src/__internal__/rich-text/link-node/link-node.ts

@@ -1,17 +1,20 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import Quill from 'quill';
+import type { Quill as QuillType } from 'quill';
+import Q from 'quill';
 import {
  ALLOWED_SCHEMES,
  showLinkPopover,
-} from '../../../components/link-popover';
+} from '../../../components/link-popover/index.js';
 import {
  assertExists,
  getDefaultPageBlock,
  getModelByElement,
  hotkey,
-} from '../../utils';
-import { LinkIcon } from './link-icon';
+} from '../../utils/index.js';
+import { LinkIcon } from './link-icon.js';
+
+const Quill = Q as unknown as typeof QuillType;
 
 // TODO fix Blot types
 type Blot = {

packages/blocks/src/__internal__/rich-text/link-node/mock-select-node.ts

@@ -1,4 +1,6 @@
-import Quill from 'quill';
+import type { Quill as QuillType } from 'quill';
+import Q from 'quill';
+const Quill = Q as unknown as typeof QuillType;
 
 const Inline = Quill.import('blots/inline');
 export class MockSelectNode extends Inline {

packages/blocks/src/__internal__/rich-text/rich-text-operations.ts

@@ -1,7 +1,7 @@
 // operations used in rich-text level
 
 import { Page, Text } from '@blocksuite/store';
-import type Quill from 'quill';
+import type { Quill } from 'quill';
 import {
  ExtendedModel,
  assertExists,
@@ -21,7 +21,7 @@ import {
  getDefaultPageBlock,
  getBlockElementByModel,
  resetNativeSelection,
-} from '../utils';
+} from '../utils/index.js';
 
 export function handleBlockEndEnter(page: Page, model: ExtendedModel) {
  const parent = page.getParent(model);

packages/blocks/src/__internal__/rich-text/rich-text.ts

@@ -1,13 +1,16 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import Quill from 'quill';
+import type { Quill as QuillType } from 'quill';
+import Q from 'quill';
 import QuillCursors from 'quill-cursors';
 import type { BaseBlockModel } from '@blocksuite/store';
-import type { BlockHost } from '../utils';
-import { createKeyboardBindings } from './keyboard';
+import type { BlockHost } from '../utils/index.js';
+import { createKeyboardBindings } from './keyboard.js';
 
 import style from './styles.css';
-import Syntax from '../../code-block/components/syntax-code-block';
+import Syntax from '../../code-block/components/syntax-code-block.js';
+
+const Quill = Q as unknown as typeof QuillType;
 
 Quill.register('modules/cursors', QuillCursors);
 const Clipboard = Quill.import('modules/clipboard');
@@ -39,7 +42,7 @@ export class RichText extends LitElement {
  @query('.affine-rich-text.quill-container')
  private _textContainer!: HTMLDivElement;
 
- quill!: Quill;
+ quill!: QuillType;
 
  @property({
  hasChanged() {
@@ -98,7 +101,8 @@ export class RichText extends LitElement {
  // If you type a character after the code or link node,
  // the character should not be inserted into the code or link node.
  // So we check and remove the corresponding format manually.
- this.quill.on('text-change', delta => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ this.quill.on('text-change', (delta: any) => {
  const selectorMap = {
  code: 'code',
  link: 'link-node',

packages/blocks/src/__internal__/rich-text/shortcuts.ts

@@ -1,12 +1,12 @@
 import type { BaseBlockModel } from '@blocksuite/store';
-import type Quill from 'quill';
+import type { Quill } from 'quill';
 import type { RangeStatic } from 'quill';
 import {
  ALLOW_DEFAULT,
  assertExists,
  getDefaultPageBlock,
  PREVENT_DEFAULT,
-} from '..';
+} from '../index.js';
 
 type Match = {
  name: string;

packages/blocks/src/__internal__/utils/common-operations.ts

@@ -1,7 +1,7 @@
 import type { Page } from '@blocksuite/store';
 import type { Quill } from 'quill';
-import { matchFlavours } from './std';
-import type { ExtendedModel } from './types';
+import { matchFlavours } from './std.js';
+import type { ExtendedModel } from './types.js';
 
 // XXX: workaround quill lifecycle issue
 export function asyncFocusRichText(page: Page, id: string) {

packages/blocks/src/__internal__/utils/components.ts

@@ -1,8 +1,8 @@
 import { html } from 'lit/static-html.js';
 import { repeat } from 'lit/directives/repeat.js';
-import type { BlockHost } from '../utils';
+import type { BlockHost } from '../utils/index.js';
 import type { BaseBlockModel } from '@blocksuite/store';
-import type { EmbedBlockModel } from '../../embed-block';
+import type { EmbedBlockModel } from '../../embed-block/index.js';
 
 // TODO support dynamic block types
 export function BlockElement(

packages/blocks/src/__internal__/utils/hotkey.ts

@@ -1,4 +1,6 @@
-import hotkeys, { KeyHandler } from 'hotkeys-js';
+import Hotkeys from 'hotkeys-js';
+import type { Hotkeys as HotkeysType, KeyHandler } from 'hotkeys-js';
+const hotkeys = Hotkeys as unknown as HotkeysType;
 
 hotkeys.filter = () => true;
 

packages/blocks/src/__internal__/utils/index.ts

@@ -1,11 +1,11 @@
-export * from './consts';
-export * from './types';
-export * from './common-operations';
-export * from './rect';
-export * from './hotkey';
-export * from './query';
-export * from './components';
-export * from './gesture';
-export * from './selection';
-export * from './std';
-export * from './shape';
+export * from './consts.js';
+export * from './types.js';
+export * from './common-operations.js';
+export * from './rect.js';
+export * from './hotkey.js';
+export * from './query.js';
+export * from './components.js';
+export * from './gesture.js';
+export * from './selection.js';
+export * from './std.js';
+export * from './shape.js';

packages/blocks/src/__internal__/utils/query.ts

@@ -1,8 +1,8 @@
 import type { BaseBlockModel } from '@blocksuite/store';
-import type { DefaultPageBlockComponent, SelectedBlock } from '../..';
-import type { RichText } from '../rich-text/rich-text';
-import { BLOCK_ID_ATTR as ATTR } from './consts';
-import { assertExists, matchFlavours } from './std';
+import type { DefaultPageBlockComponent, SelectedBlock } from '../../index.js';
+import type { RichText } from '../rich-text/rich-text.js';
+import { BLOCK_ID_ATTR as ATTR } from './consts.js';
+import { assertExists, matchFlavours } from './std.js';
 
 type ElementTagName = keyof HTMLElementTagNameMap;
 

packages/blocks/src/__internal__/utils/selection.ts

@@ -1,6 +1,6 @@
 import type { BaseBlockModel, Page } from '@blocksuite/store';
-import type { RichText } from '../rich-text/rich-text';
-import type { IPoint, SelectionEvent } from './gesture';
+import type { RichText } from '../rich-text/rich-text.js';
+import type { IPoint, SelectionEvent } from './gesture.js';
 import {
  getBlockElementByModel,
  getContainerByModel,
@@ -12,15 +12,20 @@ import {
  getPreviousBlock,
  getQuillIndexByNativeSelection,
  getTextNodeBySelectedBlock,
-} from './query';
-import { Rect } from './rect';
-import { assertExists, caretRangeFromPoint, matchFlavours, sleep } from './std';
+} from './query.js';
+import { Rect } from './rect.js';
+import {
+ assertExists,
+ caretRangeFromPoint,
+ matchFlavours,
+ sleep,
+} from './std.js';
 import type {
  DomSelectionType,
  SelectedBlock,
  SelectionInfo,
  SelectionPosition,
-} from './types';
+} from './types.js';
 
 const SCROLL_THRESHOLD = 100;
 

packages/blocks/src/__internal__/utils/std.ts

@@ -1,5 +1,5 @@
 import { Utils } from '@blocksuite/store';
-import type { Detail } from './types';
+import type { Detail } from './types.js';
 
 // workaround ts(2775)
 export function assertExists<T>(val: T | null | undefined): asserts val is T {

packages/blocks/src/__internal__/utils/types.ts

@@ -1,8 +1,8 @@
 import type { BaseBlockModel, Page } from '@blocksuite/store';
-import type { Point } from './rect';
-import type { GroupBlockModel } from '../../group-block';
-import type { ShapeBlockModel } from '../../shape-block';
-import type { ColorStyle, TDShapeType } from './shape';
+import type { Point } from './rect.js';
+import type { GroupBlockModel } from '../../group-block/index.js';
+import type { ShapeBlockModel } from '../../shape-block/index.js';
+import type { ColorStyle, TDShapeType } from './shape.js';
 export type SelectionPosition = 'start' | 'end' | Point;
 
 export type SelectionOptions = {

packages/blocks/src/code-block/code-block.ts

@@ -1,10 +1,11 @@
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
-import type { CodeBlockModel } from './code-model';
+import type { CodeBlockModel } from './code-model.js';
 import codeBlockStyle from './style.css';
 import codeTheme from 'highlight.js/styles/color-brewer.css';
-import { toolTipStyle } from '../components/tooltip';
-import { BLOCK_ID_ATTR, BlockHost } from '../__internal__';
+import { toolTipStyle } from '../components/tooltip.js';
+import { BLOCK_ID_ATTR, BlockHost } from '../__internal__/index.js';
+// @ts-ignore
 import highlight from 'highlight.js';
 
 @customElement('affine-code')

packages/blocks/src/code-block/components/button.ts

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { IconButton } from '../../components/button';
+import { IconButton } from '../../components/button.js';
 
 // TODO reuse existing button component
 @customElement('code-block-button')

packages/blocks/src/code-block/components/index.ts

@@ -1,2 +1,2 @@
-export * from './lang-list';
-export * from './button';
+export * from './lang-list.js';
+export * from './button.js';

packages/blocks/src/code-block/components/lang-list.ts

@@ -1,6 +1,6 @@
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
-import { createEvent } from '../../__internal__';
+import { createEvent } from '../../__internal__/index.js';
 import style from './style.css';
 
 // TODO extract to a common list component

packages/blocks/src/code-block/components/syntax-code-block.ts

@@ -1,7 +1,10 @@
-import Quill from 'quill';
+import Q from 'quill';
+import type { Quill as QuillType } from 'quill';
+// @ts-ignore
 import type hljs from 'highlight.js';
-import { assertExists } from '../../__internal__';
+import { assertExists } from '../../__internal__/index.js';
 
+const Quill = Q as unknown as typeof QuillType;
 const Module = Quill.import('core/module');
 const CodeBlock = Quill.import('formats/code-block');
 const CodeToken = Quill.import('modules/syntax');
@@ -102,7 +105,7 @@ class Syntax extends Module {
  this.highlight(true, this.codeBlockElement);
  }
 
- constructor(quill: Quill, options: SyntaxCodeBlockOptions) {
+ constructor(quill: QuillType, options: SyntaxCodeBlockOptions) {
  super(quill, options);
  this.language = options.language;
  this.codeBlockElement = options.codeBlockElement;
@@ -129,6 +132,7 @@ class Syntax extends Module {
  if (!quill.getFormat(0, quill.getLength())['code-block']) {
  quill.formatText(0, quill.getLength(), 'code-block', true);
  }
+ // @ts-ignore
  quill.update(Quill.sources.USER);
  const range = quill.getSelection();
  // Notice: In BlockSuite, one quill instance has only one SyntaxCodeBlock instance.
@@ -144,8 +148,10 @@ class Syntax extends Module {
  container
  );
  });
+ // @ts-ignore
  quill.update(Quill.sources.SILENT);
  if (range != null) {
+ // @ts-ignore
  quill.setSelection(range, Quill.sources.SILENT);
  }
  }

packages/blocks/src/code-block/index.ts

@@ -1,3 +1,3 @@
-export * from './code-model';
-export * from './code-block';
-export * from './components';
+export * from './code-model.js';
+export * from './code-block.js';
+export * from './components/index.js';

packages/blocks/src/components/format-quick-bar/button.ts

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { IconButton } from '../button';
+import { IconButton } from '../button.js';
 
 @customElement('format-bar-button')
 export class FormatBarButton extends IconButton {