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/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"

app/src/pages/playground/PlaygroundChatTemplate.tsx

@@ -49,6 +49,7 @@ interface PlaygroundChatTemplateProps extends PlaygroundInstanceProps {}
 
 export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
   const id = props.playgroundInstanceId;
+
   const instances = usePlaygroundContext((state) => state.instances);
   const updateInstance = usePlaygroundContext((state) => state.updateInstance);
   const playgroundInstance = instances.find((instance) => instance.id === id);