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/shape/src/element-renderer/highlighter.ts

@@ -1,41 +0,0 @@
-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/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);