fix(playground): ignore keyboard events in template messages for drag…

… and drop (#4945)

* fix(playground): ignore keyboard events in template messages for drag and drop

* pull default pointer sensor from dnd-kit/dom

* update file name casing via git

* migrate to non-experimental dnd-kit

* remove unused experimental code, update naming and remove unnecessary props

* remove strategy

* fix forward ref warning

app/package.json

@@ -15,8 +15,9 @@
     "@codemirror/lang-python": "6.1.3",
     "@codemirror/lint": "^6.8.1",
     "@codemirror/view": "^6.28.5",
-    "@dnd-kit/abstract": "^0.0.5",
-    "@dnd-kit/react": "^0.0.5",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@react-three/drei": "^9.108.4",
     "@react-three/fiber": "8.0.12",
     "@tanstack/react-table": "^8.19.3",

app/src/components/dnd/DragHandle.tsx

@@ -1,10 +1,27 @@
 import React from "react";
+import { DraggableAttributes } from "@dnd-kit/core";
 import { css } from "@emotion/react";
 
-function DragHandle() {
+// This is the type of the listeners object from useSortable
+// However it is not exported from @dnd-kit/core so we have to redefine it here
+// eslint-disable-next-line @typescript-eslint/ban-types
+type Listeners = Record<string, Function>;
+
+function DragHandle(
+  {
+    listeners,
+    attributes,
+  }: {
+    listeners?: Listeners;
+    attributes: DraggableAttributes;
+  },
+  ref: React.Ref<HTMLButtonElement>
+) {
   return (
     <button
-      data-cypress="draggable-handle"
+      ref={ref}
+      {...listeners}
+      {...attributes}
       aria-roledescription="draggable"
       aria-pressed="false"
       aria-disabled="false"