fix: Use HTML5Backend for drag-drop if the device does not support touch (#927)

* fix: Use HTML5Backend for drag-drop if the device does not support touch, since it's less buggy

* Forgot React when using jsx

platform/ui/package.json

@@ -48,8 +48,9 @@
     "prop-types": "15.6.2",
     "react-bootstrap-modal": "4.2.0",
     "react-dates": "18.4.1",
-    "react-dnd": "8.0.3",
-    "react-dnd-touch-backend": "^0.8.3",
+    "react-dnd": "9.3.4",
+    "react-dnd-html5-backend": "^9.3.4",
+    "react-dnd-touch-backend": "^9.3.4",
     "react-i18next": "^10.11.0",
     "react-with-direction": "1.3.0"
   },

platform/ui/src/utils/viewerbaseDragDropContext.js

@@ -1,13 +1,20 @@
-import { DragDropContext } from 'react-dnd';
+import React from 'react';
+import { DndProvider } from "react-dnd";
+import HTML5Backend from 'react-dnd-html5-backend';
 import TouchBackend from 'react-dnd-touch-backend';
 
+const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);
+
 // See https://github.com/react-dnd/react-dnd/issues/186#issuecomment-335429067
 // https://github.com/react-dnd/react-dnd/issues/186#issuecomment-282789420
-// TODO: Find a way for this context to be used in the parent application as well.
-
+//
 // http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
 export default function viewerbaseDragDropContext(DecoratedClass) {
-  return DragDropContext(TouchBackend({ enableMouseEvents: true }), null, true)(
-    DecoratedClass
+  const backend = isTouchDevice ? TouchBackend({ enableMouseEvents: true }) : HTML5Backend;
+
+  return (props) => (
+    <DndProvider backend={backend}>
+      <DecoratedClass {...props}/>
+    </DndProvider>
   );
 }