chore(editor): adjust min width of edgeless note (#10153)

Close [BS-2499](https://linear.app/affine-design/issue/BS-2499/所有notes最小宽度调整为218px)

### What changes
- adjusted min width of edgeless note
  - placeholder show ellipsis in min edgeless note
- refactored somes button of `change-note-button.ts` with `isPageBlock`

blocksuite/affine/block-note/src/index.ts

@@ -6,3 +6,4 @@ export * from './note-block';
 export * from './note-edgeless-block';
 export * from './note-service';
 export * from './note-spec';
+export { isPageBlock } from './utils';

blocksuite/affine/block-paragraph/src/styles.ts

@@ -126,6 +126,10 @@ export const paragraphBlockStyles = css`
   .affine-paragraph-placeholder {
     position: absolute;
     display: none;
+    max-width: 100%;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     left: 0;
     bottom: 0;
     pointer-events: none;

blocksuite/affine/model/src/consts/note.ts

@@ -2,10 +2,10 @@ import { z } from 'zod';
 
 import { createEnumMap } from '../utils/enum.js';
 
-export const NOTE_MIN_WIDTH = 450 + 24 * 2;
+export const NOTE_MIN_WIDTH = 170 + 24 * 2;
 export const NOTE_MIN_HEIGHT = 92;
 
-export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
+export const DEFAULT_NOTE_WIDTH = 450 + 24 * 2;
 export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;
 
 export enum NoteShadow {

blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts

@@ -1145,7 +1145,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
     this._isWidthLimit = bound.w === NOTE_MIN_WIDTH * scale;
     this._isHeightLimit = bound.h === NOTE_MIN_HEIGHT * scale;
 
-    if (bound.h >= NOTE_MIN_HEIGHT * scale) {
+    if (bound.h > NOTE_MIN_HEIGHT * scale) {
       this.doc.updateBlock(element, () => {
         element.edgeless.collapse = true;
         element.edgeless.collapsedHeight = bound.h / scale;

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

@@ -1,4 +1,7 @@
-import { changeNoteDisplayMode } from '@blocksuite/affine-block-note';
+import {
+  changeNoteDisplayMode,
+  isPageBlock,
+} from '@blocksuite/affine-block-note';
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
 import type {
   EdgelessColorPickerButton,
@@ -24,7 +27,7 @@ import {
 import {
   type ColorScheme,
   DefaultTheme,
-  NoteBlockModel,
+  type NoteBlockModel,
   NoteDisplayMode,
   resolveColor,
   type StrokeStyle,
@@ -35,7 +38,6 @@ import {
   SidebarExtensionIdentifier,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import { matchModels } from '@blocksuite/affine-shared/utils';
 import {
   Bound,
   countBy,
@@ -154,16 +156,6 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     return this.edgeless.doc;
   }
 
-  private get _enableAutoHeight() {
-    return !(
-      this._pageBlockEnabled &&
-      this.notes.length === 1 &&
-      this.notes[0].parent?.children.find(child =>
-        matchModels(child, [NoteBlockModel])
-      ) === this.notes[0]
-    );
-  }
-
   private _getScaleLabel(scale: number) {
     return Math.round(scale * 100) + '%';
   }
@@ -176,6 +168,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
   }
 
   private _setCollapse() {
+    this.doc.captureSync();
     this.notes.forEach(note => {
       const { collapse, collapsedHeight } = note.edgeless;
 
@@ -341,11 +334,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     const currentMode = DisplayModeMap[displayMode];
     const onlyOne = len === 1;
     const isDocOnly = displayMode === NoteDisplayMode.DocOnly;
-    const isFirstNote =
+
-      onlyOne &&
-      note.parent?.children.find(child =>
-        matchModels(child, [NoteBlockModel])
-      ) === note;
     const theme = this.edgeless.std.get(ThemeProvider).theme;
     const buttons = [
       onlyOne && this._advancedVisibilityEnabled
@@ -376,7 +365,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
         : nothing,
 
       onlyOne &&
-      !isFirstNote &&
+      !isPageBlock(this.edgeless.std, note) &&
       this._pageBlockEnabled &&
       !this._advancedVisibilityEnabled
         ? html`<editor-icon-button
@@ -532,7 +521,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
 
       onlyOne ? this.quickConnectButton : nothing,
 
-      this._enableAutoHeight
+      !isPageBlock(this.edgeless.std, this.notes[0])
         ? html`<editor-icon-button
             aria-label="Size"
             data-testid="edgeless-note-auto-height"

blocksuite/tests-legacy/edgeless/note/resize.spec.ts

@@ -2,11 +2,11 @@ import { expect } from '@playwright/test';
 
 import {
   activeNoteInEdgeless,
-  dragBetweenCoords,
   enterPlaygroundRoom,
   getNoteRect,
   initEmptyEdgelessState,
   redoByClick,
+  resizeElementByHandle,
   selectNoteInEdgeless,
   setEdgelessTool,
   switchEditorMode,
@@ -44,15 +44,8 @@ test('resize note in edgeless mode', async ({ page }) => {
   await selectNoteInEdgeless(page, noteId);
 
   const initRect = await getNoteRect(page, noteId);
-  const leftHandle = page.locator('.handle[aria-label="left"] .resize');
+  await resizeElementByHandle(page, { x: -100, y: 0 }, 'bottom-left');
-  const box = await leftHandle.boundingBox();
-  if (box === null) throw new Error();
 
-  await dragBetweenCoords(
-    page,
-    { x: box.x + 5, y: box.y + 5 },
-    { x: box.x - 95, y: box.y + 5 }
-  );
   const draggedRect = await getNoteRect(page, noteId);
   assertRectEqual(draggedRect, {
     x: initRect.x - 100,
@@ -84,15 +77,8 @@ test('resize note then collapse note', async ({ page }) => {
   await selectNoteInEdgeless(page, noteId);
 
   const initRect = await getNoteRect(page, noteId);
-  const leftHandle = page.locator('.handle[aria-label="left"] .resize');
-  let box = await leftHandle.boundingBox();
-  if (box === null) throw new Error();
 
-  await dragBetweenCoords(
+  await resizeElementByHandle(page, { x: 0, y: 100 }, 'bottom-right');
-    page,
-    { x: box.x + 50, y: box.y + box.height },
-    { x: box.x + 50, y: box.y + box.height + 100 }
-  );
   let noteRect = await getNoteRect(page, noteId);
   await expect(page.getByTestId('edgeless-note-collapse-button')).toBeVisible();
   assertRectEqual(noteRect, {
@@ -111,17 +97,9 @@ test('resize note then collapse note', async ({ page }) => {
   expect(domRect!.height).toBeCloseTo(initRect.h + 100);
 
   await selectNoteInEdgeless(page, noteId);
-  box = await leftHandle.boundingBox();
+  await resizeElementByHandle(page, { x: 0, y: -150 }, 'bottom-right');
-  if (box === null) throw new Error();
+
-  await dragBetweenCoords(
-    page,
-    { x: box.x + 50, y: box.y + box.height },
-    { x: box.x + 50, y: box.y + box.height - 150 }
-  );
   noteRect = await getNoteRect(page, noteId);
-  await expect(
-    page.getByTestId('edgeless-note-collapse-button')
-  ).not.toBeVisible();
   assertRectEqual(noteRect, {
     x: initRect.x,
     y: initRect.y,
@@ -149,17 +127,8 @@ test('resize note then auto size and custom size', async ({ page }) => {
   await selectNoteInEdgeless(page, noteId);
 
   const initRect = await getNoteRect(page, noteId);
-  const bottomRightResize = page.locator(
-    '.handle[aria-label="bottom-right"] .resize'
-  );
-  const box = await bottomRightResize.boundingBox();
-  if (box === null) throw new Error();
 
-  await dragBetweenCoords(
+  await resizeElementByHandle(page, { x: 0, y: 100 }, 'bottom-right');
-    page,
-    { x: box.x + 5, y: box.y + 5 },
-    { x: box.x + 5, y: box.y + 105 }
-  );
 
   const draggedRect = await getNoteRect(page, noteId);
   assertRectEqual(draggedRect, {