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

Author: Yifeng Wang

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;