Generate drag preview for node library nodes (#2387)

src/components/common/TreeExplorerTreeNode.vue

@@ -34,6 +34,7 @@
 </template>
 
 <script setup lang="ts">
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
 import Badge from 'primevue/badge'
 import { Ref, computed, inject, ref } from 'vue'
 
@@ -102,7 +103,17 @@ if (props.node.draggable) {
       }
     },
     onDragStart: () => emit('dragStart', props.node),
-    onDrop: () => emit('dragEnd', props.node)
+    onDrop: () => emit('dragEnd', props.node),
+    onGenerateDragPreview: props.node.renderDragPreview
+      ? ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            render: ({ container }) => {
+              return props.node.renderDragPreview(props.node, container)
+            },
+            nativeSetDragImage
+          })
+        }
+      : undefined
   })
 }