feat: dnd image preview && edgeless dnd preview issue (#10177)

### Changed
- Add new image block to render dnd preview
- Fixed the bug that dragging uploaded image does not have width and height
- Fixed the bug that drag image block from page to edgeless does not have width and height
- Better edgeless dnd preview

blocksuite/blocks/src/root-block/edgeless/edgeless-root-preview-block.ts

@@ -19,6 +19,7 @@ import type { GfxViewportElement } from '@blocksuite/block-std/gfx';
 import { assertExists } from '@blocksuite/global/utils';
 import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import type { EdgelessRootBlockWidgetName } from '../types.js';
 import type { EdgelessRootService } from './edgeless-root-service.js';
@@ -229,8 +230,12 @@ export class EdgelessRootPreviewBlockComponent
   }
 
   override renderBlock() {
+    const background = styleMap({
+      background: this.overrideBackground,
+    });
+
     return html`
-      <div class="edgeless-background edgeless-container">
+      <div class="edgeless-background edgeless-container" style=${background}>
         <gfx-viewport
           .enableChildrenSchedule=${!this._disableScheduleUpdate}
           .viewport=${this.service.viewport}
@@ -260,6 +265,9 @@ export class EdgelessRootPreviewBlockComponent
     }
   }
 
+  @state()
+  accessor overrideBackground: string | undefined = undefined;
+
   @state()
   accessor editorViewportSelector = '.affine-edgeless-viewport';
 

blocksuite/blocks/src/root-block/edgeless/index.ts

@@ -1,3 +1,4 @@
 export { FramePreview } from './components/frame/frame-preview.js';
 export * from './edgeless-root-block.js';
+export { EdgelessRootPreviewBlockComponent } from './edgeless-root-preview-block.js';
 export { EdgelessRootService } from './edgeless-root-service.js';