refactor(editor): extract html adapter to shared (#9319)

blocksuite/affine/shared/package.json

@@ -29,6 +29,9 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.mergewith": "^4.6.2",
     "minimatch": "^10.0.1",
+    "rehype-parse": "^9.0.0",
+    "rehype-stringify": "^10.0.0",
+    "unified": "^11.0.5",
     "zod": "^3.23.8"
   },
   "exports": {

blocksuite/affine/shared/src/adapters/html/html.ts

@@ -2,16 +2,6 @@ import {
   DEFAULT_NOTE_BACKGROUND_COLOR,
   NoteDisplayMode,
 } from '@blocksuite/affine-model';
-import {
-  type AdapterContext,
-  type BlockHtmlAdapterMatcher,
-  BlockHtmlAdapterMatcherIdentifier,
-  HastUtils,
-  type HtmlAST,
-  HtmlASTToDeltaMatcherIdentifier,
-  HtmlDeltaConverter,
-  InlineDeltaToHtmlAdapterMatcherIdentifier,
-} from '@blocksuite/affine-shared/adapters';
 import type { ExtensionType } from '@blocksuite/block-std';
 import type { ServiceProvider } from '@blocksuite/global/di';
 import {
@@ -38,7 +28,21 @@ import rehypeParse from 'rehype-parse';
 import rehypeStringify from 'rehype-stringify';
 import { unified } from 'unified';
 
-import { AdapterFactoryIdentifier } from '../type.js';
+import {
+  type AdapterContext,
+  AdapterFactoryIdentifier,
+  type HtmlAST,
+} from '../types';
+import { HastUtils } from '../utils/hast';
+import {
+  type BlockHtmlAdapterMatcher,
+  BlockHtmlAdapterMatcherIdentifier,
+} from './block-adapter';
+import {
+  HtmlASTToDeltaMatcherIdentifier,
+  HtmlDeltaConverter,
+  InlineDeltaToHtmlAdapterMatcherIdentifier,
+} from './delta-converter';
 
 export type Html = string;
 

blocksuite/affine/shared/src/adapters/html/index.ts

@@ -1,3 +1,3 @@
 export * from './block-adapter.js';
 export * from './delta-converter.js';
-export * from './type.js';
+export * from './html.js';

blocksuite/affine/shared/src/adapters/html/type.ts

@@ -1 +0,0 @@
-export type Html = string;

blocksuite/affine/shared/src/adapters/index.ts

@@ -3,6 +3,9 @@ export {
   type BlockHtmlAdapterMatcher,
   BlockHtmlAdapterMatcherIdentifier,
   type Html,
+  HtmlAdapter,
+  HtmlAdapterFactoryExtension,
+  HtmlAdapterFactoryIdentifier,
   HtmlASTToDeltaExtension,
   type HtmlASTToDeltaMatcher,
   HtmlASTToDeltaMatcherIdentifier,
@@ -10,7 +13,7 @@ export {
   InlineDeltaToHtmlAdapterExtension,
   type InlineDeltaToHtmlAdapterMatcher,
   InlineDeltaToHtmlAdapterMatcherIdentifier,
-} from './html/index.js';
+} from './html';
 export {
   BlockMarkdownAdapterExtension,
   type BlockMarkdownAdapterMatcher,
@@ -23,7 +26,7 @@ export {
   type MarkdownASTToDeltaMatcher,
   MarkdownASTToDeltaMatcherIdentifier,
   MarkdownDeltaConverter,
-} from './markdown/index.js';
+} from './markdown';
 export {
   BlockNotionHtmlAdapterExtension,
   type BlockNotionHtmlAdapterMatcher,
@@ -34,7 +37,7 @@ export {
   type NotionHtmlASTToDeltaMatcher,
   NotionHtmlASTToDeltaMatcherIdentifier,
   NotionHtmlDeltaConverter,
-} from './notion-html/index.js';
+} from './notion-html';
 export {
   BlockPlainTextAdapterExtension,
   type BlockPlainTextAdapterMatcher,
@@ -43,14 +46,16 @@ export {
   InlineDeltaToPlainTextAdapterMatcherIdentifier,
   type PlainText,
   PlainTextDeltaConverter,
-} from './plain-text/index.js';
+} from './plain-text';
 export {
   type AdapterContext,
+  type AdapterFactory,
+  AdapterFactoryIdentifier,
   type BlockAdapterMatcher,
   DeltaASTConverter,
   type HtmlAST,
   type InlineHtmlAST,
   isBlockSnapshotNode,
   type TextBuffer,
-} from './types/index.js';
+} from './types';
-export * from './utils/index.js';
+export * from './utils';

blocksuite/affine/shared/src/adapters/types/adapter.ts

@@ -1,8 +1,10 @@
+import { createIdentifier } from '@blocksuite/global/di';
 import type { BaseTextAttributes, DeltaInsert } from '@blocksuite/inline';
 import {
   type AssetsManager,
   type ASTWalker,
   type ASTWalkerContext,
+  type BaseAdapter,
   type BlockSnapshot,
   BlockSnapshotSchema,
   type Job,
@@ -168,3 +170,11 @@ export type ASTToDeltaMatcher<AST> = {
     }
   ) => DeltaInsert<AffineTextAttributes>[];
 };
+
+export type AdapterFactory = {
+  // TODO(@chen): Make it return the specific adapter type
+  get: (job: Job) => BaseAdapter;
+};
+
+export const AdapterFactoryIdentifier =
+  createIdentifier<AdapterFactory>('AdapterFactory');

blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts

@@ -2,6 +2,7 @@ import {
   DEFAULT_NOTE_BACKGROUND_COLOR,
   NoteDisplayMode,
 } from '@blocksuite/affine-model';
+import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
 import { Container } from '@blocksuite/global/di';
 import type {
   BlockSnapshot,
@@ -14,7 +15,6 @@ import { describe, expect, test } from 'vitest';
 import { defaultBlockHtmlAdapterMatchers } from '../../_common/adapters/html/block-matcher.js';
 import { htmlInlineToDeltaMatchers } from '../../_common/adapters/html/delta-converter/html-inline.js';
 import { inlineDeltaToHtmlAdapterMatchers } from '../../_common/adapters/html/delta-converter/inline-delta.js';
-import { HtmlAdapter } from '../../_common/adapters/html/html.js';
 import { nanoidReplacement } from '../../_common/test-utils/test-utils.js';
 import { embedSyncedDocMiddleware } from '../../_common/transformers/middlewares.js';
 import { createJob } from '../utils/create-job.js';

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

@@ -1,3 +1,4 @@
+import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
 import type { ExtensionType } from '@blocksuite/block-std';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { sha } from '@blocksuite/global/utils';
@@ -19,8 +20,6 @@ import {
   type ToDocSnapshotPayload,
 } from '@blocksuite/store';
 
-import { AdapterFactoryIdentifier } from './type.js';
-
 export type Attachment = File[];
 
 type AttachmentToSliceSnapshotPayload = {

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

@@ -1,9 +1,9 @@
+import { HtmlAdapterFactoryExtension } from '@blocksuite/affine-shared/adapters';
 import type { ExtensionType } from '@blocksuite/block-std';
 
 import { AttachmentAdapterFactoryExtension } from './attachment.js';
 import { htmlInlineToDeltaMatchers } from './html/delta-converter/html-inline.js';
 import { inlineDeltaToHtmlAdapterMatchers } from './html/delta-converter/inline-delta.js';
-import { HtmlAdapterFactoryExtension } from './html/html.js';
 import { ImageAdapterFactoryExtension } from './image.js';
 import { MarkdownAdapterFactoryExtension } from './markdown/markdown.js';
 import { MixTextAdapterFactoryExtension } from './mix-text.js';

blocksuite/blocks/src/_common/adapters/html/index.ts

@@ -1,6 +1 @@
 export { defaultBlockHtmlAdapterMatchers } from './block-matcher.js';
-export {
-  HtmlAdapter,
-  HtmlAdapterFactoryExtension,
-  HtmlAdapterFactoryIdentifier,
-} from './html.js';

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

@@ -1,3 +1,4 @@
+import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
 import type { ExtensionType } from '@blocksuite/block-std';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { sha } from '@blocksuite/global/utils';
@@ -19,8 +20,6 @@ import {
   type ToDocSnapshotPayload,
 } from '@blocksuite/store';
 
-import { AdapterFactoryIdentifier } from './type.js';
-
 export type Image = File[];
 
 type ImageToSliceSnapshotPayload = {

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

@@ -1,6 +1,5 @@
 export * from './attachment.js';
 export * from './extension.js';
-export * from './html/html.js';
 export * from './image.js';
 export * from './markdown/index.js';
 export * from './mix-text.js';

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

@@ -4,6 +4,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
   type AdapterContext,
+  AdapterFactoryIdentifier,
   type BlockMarkdownAdapterMatcher,
   BlockMarkdownAdapterMatcherIdentifier,
   type Markdown,
@@ -36,7 +37,6 @@ import remarkParse from 'remark-parse';
 import remarkStringify from 'remark-stringify';
 import { unified } from 'unified';
 
-import { AdapterFactoryIdentifier } from '../type.js';
 import { defaultBlockMarkdownAdapterMatchers } from './block-matcher.js';
 import { inlineDeltaToMarkdownAdapterMatchers } from './delta-converter/inline-delta.js';
 import { markdownInlineToDeltaMatchers } from './delta-converter/markdown-inline.js';

blocksuite/blocks/src/_common/adapters/mix-text.ts

@@ -2,6 +2,7 @@ import {
   DEFAULT_NOTE_BACKGROUND_COLOR,
   NoteDisplayMode,
 } from '@blocksuite/affine-model';
+import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
 import type { ExtensionType } from '@blocksuite/block-std';
 import type { DeltaInsert } from '@blocksuite/inline';
 import {
@@ -25,7 +26,6 @@ import {
 } from '@blocksuite/store';
 
 import { MarkdownAdapter } from './markdown/index.js';
-import { AdapterFactoryIdentifier } from './type.js';
 
 export type MixText = string;
 

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

@@ -4,6 +4,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
   type AdapterContext,
+  AdapterFactoryIdentifier,
   type BlockNotionHtmlAdapterMatcher,
   BlockNotionHtmlAdapterMatcherIdentifier,
   HastUtils,
@@ -34,8 +35,6 @@ import {
 import rehypeParse from 'rehype-parse';
 import { unified } from 'unified';
 
-import { AdapterFactoryIdentifier } from '../type.js';
-
 type NotionHtmlToSliceSnapshotPayload = {
   file: NotionHtml;
   assets?: AssetsManager;

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

@@ -1,4 +1,5 @@
 import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model';
+import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import type { ExtensionType } from '@blocksuite/block-std';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
@@ -16,8 +17,6 @@ import {
   type SliceSnapshot,
 } from '@blocksuite/store';
 
-import { AdapterFactoryIdentifier } from './type.js';
-
 type NotionEditingStyle = {
   0: string;
 };

blocksuite/blocks/src/_common/adapters/plain-text/plain-text.ts

@@ -4,6 +4,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
   type AdapterContext,
+  AdapterFactoryIdentifier,
   type BlockPlainTextAdapterMatcher,
   BlockPlainTextAdapterMatcherIdentifier,
   type PlainText,
@@ -31,7 +32,6 @@ import {
   type ToDocSnapshotPayload,
 } from '@blocksuite/store';
 
-import { AdapterFactoryIdentifier } from '../type.js';
 import { defaultBlockPlainTextAdapterMatchers } from './block-matcher.js';
 import { inlineDeltaToPlainTextAdapterMatchers } from './delta-converter/inline-delta.js';
 

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

@@ -1,10 +0,0 @@
-import { createIdentifier } from '@blocksuite/global/di';
-import type { BaseAdapter, Job } from '@blocksuite/store';
-
-export type AdapterFactory = {
-  // TODO(@chen): Make it return the specific adapter type
-  get: (job: Job) => BaseAdapter;
-};
-
-export const AdapterFactoryIdentifier =
-  createIdentifier<AdapterFactory>('AdapterFactory');

blocksuite/blocks/src/_common/components/embed-card/modal/embed-card-create-modal.ts

@@ -7,12 +7,8 @@ import {
 import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
 import type { EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement } from '@blocksuite/block-std';
-import {
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
-  assertExists,
+import { Bound, Vec, WithDisposable } from '@blocksuite/global/utils';
-  Bound,
-  Vec,
-  WithDisposable,
-} from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -70,10 +66,19 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
       const edgelessRoot = getRootByEditorHost(
         this.host
       ) as EdgelessRootBlockComponent | null;
-      assertExists(edgelessRoot);
+      if (!edgelessRoot) {
+        return;
+      }
 
-      const surface = edgelessRoot.surface;
+      const gfx = this.host.std.get(GfxControllerIdentifier);
-      const center = Vec.toVec(surface.renderer.viewport.center);
+
+      const viewport = gfx.viewport;
+      const surfaceModel = gfx.surface;
+      if (!surfaceModel) {
+        return;
+      }
+
+      const center = Vec.toVec(viewport.center);
       edgelessRoot.service.addBlock(
         flavour,
         {
@@ -85,10 +90,10 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
           ).serialize(),
           style: targetStyle,
         },
-        surface.model
+        surfaceModel
       );
 
-      edgelessRoot.gfx.tool.setTool('default');
+      gfx.tool.setTool('default');
     }
     this.onConfirm();
     this.remove();

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

@@ -1,3 +1,4 @@
+import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
 import { Container } from '@blocksuite/global/di';
 import { sha } from '@blocksuite/global/utils';
 import type { Doc, DocCollection } from '@blocksuite/store';
@@ -6,7 +7,6 @@ import { extMimeMap, Job } from '@blocksuite/store';
 import { defaultBlockHtmlAdapterMatchers } from '../adapters/html/block-matcher.js';
 import { htmlInlineToDeltaMatchers } from '../adapters/html/delta-converter/html-inline.js';
 import { inlineDeltaToHtmlAdapterMatchers } from '../adapters/html/delta-converter/inline-delta.js';
-import { HtmlAdapter } from '../adapters/html/html.js';
 import {
   defaultImageProxyMiddleware,
   docLinkBaseURLMiddleware,

blocksuite/blocks/src/code-block/clipboard/index.ts

@@ -1,3 +1,4 @@
+import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
 import {
   type BlockComponent,
   Clipboard,
@@ -5,7 +6,7 @@ import {
 } from '@blocksuite/block-std';
 import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
 
-import { HtmlAdapter, PlainTextAdapter } from '../../_common/adapters/index.js';
+import { PlainTextAdapter } from '../../_common/adapters/index.js';
 import { pasteMiddleware } from '../../root-block/clipboard/middlewares/index.js';
 
 export class CodeClipboardController {

blocksuite/blocks/src/index.ts

@@ -99,6 +99,11 @@ export {
   Tooltip,
 } from '@blocksuite/affine-components/toolbar';
 export * from '@blocksuite/affine-model';
+export {
+  HtmlAdapter,
+  HtmlAdapterFactoryExtension,
+  HtmlAdapterFactoryIdentifier,
+} from '@blocksuite/affine-shared/adapters';
 export * from '@blocksuite/affine-shared/services';
 export { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 export {

blocksuite/blocks/src/root-block/clipboard/index.ts

@@ -1,10 +1,10 @@
+import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
 import type { BlockComponent, UIEventHandler } from '@blocksuite/block-std';
 import { DisposableGroup } from '@blocksuite/global/utils';
 import type { BlockSnapshot, Doc } from '@blocksuite/store';
 
 import {
   AttachmentAdapter,
-  HtmlAdapter,
   ImageAdapter,
   MixTextAdapter,
   NotionTextAdapter,

yarn.lock

@@ -3472,6 +3472,9 @@ __metadata:
     lodash.clonedeep: "npm:^4.5.0"
     lodash.mergewith: "npm:^4.6.2"
     minimatch: "npm:^10.0.1"
+    rehype-parse: "npm:^9.0.0"
+    rehype-stringify: "npm:^10.0.0"
+    unified: "npm:^11.0.5"
     zod: "npm:^3.23.8"
   languageName: unknown
   linkType: soft