Merge pull request #4530 from udecode/fix/dnd

Fix table dnd

Author: felixfeng33

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

@@ -263,11 +263,16 @@ const DragHandle = React.memo(function DragHandle({
               .getApi(BlockSelectionPlugin)
               .blockSelection.getNodes({ sort: true });
 
-            const selectedBlocks =
+            let selectedBlocks =
               blockSelection.length > 0
                 ? blockSelection
                 : editor.api.blocks({ mode: 'highest' });
 
+            // If current block is not in selection, use it as the starting point
+            if (!selectedBlocks.some(([node]) => node.id === element.id)) {
+              selectedBlocks = [[element, editor.api.findPath(element)!]];
+            }
+
             // Process selection to include list children
             const processedBlocks = expandListItemsWithChildren(
               editor,
@@ -374,9 +379,39 @@ const createDragPreviewElements = (
 
   const resolveElement = (node: TElement, index: number) => {
     const domNode = editor.api.toDOMNode(node)!;
-
     const newDomNode = domNode.cloneNode(true) as HTMLElement;
 
+    // Apply visual compensation for horizontal scroll
+    const applyScrollCompensation = (original: Element, cloned: HTMLElement) => {
+      const scrollLeft = original.scrollLeft;
+      if (scrollLeft > 0) {
+        // Create a wrapper to handle the scroll offset
+        const scrollWrapper = document.createElement('div');
+        scrollWrapper.style.overflow = 'hidden';
+        scrollWrapper.style.width = `${original.clientWidth}px`;
+
+        // Create inner container with the full content
+        const innerContainer = document.createElement('div');
+        innerContainer.style.transform = `translateX(-${scrollLeft}px)`;
+        innerContainer.style.width = `${original.scrollWidth}px`;
+
+        // Move all children to the inner container
+        while (cloned.firstChild) {
+          innerContainer.append(cloned.firstChild);
+        }
+
+        // Apply the original element's styles to maintain appearance
+        const originalStyles = window.getComputedStyle(original);
+        cloned.style.padding = '0';
+        innerContainer.style.padding = originalStyles.padding;
+
+        scrollWrapper.append(innerContainer);
+        cloned.append(scrollWrapper);
+      }
+    };
+
+    applyScrollCompensation(domNode, newDomNode);
+
     ids.push(node.id as string);
     const wrapper = document.createElement('div');
     wrapper.append(newDomNode);

docs/components/changelog.mdx

@@ -11,6 +11,7 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 ## July 2025 #24
 
 ### July 29 #24.11
+- `block-draggable`: Fixed table drag and drop preview display with horizontal scroll compensation. Drag preview elements now correctly display content even when the original element has horizontal scroll
 - `block-draggable`: Added `isAboutToDrag` state to improve preview handling - tracks when drag is about to start (mousedown but not yet dragging) for better preview cleanup
 
 ### July 27 #24.10