feat(editor): brush and highlighter dom renderer (#13464)

#### PR Dependency Tree


* **PR #13464** 👈
  * **PR #13465**

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* DOM-based SVG rendering for Brush and Highlighter with zoom, rotation,
layering and improved visualization.

* **Refactor**
* Consolidated renderer exports into a single entry point for simpler
integration.

* **Chores**
* Updated view registrations to include the new DOM renderer extensions.
  * Improved highlighter sizing consistency based on serialized bounds.

* **Revert**
  * Removed highlighter renderer registration from the shape module.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


#### PR Dependency Tree


* **PR #13464** 👈
  * **PR #13465**
    * **PR #13471**
      * **PR #13472**
        * **PR #13473**

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

blocksuite/affine/gfx/brush/src/index.ts

@@ -1,7 +1,7 @@
 export * from './adapter';
 export * from './brush-tool';
-export * from './element-renderer';
 export * from './eraser-tool';
 export * from './highlighter-tool';
+export * from './renderer';
 export * from './toolbar/configs';
 export * from './toolbar/senior-tool';

blocksuite/affine/gfx/brush/src/renderer/dom/brush.ts

@@ -0,0 +1,72 @@
+import {
+  DomElementRendererExtension,
+  type DomRenderer,
+} from '@blocksuite/affine-block-surface';
+import type { BrushElementModel } from '@blocksuite/affine-model';
+import { DefaultTheme } from '@blocksuite/affine-model';
+
+export const BrushDomRendererExtension = DomElementRendererExtension(
+  'brush',
+  (
+    model: BrushElementModel,
+    domElement: HTMLElement,
+    renderer: DomRenderer
+  ) => {
+    const { zoom } = renderer.viewport;
+    const [, , w, h] = model.deserializedXYWH;
+
+    // Early return if invalid dimensions
+    if (w <= 0 || h <= 0) {
+      return;
+    }
+
+    // Early return if no commands
+    if (!model.commands) {
+      return;
+    }
+
+    // Clear previous content
+    domElement.innerHTML = '';
+
+    // Get color value
+    const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
+
+    // Create SVG element
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.style.position = 'absolute';
+    svg.style.left = '0';
+    svg.style.top = '0';
+    svg.style.width = `${w * zoom}px`;
+    svg.style.height = `${h * zoom}px`;
+    svg.style.overflow = 'visible';
+    svg.style.pointerEvents = 'none';
+    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+
+    // Apply rotation transform
+    if (model.rotate !== 0) {
+      svg.style.transform = `rotate(${model.rotate}deg)`;
+      svg.style.transformOrigin = 'center';
+    }
+
+    // Create path element for the brush stroke
+    const pathElement = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'path'
+    );
+    pathElement.setAttribute('d', model.commands);
+    pathElement.setAttribute('fill', color);
+    pathElement.setAttribute('stroke', 'none');
+
+    svg.append(pathElement);
+    domElement.replaceChildren(svg);
+
+    // Set element size and position
+    domElement.style.width = `${w * zoom}px`;
+    domElement.style.height = `${h * zoom}px`;
+    domElement.style.overflow = 'visible';
+    domElement.style.pointerEvents = 'none';
+
+    // Set z-index for layering
+    domElement.style.zIndex = renderer.layerManager.getZIndex(model).toString();
+  }
+);

blocksuite/affine/gfx/brush/src/renderer/dom/highlighter.ts

@@ -0,0 +1,76 @@
+import {
+  DomElementRendererExtension,
+  type DomRenderer,
+} from '@blocksuite/affine-block-surface';
+import type { HighlighterElementModel } from '@blocksuite/affine-model';
+import { DefaultTheme } from '@blocksuite/affine-model';
+
+export const HighlighterDomRendererExtension = DomElementRendererExtension(
+  'highlighter',
+  (
+    model: HighlighterElementModel,
+    domElement: HTMLElement,
+    renderer: DomRenderer
+  ) => {
+    const { zoom } = renderer.viewport;
+    const [, , w, h] = model.deserializedXYWH;
+
+    // Early return if invalid dimensions
+    if (w <= 0 || h <= 0) {
+      return;
+    }
+
+    // Early return if no commands
+    if (!model.commands) {
+      return;
+    }
+
+    // Clear previous content
+    domElement.innerHTML = '';
+
+    // Get color value
+    const color = renderer.getColorValue(
+      model.color,
+      DefaultTheme.hightlighterColor,
+      true
+    );
+
+    // Create SVG element
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.style.position = 'absolute';
+    svg.style.left = '0';
+    svg.style.top = '0';
+    svg.style.width = `${w * zoom}px`;
+    svg.style.height = `${h * zoom}px`;
+    svg.style.overflow = 'visible';
+    svg.style.pointerEvents = 'none';
+    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+
+    // Apply rotation transform
+    if (model.rotate !== 0) {
+      svg.style.transform = `rotate(${model.rotate}deg)`;
+      svg.style.transformOrigin = 'center';
+    }
+
+    // Create path element for the highlighter stroke
+    const pathElement = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'path'
+    );
+    pathElement.setAttribute('d', model.commands);
+    pathElement.setAttribute('fill', color);
+    pathElement.setAttribute('stroke', 'none');
+
+    svg.append(pathElement);
+    domElement.replaceChildren(svg);
+
+    // Set element size and position
+    domElement.style.width = `${w * zoom}px`;
+    domElement.style.height = `${h * zoom}px`;
+    domElement.style.overflow = 'visible';
+    domElement.style.pointerEvents = 'none';
+
+    // Set z-index for layering
+    domElement.style.zIndex = renderer.layerManager.getZIndex(model).toString();
+  }
+);

blocksuite/affine/gfx/brush/src/renderer/dom/index.ts

@@ -0,0 +1,2 @@
+export { BrushDomRendererExtension } from './brush';
+export { HighlighterDomRendererExtension } from './highlighter';

blocksuite/affine/gfx/brush/src/renderer/element/highlighter.ts

@@ -0,0 +1,41 @@
+import {
+  type ElementRenderer,
+  ElementRendererExtension,
+} from '@blocksuite/affine-block-surface';
+import {
+  DefaultTheme,
+  type HighlighterElementModel,
+} from '@blocksuite/affine-model';
+
+export const highlighter: ElementRenderer<HighlighterElementModel> = (
+  model,
+  ctx,
+  matrix,
+  renderer
+) => {
+  const {
+    rotate,
+    deserializedXYWH: [, , w, h],
+  } = model;
+  const cx = w / 2;
+  const cy = h / 2;
+
+  ctx.setTransform(
+    matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy)
+  );
+
+  const color = renderer.getColorValue(
+    model.color,
+    DefaultTheme.hightlighterColor,
+    true
+  );
+
+  ctx.fillStyle = color;
+
+  ctx.fill(new Path2D(model.commands));
+};
+
+export const HighlighterElementRendererExtension = ElementRendererExtension(
+  'highlighter',
+  highlighter
+);

blocksuite/affine/gfx/brush/src/renderer/element/index.ts

@@ -0,0 +1,2 @@
+export { BrushElementRendererExtension } from './brush';
+export { HighlighterElementRendererExtension } from './highlighter';

blocksuite/affine/gfx/brush/src/renderer/index.ts

@@ -0,0 +1,2 @@
+export * from './dom';
+export * from './element';

blocksuite/affine/gfx/brush/src/view.ts

@@ -5,9 +5,14 @@ import {
 
 import { BrushTool } from './brush-tool';
 import { effects } from './effects';
-import { BrushElementRendererExtension } from './element-renderer';
 import { EraserTool } from './eraser-tool';
 import { HighlighterTool } from './highlighter-tool';
+import {
+  BrushDomRendererExtension,
+  BrushElementRendererExtension,
+  HighlighterDomRendererExtension,
+  HighlighterElementRendererExtension,
+} from './renderer';
 import {
   brushToolbarExtension,
   highlighterToolbarExtension,
@@ -30,6 +35,9 @@ export class BrushViewExtension extends ViewExtensionProvider {
     context.register(HighlighterTool);
 
     context.register(BrushElementRendererExtension);
+    context.register(BrushDomRendererExtension);
+    context.register(HighlighterElementRendererExtension);
+    context.register(HighlighterDomRendererExtension);
 
     context.register(brushToolbarExtension);
     context.register(highlighterToolbarExtension);