diff --git a/blocksuite/affine/model/src/blocks/surface-ref/surface-ref-model.ts b/blocksuite/affine/model/src/blocks/surface-ref/surface-ref-model.ts
index e604645bd..7ffd2e57b 100644
--- a/blocksuite/affine/model/src/blocks/surface-ref/surface-ref-model.ts
+++ b/blocksuite/affine/model/src/blocks/surface-ref/surface-ref-model.ts
@@ -12,11 +12,11 @@ export type SurfaceRefProps = {
 
 export const SurfaceRefBlockSchema = defineBlockSchema({
   flavour: 'affine:surface-ref',
-  props: () =>
-    ({
-      reference: '',
-      caption: '',
-    }) as SurfaceRefProps,
+  props: () => ({
+    reference: '',
+    caption: '',
+    refFlavour: '',
+  }),
   metadata: {
     version: 1,
     role: 'content',
diff --git a/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts b/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts
index c211e92af..27e9ebf7d 100644
--- a/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts
+++ b/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts
@@ -57,6 +57,7 @@ import {
   type GfxModel,
   GfxPrimitiveElementModel,
   isGfxGroupCompatibleModel,
+  isPrimitiveModel,
   SURFACE_YMAP_UNIQ_IDENTIFIER,
   SurfaceBlockModel,
 } from '@blocksuite/std/gfx';
@@ -567,6 +568,7 @@ export class DragEventWatcher {
               let largestElem!: {
                 size: number;
                 id: string;
+                flavour: string;
               };
 
               idRemap.forEach(val => {
@@ -574,9 +576,13 @@ export class DragEventWatcher {
 
                 if (gfxElement?.elementBound) {
                   const elemBound = gfxElement.elementBound;
+                  const flavour = isPrimitiveModel(gfxElement)
+                    ? gfxElement.type
+                    : gfxElement.flavour;
+
                   largestElem =
                     (largestElem?.size ?? 0) < elemBound.w * elemBound.h
-                      ? { size: elemBound.w * elemBound.h, id: val }
+                      ? { size: elemBound.w * elemBound.h, id: val, flavour }
                       : largestElem;
                 }
               });
@@ -595,6 +601,7 @@ export class DragEventWatcher {
                   'affine:surface-ref',
                   {
                     reference: largestElem.id,
+                    refFlavour: largestElem.flavour,
                   },
                   parent.id,
                   index
@@ -608,6 +615,7 @@ export class DragEventWatcher {
           let largestElem!: {
             size: number;
             id: string;
+            flavour: string;
           };
 
           const walk = (block: BlockSnapshot) => {
@@ -615,14 +623,14 @@ export class DragEventWatcher {
               Object.values(
                 block.props.elements as Record<
                   string,
-                  { id: string; xywh: SerializedXYWH }
+                  { id: string; xywh: SerializedXYWH; type: string }
                 >
               ).forEach(elem => {
                 if (elem.xywh) {
                   const bound = Bound.deserialize(elem.xywh);
                   const size = bound.w * bound.h;
                   if ((largestElem?.size ?? 0) < size) {
-                    largestElem = { size, id: elem.id };
+                    largestElem = { size, id: elem.id, flavour: elem.type };
                   }
                 }
               });
@@ -634,7 +642,7 @@ export class DragEventWatcher {
                 );
                 const size = bound.w * bound.h;
                 if ((largestElem?.size ?? 0) < size) {
-                  largestElem = { size, id: block.id };
+                  largestElem = { size, id: block.id, flavour: block.flavour };
                 }
               }
             }
@@ -647,6 +655,7 @@ export class DragEventWatcher {
               'affine:surface-ref',
               {
                 reference: largestElem.id,
+                refFlavour: largestElem.flavour,
               },
               parent.id,
               index
diff --git a/blocksuite/integration-test/src/__tests__/edgeless/surface-ref.spec.ts b/blocksuite/integration-test/src/__tests__/edgeless/surface-ref.spec.ts
index a75f72e13..412f8425c 100644
--- a/blocksuite/integration-test/src/__tests__/edgeless/surface-ref.spec.ts
+++ b/blocksuite/integration-test/src/__tests__/edgeless/surface-ref.spec.ts
@@ -57,6 +57,7 @@ describe('basic', () => {
       'affine:surface-ref',
       {
         reference: frameId,
+        refFlavour: 'affine:frame',
       },
       noteAId
     );
@@ -76,6 +77,7 @@ describe('basic', () => {
       'affine:surface-ref',
       {
         reference: frameId,
+        refFlavour: 'affine:frame',
       },
       noteAId
     );
@@ -113,6 +115,7 @@ describe('basic', () => {
       'affine:surface-ref',
       {
         reference: groupId,
+        refFlavour: 'group',
       },
       noteAId
     );
@@ -142,6 +145,7 @@ describe('basic', () => {
       'affine:surface-ref',
       {
         reference: frameId,
+        refFlavour: 'affine:frame',
       },
       noteAId
     );
@@ -177,6 +181,7 @@ describe('basic', () => {
       'affine:surface-ref',
       {
         reference: groupId,
+        refFlavour: 'group',
       },
       noteAId
     );
@@ -200,6 +205,7 @@ describe('basic', () => {
       'affine:surface-ref',
       {
         reference: frameId,
+        refFlavour: 'affine:frame',
       },
       noteAId
     );
@@ -238,6 +244,7 @@ describe('basic', () => {
       'affine:surface-ref',
       {
         reference: groupId,
+        refFlavour: 'group',
       },
       noteAId
     );