From 5748591bc56dabe76685c7aa299cefc79baebc3d Mon Sep 17 00:00:00 2001 From: Flrande <1978616327@qq.com> Date: Mon, 17 Feb 2025 10:37:04 +0000 Subject: [PATCH] fix(editor): width and height of embed block (#10223) --- .../affine/block-attachment/src/styles.ts | 9 +------ .../src/bookmark-edgeless-block.ts | 6 +++-- .../affine/block-bookmark/src/styles.ts | 19 +++++--------- .../src/embed-figma-block/styles.ts | 9 ++----- .../src/embed-github-block/styles.ts | 19 +------------- .../src/embed-linked-doc-block/styles.ts | 26 ++----------------- .../src/embed-loom-block/styles.ts | 10 +++---- .../src/embed-youtube-block/styles.ts | 10 ++----- blocksuite/tests-legacy/bookmark.spec.ts | 2 +- 9 files changed, 23 insertions(+), 87 deletions(-) diff --git a/blocksuite/affine/block-attachment/src/styles.ts b/blocksuite/affine/block-attachment/src/styles.ts index 5978860883..71071298ef 100644 --- a/blocksuite/affine/block-attachment/src/styles.ts +++ b/blocksuite/affine/block-attachment/src/styles.ts @@ -1,7 +1,3 @@ -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; import { css } from 'lit'; export const styles = css` @@ -12,7 +8,7 @@ export const styles = css` gap: 12px; width: 100%; - height: ${EMBED_CARD_HEIGHT.horizontalThin}px; + height: 100%; padding: 12px; border-radius: 8px; @@ -121,9 +117,6 @@ export const styles = css` } .affine-attachment-card.cubeThick { - width: ${EMBED_CARD_WIDTH.cubeThick}px; - height: ${EMBED_CARD_HEIGHT.cubeThick}px; - flex-direction: column-reverse; .affine-attachment-content { diff --git a/blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts b/blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts index 350a66df94..eb995a5b58 100644 --- a/blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts +++ b/blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts @@ -3,7 +3,7 @@ import { EMBED_CARD_WIDTH, } from '@blocksuite/affine-shared/consts'; import { toGfxBlockComponent } from '@blocksuite/block-std'; -import { styleMap } from 'lit/directives/style-map.js'; +import { type StyleInfo, styleMap } from 'lit/directives/style-map.js'; import { BookmarkBlockComponent } from './bookmark-block.js'; @@ -43,7 +43,9 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent( return this.renderPageContent(); } - protected override accessor blockContainerStyles = {}; + protected override accessor blockContainerStyles: StyleInfo = { + height: '100%', + }; } declare global { diff --git a/blocksuite/affine/block-bookmark/src/styles.ts b/blocksuite/affine/block-bookmark/src/styles.ts index 56560a3392..cde0bc8621 100644 --- a/blocksuite/affine/block-bookmark/src/styles.ts +++ b/blocksuite/affine/block-bookmark/src/styles.ts @@ -1,19 +1,20 @@ -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; import { unsafeCSSVar } from '@blocksuite/affine-shared/theme'; import { baseTheme } from '@toeverything/theme'; import { css, unsafeCSS } from 'lit'; export const styles = css` + bookmark-card { + display: block; + height: 100%; + width: 100%; + } + .affine-bookmark-card { container: affine-bookmark-card / inline-size; margin: 0 auto; box-sizing: border-box; display: flex; width: 100%; - height: ${EMBED_CARD_HEIGHT.horizontal}px; border-radius: 8px; border: 1px solid var(--affine-background-tertiary-color); @@ -187,8 +188,6 @@ export const styles = css` } .affine-bookmark-card.list { - height: ${EMBED_CARD_HEIGHT.list}px; - .affine-bookmark-content { width: 100%; flex-direction: row; @@ -215,9 +214,8 @@ export const styles = css` } .affine-bookmark-card.vertical { - width: ${EMBED_CARD_WIDTH.vertical}px; - height: ${EMBED_CARD_HEIGHT.vertical}px; flex-direction: column-reverse; + height: 100%; .affine-bookmark-content { width: 100%; @@ -248,9 +246,6 @@ export const styles = css` } .affine-bookmark-card.cube { - width: ${EMBED_CARD_WIDTH.cube}px; - height: ${EMBED_CARD_HEIGHT.cube}px; - .affine-bookmark-content { width: 100%; flex-direction: column; diff --git a/blocksuite/affine/block-embed/src/embed-figma-block/styles.ts b/blocksuite/affine/block-embed/src/embed-figma-block/styles.ts index c65af5ba43..232c339bbc 100644 --- a/blocksuite/affine/block-embed/src/embed-figma-block/styles.ts +++ b/blocksuite/affine/block-embed/src/embed-figma-block/styles.ts @@ -1,17 +1,14 @@ -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { css, html } from 'lit'; export const styles = css` .affine-embed-figma-block { - width: ${EMBED_CARD_WIDTH.figma}px; display: flex; flex-direction: column; gap: 20px; padding: 12px; + width: 100%; + height: 100%; border-radius: 8px; border: 1px solid var(--affine-background-tertiary-color); @@ -19,8 +16,6 @@ export const styles = css` opacity: var(--add, 1); background: var(--affine-background-primary-color); user-select: none; - - aspect-ratio: ${EMBED_CARD_WIDTH.figma} / ${EMBED_CARD_HEIGHT.figma}; } .affine-embed-figma { diff --git a/blocksuite/affine/block-embed/src/embed-github-block/styles.ts b/blocksuite/affine/block-embed/src/embed-github-block/styles.ts index 6fc64b5729..f5c63f5b2e 100644 --- a/blocksuite/affine/block-embed/src/embed-github-block/styles.ts +++ b/blocksuite/affine/block-embed/src/embed-github-block/styles.ts @@ -1,7 +1,3 @@ -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; import { css, html } from 'lit'; export const styles = css` @@ -9,7 +5,7 @@ export const styles = css` box-sizing: border-box; display: flex; width: 100%; - height: ${EMBED_CARD_HEIGHT.horizontal}px; + height: 100%; border-radius: 8px; border: 1px solid var(--affine-background-tertiary-color); @@ -243,9 +239,6 @@ export const styles = css` } .affine-embed-github-block.list { - height: ${EMBED_CARD_HEIGHT.list}px; - width: ${EMBED_CARD_WIDTH.list}px; - .affine-embed-github-content { width: 100%; flex-direction: row; @@ -279,14 +272,7 @@ export const styles = css` } } - .affine-embed-github-block.horizontal { - width: ${EMBED_CARD_WIDTH.horizontal}px; - height: ${EMBED_CARD_HEIGHT.horizontal}px; - } - .affine-embed-github-block.vertical { - width: ${EMBED_CARD_WIDTH.vertical}px; - height: ${EMBED_CARD_HEIGHT.vertical}px; flex-direction: column; .affine-embed-github-content { @@ -357,9 +343,6 @@ export const styles = css` } .affine-embed-github-block.cube { - width: ${EMBED_CARD_WIDTH.cube}px; - height: ${EMBED_CARD_HEIGHT.cube}px; - .affine-embed-github-content { width: 100%; flex-direction: column; diff --git a/blocksuite/affine/block-embed/src/embed-linked-doc-block/styles.ts b/blocksuite/affine/block-embed/src/embed-linked-doc-block/styles.ts index 2491fc7272..b6ecd2a33b 100644 --- a/blocksuite/affine/block-embed/src/embed-linked-doc-block/styles.ts +++ b/blocksuite/affine/block-embed/src/embed-linked-doc-block/styles.ts @@ -1,8 +1,3 @@ -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_MIN_WIDTH, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; import { css, html } from 'lit'; import { embedNoteContentStyles } from '../common/embed-note-content-styles.js'; @@ -11,7 +6,8 @@ export const styles = css` .affine-embed-linked-doc-block { box-sizing: border-box; display: flex; - width: ${EMBED_CARD_WIDTH.horizontal}px; + width: 100%; + height: 100%; border-radius: 8px; border: 1px solid var(--affine-background-tertiary-color); opacity: var(--add, 1); @@ -20,11 +16,6 @@ export const styles = css` position: relative; } - .affine-embed-linked-doc-block.horizontal { - width: ${EMBED_CARD_WIDTH.horizontal}px; - height: ${EMBED_CARD_HEIGHT.horizontal}px; - } - .affine-embed-linked-doc-content { flex-grow: 1; height: 100%; @@ -184,11 +175,6 @@ export const styles = css` border-radius: 4px 4px var(--1, 0px) var(--1, 0px); } - .affine-embed-linked-doc-block:not(.in-canvas) { - width: 100%; - min-width: calc(min(${EMBED_CARD_MIN_WIDTH}px, 100%)); - } - .affine-embed-linked-doc-block.loading { .affine-embed-linked-doc-content-date { display: none; @@ -243,8 +229,6 @@ export const styles = css` } } .affine-embed-linked-doc-block.horizontalThin { - height: ${EMBED_CARD_HEIGHT.horizontalThin}px; - .affine-embed-linked-doc-banner { height: 66px; } @@ -260,7 +244,6 @@ export const styles = css` } } .affine-embed-linked-doc-block.list { - height: ${EMBED_CARD_HEIGHT.list}px; .affine-embed-linked-doc-content { width: 100%; flex-direction: row; @@ -286,8 +269,6 @@ export const styles = css` } } .affine-embed-linked-doc-block.vertical { - width: ${EMBED_CARD_WIDTH.vertical}px; - height: ${EMBED_CARD_HEIGHT.vertical}px; flex-direction: column-reverse; .affine-embed-linked-doc-content { @@ -329,9 +310,6 @@ export const styles = css` } } .affine-embed-linked-doc-block.cube { - width: ${EMBED_CARD_WIDTH.cube}px; - height: ${EMBED_CARD_HEIGHT.cube}px; - .affine-embed-linked-doc-content { width: 100%; flex-direction: column; diff --git a/blocksuite/affine/block-embed/src/embed-loom-block/styles.ts b/blocksuite/affine/block-embed/src/embed-loom-block/styles.ts index 250e5c75ff..f2eb92c94a 100644 --- a/blocksuite/affine/block-embed/src/embed-loom-block/styles.ts +++ b/blocksuite/affine/block-embed/src/embed-loom-block/styles.ts @@ -1,26 +1,22 @@ -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; import { css, html } from 'lit'; export const styles = css` .affine-embed-loom-block { box-sizing: border-box; - width: ${EMBED_CARD_WIDTH.video}px; display: flex; flex-direction: column; gap: 20px; padding: 12px; + width: 100%; + height: 100%; + border-radius: 8px; border: 1px solid var(--affine-background-tertiary-color); opacity: var(--add, 1); background: var(--affine-background-primary-color); user-select: none; - - aspect-ratio: ${EMBED_CARD_WIDTH.video} / ${EMBED_CARD_HEIGHT.video}; } .affine-embed-loom-video { diff --git a/blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts b/blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts index f43329893c..0903d22d16 100644 --- a/blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts +++ b/blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts @@ -1,15 +1,11 @@ -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { css, html } from 'lit'; export const styles = css` .affine-embed-youtube-block { box-sizing: border-box; - width: ${EMBED_CARD_WIDTH.video}px; - max-width: 100%; + width: 100%; + height: 100%; display: flex; flex-direction: column; @@ -22,8 +18,6 @@ export const styles = css` opacity: var(--add, 1); background: var(--affine-background-primary-color); user-select: none; - - aspect-ratio: ${EMBED_CARD_WIDTH.video} / ${EMBED_CARD_HEIGHT.video}; } .affine-embed-youtube-video { diff --git a/blocksuite/tests-legacy/bookmark.spec.ts b/blocksuite/tests-legacy/bookmark.spec.ts index 8c4d892a97..2afb77e67d 100644 --- a/blocksuite/tests-legacy/bookmark.spec.ts +++ b/blocksuite/tests-legacy/bookmark.spec.ts @@ -263,7 +263,7 @@ test.describe('embed card toolbar', () => { const listStyleBookmarkBox = await bookmark.boundingBox(); assertExists(listStyleBookmarkBox); assertAlmostEqual(listStyleBookmarkBox.width, 752, 2); - assertAlmostEqual(listStyleBookmarkBox.height, 46, 2); + assertAlmostEqual(listStyleBookmarkBox.height, 48, 2); await openCardStyleMenu(); await cardStyleHorizontalButton.click();