fix(edgeless): disable list and paragraph padding in edgeless text (#…

…8723) Close [BS-1811](https://linear.app/affine-design/issue/BS-1811/edgeless-text-修改垂直padding或行高)
toeverything · Nov 11, 2024 · 5fcbbbd · 5fcbbbd
1 parent b4a1333
commit 5fcbbbd
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 15 deletions.
diff --git 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
@@ -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
@@ -299,6 +299,8 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
       '--edgeless-text-font-style': fontStyle,
       '--edgeless-text-font-weight': fontWeight,
       '--edgeless-text-text-align': textAlign,
+      '--affine-list-margin': '0',
+      '--affine-paragraph-margin': '0',
     });
 
     return html`

diff --git a/tests/edgeless/align.spec.ts b/tests/edgeless/align.spec.ts
@@ -322,7 +322,7 @@ test.describe('auto resize align', () => {
     // 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
@@ -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/...pshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json b/...pshots/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
@@ -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/...t.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json b/...t.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/...ec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json b/...ec.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/...s/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json b/...s/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",