fix(editor): increase edgeless text init min width (#10051)

blocksuite/affine/block-edgeless-text/src/edgeless-text-block.ts

@@ -268,6 +268,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
       boxShadow: editing ? '0px 0px 0px 2px rgba(30, 150, 235, 0.3)' : 'none',
       fontWeight: '400',
       lineHeight: 'var(--affine-line-height)',
+      minWidth: !hasMaxWidth ? '220px' : undefined,
     };
 
     return html`

blocksuite/presets/src/__tests__/edgeless/mindmap.spec.ts

@@ -218,7 +218,7 @@ describe('mindmap', () => {
       const rootButton = mindmapView().getCollapseButton(mindmap().tree)!;
 
       moveAndClick(gfx.viewport.toViewBound(rootButton.elementBound));
-      await wait();
+      await wait(500);
 
       expect(rootButton.hidden).toBe(false);
       expect(rootButton.opacity).toBe(1);
@@ -247,7 +247,7 @@ describe('mindmap', () => {
       const childButton = mindmapView().getCollapseButton(node)!;
 
       moveAndClick(gfx.viewport.toViewBound(childButton.elementBound));
-      await wait();
+      await wait(500);
 
       expect(childButton.hidden).toBe(false);
       expect(childButton.opacity).toBe(1);
@@ -273,6 +273,7 @@ describe('mindmap', () => {
       )!;
       // collapse child node
       moveAndClick(gfx.viewport.toViewBound(childButton.elementBound));
+      await wait(500);
 
       doc.captureSync();
       await wait();
@@ -280,7 +281,7 @@ describe('mindmap', () => {
       const rootButton = mindmapView().getCollapseButton(mindmap().tree)!;
       // collapse root node
       moveAndClick(gfx.viewport.toViewBound(rootButton.elementBound));
-      await wait();
+      await wait(500);
 
       // child button should be hidden
       expect(childButton.hidden).toBe(true);

blocksuite/tests-legacy/edgeless/align.spec.ts

@@ -112,12 +112,12 @@ test.describe('auto arrange align', () => {
     await page.mouse.click(0, 0);
 
     await selectAllByKeyboard(page);
-    await assertEdgelessSelectedModelRect(page, [0, -125, 225, 225]);
+    await assertEdgelessSelectedModelRect(page, [0, -125, 395, 225]);
 
     // arrange
     await triggerComponentToolbarAction(page, 'autoArrange');
     await waitNextFrame(page, 200);
-    await assertEdgelessSelectedModelRect(page, [0, 0, 170, 100]);
+    await assertEdgelessSelectedModelRect(page, [0, 0, 340, 100]);
   });
 
   test('arrange note', async ({ page }) => {
@@ -317,12 +317,12 @@ test.describe('auto resize align', () => {
     await page.mouse.click(0, 0);
 
     await selectAllByKeyboard(page);
-    await assertEdgelessSelectedModelRect(page, [0, -125, 225, 225]);
+    await assertEdgelessSelectedModelRect(page, [0, -125, 395, 225]);
 
     // arrange
     await triggerComponentToolbarAction(page, 'autoResize');
     await waitNextFrame(page, 200);
-    await assertEdgelessSelectedModelRect(page, [0, 0, 604.6, 200]);
+    await assertEdgelessSelectedModelRect(page, [0, 0, 1912.296875, 200]);
   });
 
   test('resize and arrange note', async ({ page }) => {
@@ -430,6 +430,6 @@ test.describe('auto resize align', () => {
     // arrange
     await triggerComponentToolbarAction(page, 'autoResize');
     await waitNextFrame(page, 200);
-    await assertEdgelessSelectedModelRect(page, [0, 0, 1421.5, 420]);
+    await assertEdgelessSelectedModelRect(page, [0, 0, 2352.296875, 420]);
   });
 });

blocksuite/tests-legacy/edgeless/edgeless-text.spec.ts

@@ -12,6 +12,7 @@ import {
   getPageSnapshot,
   initEmptyEdgelessState,
   pasteByKeyboard,
+  pressArrowDown,
   pressArrowLeft,
   pressArrowRight,
   pressArrowUp,
@@ -154,20 +155,21 @@ test.describe('edgeless text block', () => {
       delay: 100,
     });
     await waitNextFrame(page);
-    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 50, 26));
+    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 220, 26));
 
-    await type(page, 'aaaaaaaaaa');
+    await type(page, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
     await waitNextFrame(page, 1000);
     // just width changed
-    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 83, 26));
+    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 323, 26));
 
     await type(page, '\nbbb');
     // width not changed, height changed
-    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 83, 50));
+    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 323, 50));
-    await type(page, '\ncccccccccccccccc');
+    await type(page, '\nccccccccccccccccccccccccccccccccccccccccccccccccc');
+    await waitNextFrame(page, 1000);
 
     // width and height changed
-    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 131, 74));
+    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 395, 74));
 
     // blur, max width set to true
     await page.mouse.click(point[0] - 50, point[1], {
@@ -176,9 +178,12 @@ test.describe('edgeless text block', () => {
     await page.mouse.dblclick(point[0], point[1], {
       delay: 100,
     });
+    // to end of line
+    await pressArrowDown(page, 3);
     await type(page, 'dddddddddddddddddddd');
+    await waitNextFrame(page, 1000);
     // width not changed, height changed
-    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 131, 98));
+    await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 395, 98));
   });
 
   test('edgeless text width fixed when drag moving', async ({ page }) => {
@@ -369,7 +374,7 @@ test.describe('edgeless text block', () => {
     await page.mouse.dblclick(point[0], point[1], {
       delay: 100,
     });
-    await waitNextFrame(page);
+    await waitNextFrame(page, 2000);
 
     expect(await getPageSnapshot(page, true)).toMatchSnapshot(
       `${testInfo.title}_init.json`
@@ -567,7 +572,7 @@ test('press backspace at the start of first line when edgeless text exist', asyn
   await page.mouse.dblclick(point[0], point[1], {
     delay: 100,
   });
-  await waitNextFrame(page);
+  await waitNextFrame(page, 2000);
   await type(page, 'aaa');
 
   await waitNextFrame(page);

blocksuite/tests-legacy/edgeless/paste-block.spec.ts

@@ -78,6 +78,7 @@ test.describe('pasting blocks', () => {
     await pressEscape(page, 3);
     await page.mouse.click(130, 140);
     await copyByKeyboard(page);
+    await page.mouse.move(500, 500);
     await pasteByKeyboard(page);
     const textIds = await getAllEdgelessTextIds(page);
     expect(textIds.length).toBe(2);

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json

@@ -25,7 +25,7 @@
           "flavour": "affine:edgeless-text",
           "version": 1,
           "props": {
-            "xywh": "[-25,-25,88.75,50]",
+            "xywh": "[-25,-25,220,26]",
             "index": "a1",
             "lockedBySelf": false,
             "color": "#53b2ef",

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json

@@ -25,7 +25,7 @@
           "flavour": "affine:edgeless-text",
           "version": 1,
           "props": {
-            "xywh": "[-25,-25,50,26]",
+            "xywh": "[-25,-25,220,26]",
             "index": "a1",
             "lockedBySelf": false,
             "color": "#53b2ef",

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json

@@ -29,7 +29,7 @@
           "flavour": "affine:edgeless-text",
           "version": 1,
           "props": {
-            "xywh": "[-25,-25,50,26]",
+            "xywh": "[-25,-25,220,26]",
             "index": "a1",
             "lockedBySelf": false,
             "color": "#53b2ef",

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json

@@ -25,7 +25,7 @@
           "flavour": "affine:edgeless-text",
           "version": 1,
           "props": {
-            "xywh": "[-25,-25,50,26]",
+            "xywh": "[-25,-25,220,26]",
             "index": "a1",
             "lockedBySelf": false,
             "color": "#53b2ef",

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json

@@ -25,7 +25,7 @@
           "flavour": "affine:edgeless-text",
           "version": 1,
           "props": {
-            "xywh": "[-25,-25,50,26]",
+            "xywh": "[-25,-25,220,26]",
             "index": "a1",
             "lockedBySelf": false,
             "color": "#53b2ef",