feat(core): allow bs snapshot dragging targets (#9093)

fix AF-1924, AF-1848, AF-1928, AF-1931

dnd between affine & editor

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/dff3ceb1-dc82-4222-9b55-13be80b28b2f.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/dff3ceb1-dc82-4222-9b55-13be80b28b2f.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/dff3ceb1-dc82-4222-9b55-13be80b28b2f.mp4">20241210-1217-49.8960381.mp4</video>

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.css.ts

@@ -45,3 +45,8 @@ export const dragHandle = style({
     },
   },
 });
+
+export const dragPreview = style({
+  // see https://atlassian.design/components/pragmatic-drag-and-drop/web-platform-design-constraints/#native-drag-previews
+  maxWidth: '280px',
+});

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx

@@ -174,7 +174,7 @@ export function DetailPageHeader(
     docId: page.id,
   });
 
-  const { dragRef, dragHandleRef, dragging } =
+  const { dragRef, dragging, CustomDragPreview } =
     useDraggable<AffineDNDData>(() => {
       return {
         data: {
@@ -187,7 +187,7 @@ export function DetailPageHeader(
             id: page.id,
           },
         },
-        disableDragPreview: true,
+        dragPreviewPosition: 'pointer-outside',
       };
     }, [page.id]);
 
@@ -203,13 +203,14 @@ export function DetailPageHeader(
   }, [dragging, onDragging]);
 
   return (
-    <div className={styles.root} ref={dragRef} data-dragging={dragging}>
-      <DragHandle
-        ref={dragHandleRef}
-        dragging={dragging}
-        className={styles.dragHandle}
-      />
-      {inner}
-    </div>
+    <>
+      <div className={styles.root} ref={dragRef} data-dragging={dragging}>
+        <DragHandle dragging={dragging} className={styles.dragHandle} />
+        {inner}
+      </div>
+      <CustomDragPreview>
+        <div className={styles.dragPreview}>{inner}</div>
+      </CustomDragPreview>
+    </>
   );
 }

packages/frontend/core/src/desktop/pages/workspace/index.tsx

@@ -135,9 +135,10 @@ const DNDContextProvider = ({ children }: PropsWithChildren) => {
   const dndService = useService(DndService);
   const contextValue = useMemo(() => {
     return {
-      externalDataAdapter: dndService.externalDataAdapter,
+      fromExternalData: dndService.fromExternalData,
+      toExternalData: dndService.toExternalData,
     };
-  }, [dndService.externalDataAdapter]);
+  }, [dndService.fromExternalData, dndService.toExternalData]);
   return (
     <DNDContext.Provider value={contextValue}>{children}</DNDContext.Provider>
   );