fix: proportional scaling for linked card horizontal style

packages/blocks/src/_common/consts.ts

@@ -13,6 +13,7 @@ export const PAGE_HEADER_HEIGHT = 53;
 
 export const EMBED_CARD_WIDTH: Record<EmbedCardStyle, number> = {
   horizontal: 752,
+  horizontalThin: 752,
   list: 752,
   vertical: 364,
   cube: 170,
@@ -22,6 +23,7 @@ export const EMBED_CARD_WIDTH: Record<EmbedCardStyle, number> = {
 
 export const EMBED_CARD_HEIGHT: Record<EmbedCardStyle, number> = {
   horizontal: 116,
+  horizontalThin: 80,
   list: 46,
   vertical: 390,
   cube: 114,

packages/blocks/src/_common/icons/text.ts

@@ -533,9 +533,11 @@ export const OpenIcon = html`<svg
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
+    class="open-icon"
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M11.0416 3.33325C11.0416 2.98807 11.3214 2.70825 11.6666 2.70825H16.6666C17.0118 2.70825 17.2916 2.98807 17.2916 3.33325V8.33325C17.2916 8.67843 17.0118 8.95825 16.6666 8.95825C16.3214 8.95825 16.0416 8.67843 16.0416 8.33325V4.84214L8.77519 12.1085C8.53112 12.3526 8.13539 12.3526 7.89131 12.1085C7.64723 11.8644 7.64723 11.4687 7.89131 11.2246L15.1577 3.95825H11.6666C11.3214 3.95825 11.0416 3.67843 11.0416 3.33325ZM4.99992 5.62492C4.42462 5.62492 3.95825 6.09129 3.95825 6.66659V14.9999C3.95825 15.5752 4.42462 16.0416 4.99992 16.0416H13.3333C13.9085 16.0416 14.3749 15.5752 14.3749 14.9999V11.6666C14.3749 11.3214 14.6547 11.0416 14.9999 11.0416C15.3451 11.0416 15.6249 11.3214 15.6249 11.6666V14.9999C15.6249 16.2656 14.5989 17.2916 13.3333 17.2916H4.99992C3.73427 17.2916 2.70825 16.2656 2.70825 14.9999V6.66659C2.70825 5.40093 3.73427 4.37492 4.99992 4.37492H8.33325C8.67843 4.37492 8.95825 4.65474 8.95825 4.99992C8.95825 5.3451 8.67843 5.62492 8.33325 5.62492H4.99992Z"
+    fill="#77757D"
   />
 </svg>`;
 

packages/blocks/src/_common/types.ts

@@ -248,6 +248,7 @@ export interface Viewport {
 
 export type EmbedCardStyle =
   | 'horizontal'
+  | 'horizontalThin'
   | 'list'
   | 'vertical'
   | 'cube'

packages/blocks/src/bookmark-block/styles.ts

@@ -177,7 +177,7 @@ export const styles = css`
     .affine-bookmark-content-url > span {
       color: var(--affine-link-color);
     }
-    .affine-bookmark-content-url svg {
+    .affine-bookmark-content-url .open-icon {
       fill: var(--affine-link-color);
     }
   }

packages/blocks/src/embed-figma-block/styles.ts

@@ -188,7 +188,7 @@ export const styles = css`
     .affine-embed-figma-content-url > span {
       color: var(--affine-link-color);
     }
-    .affine-embed-figma-content-url svg {
+    .affine-embed-figma-content-url .open-icon {
       fill: var(--affine-link-color);
     }
   }

packages/blocks/src/embed-github-block/styles.ts

@@ -235,7 +235,7 @@ export const styles = css`
     .affine-embed-github-content-url > span {
       color: var(--affine-link-color);
     }
-    .affine-embed-github-content-url svg {
+    .affine-embed-github-content-url .open-icon {
       fill: var(--affine-link-color);
     }
   }

packages/blocks/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -347,30 +347,28 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockElement<
   }
 
   override updated() {
-    if (this.isInSurface) {
-      // deleted state in horizontal style has 80px height
-      const linkedDoc = this._linkedDoc;
-      const { xywh, style } = this.model;
-      const bound = Bound.deserialize(xywh);
-      if (
-        linkedDoc &&
-        style === 'horizontal' &&
-        bound.h !== EMBED_CARD_HEIGHT.horizontal
-      ) {
-        bound.h = EMBED_CARD_HEIGHT.horizontal;
-        this.page.withoutTransact(() => {
-          this.page.updateBlock(this.model, {
-            xywh: bound.serialize(),
-          });
+    // update card style when linked page deleted
+    const linkedDoc = this._linkedDoc;
+    const { xywh, style } = this.model;
+    const bound = Bound.deserialize(xywh);
+    if (linkedDoc && style === 'horizontalThin') {
+      bound.w = EMBED_CARD_WIDTH.horizontal;
+      bound.h = EMBED_CARD_HEIGHT.horizontal;
+      this.page.withoutTransact(() => {
+        this.page.updateBlock(this.model, {
+          xywh: bound.serialize(),
+          style: 'horizontal',
         });
-      } else if (!linkedDoc && style === 'horizontal' && bound.h !== 80) {
-        bound.h = 80;
-        this.page.withoutTransact(() => {
-          this.page.updateBlock(this.model, {
-            xywh: bound.serialize(),
-          });
+      });
+    } else if (!linkedDoc && style === 'horizontal') {
+      bound.w = EMBED_CARD_WIDTH.horizontalThin;
+      bound.h = EMBED_CARD_HEIGHT.horizontalThin;
+      this.page.withoutTransact(() => {
+        this.page.updateBlock(this.model, {
+          xywh: bound.serialize(),
+          style: 'horizontalThin',
         });
-      }
+      });
     }
   }
 
@@ -449,10 +447,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockElement<
 
     this._cardStyle = this.model.style;
     this._width = EMBED_CARD_WIDTH[this._cardStyle];
-    this._height =
-      isDeleted && this._cardStyle === 'horizontal'
-        ? 80
-        : EMBED_CARD_HEIGHT[this._cardStyle];
+    this._height = EMBED_CARD_HEIGHT[this._cardStyle];
 
     const isEmpty = this._isPageEmpty() && this._isBannerEmpty;
 

packages/blocks/src/embed-linked-doc-block/embed-linked-doc-model.ts

@@ -8,6 +8,7 @@ export const EmbedLinkedDocStyles: EmbedCardStyle[] = [
   'horizontal',
   'list',
   'cube',
+  'horizontalThin',
 ] as const;
 
 export type EmbedLinkedDocBlockProps = {

packages/blocks/src/embed-linked-doc-block/styles.ts

@@ -77,6 +77,7 @@ export const styles = css`
     -webkit-box-orient: vertical;
     flex-grow: 1;
     white-space: normal;
+    word-break: break-word;
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--affine-text-primary-color);
@@ -166,8 +167,8 @@ export const styles = css`
       display: block;
     }
   }
-  .affine-embed-linked-doc-block.horizontal:not(.loading).deleted {
-    height: 80px;
+  .affine-embed-linked-doc-block.horizontalThin {
+    height: ${EMBED_CARD_HEIGHT.horizontalThin}px;
     background: var(--affine-background-secondary-color);
 
     .affine-embed-linked-doc-banner {

packages/blocks/src/embed-youtube-block/styles.ts

@@ -224,7 +224,7 @@ export const styles = css`
     .affine-embed-youtube-content-url > span {
       color: var(--affine-link-color);
     }
-    .affine-embed-youtube-content-url svg {
+    .affine-embed-youtube-content-url .open-icon {
       fill: var(--affine-link-color);
     }
   }