Merge pull request #4481 from udecode/dnd1

Added support for dragging multiple blocks using editor's native selection

Author: felixfeng33

.changeset/gentle-tigers-listen.md

@@ -0,0 +1,8 @@
+---
+'@platejs/dnd': patch
+---
+
+Added support for dragging multiple blocks using editor's native selection
+
+- Multiple blocks can now be dragged using the editor's native selection, not just with block-selection
+- Simplified `useDndNode` hook implementation by removing complex preview logic

apps/www/src/registry/ui/block-draggable.tsx

@@ -73,7 +73,7 @@ function Draggable(props: PlateElementProps) {
   const { children, editor, element, path } = props;
   const blockSelectionApi = editor.getApi(BlockSelectionPlugin).blockSelection;
 
-  const { isDragging, multiplePreviewRef, previewRef, handleRef } =
+  const { isDragging, nodeRef, previewRef, handleRef } =
     useDraggable({
       element,
       onDropHandler: (_, { dragItem }) => {
@@ -82,20 +82,25 @@ function Draggable(props: PlateElementProps) {
         if (blockSelectionApi) {
           blockSelectionApi.add(id);
         }
-        multiplePreviewRef.current?.replaceChildren();
+        resetPreview();
       },
     });
 
   const isInColumn = path.length === 3;
   const isInTable = path.length === 4;
 
-  const [multiplePreviewTop, setMultiplePreviewTop] = React.useState(0);
-  const [isMultiple, setIsMultiple] = React.useState(false);
+  const [previewTop, setPreviewTop] = React.useState(0);
+
+  const resetPreview = () => {
+    if (previewRef.current) {
+      previewRef.current.replaceChildren();
+    }
+  }
 
   // clear up virtual multiple preview when drag end
   React.useEffect(() => {
-    if (!isDragging && isMultiple) {
-      multiplePreviewRef.current?.replaceChildren();
+    if (!isDragging) {
+      resetPreview();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDragging]);
@@ -141,10 +146,8 @@ function Draggable(props: PlateElementProps) {
               >
                 <DragHandle
                   isDragging={isDragging}
-                  isMultiple={isMultiple}
-                  multiplePreviewRef={multiplePreviewRef}
-                  setIsMultiple={setIsMultiple}
-                  setMultiplePreviewTop={setMultiplePreviewTop}
+                  previewRef={previewRef}
+                  setPreviewTop={setPreviewTop}
                 />
               </Button>
             </div>
@@ -153,13 +156,13 @@ function Draggable(props: PlateElementProps) {
       )}
 
       <div
-        ref={multiplePreviewRef}
+        ref={previewRef}
         className={cn('absolute -left-0 hidden w-full')}
-        style={{ top: `${-multiplePreviewTop}px` }}
+        style={{ top: `${-previewTop}px` }}
         contentEditable={false}
       />
 
-      <div ref={previewRef} className="slate-blockWrapper flow-root">
+      <div ref={nodeRef} className="slate-blockWrapper flow-root">
         <MemoizedChildren>{children}</MemoizedChildren>
         <DropLine />
       </div>
@@ -202,16 +205,12 @@ function Gutter({
 
 const DragHandle = React.memo(function DragHandle({
   isDragging,
-  isMultiple,
-  multiplePreviewRef,
-  setIsMultiple,
-  setMultiplePreviewTop,
+  previewRef,
+  setPreviewTop,
 }: {
   isDragging: boolean;
-  isMultiple: boolean;
-  multiplePreviewRef: React.RefObject<HTMLDivElement | null>;
-  setIsMultiple: (isMultiple: boolean) => void;
-  setMultiplePreviewTop: (top: number) => void;
+  previewRef: React.RefObject<HTMLDivElement | null>;
+  setPreviewTop: (top: number) => void;
 }) {
   const editor = useEditorRef();
   const element = useElement();
@@ -229,36 +228,37 @@ const DragHandle = React.memo(function DragHandle({
           onMouseDown={(e) => {
             if (e.button !== 0 || e.shiftKey) return; // Only left mouse button
 
-            if (isMultiple) {
-              const elements = createDragPreviewElements(editor);
-              multiplePreviewRef.current?.append(...elements);
-              multiplePreviewRef.current?.classList.remove('hidden');
-            } else {
-              editor.setOption(DndPlugin, 'draggingId', null);
-              return;
-            }
+            const elements = createDragPreviewElements(editor, { currentBlock: element });
+            previewRef.current?.append(...elements);
+            previewRef.current?.classList.remove('hidden');
+            editor.setOption(DndPlugin, 'multiplePreviewRef', previewRef);
           }}
           onMouseEnter={() => {
             if (isDragging) return;
 
-            const isSelected = editor.getOption(
-              BlockSelectionPlugin,
-              'isSelected',
-              element.id as string
-            );
+            const blockSelection = editor
+              .getApi(BlockSelectionPlugin)
+              .blockSelection.getNodes({ sort: true });
+
+
+            const selectedBlocks =
+              blockSelection.length > 0
+                ? blockSelection
+                : editor.api.blocks({ mode: 'highest' });
+
+            const ids = selectedBlocks.map((block) => block[0].id as string);
 
-            if (isSelected) {
-              const previewTop = calculatePreviewTop(editor, element);
-              setMultiplePreviewTop(previewTop);
-              setIsMultiple(true);
+
+            if (ids.length > 1 && ids.includes(element.id as string)) {
+              const previewTop = calculatePreviewTop(editor, {
+                blocks: selectedBlocks.map((block) => block[0]),
+                element,
+              });
+              setPreviewTop(previewTop);
             } else {
-              setIsMultiple(false);
+              setPreviewTop(0);
             }
           }}
-          onMouseUp={() => {
-            multiplePreviewRef.current?.replaceChildren();
-            setIsMultiple(false);
-          }}
           role="button"
         >
           <GripVertical className="text-muted-foreground" />
@@ -292,12 +292,19 @@ const DropLine = React.memo(function DropLine({
   );
 });
 
-const createDragPreviewElements = (editor: PlateEditor): HTMLElement[] => {
-  const blockSelectionApi = editor.getApi(BlockSelectionPlugin).blockSelection;
+const createDragPreviewElements = (editor: PlateEditor, { currentBlock }: { currentBlock: TElement }): HTMLElement[] => {
+  const blockSelection = editor.getApi(BlockSelectionPlugin).blockSelection.getNodes({ sort: true });
+
+  const selectionNodes = blockSelection.length > 0 ? blockSelection : editor.api.blocks({ mode: 'highest' });
 
-  const sortedNodes = blockSelectionApi.getNodes({
-    sort: true,
-  });
+  const includes = selectionNodes.some(([node]) => node.id === currentBlock.id);
+
+  const sortedNodes = includes ? selectionNodes.map(([node]) => node) : [currentBlock];
+
+  if (blockSelection.length === 0) {
+    editor.tf.blur();
+    editor.tf.collapse()
+  }
 
   const elements: HTMLElement[] = [];
   const ids: string[] = [];
@@ -335,7 +342,7 @@ const createDragPreviewElements = (editor: PlateEditor): HTMLElement[] => {
 
     if (lastDomNode) {
       const lastDomNodeRect = editor.api
-        .toDOMNode(lastDomNode[0])!
+        .toDOMNode(lastDomNode)!
         .parentElement!.getBoundingClientRect();
 
       const domNodeRect = domNode.parentElement!.getBoundingClientRect();
@@ -352,7 +359,7 @@ const createDragPreviewElements = (editor: PlateEditor): HTMLElement[] => {
     elements.push(wrapper);
   };
 
-  sortedNodes.forEach(([node], index) => resolveElement(node, index));
+  sortedNodes.forEach((node, index) => resolveElement(node, index));
 
   editor.setOption(DndPlugin, 'draggingId', ids);
 
@@ -361,15 +368,20 @@ const createDragPreviewElements = (editor: PlateEditor): HTMLElement[] => {
 
 const calculatePreviewTop = (
   editor: PlateEditor,
-  element: TElement
+  {
+    blocks,
+    element,
+  }: {
+    blocks: TElement[];
+    element: TElement;
+  }
 ): number => {
-  const blockSelectionApi = editor.getApi(BlockSelectionPlugin).blockSelection;
 
   const child = editor.api.toDOMNode(element)!;
   const editable = editor.api.toDOMNode(editor)!;
-  const firstSelectedChild = editor.api.node(blockSelectionApi.first()![0])!;
+  const firstSelectedChild = blocks[0]
 
-  const firstDomNode = editor.api.toDOMNode(firstSelectedChild[0])!;
+  const firstDomNode = editor.api.toDOMNode(firstSelectedChild)!;
   // Get editor's top padding
   const editorPaddingTop = Number(
     window.getComputedStyle(editable).paddingTop.replace('px', '')

docs/components/changelog.mdx

@@ -10,6 +10,9 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## July 2025 #24
 
+### July 14 #24.5
+- `block-draggable`: Added support for dragging multiple blocks using editor's native selection (previously only block-selection was supported)
+
 ### July 3 #24.4
 - `slate-to-html`: Added `EditorViewDemo` component for static editor rendering using `createStaticEditor`
 ### July 4 #24.3

packages/dnd/src/DndPlugin.tsx

@@ -27,6 +27,7 @@ export type DndConfig = PluginConfig<
     };
     enableScroller?: boolean;
     isDragging?: boolean;
+    multiplePreviewRef?: React.RefObject<HTMLDivElement | null> | null;
     scrollerProps?: Partial<ScrollerProps>;
     onDropFiles?: (props: {
       id: string;
@@ -75,13 +76,17 @@ export const DndPlugin = createTPlatePlugin<DndConfig>({
       editor.setOption(plugin, 'isDragging', false);
       editor.setOption(plugin, 'dropTarget', { id: null, line: '' });
       editor.setOption(plugin, '_isOver', false);
+      editor
+        .getOption(plugin, 'multiplePreviewRef')
+        ?.current?.replaceChildren();
     },
   },
   options: {
     _isOver: false,
     draggingId: null,
     dropTarget: { id: null, line: '' },
     isDragging: false,
+    multiplePreviewRef: null,
   },
 }).extend(({ getOptions }) => ({
   render: {

packages/dnd/src/components/useDraggable.ts

@@ -6,9 +6,9 @@ import { type UseDndNodeOptions, DRAG_ITEM_BLOCK, useDndNode } from '..';
 
 export type DraggableState = {
   isDragging: boolean;
-  /** The ref of the multiple preview element */
-  multiplePreviewRef: React.RefObject<HTMLDivElement | null>;
   /** The ref of the draggable element */
+  nodeRef: React.RefObject<HTMLDivElement | null>;
+  /** The ref of the multiple preview element */
   previewRef: React.RefObject<HTMLDivElement | null>;
   /** The ref of the draggable handle */
   handleRef: (
@@ -47,8 +47,8 @@ export const useDraggable = (props: UseDndNodeOptions): DraggableState => {
 
   return {
     isDragging,
-    multiplePreviewRef,
-    previewRef: nodeRef,
+    nodeRef,
+    previewRef: multiplePreviewRef,
     handleRef: dragRef,
   };
 };

packages/dnd/src/hooks/useDndNode.ts

@@ -89,23 +89,7 @@ export const useDndNode = ({
   } else if (previewOptions.ref) {
     preview(previewOptions.ref);
   } else {
-    const selectedIds = editor.getOption(
-      { key: 'blockSelection' },
-      'selectedIds'
-    );
-
-    const isMultipleSelection =
-      selectedIds &&
-      selectedIds.size > 1 &&
-      selectedIds.has(element.id as string);
-
-    if (isMultipleSelection && multiplePreviewRef?.current) {
-      // Use multiplePreviewRef for preview when dragging multiple blocks
-      preview(multiplePreviewRef);
-    } else {
-      // Use nodeRef for preview when dragging a single block
-      preview(nodeRef);
-    }
+    preview(multiplePreviewRef);
   }
 
   return {