refactor(editor): extensionalize notion html adapter (#9318)

Part of [BS-2212](https://linear.app/affine-design/issue/BS-2212/adapter-extension化修复)

blocksuite/blocks/src/_common/adapters/extension.ts

@@ -7,6 +7,7 @@ import { HtmlAdapterFactoryExtension } from './html/html.js';
 import { ImageAdapterFactoryExtension } from './image.js';
 import { MarkdownAdapterFactoryExtension } from './markdown/markdown.js';
 import { MixTextAdapterFactoryExtension } from './mix-text.js';
+import { notionHtmlInlineToDeltaMatchers } from './notion-html/delta-converter/html-inline.js';
 import { NotionHtmlAdapterFactoryExtension } from './notion-html/notion-html.js';
 import { NotionTextAdapterFactoryExtension } from './notion-text.js';
 import { PlainTextAdapterFactoryExtension } from './plain-text/plain-text.js';
@@ -14,6 +15,7 @@ import { PlainTextAdapterFactoryExtension } from './plain-text/plain-text.js';
 export const AdapterFactoryExtensions: ExtensionType[] = [
   ...htmlInlineToDeltaMatchers,
   ...inlineDeltaToHtmlAdapterMatchers,
+  ...notionHtmlInlineToDeltaMatchers,
   AttachmentAdapterFactoryExtension,
   ImageAdapterFactoryExtension,
   MarkdownAdapterFactoryExtension,

blocksuite/blocks/src/_common/adapters/notion-html/block-matcher.ts

@@ -1,36 +1,35 @@
-import { attachmentBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block-attachment';
-import { bookmarkBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block-bookmark';
+import { AttachmentBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-attachment';
+import { BookmarkBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-bookmark';
 import {
-  embedFigmaBlockNotionHtmlAdapterMatcher,
-  embedGithubBlockNotionHtmlAdapterMatcher,
-  embedLoomBlockNotionHtmlAdapterMatcher,
-  embedYoutubeBlockNotionHtmlAdapterMatcher,
+  EmbedFigmaBlockNotionHtmlAdapterExtension,
+  EmbedGithubBlockNotionHtmlAdapterExtension,
+  EmbedLoomBlockNotionHtmlAdapterExtension,
+  EmbedYoutubeBlockNotionHtmlAdapterExtension,
 } from '@blocksuite/affine-block-embed';
-import { imageBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block-image';
-import { listBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block-list';
-import { paragraphBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block-paragraph';
-import type { BlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-shared/adapters';
+import { ImageBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-image';
+import { ListBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-list';
+import { ParagraphBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-paragraph';
+import type { ExtensionType } from '@blocksuite/block-std';
 
-import { codeBlockNotionHtmlAdapterMatcher } from '../../../code-block/adapters/notion-html.js';
-import { databaseBlockNotionHtmlAdapterMatcher } from '../../../database-block/adapters/notion-html.js';
-import { dividerBlockNotionHtmlAdapterMatcher } from '../../../divider-block/adapters/notion-html.js';
-import { latexBlockNotionHtmlAdapterMatcher } from '../../../latex-block/adapters/notion-html.js';
-import { rootBlockNotionHtmlAdapterMatcher } from '../../../root-block/adapters/notion-html.js';
+import { CodeBlockNotionHtmlAdapterExtension } from '../../../code-block/adapters/notion-html.js';
+import { DatabaseBlockNotionHtmlAdapterExtension } from '../../../database-block/adapters/notion-html.js';
+import { DividerBlockNotionHtmlAdapterExtension } from '../../../divider-block/adapters/notion-html.js';
+import { LatexBlockNotionHtmlAdapterExtension } from '../../../latex-block/adapters/notion-html.js';
+import { RootBlockNotionHtmlAdapterExtension } from '../../../root-block/adapters/notion-html.js';
 
-export const defaultBlockNotionHtmlAdapterMatchers: BlockNotionHtmlAdapterMatcher[] =
-  [
-    listBlockNotionHtmlAdapterMatcher,
-    paragraphBlockNotionHtmlAdapterMatcher,
-    codeBlockNotionHtmlAdapterMatcher,
-    dividerBlockNotionHtmlAdapterMatcher,
-    imageBlockNotionHtmlAdapterMatcher,
-    rootBlockNotionHtmlAdapterMatcher,
-    bookmarkBlockNotionHtmlAdapterMatcher,
-    databaseBlockNotionHtmlAdapterMatcher,
-    latexBlockNotionHtmlAdapterMatcher,
-    embedYoutubeBlockNotionHtmlAdapterMatcher,
-    embedFigmaBlockNotionHtmlAdapterMatcher,
-    embedGithubBlockNotionHtmlAdapterMatcher,
-    embedLoomBlockNotionHtmlAdapterMatcher,
-    attachmentBlockNotionHtmlAdapterMatcher,
-  ];
+export const defaultBlockNotionHtmlAdapterMatchers: ExtensionType[] = [
+  ListBlockNotionHtmlAdapterExtension,
+  ParagraphBlockNotionHtmlAdapterExtension,
+  CodeBlockNotionHtmlAdapterExtension,
+  DividerBlockNotionHtmlAdapterExtension,
+  ImageBlockNotionHtmlAdapterExtension,
+  RootBlockNotionHtmlAdapterExtension,
+  BookmarkBlockNotionHtmlAdapterExtension,
+  DatabaseBlockNotionHtmlAdapterExtension,
+  LatexBlockNotionHtmlAdapterExtension,
+  EmbedYoutubeBlockNotionHtmlAdapterExtension,
+  EmbedFigmaBlockNotionHtmlAdapterExtension,
+  EmbedGithubBlockNotionHtmlAdapterExtension,
+  EmbedLoomBlockNotionHtmlAdapterExtension,
+  AttachmentBlockNotionHtmlAdapterExtension,
+];

blocksuite/blocks/src/_common/adapters/notion-html/delta-converter/html-inline.ts

@@ -1,8 +1,9 @@
 import {
   HastUtils,
   type HtmlAST,
-  type NotionHtmlASTToDeltaMatcher,
+  NotionHtmlASTToDeltaExtension,
 } from '@blocksuite/affine-shared/adapters';
+import type { ExtensionType } from '@blocksuite/block-std';
 import { collapseWhiteSpace } from 'collapse-white-space';
 import type { Element, Text } from 'hast';
 
@@ -21,7 +22,7 @@ const italicElementTags = new Set(['i', 'em']);
 const NotionInlineEquationToken = 'notion-text-equation-token';
 const NotionUnderlineStyleToken = 'border-bottom:0.05em solid';
 
-export const notionHtmlTextToDeltaMatcher: NotionHtmlASTToDeltaMatcher = {
+export const notionHtmlTextToDeltaMatcher = NotionHtmlASTToDeltaExtension({
   name: 'text',
   match: ast => isText(ast),
   toDelta: (ast, context) => {
@@ -45,10 +46,10 @@ export const notionHtmlTextToDeltaMatcher: NotionHtmlASTToDeltaMatcher = {
     }
     return [];
   },
-};
+});
 
-export const notionHtmlSpanElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
-  {
+export const notionHtmlSpanElementToDeltaMatcher =
+  NotionHtmlASTToDeltaExtension({
     name: 'span-element',
     match: ast => isElement(ast) && ast.tagName === 'span',
     toDelta: (ast, context) => {
@@ -82,18 +83,18 @@ export const notionHtmlSpanElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
 
       return ast.children.flatMap(child => toDelta(child, options));
     },
-  };
+  });
 
-export const notionHtmlListToDeltaMatcher: NotionHtmlASTToDeltaMatcher = {
+export const notionHtmlListToDeltaMatcher = NotionHtmlASTToDeltaExtension({
   name: 'list-element',
   match: ast => isElement(ast) && listElementTags.has(ast.tagName),
   toDelta: () => {
     return [];
   },
-};
+});
 
-export const notionHtmlStrongElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
-  {
+export const notionHtmlStrongElementToDeltaMatcher =
+  NotionHtmlASTToDeltaExtension({
     name: 'strong-element',
     match: ast => isElement(ast) && strongElementTags.has(ast.tagName),
     toDelta: (ast, context) => {
@@ -109,10 +110,10 @@ export const notionHtmlStrongElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher
         })
       );
     },
-  };
+  });
 
-export const notionHtmlItalicElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
-  {
+export const notionHtmlItalicElementToDeltaMatcher =
+  NotionHtmlASTToDeltaExtension({
     name: 'italic-element',
     match: ast => isElement(ast) && italicElementTags.has(ast.tagName),
     toDelta: (ast, context) => {
@@ -127,9 +128,10 @@ export const notionHtmlItalicElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher
         })
       );
     },
-  };
-export const notionHtmlCodeElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
-  {
+  });
+
+export const notionHtmlCodeElementToDeltaMatcher =
+  NotionHtmlASTToDeltaExtension({
     name: 'code-element',
     match: ast => isElement(ast) && ast.tagName === 'code',
     toDelta: (ast, context) => {
@@ -144,27 +146,29 @@ export const notionHtmlCodeElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
         })
       );
     },
-  };
+  });
 
-export const notionHtmlDelElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher = {
-  name: 'del-element',
-  match: ast => isElement(ast) && ast.tagName === 'del',
-  toDelta: (ast, context) => {
-    if (!isElement(ast)) {
-      return [];
-    }
-    const { toDelta, options } = context;
-    return ast.children.flatMap(child =>
-      toDelta(child, options).map(delta => {
-        delta.attributes = { ...delta.attributes, strike: true };
-        return delta;
-      })
-    );
-  },
-};
-
-export const notionHtmlUnderlineElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
+export const notionHtmlDelElementToDeltaMatcher = NotionHtmlASTToDeltaExtension(
   {
+    name: 'del-element',
+    match: ast => isElement(ast) && ast.tagName === 'del',
+    toDelta: (ast, context) => {
+      if (!isElement(ast)) {
+        return [];
+      }
+      const { toDelta, options } = context;
+      return ast.children.flatMap(child =>
+        toDelta(child, options).map(delta => {
+          delta.attributes = { ...delta.attributes, strike: true };
+          return delta;
+        })
+      );
+    },
+  }
+);
+
+export const notionHtmlUnderlineElementToDeltaMatcher =
+  NotionHtmlASTToDeltaExtension({
     name: 'underline-element',
     match: ast => isElement(ast) && ast.tagName === 'u',
     toDelta: (ast, context) => {
@@ -179,10 +183,10 @@ export const notionHtmlUnderlineElementToDeltaMatcher: NotionHtmlASTToDeltaMatch
         })
       );
     },
-  };
+  });
 
-export const notionHtmlLinkElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
-  {
+export const notionHtmlLinkElementToDeltaMatcher =
+  NotionHtmlASTToDeltaExtension({
     name: 'link-element',
     match: ast => isElement(ast) && ast.tagName === 'a',
     toDelta: (ast, context) => {
@@ -222,10 +226,10 @@ export const notionHtmlLinkElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
         })
       );
     },
-  };
+  });
 
-export const notionHtmlMarkElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
-  {
+export const notionHtmlMarkElementToDeltaMatcher =
+  NotionHtmlASTToDeltaExtension({
     name: 'mark-element',
     match: ast => isElement(ast) && ast.tagName === 'mark',
     toDelta: (ast, context) => {
@@ -240,9 +244,9 @@ export const notionHtmlMarkElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
         })
       );
     },
-  };
+  });
 
-export const notionHtmlLiElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher = {
+export const notionHtmlLiElementToDeltaMatcher = NotionHtmlASTToDeltaExtension({
   name: 'li-element',
   match: ast =>
     isElement(ast) &&
@@ -260,26 +264,26 @@ export const notionHtmlLiElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher = {
       .slice(checkBoxIndex + 2)
       .flatMap(child => toDelta(child, options));
   },
-};
+});
 
-export const notionHtmlBrElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher = {
+export const notionHtmlBrElementToDeltaMatcher = NotionHtmlASTToDeltaExtension({
   name: 'br-element',
   match: ast => isElement(ast) && ast.tagName === 'br',
   toDelta: () => {
     return [{ insert: '\n' }];
   },
-};
+});
 
-export const notionHtmlStyleElementToDeltaMatcher: NotionHtmlASTToDeltaMatcher =
-  {
+export const notionHtmlStyleElementToDeltaMatcher =
+  NotionHtmlASTToDeltaExtension({
     name: 'style-element',
     match: ast => isElement(ast) && ast.tagName === 'style',
     toDelta: () => {
       return [];
     },
-  };
+  });
 
-export const notionHtmlInlineToDeltaMatchers: NotionHtmlASTToDeltaMatcher[] = [
+export const notionHtmlInlineToDeltaMatchers: ExtensionType[] = [
   notionHtmlTextToDeltaMatcher,
   notionHtmlSpanElementToDeltaMatcher,
   notionHtmlStrongElementToDeltaMatcher,

blocksuite/blocks/src/_common/adapters/notion-html/notion-html.ts

@@ -9,9 +9,11 @@ import {
   HastUtils,
   type HtmlAST,
   type NotionHtml,
+  NotionHtmlASTToDeltaMatcherIdentifier,
   NotionHtmlDeltaConverter,
 } from '@blocksuite/affine-shared/adapters';
 import type { ExtensionType } from '@blocksuite/block-std';
+import type { ServiceProvider } from '@blocksuite/global/di';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import {
   type AssetsManager,
@@ -33,8 +35,6 @@ import rehypeParse from 'rehype-parse';
 import { unified } from 'unified';
 
 import { AdapterFactoryIdentifier } from '../type.js';
-import { defaultBlockNotionHtmlAdapterMatchers } from './block-matcher.js';
-import { notionHtmlInlineToDeltaMatchers } from './delta-converter/html-inline.js';
 
 type NotionHtmlToSliceSnapshotPayload = {
   file: NotionHtml;
@@ -112,11 +112,17 @@ export class NotionHtmlAdapter extends BaseAdapter<NotionHtml> {
 
   deltaConverter: NotionHtmlDeltaConverter;
 
-  constructor(
-    job: Job,
-    readonly blockMatchers: BlockNotionHtmlAdapterMatcher[] = defaultBlockNotionHtmlAdapterMatchers
-  ) {
+  readonly blockMatchers: BlockNotionHtmlAdapterMatcher[];
+
+  constructor(job: Job, provider: ServiceProvider) {
     super(job);
+    const blockMatchers = Array.from(
+      provider.getAll(BlockNotionHtmlAdapterMatcherIdentifier).values()
+    );
+    const notionHtmlInlineToDeltaMatchers = Array.from(
+      provider.getAll(NotionHtmlASTToDeltaMatcherIdentifier).values()
+    );
+    this.blockMatchers = blockMatchers;
     this.deltaConverter = new NotionHtmlDeltaConverter(
       job.adapterConfigs,
       [],
@@ -287,13 +293,7 @@ export const NotionHtmlAdapterFactoryIdentifier =
 export const NotionHtmlAdapterFactoryExtension: ExtensionType = {
   setup: di => {
     di.addImpl(NotionHtmlAdapterFactoryIdentifier, provider => ({
-      get: (job: Job) =>
-        new NotionHtmlAdapter(
-          job,
-          Array.from(
-            provider.getAll(BlockNotionHtmlAdapterMatcherIdentifier).values()
-          )
-        ),
+      get: (job: Job) => new NotionHtmlAdapter(job, provider),
     }));
   },
 };

blocksuite/blocks/src/_common/transformers/notion-html.ts

@@ -1,6 +1,9 @@
+import { Container } from '@blocksuite/global/di';
 import { sha } from '@blocksuite/global/utils';
 import { type DocCollection, extMimeMap, Job } from '@blocksuite/store';
 
+import { defaultBlockNotionHtmlAdapterMatchers } from '../adapters/notion-html/block-matcher.js';
+import { notionHtmlInlineToDeltaMatchers } from '../adapters/notion-html/delta-converter/html-inline.js';
 import { NotionHtmlAdapter } from '../adapters/notion-html/notion-html.js';
 import { defaultImageProxyMiddleware } from './middlewares.js';
 import { Unzip } from './utils.js';
@@ -10,6 +13,16 @@ type ImportNotionZipOptions = {
   imported: Blob;
 };
 
+const container = new Container();
+[
+  ...notionHtmlInlineToDeltaMatchers,
+  ...defaultBlockNotionHtmlAdapterMatchers,
+].forEach(ext => {
+  ext.setup(container);
+});
+
+const provider = container.provider();
+
 /**
  * Imports a Notion zip file into the BlockSuite collection.
  *
@@ -109,7 +122,7 @@ async function importNotionZip({
         collection: collection,
         middlewares: [defaultImageProxyMiddleware],
       });
-      const htmlAdapter = new NotionHtmlAdapter(job);
+      const htmlAdapter = new NotionHtmlAdapter(job, provider);
       const assets = job.assetsManager.getAssets();
       const pathBlobIdMap = job.assetsManager.getPathBlobIdMap();
       for (const [key, value] of pendingAssets.entries()) {