@portabletext/editor 1.51.0 → 1.52.0

package/lib/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var reactCompilerRuntime = require("react-compiler-runtime"), React = require("react"), useEffectEvent = require("use-effect-event"), useEditor = require("./_chunks-cjs/use-editor.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), noop = require("lodash/noop.js"), slate = require("slate"), slateReact = require("slate-react"), debug$h = require("debug"), util_isEqualSelectionPoints = require("./_chunks-cjs/util.is-equal-selection-points.cjs"), selectionPoint = require("./_chunks-cjs/selection-point.cjs"), selector_isSelectionExpanded = require("./_chunks-cjs/selector.is-selection-expanded.cjs"), selector_isSelectingEntireBlocks = require("./_chunks-cjs/selector.is-selecting-entire-blocks.cjs"), slateDom = require("slate-dom"), util_selectionPointToBlockOffset = require("./_chunks-cjs/util.selection-point-to-block-offset.cjs"), isEqual = require("lodash/isEqual.js"), types = require("@sanity/types"), getRandomValues = require("get-random-values-esm"), behaviors_index = require("./behaviors/index.cjs"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), xstate = require("xstate"), blockTools = require("@portabletext/block-tools"), toHtml = require("@portabletext/to-html"), schema = require("@sanity/schema"), flatten = require("lodash/flatten.js"), omit = require("lodash/omit.js"), util_childSelectionPointToBlockOffset = require("./_chunks-cjs/util.child-selection-point-to-block-offset.cjs"), patches = require("@portabletext/patches"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), immer = require("immer"), startCase = require("lodash.startcase"), isPlainObject = require("lodash/isPlainObject.js");
+var reactCompilerRuntime = require("react-compiler-runtime"), React = require("react"), useEffectEvent = require("use-effect-event"), useEditor = require("./_chunks-cjs/use-editor.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), noop = require("lodash/noop.js"), slate = require("slate"), slateReact = require("slate-react"), debug$h = require("debug"), slateDom = require("slate-dom"), selectionPoint = require("./_chunks-cjs/selection-point.cjs"), util_isEqualSelectionPoints = require("./_chunks-cjs/util.is-equal-selection-points.cjs"), util_selectionPointToBlockOffset = require("./_chunks-cjs/util.selection-point-to-block-offset.cjs"), isEqual = require("lodash/isEqual.js"), types = require("@sanity/types"), selector_isSelectionExpanded = require("./_chunks-cjs/selector.is-selection-expanded.cjs"), selector_isSelectingEntireBlocks = require("./_chunks-cjs/selector.is-selecting-entire-blocks.cjs"), getRandomValues = require("get-random-values-esm"), behaviors_index = require("./behaviors/index.cjs"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), xstate = require("xstate"), blockTools = require("@portabletext/block-tools"), toHtml = require("@portabletext/to-html"), schema = require("@sanity/schema"), flatten = require("lodash/flatten.js"), omit = require("lodash/omit.js"), util_childSelectionPointToBlockOffset = require("./_chunks-cjs/util.child-selection-point-to-block-offset.cjs"), patches = require("@portabletext/patches"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), immer = require("immer"), startCase = require("lodash.startcase"), isPlainObject = require("lodash/isPlainObject.js");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -17,91 +17,12 @@ function EditorEventListener(props) {
   let t1;
   return $[3] !== editor ? (t1 = [editor], $[3] = editor, $[4] = t1) : t1 = $[4], React.useEffect(t0, t1), null;
 }
-function getCompoundClientRect(nodes) {
-  if (nodes.length === 0)
-    return new DOMRect(0, 0, 0, 0);
-  const elements = nodes.filter((node) => node instanceof Element), firstRect = elements.at(0)?.getBoundingClientRect();
-  if (!firstRect)
-    return new DOMRect(0, 0, 0, 0);
-  let left = firstRect.left, top = firstRect.top, right = firstRect.right, bottom = firstRect.bottom;
-  for (let i = 1; i < elements.length; i++) {
-    const rect = elements[i].getBoundingClientRect();
-    left = Math.min(left, rect.left), top = Math.min(top, rect.top), right = Math.max(right, rect.right), bottom = Math.max(bottom, rect.bottom);
-  }
-  return new DOMRect(left, top, right - left, bottom - top);
-}
 const rootName = "sanity-pte:";
 debug__default.default(rootName);
 function debugWithName(name) {
   const namespace = `${rootName}${name}`;
   return debug__default.default && debug__default.default.enabled(namespace) ? debug__default.default(namespace) : debug__default.default(rootName);
 }
-function getDragSelection({
-  eventSelection,
-  snapshot
-}) {
-  let dragSelection = eventSelection;
-  if (selector_isSelectingEntireBlocks.getFocusInlineObject({
-    context: {
-      ...snapshot.context,
-      selection: eventSelection
-    }
-  }))
-    return dragSelection;
-  const draggingCollapsedSelection = selector_isSelectionExpanded.isSelectionCollapsed({
-    context: {
-      ...snapshot.context,
-      selection: eventSelection
-    }
-  }), draggedTextBlock = selector_isSelectionExpanded.getFocusTextBlock({
-    context: {
-      ...snapshot.context,
-      selection: eventSelection
-    }
-  }), draggedSpan = selector_isSelectionExpanded.getFocusSpan({
-    context: {
-      ...snapshot.context,
-      selection: eventSelection
-    }
-  });
-  draggingCollapsedSelection && draggedTextBlock && draggedSpan && (dragSelection = {
-    anchor: selectionPoint.getBlockStartPoint({
-      context: snapshot.context,
-      block: draggedTextBlock
-    }),
-    focus: util_isEqualSelectionPoints.getBlockEndPoint({
-      context: snapshot.context,
-      block: draggedTextBlock
-    })
-  });
-  const selectedBlocks = selector_isSelectionExpanded.getSelectedBlocks(snapshot);
-  if (snapshot.context.selection && selector_isSelectionExpanded.isSelectionExpanded(snapshot) && selectedBlocks.length > 1) {
-    const selectionStartBlock = selector_isSelectionExpanded.getSelectionStartBlock(snapshot), selectionEndBlock = selector_isSelectionExpanded.getSelectionEndBlock(snapshot);
-    if (!selectionStartBlock || !selectionEndBlock)
-      return dragSelection;
-    const selectionStartPoint = selectionPoint.getBlockStartPoint({
-      context: snapshot.context,
-      block: selectionStartBlock
-    }), selectionEndPoint = util_isEqualSelectionPoints.getBlockEndPoint({
-      context: snapshot.context,
-      block: selectionEndBlock
-    });
-    selector_isSelectingEntireBlocks.isOverlappingSelection(eventSelection)({
-      ...snapshot,
-      context: {
-        ...snapshot.context,
-        selection: {
-          anchor: selectionStartPoint,
-          focus: selectionEndPoint
-        }
-      }
-    }) && (dragSelection = {
-      anchor: selectionStartPoint,
-      focus: selectionEndPoint
-    });
-  }
-  return dragSelection;
-}
 const VOID_CHILD_KEY = "void-child";
 function keepObjectEquality(object, keyMap) {
   const value = keyMap[object._key];
@@ -462,81 +383,81 @@ function getEventPosition({
     setup: "setting up"
   }))
     return;
-  const node = getEventNode({
+  const eventNode = getEventNode({
     slateEditor,
     event
   });
-  if (!node)
+  if (!eventNode)
     return;
-  const block = getNodeBlock({
+  const eventBlock = getNodeBlock({
     editor: slateEditor,
     schema: editorActor.getSnapshot().context.schema,
-    node
-  }), positionBlock = getEventPositionBlock({
-    node,
+    node: eventNode
+  }), eventPositionBlock = getEventPositionBlock({
+    node: eventNode,
     slateEditor,
     event
-  }), selection = getEventSelection({
+  }), eventSelection = getEventSelection({
     schema: editorActor.getSnapshot().context.schema,
     slateEditor,
     event
   });
-  if (block && positionBlock && !selection && !slate.Editor.isEditor(node))
+  if (eventBlock && eventPositionBlock && !eventSelection && !slate.Editor.isEditor(eventNode))
     return {
-      block: positionBlock,
+      block: eventPositionBlock,
       isEditor: !1,
       selection: {
         anchor: selectionPoint.getBlockStartPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
+            node: eventBlock,
             path: [{
-              _key: block._key
+              _key: eventBlock._key
             }]
           }
         }),
         focus: util_isEqualSelectionPoints.getBlockEndPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
+            node: eventBlock,
             path: [{
-              _key: block._key
+              _key: eventBlock._key
             }]
           }
         })
       }
     };
-  if (!positionBlock || !selection)
+  if (!eventPositionBlock || !eventSelection)
     return;
-  const focusBlockKey = selectionPoint.getBlockKeyFromSelectionPoint(selection.focus);
-  if (focusBlockKey !== void 0)
-    return util_selectionPointToBlockOffset.isSelectionCollapsed(selection) && block && focusBlockKey !== block._key ? {
-      block: positionBlock,
+  const eventSelectionFocusBlockKey = selectionPoint.getBlockKeyFromSelectionPoint(eventSelection.focus);
+  if (eventSelectionFocusBlockKey !== void 0)
+    return util_selectionPointToBlockOffset.isSelectionCollapsed(eventSelection) && eventBlock && eventSelectionFocusBlockKey !== eventBlock._key ? {
+      block: eventPositionBlock,
       isEditor: !1,
       selection: {
         anchor: selectionPoint.getBlockStartPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
+            node: eventBlock,
             path: [{
-              _key: block._key
+              _key: eventBlock._key
             }]
           }
         }),
         focus: util_isEqualSelectionPoints.getBlockEndPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
+            node: eventBlock,
             path: [{
-              _key: block._key
+              _key: eventBlock._key
             }]
           }
         })
       }
     } : {
-      block: positionBlock,
-      isEditor: slate.Editor.isEditor(node),
-      selection
+      block: eventPositionBlock,
+      isEditor: slate.Editor.isEditor(eventNode),
+      selection: eventSelection
     };
 }
 function getEventNode({
@@ -700,35 +621,6 @@ function normalizeSelection(selection, value) {
     backward: selection.backward
   } : null;
 }
-function getSelectionDomNodes({
-  slateEditor,
-  snapshot
-}) {
-  if (!snapshot.context.selection)
-    return {
-      blockNodes: [],
-      childNodes: []
-    };
-  const range = toSlateRange(snapshot.context.selection, slateEditor);
-  if (!range)
-    return {
-      blockNodes: [],
-      childNodes: []
-    };
-  const blockEntries = Array.from(slate.Editor.nodes(slateEditor, {
-    at: range,
-    mode: "highest",
-    match: (n) => !slate.Editor.isEditor(n)
-  })), childEntries = Array.from(slate.Editor.nodes(slateEditor, {
-    at: range,
-    mode: "lowest",
-    match: (n) => !slate.Editor.isEditor(n) && slateEditor.isTextSpan(n) || !slateEditor.isBlock(n)
-  }));
-  return {
-    blockNodes: blockEntries.map(([blockNode]) => slateDom.DOMEditor.toDOMNode(slateEditor, blockNode)),
-    childNodes: childEntries.map(([childNode]) => slateDom.DOMEditor.toDOMNode(slateEditor, childNode))
-  };
-}
 const IS_PROCESSING_REMOTE_CHANGES = /* @__PURE__ */ new WeakMap(), KEY_TO_SLATE_ELEMENT = /* @__PURE__ */ new WeakMap(), KEY_TO_VALUE_ELEMENT = /* @__PURE__ */ new WeakMap(), SLATE_TO_PORTABLE_TEXT_RANGE = /* @__PURE__ */ new WeakMap(), EditorActorContext = React.createContext({});
 function DropIndicator() {
   const $ = reactCompilerRuntime.c(1);
@@ -771,6 +663,72 @@ function RenderDefaultInlineObject(props) {
     "]"
   ] }), $[1] = props.inlineObject._key, $[2] = props.inlineObject._type, $[3] = t1) : t1 = $[3], t1;
 }
+function getDragSelection({
+  eventSelection,
+  snapshot
+}) {
+  let dragSelection = eventSelection;
+  if (selector_isSelectingEntireBlocks.getFocusInlineObject({
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }))
+    return dragSelection;
+  const draggingCollapsedSelection = selector_isSelectionExpanded.isSelectionCollapsed({
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }), draggedTextBlock = selector_isSelectionExpanded.getFocusTextBlock({
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }), draggedSpan = selector_isSelectionExpanded.getFocusSpan({
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  });
+  draggingCollapsedSelection && draggedTextBlock && draggedSpan && (dragSelection = {
+    anchor: selectionPoint.getBlockStartPoint({
+      context: snapshot.context,
+      block: draggedTextBlock
+    }),
+    focus: util_isEqualSelectionPoints.getBlockEndPoint({
+      context: snapshot.context,
+      block: draggedTextBlock
+    })
+  });
+  const selectedBlocks = selector_isSelectionExpanded.getSelectedBlocks(snapshot);
+  if (snapshot.context.selection && selector_isSelectionExpanded.isSelectionExpanded(snapshot) && selectedBlocks.length > 1) {
+    const selectionStartBlock = selector_isSelectionExpanded.getSelectionStartBlock(snapshot), selectionEndBlock = selector_isSelectionExpanded.getSelectionEndBlock(snapshot);
+    if (!selectionStartBlock || !selectionEndBlock)
+      return dragSelection;
+    const selectionStartPoint = selectionPoint.getBlockStartPoint({
+      context: snapshot.context,
+      block: selectionStartBlock
+    }), selectionEndPoint = util_isEqualSelectionPoints.getBlockEndPoint({
+      context: snapshot.context,
+      block: selectionEndBlock
+    });
+    selector_isSelectingEntireBlocks.isOverlappingSelection(eventSelection)({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: {
+          anchor: selectionStartPoint,
+          focus: selectionEndPoint
+        }
+      }
+    }) && (dragSelection = {
+      anchor: selectionStartPoint,
+      focus: selectionEndPoint
+    });
+  }
+  return dragSelection;
+}
 const defaultKeyGenerator = () => randomKey(12), getByteHexTable = /* @__PURE__ */ (() => {
   let table;
   return () => {
@@ -819,16 +777,22 @@ function createCoreBlockElementBehaviorsConfig({
         });
         if (!dropFocusBlock || dropFocusBlock.node._key !== key)
           return !1;
-        const dragOrigin = snapshot.beta.internalDrag?.origin;
-        return !dragOrigin || selector_isSelectionExpanded.getSelectedBlocks({
+        const dragOrigin = event.dragOrigin;
+        if (!dragOrigin)
+          return !1;
+        const dragSelection = getDragSelection({
+          eventSelection: dragOrigin.selection,
+          snapshot
+        });
+        return selector_isSelectionExpanded.getSelectedBlocks({
           context: {
             ...snapshot.context,
-            selection: dragOrigin.selection
+            selection: dragSelection
           }
         }).some((draggedBlock) => draggedBlock.node._key === key) ? !1 : selector_isSelectingEntireBlocks.isSelectingEntireBlocks({
           context: {
             ...snapshot.context,
-            selection: dragOrigin.selection
+            selection: dragSelection
           }
         });
       },
@@ -1177,7 +1141,7 @@ const converterJson = {
     snapshot,
     event
   }) => {
-    const selection = snapshot.beta.internalDrag?.origin.selection ?? snapshot.context.selection;
+    const selection = snapshot.context.selection;
     if (!selection)
       return {
         type: "serialization.failure",
@@ -1220,11 +1184,7 @@ const converterJson = {
         context: snapshot.context,
         block,
         options: {
-          /**
-           * If we are dragging internally then we would like to keep the
-           * dropped portable text as is.
-           */
-          refreshKeys: !snapshot.beta.internalDrag,
+          refreshKeys: !0,
           validateFields: !1
         }
       });
@@ -1248,7 +1208,7 @@ function createConverterTextHtml(legacySchema) {
       snapshot,
       event
     }) => {
-      const selection = snapshot.beta.internalDrag?.origin.selection ?? snapshot.context.selection;
+      const selection = snapshot.context.selection;
       if (!selection)
         return {
           type: "serialization.failure",
@@ -1319,7 +1279,7 @@ function createConverterTextPlain(legacySchema) {
       snapshot,
       event
     }) => {
-      const selection = snapshot.beta.internalDrag?.origin.selection ?? snapshot.context.selection;
+      const selection = snapshot.context.selection;
       return selection ? {
         type: "serialization.success",
         data: selectionPoint.sliceBlocks({
@@ -1328,7 +1288,7 @@ function createConverterTextPlain(legacySchema) {
             schema: snapshot.context.schema
           },
           blocks: snapshot.context.value
-        }).map((block) => selectionPoint.isTextBlock(snapshot.context, block) ? block.children.map((child) => child._type === snapshot.context.schema.span.name ? child.text : snapshot.beta.internalDrag ? `[${snapshot.context.schema.inlineObjects.find((inlineObjectType) => inlineObjectType.name === child._type)?.title ?? "Object"}]` : "").join("") : snapshot.beta.internalDrag ? `[${snapshot.context.schema.blockObjects.find((blockObjectType) => blockObjectType.name === block._type)?.title ?? "Object"}]` : "").filter((block) => block !== "").join(`
+        }).map((block) => selectionPoint.isTextBlock(snapshot.context, block) ? block.children.map((child) => child._type === snapshot.context.schema.span.name ? child.text : event.originEvent === "drag.dragstart" ? `[${snapshot.context.schema.inlineObjects.find((inlineObjectType) => inlineObjectType.name === child._type)?.title ?? "Object"}]` : "").join("") : event.originEvent === "drag.dragstart" ? `[${snapshot.context.schema.blockObjects.find((blockObjectType) => blockObjectType.name === block._type)?.title ?? "Object"}]` : "").filter((block) => block !== "").join(`
 
 `),
         mimeType: "text/plain",
@@ -1563,8 +1523,7 @@ function getEditorSnapshot({
         decoratorState: slateEditorInstance.decoratorState,
         markState: slateEditorInstance.markState,
         schema: editorActorSnapshot.context.schema
-      }),
-      internalDrag: editorActorSnapshot.context.internalDrag
+      })
     }
   };
 }
@@ -5551,7 +5510,131 @@ const arrowDownOnLonelyBlockObject = behaviors_index.defineBehavior({
       decorator: "code"
     })]]
   })
-}, coreDndBehaviors = [
+};
+function getCompoundClientRect(nodes) {
+  if (nodes.length === 0)
+    return new DOMRect(0, 0, 0, 0);
+  const elements = nodes.filter((node) => node instanceof Element), firstRect = elements.at(0)?.getBoundingClientRect();
+  if (!firstRect)
+    return new DOMRect(0, 0, 0, 0);
+  let left = firstRect.left, top = firstRect.top, right = firstRect.right, bottom = firstRect.bottom;
+  for (let i = 1; i < elements.length; i++) {
+    const rect = elements[i].getBoundingClientRect();
+    left = Math.min(left, rect.left), top = Math.min(top, rect.top), right = Math.max(right, rect.right), bottom = Math.max(bottom, rect.bottom);
+  }
+  return new DOMRect(left, top, right - left, bottom - top);
+}
+const coreDndBehaviors = [
+  /**
+   * Core Behavior that:
+   * 1. Calculates and selects a "drag selection"
+   * 2. Constructs and sets a drag ghost element
+   * 3. Forwards the dragstart event
+   */
+  behaviors_index.defineBehavior({
+    on: "drag.dragstart",
+    guard: ({
+      snapshot,
+      dom,
+      event
+    }) => {
+      const dragSelection = getDragSelection({
+        snapshot,
+        eventSelection: event.position.selection
+      }), selectingEntireBlocks = selector_isSelectingEntireBlocks.isSelectingEntireBlocks({
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
+      }), draggedDomNodes = {
+        blockNodes: dom.getBlockNodes({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: dragSelection
+          }
+        }),
+        childNodes: dom.getChildNodes({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: dragSelection
+          }
+        })
+      };
+      return {
+        dragSelection,
+        draggedDomNodes,
+        selectingEntireBlocks
+      };
+    },
+    actions: [({
+      dom,
+      event
+    }, {
+      dragSelection,
+      draggedDomNodes,
+      selectingEntireBlocks
+    }) => {
+      const dragGhost = document.createElement("div");
+      if (selectingEntireBlocks) {
+        const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) => node.cloneNode(!0));
+        for (const block of clonedBlockNodes)
+          block instanceof HTMLElement && (block.style.position = "relative"), dragGhost.appendChild(block);
+        const customGhost = dragGhost.querySelector("[data-pt-drag-ghost-element]");
+        if (customGhost && dragGhost.replaceChildren(customGhost), dragGhost.setAttribute("data-dragged", ""), dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost), customGhost) {
+          const customGhostRect = customGhost.getBoundingClientRect(), x = event.originEvent.clientX - customGhostRect.left, y = event.originEvent.clientY - customGhostRect.top;
+          return dragGhost.style.width = `${customGhostRect.width}px`, dragGhost.style.height = `${customGhostRect.height}px`, [behaviors_index.raise({
+            type: "select",
+            at: dragSelection
+          }), behaviors_index.effect(() => {
+            dom.setDragGhost({
+              event,
+              ghost: {
+                element: dragGhost,
+                x,
+                y
+              }
+            });
+          }), behaviors_index.forward(event)];
+        } else {
+          const blocksDomRect = getCompoundClientRect(draggedDomNodes.blockNodes), x = event.originEvent.clientX - blocksDomRect.left, y = event.originEvent.clientY - blocksDomRect.top;
+          return dragGhost.style.width = `${blocksDomRect.width}px`, dragGhost.style.height = `${blocksDomRect.height}px`, [behaviors_index.raise({
+            type: "select",
+            at: dragSelection
+          }), behaviors_index.effect(() => {
+            dom.setDragGhost({
+              event,
+              ghost: {
+                element: dragGhost,
+                x,
+                y
+              }
+            });
+          }), behaviors_index.forward(event)];
+        }
+      } else {
+        const clonedChildNodes = draggedDomNodes.childNodes.map((node) => node.cloneNode(!0));
+        for (const child of clonedChildNodes)
+          dragGhost.appendChild(child);
+        dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
+        const childrenDomRect = getCompoundClientRect(draggedDomNodes.childNodes), x = event.originEvent.clientX - childrenDomRect.left, y = event.originEvent.clientY - childrenDomRect.top;
+        return dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, [behaviors_index.raise({
+          type: "select",
+          at: dragSelection
+        }), behaviors_index.effect(() => {
+          dom.setDragGhost({
+            event,
+            ghost: {
+              element: dragGhost,
+              x,
+              y
+            }
+          });
+        }), behaviors_index.forward(event)];
+      }
+    }]
+  }),
   /**
    * When dragging over the drag origin, we don't want to show the caret in the
    * text.
@@ -5562,7 +5645,7 @@ const arrowDownOnLonelyBlockObject = behaviors_index.defineBehavior({
       snapshot,
       event
     }) => {
-      const dragOrigin = snapshot.beta.internalDrag?.origin;
+      const dragOrigin = event.dragOrigin;
       return dragOrigin ? selector_isSelectingEntireBlocks.isOverlappingSelection(event.position.selection)({
         ...snapshot,
         context: {
@@ -5572,6 +5655,121 @@ const arrowDownOnLonelyBlockObject = behaviors_index.defineBehavior({
       }) : !1;
     },
     actions: []
+  }),
+  /**
+   * If the drop position overlaps the drag origin, then the event should be
+   * cancelled.
+   */
+  behaviors_index.defineBehavior({
+    on: "drag.drop",
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      const dragOrigin = event.dragOrigin, dropPosition = event.position.selection;
+      return dragOrigin ? selector_isSelectingEntireBlocks.isOverlappingSelection(dropPosition)({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragOrigin.selection
+        }
+      }) : !1;
+    },
+    actions: []
+  }),
+  /**
+   * If we drop and have access to a drag origin, then we can deserialize
+   * without creating a new selection.
+   */
+  behaviors_index.defineBehavior({
+    on: "drag.drop",
+    guard: ({
+      event
+    }) => event.dragOrigin !== void 0,
+    actions: [({
+      event
+    }) => [behaviors_index.raise({
+      type: "deserialize",
+      originEvent: event
+    })]]
+  }),
+  /**
+   * Otherwise, we should to create a new selection.
+   */
+  behaviors_index.defineBehavior({
+    on: "drag.drop",
+    actions: [({
+      event
+    }) => [behaviors_index.raise({
+      type: "select",
+      at: event.position.selection
+    }), behaviors_index.raise({
+      type: "deserialize",
+      originEvent: event
+    })]]
+  }),
+  /**
+   * Core Behavior that uses the drag origin to mimic a move operation during
+   * internal dragging.
+   */
+  behaviors_index.defineBehavior({
+    on: "deserialization.success",
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      if (event.originEvent.type !== "drag.drop" || event.originEvent.dragOrigin === void 0)
+        return !1;
+      const dragOrigin = event.originEvent.dragOrigin, dragSelection = getDragSelection({
+        eventSelection: dragOrigin.selection,
+        snapshot
+      }), dropPosition = event.originEvent.position.selection, droppingOnDragOrigin = dragOrigin ? selector_isSelectingEntireBlocks.isOverlappingSelection(dropPosition)({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
+      }) : !1, draggingEntireBlocks = selector_isSelectingEntireBlocks.isSelectingEntireBlocks({
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
+      }), draggedBlocks = selector_isSelectionExpanded.getSelectedBlocks({
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
+      });
+      return droppingOnDragOrigin ? !1 : {
+        dropPosition,
+        draggingEntireBlocks,
+        draggedBlocks,
+        dragOrigin,
+        originEvent: event.originEvent
+      };
+    },
+    actions: [({
+      event
+    }, {
+      draggingEntireBlocks,
+      draggedBlocks,
+      dragOrigin,
+      dropPosition,
+      originEvent
+    }) => [...draggingEntireBlocks ? draggedBlocks.map((block) => behaviors_index.raise({
+      type: "delete.block",
+      at: block.path
+    })) : [behaviors_index.raise({
+      type: "delete",
+      at: dragOrigin.selection
+    })], behaviors_index.raise({
+      type: "select",
+      at: dropPosition
+    }), behaviors_index.raise({
+      type: "insert.blocks",
+      blocks: event.data,
+      placement: draggingEntireBlocks ? originEvent.position.block === "start" ? "before" : originEvent.position.block === "end" ? "after" : "auto" : "auto"
+    })]]
   })
 ], breakingAtTheEndOfTextBlock = behaviors_index.defineBehavior({
   on: "insert.break",
@@ -5834,7 +6032,52 @@ const arrowDownOnLonelyBlockObject = behaviors_index.defineBehavior({
 }, coreBehaviorsConfig = [coreAnnotationBehaviors.addAnnotationOnCollapsedSelection, coreDecoratorBehaviors.strongShortcut, coreDecoratorBehaviors.emShortcut, coreDecoratorBehaviors.underlineShortcut, coreDecoratorBehaviors.codeShortcut, ...coreDndBehaviors, coreBlockObjectBehaviors.clickingAboveLonelyBlockObject, coreBlockObjectBehaviors.clickingBelowLonelyBlockObject, coreBlockObjectBehaviors.arrowDownOnLonelyBlockObject, coreBlockObjectBehaviors.arrowUpOnLonelyBlockObject, coreBlockObjectBehaviors.breakingBlockObject, coreBlockObjectBehaviors.deletingEmptyTextBlockAfterBlockObject, coreBlockObjectBehaviors.deletingEmptyTextBlockBeforeBlockObject, coreListBehaviors.clearListOnBackspace, coreListBehaviors.unindentListOnBackspace, coreListBehaviors.clearListOnEnter, coreListBehaviors.indentListOnTab, coreListBehaviors.unindentListOnShiftTab, coreInsertBreakBehaviors.breakingAtTheEndOfTextBlock, coreInsertBreakBehaviors.breakingAtTheStartOfTextBlock, coreInsertBreakBehaviors.breakingEntireDocument, coreInsertBreakBehaviors.breakingEntireBlocks].map((behavior) => ({
   behavior,
   priority: corePriority
-})), abstractAnnotationBehaviors = [behaviors_index.defineBehavior({
+}));
+function createEditorDom(sendBack, slateEditor) {
+  return {
+    getBlockNodes: (snapshot) => getBlockNodes(slateEditor, snapshot),
+    getChildNodes: (snapshot) => getChildNodes(slateEditor, snapshot),
+    setDragGhost: ({
+      event,
+      ghost
+    }) => setDragGhost({
+      sendBack,
+      event,
+      ghost
+    })
+  };
+}
+function getBlockNodes(slateEditor, snapshot) {
+  if (!snapshot.context.selection)
+    return [];
+  const range = toSlateRange(snapshot.context.selection, slateEditor);
+  return range ? Array.from(slate.Editor.nodes(slateEditor, {
+    at: range,
+    mode: "highest",
+    match: (n) => !slate.Editor.isEditor(n)
+  })).map(([blockNode]) => slateDom.DOMEditor.toDOMNode(slateEditor, blockNode)) : [];
+}
+function getChildNodes(slateEditor, snapshot) {
+  if (!snapshot.context.selection)
+    return [];
+  const range = toSlateRange(snapshot.context.selection, slateEditor);
+  return range ? Array.from(slate.Editor.nodes(slateEditor, {
+    at: range,
+    mode: "lowest",
+    match: (n) => !slate.Editor.isEditor(n)
+  })).map(([childNode]) => slateDom.DOMEditor.toDOMNode(slateEditor, childNode)) : [];
+}
+function setDragGhost({
+  sendBack,
+  event,
+  ghost
+}) {
+  event.originEvent.dataTransfer.setDragImage(ghost.element, ghost.x, ghost.y), sendBack({
+    type: "set drag ghost",
+    ghost: ghost.element
+  });
+}
+const abstractAnnotationBehaviors = [behaviors_index.defineBehavior({
   on: "annotation.toggle",
   guard: ({
     snapshot,
@@ -6570,86 +6813,6 @@ const arrowDownOnLonelyBlockObject = behaviors_index.defineBehavior({
       }
     }]]
   }),
-  behaviors_index.defineBehavior({
-    on: "drag.drop",
-    guard: ({
-      snapshot,
-      event
-    }) => {
-      const dragOrigin = snapshot.beta.internalDrag?.origin, dropPosition = event.position.selection;
-      return dragOrigin ? selector_isSelectingEntireBlocks.isOverlappingSelection(dropPosition)({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: dragOrigin.selection
-        }
-      }) : !1;
-    },
-    actions: []
-  }),
-  behaviors_index.defineBehavior({
-    on: "drag.drop",
-    actions: [({
-      event
-    }) => [behaviors_index.raise({
-      type: "select",
-      at: event.position.selection
-    }), behaviors_index.raise({
-      type: "deserialize",
-      originEvent: event
-    })]]
-  }),
-  behaviors_index.defineBehavior({
-    on: "deserialization.success",
-    guard: ({
-      snapshot,
-      event
-    }) => {
-      if (event.originEvent.type !== "drag.drop" || snapshot.beta.internalDrag === void 0)
-        return !1;
-      const dragOrigin = snapshot.beta.internalDrag.origin, dropPosition = event.originEvent.position.selection, droppingOnDragOrigin = dragOrigin ? selector_isSelectingEntireBlocks.isOverlappingSelection(dropPosition)({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: dragOrigin.selection
-        }
-      }) : !1, draggingEntireBlocks = selector_isSelectingEntireBlocks.isSelectingEntireBlocks({
-        context: {
-          ...snapshot.context,
-          selection: dragOrigin.selection
-        }
-      }), draggedBlocks = selector_isSelectionExpanded.getSelectedBlocks({
-        context: {
-          ...snapshot.context,
-          selection: dragOrigin.selection
-        }
-      });
-      return droppingOnDragOrigin ? !1 : {
-        draggingEntireBlocks,
-        draggedBlocks,
-        dragOrigin,
-        originEvent: event.originEvent
-      };
-    },
-    actions: [({
-      event
-    }, {
-      draggingEntireBlocks,
-      draggedBlocks,
-      dragOrigin,
-      originEvent
-    }) => [...draggingEntireBlocks ? draggedBlocks.map((block) => behaviors_index.raise({
-      type: "delete.block",
-      at: block.path
-    })) : [behaviors_index.raise({
-      type: "delete",
-      at: dragOrigin.selection
-    })], behaviors_index.raise({
-      type: "insert.blocks",
-      blocks: event.data,
-      placement: draggingEntireBlocks ? originEvent.position.block === "start" ? "before" : originEvent.position.block === "end" ? "after" : "auto" : "auto"
-    })]]
-  }),
   /**
    * If we are pasting text/plain into a text block then we can probably
    * assume that the intended behavior is that the pasted text inherits
@@ -6801,7 +6964,8 @@ function performEvent({
   keyGenerator,
   schema: schema2,
   getSnapshot,
-  nativeEvent
+  nativeEvent,
+  sendBack
 }) {
   debug$9(`(${mode}:${eventCategory(event)})`, JSON.stringify(event, null, 2));
   const eventBehaviors = [...remainingEventBehaviors, ...abstractBehaviors].filter((behavior) => {
@@ -6833,7 +6997,8 @@ function performEvent({
     try {
       shouldRun = eventBehavior.guard === void 0 || eventBehavior.guard({
         snapshot: guardSnapshot,
-        event
+        event,
+        dom: createEditorDom(sendBack, editor)
       });
     } catch (error) {
       console.error(new Error(`Evaluating guard for "${event.type}" failed due to: ${error.message}`));
@@ -6846,7 +7011,8 @@ function performEvent({
         try {
           actions = actionSet({
             snapshot: actionsSnapshot,
-            event
+            event,
+            dom: createEditorDom(sendBack, editor)
           }, shouldRun);
         } catch (error) {
           console.error(new Error(`Evaluating actions for "${event.type}" failed due to: ${error.message}`));
@@ -6875,7 +7041,8 @@ function performEvent({
                     keyGenerator,
                     schema: schema2,
                     getSnapshot,
-                    nativeEvent
+                    nativeEvent,
+                    sendBack
                   });
                   continue;
                 }
@@ -6889,7 +7056,8 @@ function performEvent({
                     keyGenerator,
                     schema: schema2,
                     getSnapshot,
-                    nativeEvent
+                    nativeEvent,
+                    sendBack
                   });
                   continue;
                 }
@@ -6902,7 +7070,8 @@ function performEvent({
                   keyGenerator,
                   schema: schema2,
                   getSnapshot,
-                  nativeEvent: void 0
+                  nativeEvent: void 0,
+                  sendBack
                 });
               }
             });
@@ -6929,7 +7098,8 @@ function performEvent({
                 keyGenerator,
                 schema: schema2,
                 getSnapshot,
-                nativeEvent
+                nativeEvent,
+                sendBack
               });
               continue;
             }
@@ -6943,7 +7113,8 @@ function performEvent({
                 keyGenerator,
                 schema: schema2,
                 getSnapshot,
-                nativeEvent
+                nativeEvent,
+                sendBack
               });
               continue;
             }
@@ -7015,8 +7186,7 @@ function createEditorSnapshot({
   editor,
   keyGenerator,
   readOnly,
-  schema: schema2,
-  internalDrag
+  schema: schema2
 }) {
   const selection = editor.selection ? slateRangeToSelection({
     schema: schema2,
@@ -7041,8 +7211,7 @@ function createEditorSnapshot({
         decoratorState: editor.decoratorState,
         markState: editor.markState,
         schema: schema2
-      }),
-      internalDrag
+      })
     }
   };
 }
@@ -7164,10 +7333,10 @@ const debug$8 = debugWithName("editor machine"), editorMachine = xstate.setup({
             readOnly: self.getSnapshot().matches({
               "edit mode": "read only"
             }),
-            schema: context.schema,
-            internalDrag: context.internalDrag
+            schema: context.schema
           }),
-          nativeEvent: event.nativeEvent
+          nativeEvent: event.nativeEvent,
+          sendBack: (event2) => self.send(event2)
         });
       } catch (error) {
         console.error(new Error(`Raising "${event.behaviorEvent.type}" failed due to: ${error.message}`));
@@ -7221,6 +7390,13 @@ const debug$8 = debugWithName("editor machine"), editorMachine = xstate.setup({
         ...event,
         type: "selection"
       }))]
+    },
+    "set drag ghost": {
+      actions: xstate.assign({
+        dragGhost: ({
+          event
+        }) => event.ghost
+      })
     }
   },
   type: "parallel",
@@ -7315,7 +7491,6 @@ const debug$8 = debugWithName("editor machine"), editorMachine = xstate.setup({
                     internalDrag: ({
                       event
                     }) => ({
-                      ghost: event.ghost,
                       origin: event.origin
                     })
                   })],
@@ -7365,13 +7540,15 @@ const debug$8 = debugWithName("editor machine"), editorMachine = xstate.setup({
               }, ({
                 context
               }) => {
-                if (context.internalDrag?.ghost)
+                if (context.dragGhost)
                   try {
-                    context.internalDrag.ghost.parentNode?.removeChild(context.internalDrag.ghost);
+                    context.dragGhost.parentNode?.removeChild(context.dragGhost);
                   } catch (error) {
-                    console.error(new Error(`Removing the internal drag ghost failed due to: ${error.message}`));
+                    console.error(new Error(`Removing the drag ghost failed due to: ${error.message}`));
                   }
               }, xstate.assign({
+                dragGhost: void 0
+              }), xstate.assign({
                 internalDrag: void 0
               })],
               tags: ["dragging internally"],
@@ -10752,73 +10929,19 @@ const debug = debugWithName("component:Editable"), PortableTextEditable = React.
       console.warn("Could not find position for dragstart event");
       return;
     }
-    const snapshot = getEditorSnapshot({
-      editorActorSnapshot: editorActor.getSnapshot(),
-      slateEditorInstance: slateEditor
-    }), dragSelection = getDragSelection({
-      eventSelection: position_4.selection,
-      snapshot
-    }), selectingEntireBlocks = selector_isSelectingEntireBlocks.isSelectingEntireBlocks({
-      context: {
-        ...snapshot.context,
-        selection: dragSelection
-      }
-    }), dragGhost = document.createElement("div"), draggedDomNodes = getSelectionDomNodes({
-      snapshot: {
-        context: {
-          ...snapshot.context,
-          selection: dragSelection
-        }
-      },
-      slateEditor
-    });
-    if (selectingEntireBlocks) {
-      const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) => node.cloneNode(!0));
-      for (const block of clonedBlockNodes)
-        block instanceof HTMLElement && (block.style.position = "relative"), dragGhost.appendChild(block);
-      const customGhost = dragGhost.querySelector("[data-pt-drag-ghost-element]");
-      if (customGhost && dragGhost.replaceChildren(customGhost), dragGhost.setAttribute("data-dragged", ""), dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost), customGhost) {
-        const customGhostRect = customGhost.getBoundingClientRect(), x = event_8.clientX - customGhostRect.left, y = event_8.clientY - customGhostRect.top;
-        dragGhost.style.width = `${customGhostRect.width}px`, dragGhost.style.height = `${customGhostRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x, y);
-      } else {
-        const blocksDomRect = getCompoundClientRect(draggedDomNodes.blockNodes), x_0 = event_8.clientX - blocksDomRect.left, y_0 = event_8.clientY - blocksDomRect.top;
-        dragGhost.style.width = `${blocksDomRect.width}px`, dragGhost.style.height = `${blocksDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_0, y_0);
-      }
-    } else {
-      const clonedChildNodes = draggedDomNodes.childNodes.map((node_0) => node_0.cloneNode(!0));
-      for (const child of clonedChildNodes)
-        dragGhost.appendChild(child);
-      dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
-      const childrenDomRect = getCompoundClientRect(draggedDomNodes.childNodes), x_1 = event_8.clientX - childrenDomRect.left, y_1 = event_8.clientY - childrenDomRect.top;
-      dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_1, y_1);
-    }
     return editorActor.send({
-      type: "behavior event",
-      behaviorEvent: {
-        type: "select",
-        at: util_selectionPointToBlockOffset.isSelectionCollapsed(dragSelection) ? dragSelection : {
-          anchor: selectionPoint.getSelectionEndPoint(dragSelection),
-          focus: selectionPoint.getSelectionEndPoint(dragSelection),
-          backward: !1
-        }
-      },
-      editor: slateEditor
-    }), editorActor.send({
       type: "dragstart",
-      origin: {
-        selection: dragSelection
-      },
-      ghost: dragGhost
+      origin: position_4
     }), editorActor.send({
       type: "behavior event",
       behaviorEvent: {
         type: "drag.dragstart",
         originEvent: {
+          clientX: event_8.clientX,
+          clientY: event_8.clientY,
           dataTransfer: event_8.dataTransfer
         },
-        position: {
-          selection: dragSelection
-        }
+        position: position_4
       },
       editor: slateEditor
     }), !0;
@@ -10886,6 +11009,7 @@ const debug = debugWithName("component:Editable"), PortableTextEditable = React.
           originEvent: {
             dataTransfer: event_12.dataTransfer
           },
+          dragOrigin: editorActor.getSnapshot().context.internalDrag?.origin,
           position: position_7
         },
         editor: slateEditor,
@@ -10910,6 +11034,7 @@ const debug = debugWithName("component:Editable"), PortableTextEditable = React.
         originEvent: {
           dataTransfer: event_13.dataTransfer
         },
+        dragOrigin: editorActor.getSnapshot().context.internalDrag?.origin,
         position: position_8
       },
       editor: slateEditor,