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/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>
   );
 }