feat(core): dnd support external types (#9033)

fix AF-1847

two issues:
1. original `dropTargetForExternal` only works if dragging target is from another window context. patched the library to bypass this issue
2. `dataTransfer`'s content is only available on `drop` event. This means we cannot have `canDrop` checks for external elements (like blocksuite links).

packages/frontend/component/package.json

@@ -22,7 +22,7 @@
     "@affine/electron-api": "workspace:*",
     "@affine/graphql": "workspace:*",
     "@affine/i18n": "workspace:*",
-    "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
+    "@atlaskit/pragmatic-drag-and-drop": "patch:@atlaskit/pragmatic-drag-and-drop@npm%3A1.4.0#~/.yarn/patches/@atlaskit-pragmatic-drag-and-drop-npm-1.4.0-75c45f52d3.patch",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@blocksuite/icons": "2.1.75",
     "@emotion/react": "^11.11.4",

packages/frontend/component/src/ui/dnd/dnd.stories.tsx

@@ -86,12 +86,17 @@ export const DropTarget: StoryFn<{ canDrop: boolean }> = ({ canDrop }) => {
     }),
     []
   );
-  const { dropTargetRef } = useDropTarget(
+  const { dropTargetRef } = useDropTarget<DNDData<{ text: string }>>(
     () => ({
       canDrop,
       onDrop(data) {
         setDropData(prev => prev + data.source.data.text);
       },
+      externalDataAdapter(args) {
+        return {
+          text: args.source.getStringData(args.source.types[0]) || 'no value',
+        };
+      },
     }),
     [canDrop]
   );
@@ -115,6 +120,8 @@ export const DropTarget: StoryFn<{ canDrop: boolean }> = ({ canDrop }) => {
         }`}
       </style>
       <div ref={dragRef}>👉 hello</div>
+      <a href="https://www.google.com">https://www.google.com</a>
+      <p>Some random texts</p>
       <div className="drop-target" ref={dropTargetRef}>
         {dropData || 'Drop here'}
       </div>

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

@@ -103,6 +103,8 @@ export const useDraggable = <D extends DNDData = DNDData>(
       },
     };
 
+    dragRef.current.dataset.affineDraggable = 'true';
+
     const cleanupDraggable = draggable({
       element: dragRef.current,
       dragHandle: dragHandleRef.current ?? undefined,

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

@@ -1,4 +1,11 @@
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
+import type {
+  DragLocationHistory,
+  DropTargetRecord,
+  ElementDragType,
+  ExternalDragType,
+} from '@atlaskit/pragmatic-drag-and-drop/types';
 import {
   attachClosestEdge,
   type Edge,
@@ -14,6 +21,28 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { DNDData } from './types';
 
+export type DropTargetDropEvent<D extends DNDData> = {
+  treeInstruction: Instruction | null;
+  closestEdge: Edge | null;
+  /**
+   * Location history for the drag operation
+   */
+  location: DragLocationHistory;
+  /**
+   * Data associated with the entity that is being dragged
+   */
+  source: Exclude<ElementDragType['payload'], 'data'> & {
+    data: D['draggable'];
+  };
+  self: DropTargetRecord;
+};
+
+export type DropTargetDragEvent<D extends DNDData> = DropTargetDropEvent<D>;
+
+export type DropTargetTreeInstruction = Instruction;
+
+export type ExternalDragPayload = ExternalDragType['payload'];
+
 type DropTargetGetFeedback<D extends DNDData> = Parameters<
   NonNullable<Parameters<typeof dropTargetForElements>[0]['canDrop']>
 >[0] & {
@@ -29,6 +58,36 @@ type DropTargetGet<T, D extends DNDData> =
   | T
   | ((data: DropTargetGetFeedback<D>) => T);
 
+export type ExternalGetDataFeedbackArgs = Parameters<
+  NonNullable<Parameters<typeof dropTargetForExternal>[0]['getData']>
+>[0];
+
+export type ExternalDataAdapter<D extends DNDData> = (
+  args: ExternalGetDataFeedbackArgs
+) => D['draggable'];
+
+const getAdaptedEventArgs = <
+  D extends DNDData,
+  Args extends Pick<DropTargetGetFeedback<D>, 'source'>,
+>(
+  options: DropTargetOptions<D>,
+  args: Args
+): Args => {
+  const data =
+    !args.source['data'] && options.externalDataAdapter
+      ? // @ts-expect-error hack for external data adapter (source has no data field)
+        options.externalDataAdapter(args as ExternalGetDataFeedbackArgs)
+      : args.source['data'];
+
+  return {
+    ...args,
+    source: {
+      ...args.source,
+      data,
+    },
+  };
+};
+
 function dropTargetGet<T, D extends DNDData>(
   get: T,
   options: DropTargetOptions<D>
@@ -42,12 +101,13 @@ function dropTargetGet<T, D extends DNDData>(
   if (get === undefined) {
     return undefined as any;
   }
+
   return ((
     args: Omit<DropTargetGetFeedback<D>, 'treeInstruction' | 'closestEdge'>
   ) => {
     if (typeof get === 'function') {
       return (get as any)({
-        ...args,
+        ...getAdaptedEventArgs(options, args),
         get treeInstruction() {
           return options.treeInstruction
             ? extractInstruction(
@@ -81,25 +141,14 @@ function dropTargetGet<T, D extends DNDData>(
         },
       });
     } else {
-      return get;
+      return {
+        ...get,
+        ...getAdaptedEventArgs(options, args),
+      };
     }
   }) as any;
 }
 
-export type DropTargetDropEvent<D extends DNDData> = Parameters<
-  NonNullable<Parameters<typeof dropTargetForElements>[0]['onDrop']>
->[0] & { treeInstruction: Instruction | null; closestEdge: Edge | null } & {
-  source: { data: D['draggable'] };
-};
-
-export type DropTargetDragEvent<D extends DNDData> = Parameters<
-  NonNullable<Parameters<typeof dropTargetForElements>[0]['onDrag']>
->[0] & { treeInstruction: Instruction | null; closestEdge: Edge | null } & {
-  source: { data: D['draggable'] };
-};
-
-export type DropTargetTreeInstruction = Instruction;
-
 export interface DropTargetOptions<D extends DNDData = DNDData> {
   data?: DropTargetGet<D['dropTarget'], D>;
   canDrop?: DropTargetGet<boolean, D>;
@@ -116,6 +165,13 @@ export interface DropTargetOptions<D extends DNDData = DNDData> {
   };
   onDrop?: (data: DropTargetDropEvent<D>) => void;
   onDrag?: (data: DropTargetDragEvent<D>) => void;
+  /**
+   * external data adapter.
+   * if this is provided, the drop target will handle external elements as well.
+   *
+   * @default undefined
+   */
+  externalDataAdapter?: ExternalDataAdapter<D>;
 }
 
 export const useDropTarget = <D extends DNDData = DNDData>(
@@ -131,9 +187,9 @@ export const useDropTarget = <D extends DNDData = DNDData>(
   const [dropEffect, setDropEffect] = useState<'copy' | 'link' | 'move' | null>(
     null
   );
-  const [draggedOverDraggable, setDraggedOverDraggable] = useState<{
-    data: D['draggable'];
-  } | null>(null);
+  const [draggedOverDraggable, setDraggedOverDraggable] = useState<
+    DropTargetDropEvent<D>['source'] | null
+  >(null);
   const [draggedOverPosition, setDraggedOverPosition] = useState<{
     /**
      * relative position to the drop target element top-left corner
@@ -152,16 +208,16 @@ export const useDropTarget = <D extends DNDData = DNDData>(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const options = useMemo(getOptions, deps);
 
-  useEffect(() => {
-    if (!dropTargetRef.current) {
-      return;
-    }
-    return dropTargetForElements({
-      element: dropTargetRef.current,
+  const dropTargetOptions = useMemo(() => {
+    return {
+      get element() {
+        return dropTargetRef.current;
+      },
       canDrop: dropTargetGet(options.canDrop, options),
       getDropEffect: dropTargetGet(options.dropEffect, options),
       getIsSticky: dropTargetGet(options.isSticky, options),
-      onDrop: args => {
+      onDrop: (args: DropTargetDropEvent<D>) => {
+        args = getAdaptedEventArgs(options, args);
         if (enableDraggedOver.current) {
           setDraggedOver(false);
         }
@@ -202,7 +258,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
           } as DropTargetDropEvent<D>);
         }
       },
-      getData: args => {
+      getData: (args: DropTargetGetFeedback<D>) => {
+        args = getAdaptedEventArgs(options, args);
         const originData = dropTargetGet(options.data ?? {}, options)(args);
         const { input, element } = args;
         const withInstruction = options.treeInstruction
@@ -224,13 +281,14 @@ export const useDropTarget = <D extends DNDData = DNDData>(
           : withInstruction;
         return withClosestEdge;
       },
-      onDrag: args => {
+      onDrag: (args: DropTargetDragEvent<D>) => {
+        args = getAdaptedEventArgs(options, args);
         if (
           args.location.current.dropTargets[0]?.element ===
           dropTargetRef.current
         ) {
           if (enableDraggedOverDraggable.current) {
-            setDraggedOverDraggable({ data: args.source.data });
+            setDraggedOverDraggable(args.source);
           }
           let instruction = null;
           let closestEdge = null;
@@ -266,7 +324,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
           } as DropTargetDropEvent<D>);
         }
       },
-      onDropTargetChange: args => {
+      onDropTargetChange: (args: DropTargetDropEvent<D>) => {
+        args = getAdaptedEventArgs(options, args);
         if (
           args.location.current.dropTargets[0]?.element ===
           dropTargetRef.current
@@ -290,7 +349,7 @@ export const useDropTarget = <D extends DNDData = DNDData>(
             setDropEffect(args.self.dropEffect);
           }
           if (enableDraggedOverDraggable.current) {
-            setDraggedOverDraggable({ data: args.source.data });
+            setDraggedOverDraggable(args.source);
           }
           if (enableDraggedOverPosition.current) {
             const rect = args.self.element.getBoundingClientRect();
@@ -336,9 +395,23 @@ export const useDropTarget = <D extends DNDData = DNDData>(
           }
         }
       },
-    });
+    };
   }, [options]);
 
+  useEffect(() => {
+    if (!dropTargetRef.current) {
+      return;
+    }
+    return dropTargetForElements(dropTargetOptions as any);
+  }, [dropTargetOptions]);
+
+  useEffect(() => {
+    if (!dropTargetRef.current || !options.externalDataAdapter) {
+      return;
+    }
+    return dropTargetForExternal(dropTargetOptions as any);
+  }, [dropTargetOptions, options.externalDataAdapter]);
+
   return {
     dropTargetRef,
     get draggedOver() {

packages/frontend/core/src/modules/dnd/index.ts

@@ -0,0 +1,14 @@
+import {
+  DocsService,
+  type Framework,
+  WorkspaceScope,
+  WorkspaceService,
+} from '@toeverything/infra';
+
+import { DndService } from './services';
+
+export function configureDndModule(framework: Framework) {
+  framework
+    .scope(WorkspaceScope)
+    .service(DndService, [DocsService, WorkspaceService]);
+}

packages/frontend/core/src/modules/dnd/services/index.ts

@@ -0,0 +1,89 @@
+import type { ExternalGetDataFeedbackArgs } from '@affine/component';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import type { DocsService, WorkspaceService } from '@toeverything/infra';
+import { Service } from '@toeverything/infra';
+
+import { resolveLinkToDoc } from '../../navigation';
+
+type EntityResolver = (
+  data: string
+) => AffineDNDData['draggable']['entity'] | null;
+
+export class DndService extends Service {
+  constructor(
+    private readonly docsService: DocsService,
+    private readonly workspaceService: WorkspaceService
+  ) {
+    super();
+
+    // order matters
+    this.resolvers.set('text/html', this.resolveHTML);
+    this.resolvers.set('text/uri-list', this.resolveUriList);
+  }
+
+  private readonly resolvers = new Map<string, EntityResolver>();
+
+  externalDataAdapter = (args: ExternalGetDataFeedbackArgs) => {
+    const from: AffineDNDData['draggable']['from'] = {
+      at: 'external',
+    };
+    let entity: AffineDNDData['draggable']['entity'];
+
+    // in the order of the resolvers instead of the order of the types
+    for (const [type, resolver] of this.resolvers) {
+      if (args.source.types.includes(type)) {
+        const stringData = args.source.getStringData(type);
+        if (stringData) {
+          const candidate = resolver(stringData);
+          if (candidate) {
+            entity = candidate;
+            break;
+          }
+        }
+      }
+    }
+
+    return {
+      from,
+      entity,
+    };
+  };
+
+  private readonly resolveUriList: EntityResolver = urls => {
+    // only deal with the first url
+    const url = urls
+      ?.split('\n')
+      .filter(u => u.trim() && !u.trim().startsWith('#'))[0];
+
+    if (url) {
+      const maybeDocLink = resolveLinkToDoc(url);
+
+      // check if the doc is in the current workspace
+      if (
+        maybeDocLink?.workspaceId === this.workspaceService.workspace.id &&
+        this.docsService.list.doc$(maybeDocLink.docId).value &&
+        // skip for block references for now
+        !maybeDocLink.blockIds?.length
+      ) {
+        return {
+          type: 'doc',
+          id: maybeDocLink.docId,
+        };
+      }
+    }
+    return null;
+  };
+
+  // todo: implement this
+  private readonly resolveHTML: EntityResolver = _html => {
+    try {
+      // const parser = new DOMParser();
+      // const doc = parser.parseFromString(html, 'text/html');
+      // return doc.body.innerText;
+    } catch {
+      // ignore the error
+      return null;
+    }
+    return null;
+  };
+}

packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx

@@ -189,9 +189,10 @@ export const ExplorerCollectionNode = ({
   const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
     () => args => {
       const entityType = args.source.data.entity?.type;
+      const isExternalDrop = args.source.data.from?.at === 'external';
       return args.treeInstruction?.type !== 'make-child'
         ? ((typeof canDrop === 'function' ? canDrop(args) : canDrop) ?? true)
-        : entityType === 'doc';
+        : entityType === 'doc' || isExternalDrop;
     },
     [canDrop]
   );

packages/frontend/core/src/modules/explorer/views/nodes/doc/index.tsx

@@ -180,9 +180,10 @@ export const ExplorerDocNode = ({
   const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
     () => args => {
       const entityType = args.source.data.entity?.type;
+      const isExternalDrop = args.source.data.from?.at === 'external';
       return args.treeInstruction?.type !== 'make-child'
         ? ((typeof canDrop === 'function' ? canDrop(args) : canDrop) ?? true)
-        : entityType === 'doc';
+        : entityType === 'doc' || isExternalDrop;
     },
     [canDrop]
   );

packages/frontend/core/src/modules/explorer/views/sections/favorites/dnd.ts

@@ -16,8 +16,10 @@ export const favoriteChildrenDropEffect: ExplorerTreeNodeDropEffect = data => {
     ) {
       return 'move';
     } else if (
-      data.source.data.entity?.type &&
-      isFavoriteSupportType(data.source.data.entity.type)
+      (data.source.data.entity?.type &&
+        isFavoriteSupportType(data.source.data.entity.type)) ||
+      // always allow external drop
+      data.source.data.from?.at === 'external'
     ) {
       return 'link';
     }
@@ -37,7 +39,7 @@ export const favoriteRootCanDrop: DropTargetOptions<AffineDNDData>['canDrop'] =
   data => {
     return data.source.data.entity?.type
       ? isFavoriteSupportType(data.source.data.entity.type)
-      : false;
+      : data.source.data.from?.at === 'external'; // always allow external drop
   };
 
 export const favoriteChildrenCanDrop: DropTargetOptions<AffineDNDData>['canDrop'] =

packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.tsx

@@ -3,9 +3,11 @@ import {
   Skeleton,
   useDropTarget,
 } from '@affine/component';
+import { DndService } from '@affine/core/modules/dnd/services';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
 import { FavoriteIcon } from '@blocksuite/icons/rc';
+import { useService } from '@toeverything/infra';
 
 import { ExplorerEmptySection } from '../../layouts/empty-section';
 import { DropEffect } from '../../tree';
@@ -21,6 +23,7 @@ const RootEmptyLoading = () => {
 };
 const RootEmptyReady = ({ onDrop }: Omit<RootEmptyProps, 'isLoading'>) => {
   const t = useI18n();
+  const dndService = useService(DndService);
 
   const { dropTargetRef, draggedOverDraggable, draggedOverPosition } =
     useDropTarget<AffineDNDData>(
@@ -30,8 +33,9 @@ const RootEmptyReady = ({ onDrop }: Omit<RootEmptyProps, 'isLoading'>) => {
         },
         onDrop: onDrop,
         canDrop: favoriteRootCanDrop,
+        externalDataAdapter: dndService.externalDataAdapter,
       }),
-      [onDrop]
+      [dndService.externalDataAdapter, onDrop]
     );
 
   return (

packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx

@@ -4,6 +4,7 @@ import {
   useDropTarget,
 } from '@affine/component';
 import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
+import { DndService } from '@affine/core/modules/dnd/services';
 import {
   DropEffect,
   ExplorerTreeRoot,
@@ -20,6 +21,7 @@ import { track } from '@affine/track';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import {
   useLiveData,
+  useService,
   useServices,
   WorkspaceService,
 } from '@toeverything/infra';
@@ -149,6 +151,8 @@ export const ExplorerFavorites = () => {
     [favoriteService]
   );
 
+  const dndService = useService(DndService);
+
   const { dropTargetRef, draggedOverDraggable, draggedOverPosition } =
     useDropTarget<AffineDNDData>(
       () => ({
@@ -157,8 +161,9 @@ export const ExplorerFavorites = () => {
         },
         onDrop: handleDrop,
         canDrop: favoriteRootCanDrop,
+        externalDataAdapter: dndService.externalDataAdapter,
       }),
-      [handleDrop]
+      [dndService.externalDataAdapter, handleDrop]
     );
 
   return (

packages/frontend/core/src/modules/explorer/views/tree/node.tsx

@@ -11,6 +11,7 @@ import {
 } from '@affine/component';
 import { RenameModal } from '@affine/component/rename-modal';
 import { AppSidebarService } from '@affine/core/modules/app-sidebar';
+import { DndService } from '@affine/core/modules/dnd/services';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { extractEmojiIcon } from '@affine/core/utils';
@@ -185,6 +186,8 @@ export const ExplorerTreeNode = ({
     },
     [canDrop, reorderable]
   );
+  const dndService = useService(DndService);
+
   const {
     dropTargetRef,
     treeInstruction,
@@ -221,6 +224,9 @@ export const ExplorerTreeNode = ({
         }
       },
       canDrop: handleCanDrop,
+      externalDataAdapter(args) {
+        return dndService.externalDataAdapter(args) as any;
+      },
     }),
     [
       dndData?.dropTarget,
@@ -232,6 +238,7 @@ export const ExplorerTreeNode = ({
       cid,
       onDrop,
       setCollapsed,
+      dndService,
     ]
   );
   const isSelfDraggedOver = draggedOverDraggable?.data.__cid === cid;

packages/frontend/core/src/modules/index.ts

@@ -6,6 +6,7 @@ import { configAtMenuConfigModule } from './at-menu-config';
 import { configureCloudModule } from './cloud';
 import { configureCollectionModule } from './collection';
 import { configureDialogModule } from './dialogs';
+import { configureDndModule } from './dnd';
 import { configureDocDisplayMetaModule } from './doc-display-meta';
 import { configureDocInfoModule } from './doc-info';
 import { configureDocLinksModule } from './doc-link';
@@ -69,4 +70,5 @@ export function configureCommonModules(framework: Framework) {
   configureDocInfoModule(framework);
   configureOpenInApp(framework);
   configAtMenuConfigModule(framework);
+  configureDndModule(framework);
 }

packages/frontend/core/src/types/dnd.ts

@@ -74,6 +74,9 @@ export interface AffineDNDData extends DNDData {
       | {
           at: 'doc-property:manager';
           workspaceId: string;
+        }
+      | {
+          at: 'external'; // for blocksuite or external apps
         };
   };
   dropTarget: