chore(drag-and-drop): fix dnd for inline items (#2054)

sanity-io · Oct 25, 2024 · 8ea6b94 · 8ea6b94
1 parent a8ae092
commit 8ea6b94
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/apps/page-builder-demo/src/app/dnd/page.tsx b/apps/page-builder-demo/src/app/dnd/page.tsx
@@ -28,7 +28,7 @@ export default async function Page() {
           <h2>Vertical (Flow Auto Calculated)</h2>
           <div className="mt-4 flex flex-col gap-4">
             {data.children.map((child) => (
-              <div
+              <a
                 data-sanity={createDataAttribute({
                   id: data._id,
                   type: 'dndTestPage',
@@ -39,7 +39,7 @@ export default async function Page() {
                 key={child._key}
               >
                 <p>{child.title}</p>
-              </div>
+              </a>
             ))}
           </div>
         </section>
@@ -207,6 +207,25 @@ export default async function Page() {
             ))}
           </div>
         </section>
+        {/* Inline */}
+        <section className="mt-6">
+          <h2>Vertical (Flow Auto Calculated)</h2>
+          <div className="mt-4">
+            {data.children.map((child) => (
+              <a
+                data-sanity={createDataAttribute({
+                  id: data._id,
+                  type: 'dndTestPage',
+                  path: `children[_key=="${child._key}"]`,
+                }).toString()}
+                data-sanity-drag-group="inline"
+                key={child._key}
+              >
+                {stegaClean(child.title)}
+              </a>
+            ))}
+          </div>
+        </section>
       </div>
     </>
   )

diff --git a/packages/visual-editing/src/util/dragAndDrop.ts b/packages/visual-editing/src/util/dragAndDrop.ts
@@ -77,7 +77,7 @@ function calcInsertPosition(origin: Point2D, targets: OverlayRect[], flow: strin
 }
 
 function findRectSanityData(rect: OverlayRect, overlayGroup: OverlayElement[]) {
-  return overlayGroup.find((e) => rectEqual(getRect(e.elements.measureElement), rect))
+  return overlayGroup.find((e) => rectEqual(getRect(e.elements.element), rect))
     ?.sanity as SanityNode
 }
 
@@ -388,7 +388,7 @@ export function handleOverlayDrag(opts: HandleOverlayDragOpts): void {
   window.focus()
 
   const rectUpdateFrequency = 150
-  let rects = overlayGroup.map((e) => getRect(e.elements.measureElement))
+  let rects = overlayGroup.map((e) => getRect(e.elements.element))
 
   const flow = (element.getAttribute('data-sanity-drag-flow') || calcTargetFlow(rects)) as
     | 'horizontal'
@@ -429,7 +429,7 @@ export function handleOverlayDrag(opts: HandleOverlayDragOpts): void {
   }
 
   const rectsInterval = setInterval(() => {
-    rects = overlayGroup.map((e) => getRect(e.elements.measureElement))
+    rects = overlayGroup.map((e) => getRect(e.elements.element))
   }, rectUpdateFrequency)
 
   const applyMinimap = (): void => {

diff --git a/packages/visual-editing/src/util/findSanityNodes.ts b/packages/visual-editing/src/util/findSanityNodes.ts
@@ -100,6 +100,7 @@ export function findSanityNodes(
       return
     }
 
+    // resize observer does not fire for non-replaced inline elements https://drafts.csswg.org/resize-observer/#intro
     const measureElement = findNonInlineElement(element)
     if (!measureElement) {
       return
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,6 +100,7 @@ export function findSanityNodes( @@
           return
         }
+        // resize observer does not fire for non-replaced inline elements https://drafts.csswg.org/resize-observer/#intro
         const measureElement = findNonInlineElement(element)
         if (!measureElement) {
           return
@@ Expand Down @@