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-21 12:06:35 +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,2 @@
+export { SurfaceRefPlaceHolder } from './placeholder';
+export { SurfaceRefToolbarTitle } from './surface-ref-toolbar-title';
@@ -0,0 +1,122 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import { DeleteIcon } from '@blocksuite/icons/lit';
+import { ShadowlessElement } from '@blocksuite/std';
+import { type GfxModel } from '@blocksuite/std/gfx';
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { SurfaceRefNotFoundBackground } from '../icons';
+import { getReferenceModelTitle, TYPE_ICON_MAP } from '../utils';
+
+export class SurfaceRefPlaceHolder extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    .surface-ref-placeholder {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px;
+    }
+
+    .surface-ref-placeholder.not-found {
+      background: ${unsafeCSSVarV2('layer/background/secondary', '#F5F5F5')};
+    }
+
+    .surface-ref-placeholder-heading {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      align-self: stretch;
+
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      color: ${unsafeCSSVarV2('text/primary', '#141414')};
+    }
+
+    .surface-ref-placeholder-body {
+      position: relative;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      color: ${unsafeCSSVarV2('text/disable', '#7a7a7a')};
+    }
+
+    .surface-ref-not-found-background {
+      position: absolute;
+      right: 12px;
+      bottom: -5px;
+    }
+  `;
+
+  @property({ attribute: false })
+  accessor referenceModel: GfxModel | null = null;
+
+  @property({ attribute: false })
+  accessor refFlavour = '';
+
+  @property({ attribute: false })
+  accessor inEdgeless = false;
+
+  override render() {
+    const { referenceModel, refFlavour, inEdgeless } = this;
+
+    // When surface ref is in page mode and reference exists, don't render placeholder
+    if (referenceModel && !inEdgeless) return nothing;
+
+    const modelNotFound = !referenceModel;
+    const matchedType = TYPE_ICON_MAP[refFlavour] ?? TYPE_ICON_MAP['edgeless'];
+
+    const title =
+      (referenceModel && getReferenceModelTitle(referenceModel)) ??
+      matchedType.name;
+
+    return html`
+      <div
+        class=${classMap({
+          'surface-ref-placeholder': true,
+          'not-found': modelNotFound,
+        })}
+      >
+        ${modelNotFound
+          ? html`<div class="surface-ref-not-found-background">
+              ${SurfaceRefNotFoundBackground}
+            </div>`
+          : nothing}
+        <div class="surface-ref-placeholder-heading">
+          ${modelNotFound ? DeleteIcon() : matchedType.icon}
+          <span class="surface-ref-title">
+            ${modelNotFound
+              ? `This ${matchedType.name} not available`
+              : `${title}`}
+          </span>
+        </div>
+        <div class="surface-ref-placeholder-body">
+          <span class="surface-ref-text">
+            ${modelNotFound
+              ? `The ${matchedType.name.toLowerCase()} is deleted or not in this doc.`
+              : `The ${matchedType.name.toLowerCase()} is inserted but cannot display in edgeless mode. Switch to page mode to view the block.`}
+          </span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'surface-ref-placeholder': SurfaceRefPlaceHolder;
+  }
+}
@@ -0,0 +1,76 @@
+import {
+  FrameBlockModel,
+  GroupElementModel,
+  MindmapElementModel,
+  ShapeElementModel,
+} from '@blocksuite/affine-model';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import {
+  EdgelessIcon,
+  FrameIcon,
+  GroupIcon,
+  MindmapIcon,
+} from '@blocksuite/icons/lit';
+import { ShadowlessElement } from '@blocksuite/std';
+import type { GfxModel } from '@blocksuite/std/gfx';
+import { css, html, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class SurfaceRefToolbarTitle extends ShadowlessElement {
+  static override styles = css`
+    surface-ref-toolbar-title {
+      display: flex;
+      padding: 2px 4px;
+      margin-right: auto;
+      align-items: center;
+      gap: 4px;
+      border-radius: 4px;
+      color: ${unsafeCSSVarV2('text/primary')};
+      box-shadow: ${unsafeCSSVar('buttonShadow')};
+      background: ${unsafeCSSVar('white')};
+
+      svg {
+        color: ${unsafeCSSVarV2('icon/primary')};
+        width: 16px;
+        height: 16px;
+      }
+
+      span {
+        color: ${unsafeCSSVarV2('text/primary')};
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 20px;
+      }
+    }
+  `;
+
+  @property({ attribute: false })
+  accessor referenceModel: GfxModel | null = null;
+
+  override render() {
+    const { referenceModel } = this;
+    let title = '';
+    let icon: TemplateResult = EdgelessIcon();
+    if (referenceModel instanceof GroupElementModel) {
+      title = referenceModel.title.toString();
+      icon = GroupIcon();
+    } else if (referenceModel instanceof FrameBlockModel) {
+      title = referenceModel.props.title.toString();
+      icon = FrameIcon();
+    } else if (referenceModel instanceof MindmapElementModel) {
+      const rootElement = referenceModel.tree.element;
+      if (rootElement instanceof ShapeElementModel) {
+        title = rootElement.text?.toString() ?? '';
+      }
+      icon = MindmapIcon();
+    }
+
+    return html`${icon}<span>${title}</span>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'surface-ref-toolbar-title': SurfaceRefToolbarTitle;
+  }
+}