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/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);

blocksuite/affine/gfx/shape/src/element-renderer/index.ts

@@ -1,2 +1 @@
-export * from './highlighter';
 export * from './shape';

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

@@ -4,10 +4,7 @@ import {
 } from '@blocksuite/affine-ext-loader';
 
 import { effects } from './effects';
-import {
-  HighlighterElementRendererExtension,
-  ShapeElementRendererExtension,
-} from './element-renderer';
+import { ShapeElementRendererExtension } from './element-renderer';
 import { ShapeDomRendererExtension } from './element-renderer/shape-dom';
 import { ShapeElementView, ShapeViewInteraction } from './element-view';
 import { ShapeTool } from './shape-tool';
@@ -24,7 +21,6 @@ export class ShapeViewExtension extends ViewExtensionProvider {
   override setup(context: ViewExtensionContext) {
     super.setup(context);
     if (this.isEdgeless(context.scope)) {
-      context.register(HighlighterElementRendererExtension);
       context.register(ShapeElementRendererExtension);
       context.register(ShapeDomRendererExtension);
       context.register(ShapeElementView);

blocksuite/affine/model/src/elements/highlighter/highlighter.ts

@@ -131,7 +131,7 @@ export class HighlighterElementModel extends GfxPrimitiveElementModel<Highlighte
     instance['_local'].delete('commands');
   })
   @derive((lineWidth: number, instance: Instance) => {
-    const oldBound = instance.elementBound;
+    const oldBound = Bound.fromXYWH(instance.deserializedXYWH);
 
     if (
       lineWidth === instance.lineWidth ||