Support explicit empty slot drop zones in shared editor

packages/dnd/src/manager.ts

@@ -1,4 +1,4 @@
-import { DragDropManager } from "@dnd-kit/dom";
+import { DragDropManager, Droppable } from "@dnd-kit/dom";
 import { Sortable } from "@dnd-kit/dom/sortable";
 import type {
   DndManager,
@@ -19,6 +19,7 @@ export function createDndManager(options: DndManagerOptions): DndManager {
     }
   >();
   const manager = new DragDropManager();
+  const zones = new Map<string | number, { droppable: Droppable; location: { group: string | number; index: number } }>();
   let activeIds: Array<string | number> = [];
   let generation = 0;
   let destroyed = false;
@@ -39,7 +40,7 @@ export function createDndManager(options: DndManagerOptions): DndManager {
     const target = event.operation.target as
       (typeof event.operation.target & { group?: string | number; index?: number }) | null;
     if (!target) return;
-    const destination = { group: target.group ?? "default", index: target.index ?? 0 };
+    const destination = zones.get(target.id)?.location ?? { group: target.group ?? "default", index: target.index ?? 0 };
     if (options.accept && !options.accept(activeIds, destination)) {
       event.preventDefault();
       options.announce?.({ type: "invalid", ids: activeIds, location: destination });
@@ -70,7 +71,7 @@ export function createDndManager(options: DndManagerOptions): DndManager {
           index: source.initialIndex ?? source.index ?? 0,
         },
       ],
-      to: { group: source.group ?? "default", index: source.index ?? 0 },
+      to: { ...(event.operation.target ? zones.get(event.operation.target.id)?.location : undefined) ?? { group: source.group ?? "default", index: source.index ?? 0 } },
     };
     // A pending commit must not own the next gesture's selection or lifecycle.
     activeIds = [];
@@ -96,9 +97,21 @@ export function createDndManager(options: DndManagerOptions): DndManager {
   });
 
   return {
+    registerDropZone(registration) {
+      if (destroyed) throw new Error("Cannot register a drop zone after manager destruction.");
+      if (entries.has(registration.id) || zones.has(registration.id)) throw new Error(`Duplicate draggable or drop zone id ${String(registration.id)}.`);
+      if (!Number.isSafeInteger(registration.index) || registration.index < 0) throw new Error("Drop zone index must be a non-negative safe integer.");
+      const droppable = new Droppable({ id: registration.id, element: registration.element, accept: registration.accepts, disabled: registration.disabled }, manager);
+      zones.set(registration.id, { droppable, location: { group: registration.group, index: registration.index } });
+      return () => {
+        if (zones.get(registration.id)?.droppable !== droppable) return;
+        droppable.destroy();
+        zones.delete(registration.id);
+      };
+    },
     registerSortable(registration) {
       if (destroyed) throw new Error("Cannot register a sortable after manager destruction.");
-      if (entries.has(registration.id))
+      if (entries.has(registration.id) || zones.has(registration.id))
         throw new Error(`Duplicate sortable id ${String(registration.id)}.`);
       const sortable = new Sortable(
         {
@@ -134,6 +147,8 @@ export function createDndManager(options: DndManagerOptions): DndManager {
       activeIds = [];
       for (const entry of entries.values()) entry.sortable.destroy();
       entries.clear();
+      for (const zone of zones.values()) zone.droppable.destroy();
+      zones.clear();
       manager.destroy();
     },
   };