Merge pull request #2708 from udecode/feat/hoc-optimisation

Improve performance of placeholder and draggable HOCs
udecode · Oct 19, 2023 · 43ea4c1 · 43ea4c1
2 parents b485a19 + cf83eb6
commit 43ea4c1
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 13 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/.changeset/new-coins-suffer.md b/.changeset/new-coins-suffer.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-utils': patch
+---
+
+Do not re-render placeholder on every editor change
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,
     },

diff --git a/packages/plate-utils/src/hooks/usePlaceholder.ts b/packages/plate-utils/src/hooks/usePlaceholder.ts
@@ -1,4 +1,4 @@
-import { useEditorState } from '@udecode/plate-core';
+import { useEditorRef } from '@udecode/plate-core';
 import {
   isCollapsed,
   isElementEmpty,
@@ -23,7 +23,7 @@ export const usePlaceholderState = ({
 }: PlaceholderProps) => {
   const focused = useFocused();
   const selected = useSelected();
-  const editor = useEditorState();
+  const editor = useEditorRef();
 
   const isEmptyBlock = isElementEmpty(editor, element);