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)

blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts

@@ -118,6 +118,7 @@ export class EdgelessNoteShadowPanel extends WithDisposable(LitElement) {
           >
             <edgeless-tool-icon-button
               class="item-icon"
+              data-testid=${shadow.type.replace('--', '')}
               .tooltip=${shadow.tooltip}
               .tipPosition=${'bottom'}
               .iconContainerPadding=${0}

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts

@@ -99,6 +99,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       const props = {
         edgeless: {
+          ...note.edgeless,
           style: {
             ...note.edgeless.style,
             borderRadius,
@@ -275,6 +276,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       const props = {
         edgeless: {
+          ...note.edgeless,
           style: {
             ...note.edgeless.style,
             shadowType,
@@ -289,6 +291,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       const props = {
         edgeless: {
+          ...note.edgeless,
           style: {
             ...note.edgeless.style,
             borderStyle,
@@ -303,6 +306,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       const props = {
         edgeless: {
+          ...note.edgeless,
           style: {
             ...note.edgeless.style,
             borderSize,

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx

@@ -44,8 +44,18 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
   );
 
   useEffect(() => {
-    setCollapsed(note.edgeless.collapse);
-  }, [note.edgeless.collapse]);
+    return note.edgeless$.subscribe(({ collapse, collapsedHeight }) => {
+      if (
+        collapse &&
+        collapsedHeight &&
+        Math.abs(collapsedHeight - styles.headerHeight) < 1
+      ) {
+        setCollapsed(true);
+      } else {
+        setCollapsed(false);
+      }
+    });
+  }, [note.edgeless$]);
 
   useEffect(() => {
     if (!gfx) return;

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',
+      },
+    });
+  });
 });