Improve performance of draggable component

udecode · Oct 19, 2023 · cf83eb6 · cf83eb6
1 parent 8a75844
commit cf83eb6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/.changeset/chilled-candles-hunt.md b/.changeset/chilled-candles-hunt.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': patch
+---
+
+Reduce performance overhead of draggable component
diff --git a/apps/www/src/registry/default/plate-ui/draggable.tsx b/apps/www/src/registry/default/plate-ui/draggable.tsx
@@ -77,14 +77,28 @@ export interface DraggableProps
   ) => boolean;
 }
 
+const dragHandle = (
+  <Tooltip>
+    <TooltipTrigger>
+      <Icons.dragHandle className="h-4 w-4 text-muted-foreground" />
+    </TooltipTrigger>
+    <TooltipContent>Drag to move</TooltipContent>
+  </Tooltip>
+);
+
 const Draggable = forwardRef<HTMLDivElement, DraggableProps>(
   ({ className, classNames = {}, onDropHandler, ...props }, ref) => {
     const { children, element } = props;
 
     const state = useDraggableState({ element, onDropHandler });
-    const { dropLine, isDragging } = state;
-    const { droplineProps, gutterLeftProps, previewRef, handleRef } =
-      useDraggable(state);
+    const { dropLine, isDragging, isHovered } = state;
+    const {
+      groupProps,
+      droplineProps,
+      gutterLeftProps,
+      previewRef,
+      handleRef,
+    } = useDraggable(state);
 
     return (
       <div
@@ -95,6 +109,7 @@ const Draggable = forwardRef<HTMLDivElement, DraggableProps>(
           className
         )}
         ref={ref}
+        {...groupProps}
       >
         <div
           className={cn(
@@ -110,12 +125,9 @@ const Draggable = forwardRef<HTMLDivElement, DraggableProps>(
                 classNames.blockToolbar
               )}
             >
-              <Tooltip>
-                <TooltipTrigger ref={handleRef}>
-                  <Icons.dragHandle className="h-4 w-4 text-muted-foreground" />
-                </TooltipTrigger>
-                <TooltipContent>Drag to move</TooltipContent>
-              </Tooltip>
+              <div ref={handleRef} className="h-4 w-4">
+                {isHovered && dragHandle}
+              </div>
             </div>
           </div>
         </div>

diff --git a/packages/dnd/src/components/useDraggable.ts b/packages/dnd/src/components/useDraggable.ts
@@ -1,11 +1,13 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { TEditor, TElement } from '@udecode/plate-common';
 import { ConnectDragSource, DropTargetMonitor } from 'react-dnd';
 
 import { DragItemNode, DropLineDirection, useDndBlock } from '..';
 
 export type DraggableState = {
   dropLine: DropLineDirection;
+  isHovered: boolean;
+  setIsHovered: (isHovered: boolean) => void;
   isDragging: boolean;
   nodeRef: React.RefObject<HTMLDivElement>;
   dragRef: ConnectDragSource;
@@ -26,19 +28,31 @@ export const useDraggableState = (props: {
   const { element, onDropHandler } = props;
 
   const nodeRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
   const { dropLine, isDragging, dragRef } = useDndBlock({
     id: element.id as string,
     nodeRef,
     onDropHandler,
   });
 
-  return { dropLine, isDragging, nodeRef, dragRef };
+  return {
+    dropLine,
+    isHovered,
+    setIsHovered,
+    isDragging,
+    nodeRef,
+    dragRef,
+  };
 };
 
 export const useDraggable = (state: DraggableState) => {
   return {
     previewRef: state.nodeRef,
     handleRef: state.dragRef,
+    groupProps: {
+      onPointerEnter: () => state.setIsHovered(true),
+      onPointerLeave: () => state.setIsHovered(false),
+    },
     droplineProps: {
       contentEditable: false,
     },