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
+  );
 }