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

blocksuite/integration-test/src/__tests__/edgeless/layer.spec.ts

@@ -1,5 +1,8 @@
 import type { EdgelessRootBlockComponent } from '@blocksuite/affine/blocks/root';
-import type { SurfaceElementModel } from '@blocksuite/affine/blocks/surface';
+import type {
+  CanvasRenderer,
+  SurfaceElementModel,
+} from '@blocksuite/affine/blocks/surface';
 import { ungroupCommand } from '@blocksuite/affine/gfx/group';
 import type {
   GroupElementModel,
@@ -789,8 +792,12 @@ test('indexed canvas should be inserted into edgeless portal when switch to edge
     '.indexable-canvas'
   )[0] as HTMLCanvasElement;
 
-  expect(indexedCanvas.width).toBe(surface.renderer.canvas.width);
-  expect(indexedCanvas.height).toBe(surface.renderer.canvas.height);
+  expect(indexedCanvas.width).toBe(
+    (surface.renderer as CanvasRenderer).canvas.width
+  );
+  expect(indexedCanvas.height).toBe(
+    (surface.renderer as CanvasRenderer).canvas.height
+  );
   expect(indexedCanvas.width).not.toBe(0);
   expect(indexedCanvas.height).not.toBe(0);
 });

blocksuite/integration-test/src/__tests__/edgeless/shape-dom.spec.ts

@@ -0,0 +1,72 @@
+import { DomRenderer } from '@blocksuite/affine-block-surface';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { getSurface } from '../utils/edgeless.js';
+import { setupEditor } from '../utils/setup.js';
+
+describe('Shape rendering with DOM renderer', () => {
+  beforeEach(async () => {
+    const cleanup = await setupEditor('edgeless', [], {
+      enableDomRenderer: true,
+    });
+    return cleanup;
+  });
+
+  test('should use DomRenderer when enable_dom_renderer flag is true', async () => {
+    const surface = getSurface(doc, editor);
+    expect(surface).not.toBeNull();
+    expect(surface?.renderer).toBeInstanceOf(DomRenderer);
+  });
+
+  test('should render a shape element as a DOM node', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+
+    const shapeProps = {
+      type: 'shape',
+      subType: 'rectangle',
+      xywh: '[150, 150, 80, 60]',
+      fill: '#ff0000',
+      stroke: '#000000',
+    };
+    const shapeId = surfaceModel.addElement(shapeProps as any);
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+    const shapeElement = surfaceView?.renderRoot.querySelector(
+      `[data-element-id="${shapeId}"]`
+    );
+
+    expect(shapeElement).not.toBeNull();
+    expect(shapeElement).toBeInstanceOf(HTMLElement);
+  });
+
+  test('should remove shape DOM node when element is deleted', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+
+    expect(surfaceView.renderer).toBeInstanceOf(DomRenderer);
+
+    const shapeProps = {
+      type: 'shape',
+      subType: 'ellipse',
+      xywh: '[200, 200, 50, 50]',
+    };
+    const shapeId = surfaceModel.addElement(shapeProps as any);
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    let shapeElement = surfaceView.renderRoot.querySelector(
+      `[data-element-id="${shapeId}"]`
+    );
+    expect(shapeElement).not.toBeNull();
+
+    surfaceModel.deleteElement(shapeId);
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    shapeElement = surfaceView.renderRoot.querySelector(
+      `[data-element-id="${shapeId}"]`
+    );
+    expect(shapeElement).toBeNull();
+  });
+});

blocksuite/integration-test/src/__tests__/utils/setup.ts

@@ -5,6 +5,7 @@ import type { DocMode } from '@blocksuite/affine/model';
 import { AffineSchemas } from '@blocksuite/affine/schemas';
 import {
   CommunityCanvasTextFonts,
+  FeatureFlagService,
   FontConfigExtension,
 } from '@blocksuite/affine/shared/services';
 import {
@@ -47,11 +48,6 @@ function createCollectionOptions() {
     id: room,
     schema,
     idGenerator,
-    defaultFlags: {
-      readonly: {
-        'doc:home': false,
-      },
-    },
   };
 }
 
@@ -115,10 +111,20 @@ export function createPainterWorker() {
   return worker;
 }
 
+type SetupEditorOptions = {
+  extensions?: ExtensionType[];
+  enableDomRenderer?: boolean;
+};
+
 export async function setupEditor(
   mode: DocMode = 'page',
-  extensions: ExtensionType[] = []
+  extensionsInput?: ExtensionType[],
+  optionsInput?: SetupEditorOptions
 ) {
+  const extensions: ExtensionType[] = extensionsInput ?? [];
+  const options: SetupEditorOptions = optionsInput ?? {};
+  const enableDomRenderer = options?.enableDomRenderer ?? false;
+
   const collection = new TestWorkspace(createCollectionOptions());
   collection.storeExtensions = storeExtensions;
   collection.meta.initialize();
@@ -126,6 +132,13 @@ export async function setupEditor(
   window.collection = collection;
 
   initCollection(collection);
+
+  if (enableDomRenderer) {
+    const docStore = window.collection.docs.get('doc:home')?.getStore();
+    const featureFlagService = docStore?.get(FeatureFlagService);
+    featureFlagService?.setFlag('enable_dom_renderer', true);
+  }
+
   const appElement = await createEditor(collection, mode, extensions);
 
   return () => {