Merge pull request #4343 from serlo/fix/dragging-spill

fix(plugin-rows): whole plugin drag handle bug
serlo · Dec 10, 2024 · 835bce9 · 835bce9
2 parents 980adb8 + cd8895d
commit 835bce9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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}
         >