From 5fcbbbdcbd2afc34c40eb3c0702ef965efafeaf3 Mon Sep 17 00:00:00 2001 From: Flrande <1978616327@qq.com> Date: Mon, 11 Nov 2024 11:15:51 +0000 Subject: [PATCH] fix(edgeless): disable list and paragraph padding in edgeless text (#8723) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close [BS-1811](https://linear.app/affine-design/issue/BS-1811/edgeless-text-修改垂直padding或行高) --- packages/affine/block-list/src/list-block.ts | 2 +- .../affine/block-paragraph/src/paragraph-block.ts | 4 +++- .../src/edgeless-text-block/edgeless-text-block.ts | 2 ++ tests/edgeless/align.spec.ts | 4 ++-- tests/edgeless/edgeless-text.spec.ts | 12 ++++++------ ...n-width-limit-for-embed-block-add-linked-doc.json | 2 +- .../min-width-limit-for-embed-block-init.json | 2 +- ...f-first-line-when-edgeless-text-exist-finial.json | 2 +- ...rst-line-when-edgeless-text-exist-note-empty.json | 2 +- ...line-when-edgeless-text-exist-note-not-empty.json | 2 +- 10 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/affine/block-list/src/list-block.ts b/packages/affine/block-list/src/list-block.ts index 47848969df96..2650661ac9e5 100644 --- a/packages/affine/block-list/src/list-block.ts +++ b/packages/affine/block-list/src/list-block.ts @@ -214,6 +214,6 @@ export class ListBlockComponent extends CaptionedBlockComponent< private accessor _richTextElement: RichText | null = null; override accessor blockContainerStyles = { - margin: '10px 0', + margin: 'var(--affine-list-margin, 10px 0)', }; } diff --git a/packages/affine/block-paragraph/src/paragraph-block.ts b/packages/affine/block-paragraph/src/paragraph-block.ts index c6f631cbcbb4..f33d656e2923 100644 --- a/packages/affine/block-paragraph/src/paragraph-block.ts +++ b/packages/affine/block-paragraph/src/paragraph-block.ts @@ -188,5 +188,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent< @query('rich-text') private accessor _richTextElement: RichText | null = null; - override accessor blockContainerStyles = { margin: '10px 0' }; + override accessor blockContainerStyles = { + margin: 'var(--affine-paragraph-margin, 10px 0)', + }; } diff --git a/packages/blocks/src/edgeless-text-block/edgeless-text-block.ts b/packages/blocks/src/edgeless-text-block/edgeless-text-block.ts index 97b2b53f30cc..195badc4d2b4 100644 --- a/packages/blocks/src/edgeless-text-block/edgeless-text-block.ts +++ b/packages/blocks/src/edgeless-text-block/edgeless-text-block.ts @@ -299,6 +299,8 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent { // arrange await triggerComponentToolbarAction(page, 'autoResize'); await waitNextFrame(page, 200); - await assertEdgelessSelectedModelRect(page, [0, 0, 437.4, 200]); + await assertEdgelessSelectedModelRect(page, [0, 0, 604.6, 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, [-125, -125, 1303, 420]); + await assertEdgelessSelectedModelRect(page, [0, 0, 1421.5, 420]); }); }); diff --git a/tests/edgeless/edgeless-text.spec.ts b/tests/edgeless/edgeless-text.spec.ts index 22bba51f6a64..fefac5f5b297 100644 --- a/tests/edgeless/edgeless-text.spec.ts +++ b/tests/edgeless/edgeless-text.spec.ts @@ -159,20 +159,20 @@ test.describe('edgeless text block', () => { delay: 100, }); await waitNextFrame(page); - await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 50, 46)); + await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 50, 26)); await type(page, 'aaaaaaaaaa'); await waitNextFrame(page, 1000); // just width changed - await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 83, 46)); + await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 83, 26)); await type(page, '\nbbb'); // width not changed, height changed - await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 83, 80)); + await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 83, 50)); await type(page, '\ncccccccccccccccc'); // width and height changed - await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 131, 114)); + await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 131, 74)); // blur, max width set to true await page.mouse.click(point[0] - 50, point[1], { @@ -181,9 +181,9 @@ test.describe('edgeless text block', () => { await page.mouse.dblclick(point[0], point[1], { delay: 100, }); - await type(page, 'dddddddddd'); + await type(page, 'dddddddddddddddddddd'); // width not changed, height changed - await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 131, 138)); + await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 131, 98)); }); test('edgeless text width fixed when drag moving', async ({ page }) => { diff --git a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json index 4ce2cbd7e541..cdd4483dbfdc 100644 --- a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json +++ b/tests/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,70]", + "xywh": "[-25,-25,88.75,50]", "index": "a1", "color": "--affine-palette-line-blue", "fontFamily": "blocksuite:surface:Inter", diff --git a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json index 507e5a1a7455..7063df65f8d0 100644 --- a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json +++ b/tests/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,46]", + "xywh": "[-25,-25,50,26]", "index": "a1", "color": "--affine-palette-line-blue", "fontFamily": "blocksuite:surface:Inter", diff --git a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json index 959467a34630..d41197b29c3d 100644 --- a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json +++ b/tests/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,46]", + "xywh": "[-25,-25,50,26]", "index": "a1", "color": "--affine-palette-line-blue", "fontFamily": "blocksuite:surface:Inter", diff --git a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json index b6949fb7329a..de125bd91d62 100644 --- a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json +++ b/tests/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,46]", + "xywh": "[-25,-25,50,26]", "index": "a1", "color": "--affine-palette-line-blue", "fontFamily": "blocksuite:surface:Inter", diff --git a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json index 77e59e83b499..db518f74b432 100644 --- a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json +++ b/tests/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,46]", + "xywh": "[-25,-25,50,26]", "index": "a1", "color": "--affine-palette-line-blue", "fontFamily": "blocksuite:surface:Inter",