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/frame/frame.spec.ts

@@ -24,9 +24,11 @@ import {
 import {
   pressBackspace,
   pressEscape,
+  redoByKeyboard,
   SHORT_KEY,
   undoByKeyboard,
 } from '../../utils/actions/keyboard.js';
+import { waitNextFrame } from '../../utils/actions/misc.js';
 import {
   assertCanvasElementsCount,
   assertContainerChildCount,
@@ -420,3 +422,59 @@ test('undo should work when create a frame by dragging', async ({ page }) => {
   await undoByKeyboard(page);
   await expect(page.locator('affine-frame')).toHaveCount(0);
 });
+
+test('undo/redo should work when change frame background', async ({ page }) => {
+  await createFrame(page, [50, 50], [450, 450]);
+  await pressEscape(page);
+
+  const frameTitle = page.locator('affine-frame-title');
+  await frameTitle.click();
+
+  const getFrameBackground = async () => {
+    return page.locator('affine-frame .affine-frame-container').evaluate(el => {
+      return getComputedStyle(el).backgroundColor;
+    });
+  };
+  const colorPanel = page.locator('edgeless-color-picker-button');
+
+  let prevBackground = await getFrameBackground();
+
+  // preset color
+  {
+    await colorPanel.click();
+    await colorPanel.getByLabel('LightRed').click();
+    expect(await getFrameBackground()).not.toBe(prevBackground);
+
+    await undoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getFrameBackground()).toBe(prevBackground);
+
+    await redoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getFrameBackground()).not.toBe(prevBackground);
+  }
+
+  prevBackground = await getFrameBackground();
+
+  // custom color
+  {
+    await colorPanel.click();
+    await colorPanel.locator('edgeless-color-custom-button').click();
+    await page.locator('.color-palette').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+    await pressEscape(page);
+
+    expect(await getFrameBackground()).not.toBe(prevBackground);
+    await undoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getFrameBackground()).toBe(prevBackground);
+
+    await redoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getFrameBackground()).not.toBe(prevBackground);
+  }
+});