feat(editor): block painter extension (#10847)

blocksuite/affine/blocks/block-paragraph/src/turbo/paragraph-painter.worker.ts

@@ -1,8 +1,9 @@
-import type {
+import {
-  BlockLayout,
+  type BlockLayout,
-  BlockLayoutPainter,
+  type BlockLayoutPainter,
-  TextRect,
+  BlockLayoutPainterExtension,
-  WorkerToHostMessage,
+  type TextRect,
+  type WorkerToHostMessage,
 } from '@blocksuite/affine-gfx-turbo-renderer';
 
 interface SentenceLayout {
@@ -39,7 +40,7 @@ function isParagraphLayout(layout: BlockLayout): layout is ParagraphLayout {
   return layout.type === 'affine:paragraph';
 }
 
-export class ParagraphLayoutPainter implements BlockLayoutPainter {
+class ParagraphLayoutPainter implements BlockLayoutPainter {
   private static readonly supportFontFace =
     typeof FontFace !== 'undefined' &&
     typeof self !== 'undefined' &&
@@ -114,3 +115,8 @@ export class ParagraphLayoutPainter implements BlockLayoutPainter {
     });
   }
 }
+
+export const ParagraphLayoutPainterExtension = BlockLayoutPainterExtension(
+  'affine:paragraph',
+  ParagraphLayoutPainter
+);

blocksuite/affine/gfx/turbo-renderer/src/extension/index.ts

@@ -0,0 +1,19 @@
+import { createIdentifier } from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { BlockLayoutPainter } from '../types';
+
+export const BlockPainterProvider = createIdentifier<BlockLayoutPainter>(
+  'block-painter-provider'
+);
+
+export const BlockLayoutPainterExtension = (
+  type: string,
+  painter: new () => BlockLayoutPainter
+): ExtensionType => {
+  return {
+    setup: di => {
+      di.addImpl(BlockPainterProvider(type), painter);
+    },
+  };
+};

blocksuite/affine/gfx/turbo-renderer/src/index.ts

@@ -1,3 +1,4 @@
+export * from './extension';
 export * from './layout/block-layout-provider';
 export * from './painter/painter.worker';
 export * from './text-utils';

blocksuite/affine/gfx/turbo-renderer/src/painter/painter.worker.ts

@@ -1,3 +1,7 @@
+import { Container, type ServiceProvider } from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+
+import { BlockPainterProvider } from '../extension';
 import type {
   BlockLayoutPainter,
   HostToWorkerMessage,
@@ -5,28 +9,25 @@ import type {
   WorkerToHostMessage,
 } from '../types';
 
-class BlockPainterRegistry {
-  private readonly painters = new Map<string, BlockLayoutPainter>();
-
-  register(type: string, painter: BlockLayoutPainter) {
-    this.painters.set(type, painter);
-  }
-
-  getPainter(type: string): BlockLayoutPainter | undefined {
-    return this.painters.get(type);
-  }
-}
-
 export class ViewportLayoutPainter {
   private readonly canvas: OffscreenCanvas = new OffscreenCanvas(0, 0);
   private ctx: OffscreenCanvasRenderingContext2D | null = null;
   private zoom = 1;
-  public readonly registry = new BlockPainterRegistry();
+  public provider: ServiceProvider;
 
-  constructor(painters: Record<string, BlockLayoutPainter>) {
+  getPainter(type: string): BlockLayoutPainter | undefined {
-    Object.entries(painters).forEach(([type, painter]) => {
+    return this.provider.get(BlockPainterProvider(type));
-      this.registry.register(type, painter);
+  }
+
+  constructor(extensions: ExtensionType[]) {
+    const container = new Container();
+
+    extensions.forEach(extension => {
+      extension.setup(container);
     });
+
+    this.provider = container.provider();
+
     self.onmessage = this.handler;
   }
 
@@ -60,7 +61,7 @@ export class ViewportLayoutPainter {
     ctx.scale(this.zoom, this.zoom);
 
     layout.blocks.forEach(blockLayout => {
-      const painter = this.registry.getPainter(blockLayout.type);
+      const painter = this.getPainter(blockLayout.type);
       if (!painter) return;
       painter.paint(ctx, blockLayout, layout.rect.x, layout.rect.y);
     });

blocksuite/integration-test/src/__tests__/utils/turbo-painter-entry.worker.ts

@@ -1,6 +1,4 @@
-import { ParagraphLayoutPainter } from '@blocksuite/affine-block-paragraph/turbo-painter';
+import { ParagraphLayoutPainterExtension } from '@blocksuite/affine-block-paragraph/turbo-painter';
 import { ViewportLayoutPainter } from '@blocksuite/affine-gfx-turbo-renderer/painter';
 
-new ViewportLayoutPainter({
+new ViewportLayoutPainter([ParagraphLayoutPainterExtension]);
-  'affine:paragraph': new ParagraphLayoutPainter(),
-});

packages/frontend/core/src/blocksuite/extensions/turbo-painter-entry.worker.ts

@@ -1,6 +1,4 @@
-import { ParagraphLayoutPainter } from '@blocksuite/affine/blocks/paragraph';
+import { ParagraphLayoutPainterExtension } from '@blocksuite/affine/blocks/paragraph';
 import { ViewportLayoutPainter } from '@blocksuite/affine/gfx/turbo-renderer';
 
-new ViewportLayoutPainter({
+new ViewportLayoutPainter([ParagraphLayoutPainterExtension]);
-  'affine:paragraph': new ParagraphLayoutPainter(),
-});