fix(editor): can not undo and redo of color of edgeless blocks (#12414)

Close [BS-3507](https://linear.app/affine-design/issue/BS-3507/edgeless-text-颜色无法-undoredo)
Close [BS-3426](https://linear.app/affine-design/issue/BS-3426/frame-修改背景色后不能撤销)

This PR fixes the issue where the color change of edgeless blocks could not be undone/redone, including notes, edgeless-text, and frames. It also addresses the problem of a tiny shape being unexpectedly retained on the canvas. The key changes are:
- Removal of `transact` from the `pop` method of edgeless elements.
- Refactoring of `onPickColor` for all edgeless elements and blocks to better control the lifecycle of custom color property changes.
- Addition of the missing custom background color feature for notes.
- Addition of undo/redo color tests for notes, frames, and edgeless-text.

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

- **New Features**
  - Added undo and redo support for color changes in frames, notes, and text blocks, allowing users to revert or reapply background and text color modifications.

- **Bug Fixes**
  - Improved reliability of color picker interactions, ensuring consistent state management and transactional updates during color changes.

- **Tests**
  - Introduced new end-to-end tests to verify undo/redo functionality for color changes in frames, notes, and text blocks.

- **Refactor**
  - Streamlined color picker event handling for better maintainability and consistency across toolbars and style panels.
  - Updated style panel structure and event handling for improved interaction and state management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

tests/blocksuite/e2e/edgeless/note/undo-redo.spec.ts

@@ -13,6 +13,7 @@ import {
   initEmptyEdgelessState,
   initSixParagraphs,
   pasteByKeyboard,
+  pressEscape,
   redoByClick,
   redoByKeyboard,
   selectNoteInEdgeless,
@@ -137,3 +138,63 @@ test('continuous undo and redo (note block add operation) should work', async ({
   count = await countBlock(page, 'affine-edgeless-note');
   expect(count).toBe(4);
 });
+
+test('undo/redo should work when change note custom background', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await selectNoteInEdgeless(page, noteId);
+
+  const getNoteBackground = async () => {
+    return page.locator('edgeless-note-background > div').evaluate(el => {
+      return getComputedStyle(el).backgroundColor;
+    });
+  };
+
+  const stylePanel = page.locator('edgeless-note-style-panel');
+
+  let prevBackground = await getNoteBackground();
+
+  // preset color
+  {
+    await stylePanel.click();
+    await stylePanel.getByLabel('Red').click();
+    await pressEscape(page);
+
+    expect(await getNoteBackground()).not.toBe(prevBackground);
+    await undoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getNoteBackground()).toBe(prevBackground);
+
+    await redoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getNoteBackground()).not.toBe(prevBackground);
+  }
+
+  prevBackground = await getNoteBackground();
+
+  // custom color
+  {
+    await selectNoteInEdgeless(page, noteId);
+    await stylePanel.click();
+    await stylePanel.locator('edgeless-color-custom-button').click();
+    await stylePanel.locator('.color-palette').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+    await pressEscape(page);
+
+    expect(await getNoteBackground()).not.toBe(prevBackground);
+    await undoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getNoteBackground()).toBe(prevBackground);
+
+    await redoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getNoteBackground()).not.toBe(prevBackground);
+  }
+});