fix(editor): set edgeless note style will override collapse state (#10098)

Close [BS-2489](https://linear.app/affine-design/issue/BS-2489/%E6%94%B9%E5%8F%98note-style%E4%BC%9A%E9%87%8D%E7%BD%AEcollapse%E7%8A%B6%E6%80%81)

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

@@ -22,6 +22,11 @@ import {
   type,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
+import type { AffineEditorContainer } from '@blocksuite/affine/presets';
+import type {
+  EdgelessRootBlockComponent,
+  NoteBlockModel,
+} from '@blocksuite/blocks';
 import { expect, type Page } from '@playwright/test';
 
 const title = 'Edgeless Note Header Test';
@@ -279,4 +284,89 @@ test.describe('edgeless note element toolbar', () => {
     );
     expect(highlightNoteCards).toHaveCount(1);
   });
+
+  test('note edgeless styles', async ({ page }) => {
+    const getNoteEdgelessProps = async (page: Page, noteId: string) => {
+      const container = locateEditorContainer(page);
+      return await container.evaluate(
+        (container: AffineEditorContainer, noteId) => {
+          const root = container.querySelector(
+            'affine-edgeless-root'
+          ) as EdgelessRootBlockComponent;
+          const note = root.gfx.getElementById(noteId) as NoteBlockModel;
+          return note.edgeless;
+        },
+        noteId
+      );
+    };
+
+    const toolbar = locateElementToolbar(page);
+
+    await selectAllByKeyboard(page);
+    const noteId = (await getEdgelessSelectedIds(page))[0];
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      style: {
+        borderRadius: 8,
+        borderSize: 4,
+        borderStyle: 'none',
+        shadowType: '--affine-note-shadow-box',
+      },
+    });
+
+    await toolbar.getByRole('button', { name: 'Shadow style' }).click();
+    await toolbar.getByTestId('affine-note-shadow-film').click();
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      style: {
+        borderRadius: 8,
+        borderSize: 4,
+        borderStyle: 'none',
+        shadowType: '--affine-note-shadow-film',
+      },
+    });
+
+    await toolbar.getByRole('button', { name: 'Border style' }).click();
+    await toolbar.locator('.mode-solid').click();
+    await toolbar.getByRole('button', { name: 'Border style' }).click();
+    await toolbar.locator('edgeless-line-width-panel').getByLabel('8').click();
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      style: {
+        borderRadius: 8,
+        borderSize: 8,
+        borderStyle: 'solid',
+        shadowType: '--affine-note-shadow-film',
+      },
+    });
+
+    await toolbar.getByRole('button', { name: 'Corners' }).click();
+    await toolbar.locator('edgeless-size-panel').getByText('Large').click();
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      style: {
+        borderRadius: 24,
+        borderSize: 8,
+        borderStyle: 'solid',
+        shadowType: '--affine-note-shadow-film',
+      },
+    });
+
+    const headerToolbar = page.getByTestId('edgeless-page-block-header');
+    const toggleButton = headerToolbar.getByTestId(
+      'edgeless-note-toggle-button'
+    );
+    await toggleButton.click();
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      collapse: true,
+      collapsedHeight: 48,
+      style: {
+        borderRadius: 24,
+        borderSize: 8,
+        borderStyle: 'solid',
+        shadowType: '--affine-note-shadow-film',
+      },
+    });
+  });
 });