refactor(editor): add dom renderer entry for canvas element (#12149)

blocksuite/affine/blocks/surface/src/extensions/dom-element-renderer.ts

@@ -0,0 +1,30 @@
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { SurfaceElementModel } from '../element-model/base.js';
+import {
+  type DomElementRenderer,
+  DomElementRendererIdentifier,
+} from '../renderer/dom-elements/index.js';
+
+/**
+ * Creates an extension for registering a DomElementRenderer for a specific element type.
+ *
+ * @param elementType The type of the surface element (e.g., 'shape', 'text') for which this renderer is.
+ * @param implementation The DomElementRenderer function that handles rendering for this element type.
+ * @returns An ExtensionType object that can be used to set up the renderer in the DI container.
+ */
+export const DomElementRendererExtension = <
+  T extends SurfaceElementModel = SurfaceElementModel,
+>(
+  elementType: string,
+  implementation: DomElementRenderer<T>
+): ExtensionType => {
+  return {
+    setup: di => {
+      di.addValue(
+        DomElementRendererIdentifier(elementType),
+        implementation as DomElementRenderer
+      );
+    },
+  };
+};

blocksuite/affine/blocks/surface/src/extensions/export-manager/export-manager.ts

@@ -28,7 +28,7 @@ import {
 } from '@blocksuite/std/gfx';
 import type { ExtensionType, Store } from '@blocksuite/store';
 
-import type { CanvasRenderer } from '../../renderer/canvas-renderer.js';
+import { CanvasRenderer } from '../../renderer/canvas-renderer.js';
 import type { SurfaceBlockComponent } from '../../surface-block.js';
 import { getBgGridGap } from '../../utils/get-bg-grip-gap.js';
 import { FileExporter } from './file-exporter.js';
@@ -358,6 +358,9 @@ export class ExportManager {
       const surfaceBlock = gfx.surfaceComponent as SurfaceBlockComponent | null;
       if (!surfaceBlock) return;
       const bound = gfx.elementsBound;
+      if (!(surfaceBlock.renderer instanceof CanvasRenderer)) {
+        return;
+      }
       return this.edgelessToCanvas(surfaceBlock.renderer, bound, gfx);
     }
   }
@@ -373,6 +376,13 @@ export class ExportManager {
       zoom: number;
     }
   ): Promise<HTMLCanvasElement | undefined> {
+    if (!(surfaceRenderer instanceof CanvasRenderer)) {
+      console.warn(
+        'ExportManager.edgelessToCanvas was called with an invalid renderer type. Expected CanvasRenderer.'
+      );
+      return undefined;
+    }
+
     const rootModel = this.doc.root;
     if (!rootModel) return;
 

blocksuite/affine/blocks/surface/src/extensions/index.ts

@@ -1,5 +1,6 @@
 export * from './clipboard-config';
 export * from './crud-extension';
+export * from './dom-element-renderer';
 export * from './edit-props-middleware-builder';
 export * from './element-renderer';
 export * from './export-manager';