fix(core): some dnd perf issues (#9661)

1. page list item are bound two draggables. adding `draggable` prop to WorkbenchLink to mitigate the issue.
2. DndService may not resolve datatransfer when dragging.

packages/frontend/component/src/ui/dnd/draggable.ts

@@ -87,10 +87,16 @@ export const useDraggable = <D extends DNDData = DNDData>(
   }, [...deps, context.toExternalData]);
 
   useEffect(() => {
-    if (!dragRef.current) {
+    if (
+      !dragRef.current ||
+      (typeof options.canDrag === 'boolean' && !options.canDrag)
+    ) {
       return;
     }
 
+    const element = dragRef.current;
+    const dragHandle = dragHandleRef.current;
+
     const windowEvent = {
       dragleave: () => {
         setDraggingPosition(state =>
@@ -104,11 +110,11 @@ export const useDraggable = <D extends DNDData = DNDData>(
       },
     };
 
-    dragRef.current.dataset.affineDraggable = 'true';
+    element.dataset.affineDraggable = 'true';
 
     const cleanupDraggable = draggable({
-      element: dragRef.current,
-      dragHandle: dragHandleRef.current ?? undefined,
+      element,
+      dragHandle: dragHandle ?? undefined,
       canDrag: draggableGet(options.canDrag),
       getInitialData: draggableGet(options.data),
       getInitialDataForExternal: draggableGet(options.toExternalData),
@@ -130,8 +136,8 @@ export const useDraggable = <D extends DNDData = DNDData>(
         if (enableDropTarget.current) {
           setDropTarget([]);
         }
-        if (dragRef.current) {
-          dragRef.current.dataset['dragging'] = 'true';
+        if (element) {
+          element.dataset['dragging'] = 'true';
         }
         options.onDragStart?.(args);
       },
@@ -153,8 +159,8 @@ export const useDraggable = <D extends DNDData = DNDData>(
         if (enableDropTarget.current) {
           setDropTarget([]);
         }
-        if (dragRef.current) {
-          delete dragRef.current.dataset['dragging'];
+        if (element) {
+          delete element.dataset['dragging'];
         }
         options.onDrop?.(args);
       },

packages/frontend/component/src/ui/dnd/drop-target.ts

@@ -1,3 +1,4 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
 import type {
@@ -17,7 +18,14 @@ import {
   type Instruction,
   type ItemMode,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { shallowUpdater } from '../../utils';
 import { getAdaptedEventArgs, isExternalDrag } from './common';
@@ -201,9 +209,16 @@ export const useDropTarget = <D extends DNDData = DNDData>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...deps, dropTargetContext.fromExternalData]);
 
-  const dropTargetOptions = useMemo(() => {
+  const getDropTargetOptions = useCallback(() => {
     const wrappedCanDrop = dropTargetGet(options.canDrop, options);
-    let _element: HTMLElement | null = null;
+    let element: HTMLElement | null = dropTargetRef.current;
+
+    if (
+      !element ||
+      (typeof options.canDrop === 'boolean' && !options.canDrop)
+    ) {
+      return null;
+    }
 
     const updateDragOver = (
       args: DropTargetDragEvent<D>,
@@ -254,12 +269,7 @@ export const useDropTarget = <D extends DNDData = DNDData>(
     };
 
     return {
-      get element() {
-        if (!_element) {
-          _element = dropTargetRef.current;
-        }
-        return _element;
-      },
+      element,
       canDrop: wrappedCanDrop
         ? (args: DropTargetGetFeedback<D>) => {
             // check if args has data. if not, it's an external drag
@@ -290,8 +300,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
         }
         if (options.treeInstruction) {
           setTreeInstruction(null);
-          if (dropTargetRef.current) {
-            delete dropTargetRef.current.dataset['treeInstruction'];
+          if (element) {
+            delete element.dataset['treeInstruction'];
           }
         }
         if (options.closestEdge) {
@@ -300,8 +310,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
         if (enableDropEffect.current) {
           setDropEffect(null);
         }
-        if (dropTargetRef.current) {
-          delete dropTargetRef.current.dataset['draggedOver'];
+        if (element) {
+          delete element.dataset['draggedOver'];
         }
 
         // external data is only available in drop event thus
@@ -318,10 +328,7 @@ export const useDropTarget = <D extends DNDData = DNDData>(
           return;
         }
 
-        if (
-          args.location.current.dropTargets[0]?.element ===
-          dropTargetRef.current
-        ) {
+        if (args.location.current.dropTargets[0]?.element === element) {
           options.onDrop?.({
             ...args,
             treeInstruction: extractInstruction(args.self.data),
@@ -376,19 +383,15 @@ export const useDropTarget = <D extends DNDData = DNDData>(
       },
       onDropTargetChange: (args: DropTargetDropEvent<D>) => {
         args = getAdaptedEventArgs(args, options.fromExternalData);
-        if (
-          args.location.current.dropTargets[0]?.element ===
-          dropTargetRef.current
-        ) {
+        if (args.location.current.dropTargets[0]?.element === element) {
           if (enableDraggedOver.current) {
             setDraggedOver(true);
           }
           if (options.treeInstruction) {
             const instruction = extractInstruction(args.self.data);
             setTreeInstruction(instruction);
-            if (dropTargetRef.current) {
-              dropTargetRef.current.dataset['treeInstruction'] =
-                instruction?.type;
+            if (element) {
+              element.dataset['treeInstruction'] = instruction?.type;
             }
           }
           if (options.closestEdge) {
@@ -410,8 +413,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
               clientY: args.location.current.input.clientY,
             });
           }
-          if (dropTargetRef.current) {
-            dropTargetRef.current.dataset['draggedOver'] = 'true';
+          if (element) {
+            element.dataset['draggedOver'] = 'true';
           }
         } else {
           if (enableDraggedOver.current) {
@@ -422,8 +425,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
           }
           if (options.treeInstruction) {
             setTreeInstruction(null);
-            if (dropTargetRef.current) {
-              delete dropTargetRef.current.dataset['treeInstruction'];
+            if (element) {
+              delete element.dataset['treeInstruction'];
             }
           }
           if (enableDropEffect.current) {
@@ -440,8 +443,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
           if (options.closestEdge) {
             setClosestEdge(null);
           }
-          if (dropTargetRef.current) {
-            delete dropTargetRef.current.dataset['draggedOver'];
+          if (element) {
+            delete element.dataset['draggedOver'];
           }
         }
       },
@@ -449,18 +452,26 @@ export const useDropTarget = <D extends DNDData = DNDData>(
   }, [options]);
 
   useEffect(() => {
-    if (!dropTargetRef.current) {
+    const dropTargetOptions = getDropTargetOptions();
+    if (!dropTargetOptions) {
       return;
     }
-    return dropTargetForElements(dropTargetOptions as any);
-  }, [dropTargetOptions]);
 
-  useEffect(() => {
-    if (!dropTargetRef.current || !options.fromExternalData) {
-      return;
+    // @ts-expect-error: fix type error
+    const cleanup = [dropTargetForElements(dropTargetOptions)];
+
+    if (options.allowExternal && options.fromExternalData) {
+      // @ts-expect-error: fix type error
+      cleanup.push(dropTargetForExternal(dropTargetOptions));
     }
-    return dropTargetForExternal(dropTargetOptions as any);
-  }, [dropTargetOptions, options.fromExternalData]);
+
+    return combine(...cleanup);
+  }, [
+    getDropTargetOptions,
+    options.canDrop,
+    options.allowExternal,
+    options.fromExternalData,
+  ]);
 
   return {
     dropTargetRef,