@portabletext/plugin-dnd 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 - 2026 Sanity.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# `@portabletext/plugin-dnd`
+
+A helper plugin for tracking the drop position during drag and drop.
+
+When a consumer takes over block rendering through the `defineX` pipeline, the engine renders no drop-indicator chrome: where a dragged block would land is deliberately left to the consumer, since drop indication is pointer-driven UI, not document structure. This plugin tracks the position for you, derived from the editor's public `drag.*` behavior events.
+
+```tsx
+import {DndProvider, useDropPosition} from '@portabletext/plugin-dnd'
+
+function MyEditor() {
+  return (
+    <EditorProvider initialConfig={...}>
+      <DndProvider>
+        <PortableTextEditable />
+      </DndProvider>
+    </EditorProvider>
+  )
+}
+
+function MyTextBlock(props: TextBlockRenderProps) {
+  // `'start' | 'end'` while a block drag hovers this block, `undefined`
+  // otherwise.
+  const dropPosition = useDropPosition(props.path)
+  return (
+    <div {...props.attributes} style={{position: 'relative'}}>
+      {props.children}
+      {dropPosition ? <DropIndicator edge={dropPosition} /> : null}
+    </div>
+  )
+}
+
+// A line across the top of the block for 'start', the bottom for 'end'.
+// `position: absolute` keeps it out of flow so it doesn't shift the text.
+function DropIndicator({edge}: {edge: 'start' | 'end'}) {
+  return (
+    <div
+      contentEditable={false}
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: edge === 'start' ? 0 : 'auto',
+        bottom: edge === 'end' ? 0 : 'auto',
+        borderTop: '1px solid currentColor',
+      }}
+    />
+  )
+}
+```
+
+Call `useDropPosition` from a component the render returns, not inline in the `render` callback (it is a hook):
+
+```tsx
+defineTextBlock({type: '*', render: (props) => <MyTextBlock {...props} />})
+```
+
+The position only appears for block drags (dragging an entire block or a multi-block selection), never for text drags, and never over the dragged blocks themselves. The plugin observes the drag events and forwards them untouched, so the editor's own drag handling is unaffected.
+
+`dragover` fires at mousemove frequency, so granularity matters: reads via `useDropPosition` re-render only when the position at their own path changes. Moving the drag from one block to another re-renders exactly two blocks, the one losing the indicator and the one gaining it.

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import type {Path} from '@portabletext/editor'
+import {JSX, ReactNode} from 'react'
+
+/**
+ * Tracks the drop position during drag and drop and serves it through
+ * context. Mount inside `EditorProvider`, wrapping whatever reads the
+ * position:
+ *
+ * ```tsx
+ * <EditorProvider initialConfig={...}>
+ *   <DndProvider>
+ *     <PortableTextEditable />
+ *   </DndProvider>
+ * </EditorProvider>
+ * ```
+ *
+ * Reads via {@link useDropPosition} only re-render when the drop position
+ * at their own path changes.
+ *
+ * @beta
+ */
+export declare function DndProvider(props: {children?: ReactNode}): JSX.Element
+
+/**
+ * The block-relative position a drop would land at.
+ *
+ * @beta
+ */
+export declare type DropPosition = {
+  path: Path
+  position: 'start' | 'end'
+}
+
+/**
+ * Read where a drop would land relative to the block at `path`: `'start'`,
+ * `'end'`, or `undefined` when no drag is hovering this block. Re-renders
+ * only when the position at this path changes.
+ *
+ * `path` is the keyed block path render callbacks receive, e.g.
+ * `[{_key: 'b0'}]`.
+ *
+ * @beta
+ */
+export declare function useDropPosition(
+  path: Path,
+): DropPosition['position'] | undefined
+
+export {}

package/dist/index.js

@@ -0,0 +1,210 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { defineBehavior, effect, forward } from "@portabletext/editor/behaviors";
+import { BehaviorPlugin } from "@portabletext/editor/plugins";
+import { getFocusInlineObject, isSelectionCollapsed, getFocusTextBlock, getFocusSpan, getFragment, isSelectionExpanded, getSelectionStartBlock, getSelectionEndBlock, isOverlappingSelection, getFocusBlock, getSelectedBlocks, isSelectingEntireBlocks } from "@portabletext/editor/selectors";
+import { getBlockEndPoint, getBlockStartPoint, isKeyedSegment } from "@portabletext/editor/utils";
+import { createContext, useEffect, useContext, useSyncExternalStore } from "react";
+function getDragSelection({
+  eventSelection,
+  snapshot
+}) {
+  let dragSelection = eventSelection;
+  if (getFocusInlineObject({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }))
+    return dragSelection;
+  const draggingCollapsedSelection = isSelectionCollapsed({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }), draggedTextBlock = getFocusTextBlock({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }), draggedSpan = getFocusSpan({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  });
+  draggingCollapsedSelection && draggedTextBlock && draggedSpan && (dragSelection = {
+    anchor: getBlockStartPoint({
+      context: snapshot.context,
+      block: draggedTextBlock
+    }),
+    focus: getBlockEndPoint({
+      context: snapshot.context,
+      block: draggedTextBlock
+    })
+  });
+  const selectedBlocks = getFragment(snapshot);
+  if (snapshot.context.selection && isSelectionExpanded(snapshot) && selectedBlocks.length > 1) {
+    const selectionStartBlock = getSelectionStartBlock(snapshot), selectionEndBlock = getSelectionEndBlock(snapshot);
+    if (!selectionStartBlock || !selectionEndBlock)
+      return dragSelection;
+    const selectionStartPoint = getBlockStartPoint({
+      context: snapshot.context,
+      block: selectionStartBlock
+    }), selectionEndPoint = getBlockEndPoint({
+      context: snapshot.context,
+      block: selectionEndBlock
+    });
+    isOverlappingSelection(eventSelection)({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: {
+          anchor: selectionStartPoint,
+          focus: selectionEndPoint
+        }
+      }
+    }) && (dragSelection = {
+      anchor: selectionStartPoint,
+      focus: selectionEndPoint
+    });
+  }
+  return dragSelection;
+}
+function createDropPositionStore() {
+  let current;
+  const subscribers = /* @__PURE__ */ new Map();
+  function notify(serializedPath) {
+    if (serializedPath === void 0)
+      return;
+    const bucket = subscribers.get(serializedPath);
+    if (bucket !== void 0)
+      for (const callback of bucket)
+        callback();
+  }
+  return {
+    get: (serializedPath) => current?.serializedPath === serializedPath ? current.position : void 0,
+    subscribeKey: (serializedPath, callback) => {
+      let bucket = subscribers.get(serializedPath);
+      return bucket === void 0 && (bucket = /* @__PURE__ */ new Set(), subscribers.set(serializedPath, bucket)), bucket.add(callback), () => {
+        bucket.delete(callback), bucket.size === 0 && subscribers.delete(serializedPath);
+      };
+    },
+    set: (next) => {
+      const previous = current;
+      current = next ? {
+        serializedPath: serializePath(next.path),
+        position: next.position
+      } : void 0, !(previous?.serializedPath === current?.serializedPath && previous?.position === current?.position) && (previous?.serializedPath !== current?.serializedPath && notify(previous?.serializedPath), notify(current?.serializedPath));
+    }
+  };
+}
+function createDropPositionBehaviors(setDropPosition) {
+  return [defineBehavior({
+    on: "drag.dragover",
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      const dropFocusBlock = getFocusBlock({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: event.position.selection
+        }
+      });
+      if (!dropFocusBlock)
+        return !1;
+      const dragOrigin = event.dragOrigin;
+      if (!dragOrigin)
+        return !1;
+      const dragSelection = getDragSelection({
+        eventSelection: dragOrigin.selection,
+        snapshot
+      });
+      return getSelectedBlocks({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
+      }).some((draggedBlock) => draggedBlock.node._key === dropFocusBlock.node._key) || !isSelectingEntireBlocks({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
+      }) ? !1 : {
+        dropFocusBlock
+      };
+    },
+    actions: [({
+      event
+    }, {
+      dropFocusBlock
+    }) => [effect(() => {
+      setDropPosition({
+        path: dropFocusBlock.path,
+        position: event.position.block
+      });
+    }), forward(event)]]
+  }), defineBehavior({
+    on: "drag.*",
+    guard: ({
+      event
+    }) => event.type !== "drag.dragover",
+    actions: [({
+      event
+    }) => [effect(() => {
+      setDropPosition(void 0);
+    }), forward(event)]]
+  })];
+}
+const DndContext = createContext(void 0);
+function DndProvider(props) {
+  const $ = c(7);
+  let t0;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = createDropPositionStore(), $[0] = t0) : t0 = $[0];
+  const store = t0;
+  let t1;
+  $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = createDropPositionBehaviors(store.set), $[1] = t1) : t1 = $[1];
+  const behaviors = t1;
+  let t2, t3;
+  $[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = () => () => {
+    store.set(void 0);
+  }, t3 = [store], $[2] = t2, $[3] = t3) : (t2 = $[2], t3 = $[3]), useEffect(t2, t3);
+  let t4;
+  $[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx(BehaviorPlugin, { behaviors }), $[4] = t4) : t4 = $[4];
+  let t5;
+  return $[5] !== props.children ? (t5 = /* @__PURE__ */ jsxs(DndContext.Provider, { value: store, children: [
+    t4,
+    props.children
+  ] }), $[5] = props.children, $[6] = t5) : t5 = $[6], t5;
+}
+function useDropPosition(path) {
+  const $ = c(8), store = useContext(DndContext);
+  if (store === void 0)
+    throw new Error("useDropPosition must be used below a <DndProvider>");
+  let t0;
+  $[0] !== path ? (t0 = serializePath(path), $[0] = path, $[1] = t0) : t0 = $[1];
+  const serializedPath = t0;
+  let t1;
+  $[2] !== serializedPath || $[3] !== store ? (t1 = (callback) => store.subscribeKey(serializedPath, callback), $[2] = serializedPath, $[3] = store, $[4] = t1) : t1 = $[4];
+  const subscribe = t1;
+  let t2;
+  $[5] !== serializedPath || $[6] !== store ? (t2 = () => store.get(serializedPath), $[5] = serializedPath, $[6] = store, $[7] = t2) : t2 = $[7];
+  const getSnapshot = t2;
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function serializePath(path) {
+  return path.reduce((result, segment, index) => isKeyedSegment(segment) ? `${result}[_key=="${segment._key}"]` : `${result}${index === 0 ? "" : "."}${segment}`, "");
+}
+export {
+  DndProvider,
+  useDropPosition
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/drag-selection.ts","../src/plugin.dnd.tsx"],"sourcesContent":["import type {EditorSelection, EditorSnapshot} from '@portabletext/editor'\nimport {\n  getFocusInlineObject,\n  getFocusSpan,\n  getFocusTextBlock,\n  getFragment,\n  getSelectionEndBlock,\n  getSelectionStartBlock,\n  isOverlappingSelection,\n  isSelectionCollapsed,\n  isSelectionExpanded,\n} from '@portabletext/editor/selectors'\nimport {getBlockEndPoint, getBlockStartPoint} from '@portabletext/editor/utils'\n\n/**\n * Given the current editor `snapshot` and an `eventSelection` representing\n * where the drag event originates from, calculate the selection in the\n * editor that should be dragged.\n *\n * Duplicated from the editor's internal `getDragSelection` rather than\n * imported: exporting it from core would add permanent public API for what\n * is an implementation detail of this plugin. Built on public selectors\n * only. Keep in sync with\n * `packages/editor/src/selectors/drag-selection.ts`.\n */\nexport function getDragSelection({\n  eventSelection,\n  snapshot,\n}: {\n  eventSelection: NonNullable<EditorSelection>\n  snapshot: EditorSnapshot\n}): NonNullable<EditorSelection> {\n  let dragSelection = eventSelection\n\n  const draggedInlineObject = getFocusInlineObject({\n    ...snapshot,\n    context: {\n      ...snapshot.context,\n      selection: eventSelection,\n    },\n  })\n\n  if (draggedInlineObject) {\n    return dragSelection\n  }\n\n  const draggingCollapsedSelection = isSelectionCollapsed({\n    ...snapshot,\n    context: {\n      ...snapshot.context,\n      selection: eventSelection,\n    },\n  })\n  const draggedTextBlock = getFocusTextBlock({\n    ...snapshot,\n    context: {\n      ...snapshot.context,\n      selection: eventSelection,\n    },\n  })\n  const draggedSpan = getFocusSpan({\n    ...snapshot,\n    context: {\n      ...snapshot.context,\n      selection: eventSelection,\n    },\n  })\n\n  if (draggingCollapsedSelection && draggedTextBlock && draggedSpan) {\n    // Looks like we are dragging an empty span\n    // Let's drag the entire block instead\n    dragSelection = {\n      anchor: getBlockStartPoint({\n        context: snapshot.context,\n        block: draggedTextBlock,\n      }),\n      focus: getBlockEndPoint({\n        context: snapshot.context,\n        block: draggedTextBlock,\n      }),\n    }\n  }\n\n  const selectedBlocks = getFragment(snapshot)\n\n  if (\n    snapshot.context.selection &&\n    isSelectionExpanded(snapshot) &&\n    selectedBlocks.length > 1\n  ) {\n    const selectionStartBlock = getSelectionStartBlock(snapshot)\n    const selectionEndBlock = getSelectionEndBlock(snapshot)\n\n    if (!selectionStartBlock || !selectionEndBlock) {\n      return dragSelection\n    }\n\n    const selectionStartPoint = getBlockStartPoint({\n      context: snapshot.context,\n      block: selectionStartBlock,\n    })\n    const selectionEndPoint = getBlockEndPoint({\n      context: snapshot.context,\n      block: selectionEndBlock,\n    })\n\n    const eventSelectionInsideBlocks = isOverlappingSelection(eventSelection)({\n      ...snapshot,\n      context: {\n        ...snapshot.context,\n        selection: {anchor: selectionStartPoint, focus: selectionEndPoint},\n      },\n    })\n\n    if (eventSelectionInsideBlocks) {\n      dragSelection = {\n        anchor: selectionStartPoint,\n        focus: selectionEndPoint,\n      }\n    }\n  }\n\n  return dragSelection\n}\n","import type {Path} from '@portabletext/editor'\nimport {\n  defineBehavior,\n  effect,\n  forward,\n  type Behavior,\n} from '@portabletext/editor/behaviors'\nimport {BehaviorPlugin} from '@portabletext/editor/plugins'\nimport {\n  getFocusBlock,\n  getSelectedBlocks,\n  isSelectingEntireBlocks,\n} from '@portabletext/editor/selectors'\nimport {isKeyedSegment} from '@portabletext/editor/utils'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useSyncExternalStore,\n  type ReactNode,\n} from 'react'\nimport {getDragSelection} from './drag-selection'\n\n/**\n * The block-relative position a drop would land at.\n *\n * @beta\n */\nexport type DropPosition = {\n  path: Path\n  position: 'start' | 'end'\n}\n\n/**\n * One store per editor: the drag behaviors below maintain the current drop\n * position, and per-path subscriber buckets make notification O(changed\n * paths) rather than O(subscribers). `dragover` fires at mousemove\n * frequency, so only the block losing and the block gaining the indicator\n * re-render.\n */\ntype DropPositionStore = {\n  get: (serializedPath: string) => DropPosition['position'] | undefined\n  subscribeKey: (serializedPath: string, callback: () => void) => () => void\n  set: (next: DropPosition | undefined) => void\n}\n\nfunction createDropPositionStore(): DropPositionStore {\n  let current:\n    | {serializedPath: string; position: DropPosition['position']}\n    | undefined\n  const subscribers = new Map<string, Set<() => void>>()\n\n  function notify(serializedPath: string | undefined) {\n    if (serializedPath === undefined) {\n      return\n    }\n\n    const bucket = subscribers.get(serializedPath)\n\n    if (bucket === undefined) {\n      return\n    }\n\n    for (const callback of bucket) {\n      callback()\n    }\n  }\n\n  return {\n    get: (serializedPath) =>\n      current?.serializedPath === serializedPath ? current.position : undefined,\n    subscribeKey: (serializedPath, callback) => {\n      let bucket = subscribers.get(serializedPath)\n\n      if (bucket === undefined) {\n        bucket = new Set()\n        subscribers.set(serializedPath, bucket)\n      }\n\n      bucket.add(callback)\n\n      return () => {\n        bucket.delete(callback)\n\n        if (bucket.size === 0) {\n          subscribers.delete(serializedPath)\n        }\n      }\n    },\n    set: (next) => {\n      const previous = current\n\n      // Swap before notifying: `useSyncExternalStore` re-reads the snapshot\n      // synchronously on notification and skips the re-render when it reads\n      // an unchanged (stale) value.\n      current = next\n        ? {serializedPath: serializePath(next.path), position: next.position}\n        : undefined\n\n      if (\n        previous?.serializedPath === current?.serializedPath &&\n        previous?.position === current?.position\n      ) {\n        return\n      }\n\n      if (previous?.serializedPath !== current?.serializedPath) {\n        notify(previous?.serializedPath)\n      }\n\n      notify(current?.serializedPath)\n    },\n  }\n}\n\n/**\n * The behaviors observe the public `drag.*` events and `forward` every\n * event they handle: consumer behaviors run before the editor's own drag\n * handling, so omitting the forward would swallow the event and break the\n * drag itself. (The editor's internal drop-position tracking gets away\n * without forwarding because it registers below core priority.)\n */\nfunction createDropPositionBehaviors(\n  setDropPosition: (next: DropPosition | undefined) => void,\n): Array<Behavior> {\n  return [\n    defineBehavior({\n      on: 'drag.dragover',\n      guard: ({snapshot, event}) => {\n        const dropFocusBlock = getFocusBlock({\n          ...snapshot,\n          context: {\n            ...snapshot.context,\n            selection: event.position.selection,\n          },\n        })\n\n        if (!dropFocusBlock) {\n          return false\n        }\n\n        const dragOrigin = event.dragOrigin\n\n        if (!dragOrigin) {\n          return false\n        }\n\n        const dragSelection = getDragSelection({\n          eventSelection: dragOrigin.selection,\n          snapshot,\n        })\n\n        const draggedBlocks = getSelectedBlocks({\n          ...snapshot,\n          context: {\n            ...snapshot.context,\n            selection: dragSelection,\n          },\n        })\n\n        if (\n          draggedBlocks.some(\n            (draggedBlock) =>\n              draggedBlock.node._key === dropFocusBlock.node._key,\n          )\n        ) {\n          return false\n        }\n\n        const draggingEntireBlocks = isSelectingEntireBlocks({\n          ...snapshot,\n          context: {\n            ...snapshot.context,\n            selection: dragSelection,\n          },\n        })\n\n        if (!draggingEntireBlocks) {\n          return false\n        }\n\n        return {dropFocusBlock}\n      },\n      actions: [\n        ({event}, {dropFocusBlock}) => [\n          effect(() => {\n            setDropPosition({\n              path: dropFocusBlock.path,\n              position: event.position.block,\n            })\n          }),\n          forward(event),\n        ],\n      ],\n    }),\n    defineBehavior({\n      on: 'drag.*',\n      guard: ({event}) => event.type !== 'drag.dragover',\n      actions: [\n        ({event}) => [\n          effect(() => {\n            setDropPosition(undefined)\n          }),\n          forward(event),\n        ],\n      ],\n    }),\n  ]\n}\n\nconst DndContext = createContext<DropPositionStore | undefined>(undefined)\n\n/**\n * Tracks the drop position during drag and drop and serves it through\n * context. Mount inside `EditorProvider`, wrapping whatever reads the\n * position:\n *\n * ```tsx\n * <EditorProvider initialConfig={...}>\n *   <DndProvider>\n *     <PortableTextEditable />\n *   </DndProvider>\n * </EditorProvider>\n * ```\n *\n * Reads via {@link useDropPosition} only re-render when the drop position\n * at their own path changes.\n *\n * @beta\n */\nexport function DndProvider(props: {children?: ReactNode}) {\n  const store = useMemo(() => createDropPositionStore(), [])\n  const behaviors = useMemo(\n    () => createDropPositionBehaviors(store.set),\n    [store],\n  )\n\n  useEffect(() => {\n    return () => {\n      // A drag in progress when the provider unmounts never delivers its\n      // clearing event.\n      store.set(undefined)\n    }\n  }, [store])\n\n  return (\n    <DndContext.Provider value={store}>\n      <BehaviorPlugin behaviors={behaviors} />\n      {props.children}\n    </DndContext.Provider>\n  )\n}\n\n/**\n * Read where a drop would land relative to the block at `path`: `'start'`,\n * `'end'`, or `undefined` when no drag is hovering this block. Re-renders\n * only when the position at this path changes.\n *\n * `path` is the keyed block path render callbacks receive, e.g.\n * `[{_key: 'b0'}]`.\n *\n * @beta\n */\nexport function useDropPosition(\n  path: Path,\n): DropPosition['position'] | undefined {\n  const store = useContext(DndContext)\n\n  if (store === undefined) {\n    throw new Error('useDropPosition must be used below a <DndProvider>')\n  }\n\n  // Callers typically pass a fresh `path` array every render, so the\n  // serialized string, not the array, is what keeps `subscribe` stable\n  // below.\n  const serializedPath = serializePath(path)\n\n  const subscribe = useCallback(\n    (callback: () => void) => store.subscribeKey(serializedPath, callback),\n    [store, serializedPath],\n  )\n\n  const getSnapshot = () => store.get(serializedPath)\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n}\n\n/**\n * Serialize a keyed path to a string using Sanity's bracket notation.\n * Duplicated from the editor's internal `serializePath`; see\n * `drag-selection.ts` for the duplication rationale.\n */\nfunction serializePath(path: Path): string {\n  return path.reduce<string>((result, segment, index) => {\n    if (isKeyedSegment(segment)) {\n      return `${result}[_key==\"${segment._key}\"]`\n    }\n\n    const separator = index === 0 ? '' : '.'\n    return `${result}${separator}${segment}`\n  }, '')\n}\n"],"names":["getDragSelection","eventSelection","snapshot","dragSelection","getFocusInlineObject","context","selection","draggingCollapsedSelection","isSelectionCollapsed","draggedTextBlock","getFocusTextBlock","draggedSpan","getFocusSpan","anchor","getBlockStartPoint","block","focus","getBlockEndPoint","selectedBlocks","getFragment","isSelectionExpanded","length","selectionStartBlock","getSelectionStartBlock","selectionEndBlock","getSelectionEndBlock","selectionStartPoint","selectionEndPoint","isOverlappingSelection","createDropPositionStore","current","subscribers","Map","notify","serializedPath","undefined","bucket","get","callback","position","subscribeKey","Set","set","add","delete","size","next","previous","serializePath","path","createDropPositionBehaviors","setDropPosition","defineBehavior","on","guard","event","dropFocusBlock","getFocusBlock","dragOrigin","getSelectedBlocks","some","draggedBlock","node","_key","isSelectingEntireBlocks","actions","effect","forward","type","DndContext","createContext","DndProvider","props","$","_c","t0","Symbol","for","store","t1","behaviors","t2","t3","useEffect","t4","t5","children","useDropPosition","useContext","Error","subscribe","getSnapshot","useSyncExternalStore","reduce","result","segment","index","isKeyedSegment"],"mappings":"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"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@portabletext/plugin-dnd",
+  "version": "1.0.0",
+  "description": "A helper plugin for tracking the drop position during drag and drop",
+  "keywords": [
+    "portabletext",
+    "plugin",
+    "dnd",
+    "drag-and-drop",
+    "drop-indicator"
+  ],
+  "homepage": "https://portabletext.org",
+  "bugs": {
+    "url": "https://github.com/portabletext/editor/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/portabletext/editor.git",
+    "directory": "packages/plugin-dnd"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@sanity/tsconfig": "^2.1.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.8",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "react": "^19.2.5",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vitest": "^4.1.8",
+    "@portabletext/editor": "^7.4.0",
+    "@portabletext/schema": "^2.2.0",
+    "@portabletext/test": "^1.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2",
+    "@portabletext/editor": "^7.4.0"
+  },
+  "engines": {
+    "node": ">=20.19 <22 || >=22.12"
+  },
+  "scripts": {
+    "build": "pkg-utils build --strict --check --clean",
+    "check:lint": "biome lint .",
+    "check:react-compiler": "eslint .",
+    "check:types": "tsc",
+    "check:types:watch": "tsc --watch",
+    "clean": "del .turbo && del dist && del node_modules",
+    "dev": "pkg-utils watch",
+    "lint:fix": "biome lint --write .",
+    "test:browser": "vitest --run --project browser",
+    "test:browser:chromium": "vitest --run --project \"browser (chromium)\"",
+    "test:unit": "vitest --run --project unit",
+    "test:watch": "vitest"
+  }
+}