feat: add dnd database preview block (#10258)

blocksuite/affine/block-database/src/database-dnd-preview-block.ts

@@ -0,0 +1,58 @@
+import type { DatabaseBlockModel } from '@blocksuite/affine-model';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { BlockComponent } from '@blocksuite/block-std';
+import { DatabaseListViewIcon } from '@blocksuite/icons/lit';
+import { css, html } from 'lit';
+
+export class DatabaseDndPreviewBlockComponent extends BlockComponent<DatabaseBlockModel> {
+  static override styles = css`
+    .affine-database-preview-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 4px;
+      box-sizing: border-box;
+
+      border-radius: 8px;
+      background-color: ${unsafeCSSVarV2(
+        'layer/background/overlayPanel',
+        '#FBFBFC'
+      )};
+    }
+
+    .database-preview-content {
+      padding: 4px 16px;
+      display: flex;
+      gap: 8px;
+    }
+
+    .database-preview-content > svg {
+      color: ${unsafeCSSVarV2('icon/primary', '#77757D')};
+    }
+
+    .database-preview-content > .text {
+      color: var(--affine-text-primary-color);
+      color: ${unsafeCSSVarV2('text/primary', '#121212')};
+      font-size: 14px;
+      line-height: 24px;
+    }
+  `;
+
+  override renderBlock() {
+    return html`<div
+      class="affine-database-preview-container"
+      contenteditable="false"
+    >
+      <div class="database-preview-content">
+        ${DatabaseListViewIcon({ width: '24px', height: '24px' })}
+        <span class="text">Database Block</span>
+      </div>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-dnd-preview-database': DatabaseDndPreviewBlockComponent;
+  }
+}

blocksuite/affine/block-database/src/effects.ts

@@ -1,6 +1,7 @@
 import { CenterPeek } from './components/layout';
 import { DatabaseTitle } from './components/title';
 import { DatabaseBlockComponent } from './database-block';
+import { DatabaseDndPreviewBlockComponent } from './database-dnd-preview-block';
 import { BlockRenderer } from './detail-panel/block-renderer';
 import { NoteRenderer } from './detail-panel/note-renderer';
 import { LinkCell, LinkCellEditing } from './properties/link/cell-renderer';
@@ -35,4 +36,9 @@ export function effects() {
   customElements.define('database-datasource-block-renderer', BlockRenderer);
   customElements.define('affine-database-link-node', LinkNode);
   customElements.define('affine-database', DatabaseBlockComponent);
+
+  customElements.define(
+    'affine-dnd-preview-database',
+    DatabaseDndPreviewBlockComponent
+  );
 }

blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts

@@ -109,6 +109,14 @@ export class PreviewHelper {
     const extensions = [
       DocModeExtension(docModeService),
       EditorSettingExtension(settingSignal),
+      {
+        setup(di) {
+          di.override(
+            BlockViewIdentifier('affine:database'),
+            () => literal`affine-dnd-preview-database`
+          );
+        },
+      } as ExtensionType,
       {
         setup(di) {
           di.override(BlockViewIdentifier('affine:image'), () => {

blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts

@@ -1083,7 +1083,8 @@ export class DragEventWatcher {
       if (
         dndExtApi &&
         this.std.store.workspace.docs.has(sourceDocId) &&
-        this.gfx.surface
+        this.gfx.surface &&
+        snapshot.pageId !== this.std.store.doc.id
       ) {
         const style = 'vertical' as EmbedCardStyle;
         const linkedDocSnapshot = dndExtApi.fromEntity({