feat(editor): support to drag embed iframe from note to surface (#11267)

Close [BS-2807](https://linear.app/affine-design/issue/BS-2807/note-中与-surface-中-embed-iframe-block-互相拖动时的优化)
2026-02-12 04:18:54 +00:00 · 2025-03-31 06:23:11 +00:00
parent 00c5f48a7d
commit b2aa3084ec
11 changed files with 199 additions and 44 deletions
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-error-card.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-error-card.ts
@@ -11,10 +11,10 @@ import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';

+import { ERROR_CARD_DEFAULT_HEIGHT } from '../consts';
 import type { EmbedIframeStatusCardOptions } from '../types';

 const LINK_EDIT_POPUP_OFFSET = 12;
-const ERROR_CARD_DEFAULT_HEIGHT = 114;

 export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
  static override styles = css`
@@ -24,7 +24,7 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
    }

    .affine-embed-iframe-error-card {
-      container: affine-embed-iframe-error-card / inline-size;
+      container: affine-embed-iframe-error-card / size;
      display: flex;
      box-sizing: border-box;
      user-select: none;
@@ -41,7 +41,6 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
        display: flex;
        flex-direction: column;
        gap: 4px;
-        flex: 1 0 0;

        .error-title {
          display: flex;
@@ -64,6 +63,9 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
            font-style: normal;
            font-weight: 600;
            line-height: 22px; /* 157.143% */
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
          }
        }

@@ -119,12 +121,6 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
          }
        }
      }
-
-      @container affine-embed-iframe-error-card (width < 480px) {
-        .error-banner {
-          display: none;
-        }
-      }
    }

    .affine-embed-iframe-error-card.horizontal {
@@ -133,12 +129,19 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {

      .error-content {
        align-items: flex-start;
+        flex: 1 0 0;

        .error-message {
          height: 40px;
          align-items: flex-start;
        }
      }
+
+      @container affine-embed-iframe-error-card (width < 480px) {
+        .error-banner {
+          display: none;
+        }
+      }
    }

    .affine-embed-iframe-error-card.vertical {
@@ -155,6 +158,18 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
          align-items: center;
        }
      }
+
+      .icon-box {
+        svg {
+          transform: scale(1.6) translateY(-14px);
+        }
+      }
+
+      @container affine-embed-iframe-error-card (height < 300px) or (width < 300px) {
+        .error-banner {
+          display: none;
+        }
+      }
    }
  `;

@@ -216,10 +231,10 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
      <div class=${cardClasses} style=${cardStyle}>
        <div class="error-content">
          <div class="error-title">
-            <div class="error-icon">
+            <span class="error-icon">
              ${InformationIcon({ width: '16px', height: '16px' })}
-            </div>
-            <div class="error-title-text">This link couldn’t be loaded.</div>
+            </span>
+            <span class="error-title-text">This link couldn’t be loaded.</span>
          </div>
          <div class="error-message">
            ${this.error?.message || 'Failed to load embedded content'}
@@ -244,8 +259,7 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
          </div>
        </div>
        <div class="error-banner">
-          <!-- TODO: add error banner icon -->
-          <div class="icon-box"></div>
+          <div class="icon-box">${EmbedIframeErrorIcon}</div>
        </div>
      </div>
    `;
@@ -280,3 +294,25 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
    height: ERROR_CARD_DEFAULT_HEIGHT,
  };
 }
+
+export const EmbedIframeErrorIcon = html`<svg
+  width="204"
+  height="102"
+  viewBox="0 0 204 102"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_2676_106795)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M94.6838 8.45092L106.173 31.9276L84.6593 57.0514L90.5888 64.9202C88.6083 64.6092 86.5089 65.0701 84.7813 66.3719L78.4802 71.1202C75.0967 73.6698 74.4207 78.4796 76.9704 81.8631C79.5201 85.2467 84.3299 85.9227 87.7134 83.373L89.4487 82.0654C90.3714 81.37 90.5558 80.0582 89.8604 79.1354C89.1651 78.2127 87.8533 78.0283 86.9305 78.7237L85.1952 80.0313C83.6573 81.1902 81.471 80.883 80.3121 79.345C79.1531 77.807 79.4604 75.6208 80.9984 74.4618L87.2995 69.7136C88.8375 68.5547 91.0237 68.8619 92.1827 70.3999C92.8645 71.3047 94.1389 71.4996 95.0582 70.8513L95.8982 71.966L94.6469 72.9089C93.109 74.0679 90.9227 73.7606 89.7638 72.2227C89.0684 71.2999 87.7566 71.1155 86.8339 71.8109C85.9111 72.5062 85.7267 73.818 86.4221 74.7408C88.9718 78.1243 93.7816 78.8003 97.1651 76.2506L98.4164 75.3077L99.8156 77.1646L86.8434 102.707L89.291 114.735L42.1397 108.108L56.3354 7.10072C56.6429 4.91308 58.6655 3.38889 60.8532 3.69634L94.6838 8.45092ZM122.987 12.4287L119.974 33.8672L95.4607 58.4925C98.7006 56.8928 102.722 57.7678 104.976 60.7594C107.526 64.1429 106.85 68.9527 103.466 71.5024L102.718 72.0665L105.949 78.0266L92.2105 103.461L92.9872 115.254L147.108 122.86L161.304 21.8531C161.611 19.6654 160.087 17.6428 157.899 17.3353L122.987 12.4287ZM100.701 68.3471L100.948 68.1607C102.486 67.0018 102.793 64.8155 101.634 63.2775C100.625 61.9381 98.8364 61.5321 97.3755 62.2152L100.701 68.3471ZM88.8231 36.502C84.6277 35.9124 80.7486 38.8354 80.159 43.0308L79.1885 49.9367C79.0277 51.0809 79.8249 52.1388 80.9691 52.2996C82.1133 52.4604 83.1712 51.6632 83.332 50.519L84.3025 43.6132C84.5705 41.7062 86.3337 40.3775 88.2407 40.6455L95.1466 41.6161C96.2908 41.7769 97.3487 40.9797 97.5095 39.8355C97.6703 38.6913 96.8731 37.6334 95.7289 37.4726L88.8231 36.502ZM115.065 40.1901C113.921 40.0293 112.863 40.8265 112.702 41.9707C112.542 43.1149 113.339 44.1728 114.483 44.3336L121.389 45.3042C123.296 45.5722 124.625 47.3354 124.357 49.2424L123.386 56.1483C123.225 57.2925 124.022 58.3504 125.167 58.5112C126.311 58.672 127.369 57.8748 127.529 56.7306L128.5 49.8247C129.09 45.6293 126.167 41.7503 121.971 41.1607L115.065 40.1901ZM123.031 73.7041C124.176 73.8649 124.973 74.9228 124.812 76.067L123.841 82.9728C123.252 87.1682 119.373 90.0913 115.177 89.5017L106.89 88.337C105.746 88.1762 104.949 87.1183 105.11 85.9741C105.27 84.8299 106.328 84.0327 107.473 84.1935L115.76 85.3582C117.667 85.6262 119.43 84.2975 119.698 82.3905L120.668 75.4847C120.829 74.3405 121.887 73.5433 123.031 73.7041Z"
+      fill="#E6E6E6"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_2676_106795">
+      <rect width="204" height="102" fill="white" />
+    </clipPath>
+  </defs>
+</svg>`;
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-idle-card.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-idle-card.ts
@@ -3,16 +3,22 @@ import { WithDisposable } from '@blocksuite/global/lit';
 import { EmbedIcon } from '@blocksuite/icons/lit';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { IDLE_CARD_DEFAULT_HEIGHT } from '../consts';
+import type { EmbedIframeStatusCardOptions } from '../types';

 export class EmbedIframeIdleCard extends WithDisposable(LitElement) {
  static override styles = css`
    :host {
      width: 100%;
+      height: 100%;
    }

    .affine-embed-iframe-idle-card {
-      width: 100%;
-      height: 48px;
+      container: affine-embed-iframe-idle-card / size;
      box-sizing: border-box;
      display: flex;
      align-items: center;
@@ -23,8 +29,6 @@ export class EmbedIframeIdleCard extends WithDisposable(LitElement) {

      .icon {
        display: flex;
-        width: 24px;
-        height: 24px;
        justify-content: center;
        align-items: center;
        color: ${unsafeCSSVarV2('icon/secondary')};
@@ -48,18 +52,81 @@ export class EmbedIframeIdleCard extends WithDisposable(LitElement) {
    .affine-embed-iframe-idle-card:hover {
      cursor: pointer;
    }
+
+    .affine-embed-iframe-idle-card.horizontal {
+      flex-direction: row;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+
+    .affine-embed-iframe-idle-card.vertical {
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+      gap: 12px;
+
+      .icon {
+        width: 176px;
+        height: 112px;
+        overflow-y: hidden;
+
+        svg {
+          width: 112px;
+          height: 112px;
+          transform: rotate(12deg) translateY(18%);
+        }
+      }
+
+      .text {
+        text-align: center;
+        white-space: normal;
+        word-break: break-word;
+      }
+
+      @container affine-embed-iframe-idle-card (height < 180px) {
+        .icon {
+          display: none;
+        }
+      }
+    }
  `;

  override render() {
+    const { layout, width, height } = this.options;
+    const cardClasses = classMap({
+      'affine-embed-iframe-idle-card': true,
+      horizontal: layout === 'horizontal',
+      vertical: layout === 'vertical',
+    });
+
+    const cardWidth = width ? `${width}px` : '100%';
+    const cardHeight = height ? `${height}px` : '100%';
+    const cardStyle = styleMap({
+      width: cardWidth,
+      height: cardHeight,
+    });
+
    return html`
-      <div class="affine-embed-iframe-idle-card">
-        <span class="icon">
-          ${EmbedIcon({ width: '24px', height: '24px' })}
-        </span>
+      <div class=${cardClasses} style=${cardStyle}>
+        <span class="icon"> ${EmbedIcon()} </span>
        <span class="text">
          Embed anything (Google Drive, Google Docs, Spotify, Miro…)
        </span>
      </div>
    `;
  }
+
+  @property({ attribute: false })
+  accessor options: EmbedIframeStatusCardOptions = {
+    layout: 'horizontal',
+    height: IDLE_CARD_DEFAULT_HEIGHT,
+  };
 }
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-link-input-base.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-link-input-base.ts
@@ -104,6 +104,7 @@ export class EmbedIframeLinkInputBase extends WithDisposable(LitElement) {
    this.disposables.addFromEvent(this, 'cut', stopPropagation);
    this.disposables.addFromEvent(this, 'copy', stopPropagation);
    this.disposables.addFromEvent(this, 'paste', stopPropagation);
+    this.disposables.addFromEvent(this, 'pointerdown', stopPropagation);
  }

  get store() {
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts
@@ -8,10 +8,9 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';

 import { getEmbedCardIcons } from '../../common/utils';
+import { LOADING_CARD_DEFAULT_HEIGHT } from '../consts';
 import type { EmbedIframeStatusCardOptions } from '../types';

-const LOADING_CARD_DEFAULT_HEIGHT = 114;
-
 export class EmbedIframeLoadingCard extends LitElement {
  static override styles = css`
    :host {
@@ -20,7 +19,7 @@ export class EmbedIframeLoadingCard extends LitElement {
    }

    .affine-embed-iframe-loading-card {
-      container: affine-embed-iframe-loading-card / inline-size;
+      container: affine-embed-iframe-loading-card / size;
      display: flex;
      box-sizing: border-box;
      border-radius: 8px;
@@ -147,6 +146,12 @@ export class EmbedIframeLoadingCard extends LitElement {
          }
        }
      }
+
+      @container affine-embed-iframe-loading-card (height < 240px) {
+        .loading-banner {
+          display: none;
+        }
+      }
    }
  `;

--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/consts.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/consts.ts
@@ -6,3 +6,7 @@ export const DEFAULT_IFRAME_HEIGHT = 152;
 export const DEFAULT_IFRAME_WIDTH = '100%';

 export const LINK_CREATE_POPUP_OFFSET = 4;
+
+export const IDLE_CARD_DEFAULT_HEIGHT = 48;
+export const LOADING_CARD_DEFAULT_HEIGHT = 114;
+export const ERROR_CARD_DEFAULT_HEIGHT = 114;
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts
@@ -34,7 +34,10 @@ import {
  DEFAULT_IFRAME_HEIGHT,
  DEFAULT_IFRAME_WIDTH,
  EMBED_IFRAME_DEFAULT_CONTAINER_BORDER_RADIUS,
+  ERROR_CARD_DEFAULT_HEIGHT,
+  IDLE_CARD_DEFAULT_HEIGHT,
  LINK_CREATE_POPUP_OFFSET,
+  LOADING_CARD_DEFAULT_HEIGHT,
 } from './consts.js';
 import { embedIframeBlockStyles } from './style.js';
 import type { EmbedIframeStatusCardOptions } from './types.js';
@@ -109,10 +112,23 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
    return flag ?? false;
  }

+  get _horizontalCardHeight(): number {
+    switch (this.status$.value) {
+      case 'idle':
+        return IDLE_CARD_DEFAULT_HEIGHT;
+      case 'loading':
+        return LOADING_CARD_DEFAULT_HEIGHT;
+      case 'error':
+        return ERROR_CARD_DEFAULT_HEIGHT;
+      default:
+        return LOADING_CARD_DEFAULT_HEIGHT;
+    }
+  }
+
  get _statusCardOptions(): EmbedIframeStatusCardOptions {
    return this.inSurface
      ? { layout: 'vertical' }
-      : { layout: 'horizontal', height: 114 };
+      : { layout: 'horizontal', height: this._horizontalCardHeight };
  }

  open = () => {
@@ -257,19 +273,21 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
  };

  protected _handleClick = () => {
-    // We don't need to select the block when the block is in the surface
-    if (this.inSurface) {
-      return;
-    }
-
    // when the block is in idle status and the url is not set, clear the selection
    // and show the link input popup
    if (this.isIdle$.value && !this.model.props.url) {
-      this.selectionManager.clear(['block']);
+      // when the block is in the surface, clear the surface selection
+      // otherwise, clear the block selection
+      this.selectionManager.clear([this.inSurface ? 'surface' : 'block']);
      this.toggleLinkInputPopup();
      return;
    }

+    // We don't need to select the block when the block is in the surface
+    if (this.inSurface) {
+      return;
+    }
+
    // otherwise, select the block
    this._selectBlock();
  };
@@ -311,7 +329,9 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra

  private readonly _renderContent = () => {
    if (this.isIdle$.value) {
-      return html`<embed-iframe-idle-card></embed-iframe-idle-card>`;
+      return html`<embed-iframe-idle-card
+        .options=${this._statusCardOptions}
+      ></embed-iframe-idle-card>`;
    }

    if (this.isLoading$.value) {
@@ -356,6 +376,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
      })
    );

+    // if the iframe url is not set, refresh the data to get the iframe url
    if (!this.model.props.iframeUrl) {
      this.doc.withoutTransact(() => {
        this.refreshData().catch(console.error);
--- a/blocksuite/affine/widgets/widget-drag-handle/package.json
+++ b/blocksuite/affine/widgets/widget-drag-handle/package.json
@@ -11,6 +11,7 @@
  "license": "MIT",
  "dependencies": {
    "@blocksuite/affine-block-callout": "workspace:*",
+    "@blocksuite/affine-block-embed": "workspace:*",
    "@blocksuite/affine-block-list": "workspace:*",
    "@blocksuite/affine-block-note": "workspace:*",
    "@blocksuite/affine-block-paragraph": "workspace:*",
--- a/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts
+++ b/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts
@@ -1,3 +1,7 @@
+import {
+  EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE,
+  EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE,
+} from '@blocksuite/affine-block-embed';
 import { ParagraphBlockComponent } from '@blocksuite/affine-block-paragraph';
 import { DropIndicator } from '@blocksuite/affine-components/drop-indicator';
 import {
@@ -511,6 +515,7 @@ export class DragEventWatcher {
        this._mergeSnapshotToCurDoc(snapshot, point).catch(console.error);
      } else {
        this._dropAsGfxBlock(snapshot, point);
+        this.widget.selectionHelper.selection.clear(['block']);
      }
    } else {
      this._onPageDrop(dropBlock, dragPayload, dropPayload, point);
@@ -1052,7 +1057,10 @@ export class DragEventWatcher {
          Bound.deserialize(block.props.xywh as SerializedXYWH) ??
          new Bound(0, 0, 0, 0);

-        if (
+        if (block.flavour === 'affine:embed-iframe') {
+          blockBound.w = EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE;
+          blockBound.h = EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE;
+        } else if (
          block.flavour === 'affine:attachment' ||
          block.flavour === 'affine:bookmark' ||
          block.flavour.startsWith('affine:embed-')
@@ -1132,17 +1140,22 @@ export class DragEventWatcher {
        this._dropToModel(surfaceSnapshot, this.gfx.surface!.id)
          .then(slices => {
            slices?.content.forEach((block, idx) => {
-              if (
-                block.id === content[idx].id &&
-                (block.flavour === 'affine:image' ||
+              if (block.id === content[idx].id) {
+                if (block.flavour === 'affine:embed-iframe') {
+                  store.updateBlock(block.id, {
+                    xywh: content[idx].props.xywh,
+                  });
+                } else if (
+                  block.flavour === 'affine:image' ||
                  block.flavour === 'affine:attachment' ||
                  block.flavour === 'affine:bookmark' ||
-                  block.flavour.startsWith('affine:embed-'))
-              ) {
-                store.updateBlock(block.id, {
-                  xywh: content[idx].props.xywh,
-                  style: content[idx].props.style,
-                });
+                  block.flavour.startsWith('affine:embed-')
+                ) {
+                  store.updateBlock(block.id, {
+                    xywh: content[idx].props.xywh,
+                    style: content[idx].props.style,
+                  });
+                }
              }
            });
          })
@@ -1160,7 +1173,11 @@ export class DragEventWatcher {
        this._dropToModel(pageSnapshot, this.widget.doc.root!.id)
          .then(slices => {
            slices?.content.forEach((block, idx) => {
-              if (
+              if (block.flavour === 'affine:embed-iframe') {
+                store.updateBlock(block.id, {
+                  xywh: content[idx].props.xywh,
+                });
+              } else if (
                block.flavour === 'affine:attachment' ||
                block.flavour.startsWith('affine:embed-')
              ) {
--- a/blocksuite/affine/widgets/widget-drag-handle/tsconfig.json
+++ b/blocksuite/affine/widgets/widget-drag-handle/tsconfig.json
@@ -8,6 +8,7 @@
  "include": ["./src"],
  "references": [
    { "path": "../../blocks/block-callout" },
+    { "path": "../../blocks/block-embed" },
    { "path": "../../blocks/block-list" },
    { "path": "../../blocks/block-note" },
    { "path": "../../blocks/block-paragraph" },