feat(editor): add highlighter (#10573)

Closes: [BS-2909](https://linear.app/affine-design/issue/BS-2909/新增highlighter)

### What's Changed!

Currently the highlighter tool is very similar to brush, but for the future, it's a standalone module.

* Added `Highlighter` element model
* Added `Highlighter` tool
* Added `Highlighter` entry to the global toolbar

blocksuite/affine/blocks/block-surface/src/element-model/index.ts

@@ -2,6 +2,7 @@ import {
   BrushElementModel,
   ConnectorElementModel,
   GroupElementModel,
+  HighlighterElementModel,
   MindmapElementModel,
   ShapeElementModel,
   TextElementModel,
@@ -16,12 +17,14 @@ export const elementsCtorMap = {
   brush: BrushElementModel,
   text: TextElementModel,
   mindmap: MindmapElementModel,
+  highlighter: HighlighterElementModel,
 };
 
 export {
   BrushElementModel,
   ConnectorElementModel,
   GroupElementModel,
+  HighlighterElementModel,
   MindmapElementModel,
   ShapeElementModel,
   SurfaceElementModel,
@@ -35,6 +38,7 @@ export enum CanvasElementType {
   MINDMAP = 'mindmap',
   SHAPE = 'shape',
   TEXT = 'text',
+  HIGHLIGHTER = 'highlighter',
 }
 
 export type ElementModelMap = {
@@ -44,6 +48,7 @@ export type ElementModelMap = {
   ['text']: TextElementModel;
   ['group']: GroupElementModel;
   ['mindmap']: MindmapElementModel;
+  ['highlighter']: HighlighterElementModel;
 };
 
 export function isCanvasElementType(type: string): type is CanvasElementType {

blocksuite/affine/blocks/block-surface/src/renderer/elements/highlighter/index.ts

@@ -0,0 +1,34 @@
+import {
+  DefaultTheme,
+  type HighlighterElementModel,
+} from '@blocksuite/affine-model';
+
+import type { CanvasRenderer } from '../../canvas-renderer.js';
+
+export function highlighter(
+  model: HighlighterElementModel,
+  ctx: CanvasRenderingContext2D,
+  matrix: DOMMatrix,
+  renderer: CanvasRenderer
+) {
+  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));
+}

blocksuite/affine/blocks/block-surface/src/renderer/elements/index.ts

@@ -6,6 +6,7 @@ import type { CanvasRenderer } from '../canvas-renderer.js';
 import { brush } from './brush/index.js';
 import { connector } from './connector/index.js';
 import { group } from './group/index.js';
+import { highlighter } from './highlighter/index.js';
 import { mindmap } from './mindmap.js';
 import { shape } from './shape/index.js';
 import { text } from './text/index.js';
@@ -24,6 +25,7 @@ export type ElementRenderer<
 
 export const elementRenderers = {
   brush,
+  highlighter,
   connector,
   group,
   shape,