From cd8895d574ffb85cfd87445b737ffd9b86bfa83a Mon Sep 17 00:00:00 2001
From: Vitomir Budimir <budimirvitomir@gmail.com>
Date: Mon, 9 Dec 2024 21:15:09 +0100
Subject: [PATCH] fix(plugin-rows): whole plugin drag handle bug

---
 packages/editor/src/plugins/rows/components/row-controls.tsx | 5 ++++-
 packages/editor/src/plugins/rows/editor-row-renderer.tsx     | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/plugins/rows/components/row-controls.tsx b/packages/editor/src/plugins/rows/components/row-controls.tsx
index 42ee5d0d52..8ad2c1a309 100644
--- a/packages/editor/src/plugins/rows/components/row-controls.tsx
+++ b/packages/editor/src/plugins/rows/components/row-controls.tsx
@@ -2,15 +2,17 @@ import { FaIcon } from '@editor/editor-ui/fa-icon'
 import { StateTypeReturnType } from '@editor/types/internal__plugin-state'
 import { cn } from '@editor/utils/cn'
 import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons'
+import type { ConnectDragSource } from 'react-dnd'
 
 import type { RowsPluginState } from '..'
 
 interface RowDragButtonProps {
+  drag: ConnectDragSource
   rows: StateTypeReturnType<RowsPluginState>
   index: number
 }
 
-export function RowControls({ rows, index }: RowDragButtonProps) {
+export function RowControls({ drag, rows, index }: RowDragButtonProps) {
   function handleUpButtonClick() {
     const previousRow = document.getElementById(rows[index - 1].id)
     if (!previousRow) return
@@ -29,6 +31,7 @@ export function RowControls({ rows, index }: RowDragButtonProps) {
 
   return (
     <div
+      ref={drag as unknown as React.LegacyRef<HTMLDivElement>}
       className={cn(
         'row-controls',
         'absolute bottom-14 left-2 top-0 z-[22] flex flex-col justify-center gap-4',
diff --git a/packages/editor/src/plugins/rows/editor-row-renderer.tsx b/packages/editor/src/plugins/rows/editor-row-renderer.tsx
index b9a3bfbbda..e81d236f5a 100644
--- a/packages/editor/src/plugins/rows/editor-row-renderer.tsx
+++ b/packages/editor/src/plugins/rows/editor-row-renderer.tsx
@@ -50,7 +50,7 @@ export function EditorRowRenderer({
   }, [config])
   const canDrop = useCanDrop(row.id, draggingAbove, allowedPlugins)
 
-  const [collectedDragProps, dragPreview] = useDrag({
+  const [collectedDragProps, drag, dragPreview] = useDrag({
     type: 'row',
     item: () => ({
       id: row.id,
@@ -198,7 +198,7 @@ export function EditorRowRenderer({
             '[&>.row-controls]:!-left-1 [&>.row-controls]:!-top-9'
         )}
       >
-        <RowControls rows={rows} index={index} />
+        <RowControls drag={drag} rows={rows} index={index} />
         <div
           className={collectedDragProps.isDragging ? 'opacity-30' : undefined}
         >