refactor(editor): unify directories naming (#11516)

**Directory Structure Changes** - Renamed multiple block-related directories by removing the "block-" prefix: - `block-attachment` → `attachment` - `block-bookmark` → `bookmark` - `block-callout` → `callout` - `block-code` → `code` - `block-data-view` → `data-view` - `block-database` → `database` - `block-divider` → `divider` - `block-edgeless-text` → `edgeless-text` - `block-embed` → `embed`
2026-07-19 11:06:25 +08:00 · 2025-04-07 12:34:40 +00:00
parent e1bd2047c4
commit 1f45cc5dec
893 changed files with 439 additions and 460 deletions
@@ -0,0 +1,197 @@
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { EmbedIcon } from '@blocksuite/icons/lit';
+import { type BlockStdScope } from '@blocksuite/std';
+import { css, html, LitElement } 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 { getEmbedCardIcons } from '../../common/utils';
+import { LOADING_CARD_DEFAULT_HEIGHT } from '../consts';
+import type { EmbedIframeStatusCardOptions } from '../types';
+
+export class EmbedIframeLoadingCard extends LitElement {
+  static override styles = css`
+    :host {
+      width: 100%;
+      height: 100%;
+    }
+
+    .affine-embed-iframe-loading-card {
+      container: affine-embed-iframe-loading-card / size;
+      display: flex;
+      box-sizing: border-box;
+      border-radius: 8px;
+      user-select: none;
+      padding: 12px;
+      gap: 12px;
+      overflow: hidden;
+      border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+      background: ${unsafeCSSVarV2('layer/white')};
+
+      .loading-content {
+        display: flex;
+        gap: 8px;
+        align-self: stretch;
+
+        .loading-spinner {
+          display: flex;
+          width: 24px;
+          height: 24px;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .loading-text {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          overflow: hidden;
+          color: ${unsafeCSSVarV2('text/primary')};
+          text-overflow: ellipsis;
+          /* Client/smMedium */
+          font-family: Inter;
+          font-size: var(--affine-font-sm);
+          font-style: normal;
+          font-weight: 500;
+          line-height: 22px; /* 157.143% */
+        }
+      }
+
+      .loading-banner {
+        display: flex;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+
+        .icon-box {
+          display: flex;
+          transform: rotate(8deg);
+          justify-content: center;
+          align-items: center;
+          flex-shrink: 0;
+          border-radius: 4px 4px 0px 0px;
+          background: ${unsafeCSSVarV2('slashMenu/background')};
+          box-shadow: 0px 0px 5px 0px rgba(66, 65, 73, 0.17);
+
+          svg {
+            fill: black;
+            fill-opacity: 0.07;
+          }
+        }
+      }
+
+      @container affine-embed-iframe-loading-card (width < 360px) {
+        .loading-banner {
+          display: none;
+        }
+      }
+    }
+
+    .affine-embed-iframe-loading-card.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+
+      .loading-content {
+        flex: 1 0 0;
+        align-items: flex-start;
+
+        .loading-text {
+          flex: 1 0 0;
+        }
+      }
+
+      .loading-banner {
+        width: 204px;
+        padding: 3.139px 42.14px 0px 42.14px;
+
+        .icon-box {
+          width: 106px;
+          height: 106px;
+
+          svg {
+            width: 66px;
+            height: 66px;
+          }
+        }
+      }
+    }
+
+    .affine-embed-iframe-loading-card.vertical {
+      flex-direction: column-reverse;
+      align-items: center;
+      justify-content: center;
+
+      .loading-content {
+        justify-content: center;
+        font-size: 14px;
+        transform: translateX(-2%);
+      }
+
+      .loading-banner {
+        width: 340px;
+        padding: 5.23px 70.234px 0px 70.232px;
+        overflow-y: hidden;
+
+        .icon-box {
+          width: 176px;
+          height: 176px;
+          transform: rotate(8deg) translateY(15%);
+
+          svg {
+            width: 112px;
+            height: 112px;
+          }
+        }
+      }
+
+      @container affine-embed-iframe-loading-card (height < 240px) {
+        .loading-banner {
+          display: none;
+        }
+      }
+    }
+  `;
+
+  override render() {
+    const theme = this.std.get(ThemeProvider).theme;
+    const { LoadingIcon } = getEmbedCardIcons(theme);
+
+    const { layout, width, height } = this.options;
+    const cardClasses = classMap({
+      'affine-embed-iframe-loading-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=${cardClasses} style=${cardStyle}>
+        <div class="loading-content">
+          <div class="loading-spinner">${LoadingIcon}</div>
+          <div class="loading-text">Loading...</div>
+        </div>
+        <div class="loading-banner">
+          <div class="icon-box">${EmbedIcon()}</div>
+        </div>
+      </div>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor std!: BlockStdScope;
+
+  @property({ attribute: false })
+  accessor options: EmbedIframeStatusCardOptions = {
+    layout: 'horizontal',
+    height: LOADING_CARD_DEFAULT_HEIGHT,
+  };
+}