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

tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts

@@ -0,0 +1,45 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  dragView,
+  locateEditorContainer,
+  locateToolbar,
+  setEdgelessTool,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should add highlighter', async ({ page }) => {
+  await setEdgelessTool(page, 'highlighter');
+  await dragView(page, [100, 300], [200, 400]);
+
+  await setEdgelessTool(page, 'default');
+  await clickView(page, [150, 350]);
+
+  const toolbar = locateToolbar(page);
+
+  await page.waitForTimeout(250);
+
+  await expect(toolbar).toBeVisible();
+
+  const lineWidthButton = toolbar
+    .locator('.line-width-button[data-selected]')
+    .last();
+  const defaultLineWidth = await lineWidthButton.getAttribute('aria-label');
+
+  expect(defaultLineWidth).toBe('22');
+});

tests/affine-local/e2e/blocksuite/edgeless/shape.spec.ts

@@ -5,6 +5,7 @@ import {
   dblclickView,
   dragView,
   locateEditorContainer,
+  locateToolbar,
   setEdgelessTool,
 } from '@affine-test/kit/utils/editor';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
@@ -35,7 +36,7 @@ test('should add text to shape, default to pure black', async ({ page }) => {
   await page.keyboard.type('text');
   await page.keyboard.press('Escape');
 
-  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+  const toolbar = locateToolbar(page);
   const textColorContainer = toolbar.locator(
     'edgeless-color-picker-button.text-color'
   );
@@ -74,7 +75,7 @@ test('should add text to shape with pure white', async ({ page }) => {
   await page.keyboard.type('text');
   await page.keyboard.press('Escape');
 
-  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+  const toolbar = locateToolbar(page);
   const textColorContainer = toolbar.locator(
     'edgeless-color-picker-button.text-color'
   );