@portabletext/editor 1.50.8 → 1.52.0

package/lib/index.js

@@ -8,16 +8,16 @@ import noop from "lodash/noop.js";
 import { Element as Element$1, Text, Range, Editor, Node, Point, Transforms, Path, Operation, createEditor } from "slate";
 import { useSlateStatic, useSelected, withReact, ReactEditor, Slate, useSlate, Editable } from "slate-react";
 import debug$h from "debug";
-import { getBlockEndPoint, isEmptyTextBlock, isEqualSelectionPoints } from "./_chunks-es/util.is-equal-selection-points.js";
-import { getBlockStartPoint, isKeyedSegment, parseInlineObject, parseTextBlock, parseBlockObject, parseBlock, sliceBlocks, isTextBlock, parseAnnotation, blockOffsetToSpanSelectionPoint, isSpan$1 as isSpan, isListBlock, isTypedObject, getTextBlockText, parseBlocks } from "./_chunks-es/util.slice-blocks.js";
-import { isSelectionCollapsed, getFocusTextBlock, getFocusSpan as getFocusSpan$1, getSelectedBlocks, isSelectionExpanded, getSelectionStartBlock as getSelectionStartBlock$1, getSelectionEndBlock as getSelectionEndBlock$1, getFocusBlock as getFocusBlock$1, getFocusBlockObject, getPreviousBlock, getNextBlock, getFirstBlock as getFirstBlock$1, getLastBlock as getLastBlock$1, getFocusListBlock } from "./_chunks-es/selector.is-selection-expanded.js";
-import { getFocusInlineObject, isOverlappingSelection, isSelectingEntireBlocks, getTrimmedSelection, getCaretWordSelection, isAtTheEndOfBlock, isAtTheStartOfBlock, isActiveAnnotation, isActiveDecorator, getSelectedTextBlocks, isActiveListItem, isActiveStyle, getActiveAnnotations as getActiveAnnotations$1 } from "./_chunks-es/selector.is-selecting-entire-blocks.js";
 import { DOMEditor, isDOMNode } from "slate-dom";
-import { isSelectionCollapsed as isSelectionCollapsed$1, selectionPointToBlockOffset, getSelectionStartPoint, getSelectionEndPoint } from "./_chunks-es/util.selection-point-to-block-offset.js";
+import { getBlockStartPoint, getBlockKeyFromSelectionPoint, parseInlineObject, parseTextBlock, parseBlockObject, parseBlock, sliceBlocks, isTextBlock, parseAnnotation, blockOffsetToSpanSelectionPoint, isKeyedSegment, isSpan$1 as isSpan, isListBlock, isTypedObject, getSelectionStartPoint, getSelectionEndPoint, getTextBlockText, parseBlocks } from "./_chunks-es/selection-point.js";
+import { getBlockEndPoint, isEmptyTextBlock, isEqualSelectionPoints } from "./_chunks-es/util.is-equal-selection-points.js";
+import { isSelectionCollapsed, selectionPointToBlockOffset } from "./_chunks-es/util.selection-point-to-block-offset.js";
 import isEqual from "lodash/isEqual.js";
 import { isKeySegment, defineType, defineField, isPortableTextSpan as isPortableTextSpan$1 } from "@sanity/types";
+import { isSelectionCollapsed as isSelectionCollapsed$1, getFocusTextBlock, getFocusSpan as getFocusSpan$1, getSelectedBlocks, isSelectionExpanded, getSelectionStartBlock as getSelectionStartBlock$1, getSelectionEndBlock as getSelectionEndBlock$1, getFocusBlock as getFocusBlock$1, getFocusBlockObject, getPreviousBlock, getNextBlock, getFirstBlock as getFirstBlock$1, getLastBlock as getLastBlock$1, getFocusListBlock } from "./_chunks-es/selector.is-selection-expanded.js";
+import { getFocusInlineObject, isOverlappingSelection, isSelectingEntireBlocks, getTrimmedSelection, getCaretWordSelection, isAtTheEndOfBlock, isAtTheStartOfBlock, isActiveAnnotation, isActiveDecorator, getSelectedTextBlocks, isActiveListItem, isActiveStyle, getActiveAnnotations as getActiveAnnotations$1 } from "./_chunks-es/selector.is-selecting-entire-blocks.js";
 import getRandomValues from "get-random-values-esm";
-import { defineBehavior, forward, raise } from "./behaviors/index.js";
+import { defineBehavior, forward, raise, effect } from "./behaviors/index.js";
 import uniq from "lodash/uniq.js";
 import { Subject } from "rxjs";
 import { setup, assign, enqueueActions, emit, assertEvent, stateIn, fromCallback, and, not, raise as raise$1, createActor } from "xstate";
@@ -46,91 +46,12 @@ function EditorEventListener(props) {
   let t1;
   return $[3] !== editor ? (t1 = [editor], $[3] = editor, $[4] = t1) : t1 = $[4], 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$h(rootName);
 function debugWithName(name) {
   const namespace = `${rootName}${name}`;
   return debug$h && debug$h.enabled(namespace) ? debug$h(namespace) : debug$h(rootName);
 }
-function getDragSelection({
-  eventSelection,
-  snapshot
-}) {
-  let dragSelection = eventSelection;
-  if (getFocusInlineObject({
-    context: {
-      ...snapshot.context,
-      selection: eventSelection
-    }
-  }))
-    return dragSelection;
-  const draggingCollapsedSelection = isSelectionCollapsed({
-    context: {
-      ...snapshot.context,
-      selection: eventSelection
-    }
-  }), draggedTextBlock = getFocusTextBlock({
-    context: {
-      ...snapshot.context,
-      selection: eventSelection
-    }
-  }), draggedSpan = getFocusSpan$1({
-    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 = getSelectedBlocks(snapshot);
-  if (snapshot.context.selection && isSelectionExpanded(snapshot) && selectedBlocks.length > 1) {
-    const selectionStartBlock = getSelectionStartBlock$1(snapshot), selectionEndBlock = getSelectionEndBlock$1(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;
-}
 const VOID_CHILD_KEY = "void-child";
 function keepObjectEquality(object, keyMap) {
   const value = keyMap[object._key];
@@ -491,81 +412,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 && !Editor.isEditor(node))
+  if (eventBlock && eventPositionBlock && !eventSelection && !Editor.isEditor(eventNode))
     return {
-      block: positionBlock,
+      block: eventPositionBlock,
       isEditor: !1,
       selection: {
         anchor: getBlockStartPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
+            node: eventBlock,
             path: [{
-              _key: block._key
+              _key: eventBlock._key
             }]
           }
         }),
         focus: 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 focusBlockPath = selection.focus.path.at(0), focusBlockKey = isKeyedSegment(focusBlockPath) ? focusBlockPath._key : void 0;
-  if (focusBlockKey)
-    return isSelectionCollapsed$1(selection) && block && focusBlockKey !== block._key ? {
-      block: positionBlock,
+  const eventSelectionFocusBlockKey = getBlockKeyFromSelectionPoint(eventSelection.focus);
+  if (eventSelectionFocusBlockKey !== void 0)
+    return isSelectionCollapsed(eventSelection) && eventBlock && eventSelectionFocusBlockKey !== eventBlock._key ? {
+      block: eventPositionBlock,
       isEditor: !1,
       selection: {
         anchor: getBlockStartPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
+            node: eventBlock,
             path: [{
-              _key: block._key
+              _key: eventBlock._key
             }]
           }
         }),
         focus: getBlockEndPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
+            node: eventBlock,
             path: [{
-              _key: block._key
+              _key: eventBlock._key
             }]
           }
         })
       }
     } : {
-      block: positionBlock,
-      isEditor: Editor.isEditor(node),
-      selection
+      block: eventPositionBlock,
+      isEditor: Editor.isEditor(eventNode),
+      selection: eventSelection
     };
 }
 function getEventNode({
@@ -729,35 +650,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(Editor.nodes(slateEditor, {
-    at: range,
-    mode: "highest",
-    match: (n) => !Editor.isEditor(n)
-  })), childEntries = Array.from(Editor.nodes(slateEditor, {
-    at: range,
-    mode: "lowest",
-    match: (n) => !Editor.isEditor(n) && slateEditor.isTextSpan(n) || !slateEditor.isBlock(n)
-  }));
-  return {
-    blockNodes: blockEntries.map(([blockNode]) => DOMEditor.toDOMNode(slateEditor, blockNode)),
-    childNodes: childEntries.map(([childNode]) => 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 = createContext({});
 function DropIndicator() {
   const $ = c(1);
@@ -800,6 +692,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 (getFocusInlineObject({
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }))
+    return dragSelection;
+  const draggingCollapsedSelection = isSelectionCollapsed$1({
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }), draggedTextBlock = getFocusTextBlock({
+    context: {
+      ...snapshot.context,
+      selection: eventSelection
+    }
+  }), draggedSpan = getFocusSpan$1({
+    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 = getSelectedBlocks(snapshot);
+  if (snapshot.context.selection && isSelectionExpanded(snapshot) && selectedBlocks.length > 1) {
+    const selectionStartBlock = getSelectionStartBlock$1(snapshot), selectionEndBlock = getSelectionEndBlock$1(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;
+}
 const defaultKeyGenerator = () => randomKey(12), getByteHexTable = /* @__PURE__ */ (() => {
   let table;
   return () => {
@@ -848,16 +806,22 @@ function createCoreBlockElementBehaviorsConfig({
         });
         if (!dropFocusBlock || dropFocusBlock.node._key !== key)
           return !1;
-        const dragOrigin = snapshot.beta.internalDrag?.origin;
-        return !dragOrigin || getSelectedBlocks({
+        const dragOrigin = event.dragOrigin;
+        if (!dragOrigin)
+          return !1;
+        const dragSelection = getDragSelection({
+          eventSelection: dragOrigin.selection,
+          snapshot
+        });
+        return getSelectedBlocks({
           context: {
             ...snapshot.context,
-            selection: dragOrigin.selection
+            selection: dragSelection
           }
         }).some((draggedBlock) => draggedBlock.node._key === key) ? !1 : isSelectingEntireBlocks({
           context: {
             ...snapshot.context,
-            selection: dragOrigin.selection
+            selection: dragSelection
           }
         });
       },
@@ -1206,7 +1170,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",
@@ -1249,11 +1213,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.hasTag?.("dragging internally"),
+          refreshKeys: !0,
           validateFields: !1
         }
       });
@@ -1277,7 +1237,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",
@@ -1348,7 +1308,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: sliceBlocks({
@@ -1357,7 +1317,7 @@ function createConverterTextPlain(legacySchema) {
             schema: snapshot.context.schema
           },
           blocks: snapshot.context.value
-        }).map((block) => isTextBlock(snapshot.context, block) ? block.children.map((child) => child._type === snapshot.context.schema.span.name ? child.text : snapshot.beta.hasTag("dragging internally") ? `[${snapshot.context.schema.inlineObjects.find((inlineObjectType) => inlineObjectType.name === child._type)?.title ?? "Object"}]` : "").join("") : snapshot.beta.hasTag("dragging internally") ? `[${snapshot.context.schema.blockObjects.find((blockObjectType) => blockObjectType.name === block._type)?.title ?? "Object"}]` : "").filter((block) => block !== "").join(`
+        }).map((block) => 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",
@@ -1592,9 +1552,7 @@ function getEditorSnapshot({
         decoratorState: slateEditorInstance.decoratorState,
         markState: slateEditorInstance.markState,
         schema: editorActorSnapshot.context.schema
-      }),
-      hasTag: (tag) => editorActorSnapshot.hasTag(tag),
-      internalDrag: editorActorSnapshot.context.internalDrag
+      })
     }
   };
 }
@@ -3209,12 +3167,12 @@ const addAnnotationOperationImplementation = ({
 }, deleteOperationImplementation = ({
   operation
 }) => {
-  const anchorBlockPath = isKeyedSegment(operation.at.anchor.path[0]) ? getBlockPath({
+  const anchorBlockKey = getBlockKeyFromSelectionPoint(operation.at.anchor), focusBlockKey = getBlockKeyFromSelectionPoint(operation.at.focus), anchorBlockPath = anchorBlockKey !== void 0 ? getBlockPath({
     editor: operation.editor,
-    _key: operation.at.anchor.path[0]._key
-  }) : void 0, focusBlockPath = isKeyedSegment(operation.at.focus.path[0]) ? getBlockPath({
+    _key: anchorBlockKey
+  }) : void 0, focusBlockPath = focusBlockKey !== void 0 ? getBlockPath({
     editor: operation.editor,
-    _key: operation.at.focus.path[0]._key
+    _key: focusBlockKey
   }) : void 0;
   if (operation.at.anchor.path.length === 1 && operation.at.focus.path.length === 1 && anchorBlockPath && focusBlockPath && anchorBlockPath[0] === focusBlockPath[0]) {
     Transforms.removeNodes(operation.editor, {
@@ -3351,8 +3309,7 @@ function insertBlock({
     else if (placement === "after") {
       const nextPath = lastBlockPath ? [lastBlockPath[0] + 1] : [0];
       Transforms.insertNodes(editor, [block], {
-        at: nextPath,
-        select: !1
+        at: nextPath
       }), select === "start" ? Transforms.select(editor, Editor.start(editor, nextPath)) : select === "end" && Transforms.select(editor, Editor.end(editor, nextPath));
     } else {
       if (lastBlock && isEqualToEmptyEditor([lastBlock], schema)) {
@@ -3465,7 +3422,9 @@ function insertBlock({
           editor
         });
         if (focusChild && editor.isTextSpan(focusChild))
-          Transforms.insertFragment(editor, [block], {
+          Transforms.splitNodes(editor, {
+            at: currentSelection2
+          }), Transforms.insertFragment(editor, [block], {
             at: currentSelection2
           }), select === "start" || select === "end" ? Transforms.select(editor, [endBlockPath[0] + 1]) : Transforms.select(editor, currentSelection2);
         else {
@@ -5203,7 +5162,7 @@ const addAnnotationOnCollapsedSelection = defineBehavior({
   guard: ({
     snapshot
   }) => {
-    if (!isSelectionCollapsed(snapshot))
+    if (!isSelectionCollapsed$1(snapshot))
       return !1;
     const caretWordSelection = getCaretWordSelection(snapshot);
     return !caretWordSelection || !isSelectionExpanded({
@@ -5346,7 +5305,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     snapshot,
     event
   }) => {
-    if (!isHotkey("ArrowDown", event.originEvent) || !isSelectionCollapsed(snapshot))
+    if (!isHotkey("ArrowDown", event.originEvent) || !isSelectionCollapsed$1(snapshot))
       return !1;
     const focusBlockObject = getFocusBlockObject(snapshot), nextBlock = getNextBlock(snapshot);
     return focusBlockObject && !nextBlock;
@@ -5366,7 +5325,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     snapshot,
     event
   }) => {
-    if (!isHotkey("ArrowUp", event.originEvent) || !isSelectionCollapsed(snapshot))
+    if (!isHotkey("ArrowUp", event.originEvent) || !isSelectionCollapsed$1(snapshot))
       return !1;
     const focusBlockObject = getFocusBlockObject(snapshot), previousBlock = getPreviousBlock(snapshot);
     return focusBlockObject && !previousBlock;
@@ -5386,7 +5345,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     snapshot
   }) => {
     const focusBlockObject = getFocusBlockObject(snapshot);
-    return isSelectionCollapsed(snapshot) && focusBlockObject !== void 0;
+    return isSelectionCollapsed$1(snapshot) && focusBlockObject !== void 0;
   },
   actions: [({
     snapshot
@@ -5403,7 +5362,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     snapshot,
     event
   }) => {
-    if (snapshot.context.readOnly || snapshot.context.selection && !isSelectionCollapsed(snapshot))
+    if (snapshot.context.readOnly || snapshot.context.selection && !isSelectionCollapsed$1(snapshot))
       return !1;
     const focusBlockObject = getFocusBlockObject({
       context: {
@@ -5438,7 +5397,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     snapshot,
     event
   }) => {
-    if (snapshot.context.readOnly || snapshot.context.selection && !isSelectionCollapsed(snapshot))
+    if (snapshot.context.readOnly || snapshot.context.selection && !isSelectionCollapsed$1(snapshot))
       return !1;
     const focusBlockObject = getFocusBlockObject({
       context: {
@@ -5472,7 +5431,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
   guard: ({
     snapshot
   }) => {
-    const focusTextBlock = getFocusTextBlock(snapshot), selectionCollapsed = isSelectionCollapsed(snapshot), previousBlock = getPreviousBlock(snapshot);
+    const focusTextBlock = getFocusTextBlock(snapshot), selectionCollapsed = isSelectionCollapsed$1(snapshot), previousBlock = getPreviousBlock(snapshot);
     return !focusTextBlock || !selectionCollapsed || !previousBlock ? !1 : isEmptyTextBlock(snapshot.context, focusTextBlock.node) && !isTextBlock(snapshot.context, previousBlock.node) ? {
       focusTextBlock,
       previousBlock
@@ -5502,7 +5461,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
   guard: ({
     snapshot
   }) => {
-    const focusTextBlock = getFocusTextBlock(snapshot), selectionCollapsed = isSelectionCollapsed(snapshot), nextBlock = getNextBlock(snapshot);
+    const focusTextBlock = getFocusTextBlock(snapshot), selectionCollapsed = isSelectionCollapsed$1(snapshot), nextBlock = getNextBlock(snapshot);
     return !focusTextBlock || !selectionCollapsed || !nextBlock ? !1 : isEmptyTextBlock(snapshot.context, focusTextBlock.node) && !isTextBlock(snapshot.context, nextBlock.node) ? {
       focusTextBlock,
       nextBlock
@@ -5580,7 +5539,131 @@ const arrowDownOnLonelyBlockObject = 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
+   */
+  defineBehavior({
+    on: "drag.dragstart",
+    guard: ({
+      snapshot,
+      dom,
+      event
+    }) => {
+      const dragSelection = getDragSelection({
+        snapshot,
+        eventSelection: event.position.selection
+      }), selectingEntireBlocks = 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`, [raise({
+            type: "select",
+            at: dragSelection
+          }), effect(() => {
+            dom.setDragGhost({
+              event,
+              ghost: {
+                element: dragGhost,
+                x,
+                y
+              }
+            });
+          }), 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`, [raise({
+            type: "select",
+            at: dragSelection
+          }), effect(() => {
+            dom.setDragGhost({
+              event,
+              ghost: {
+                element: dragGhost,
+                x,
+                y
+              }
+            });
+          }), 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`, [raise({
+          type: "select",
+          at: dragSelection
+        }), effect(() => {
+          dom.setDragGhost({
+            event,
+            ghost: {
+              element: dragGhost,
+              x,
+              y
+            }
+          });
+        }), forward(event)];
+      }
+    }]
+  }),
   /**
    * When dragging over the drag origin, we don't want to show the caret in the
    * text.
@@ -5591,7 +5674,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
       snapshot,
       event
     }) => {
-      const dragOrigin = snapshot.beta.internalDrag?.origin;
+      const dragOrigin = event.dragOrigin;
       return dragOrigin ? isOverlappingSelection(event.position.selection)({
         ...snapshot,
         context: {
@@ -5601,13 +5684,128 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
       }) : !1;
     },
     actions: []
+  }),
+  /**
+   * If the drop position overlaps the drag origin, then the event should be
+   * cancelled.
+   */
+  defineBehavior({
+    on: "drag.drop",
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      const dragOrigin = event.dragOrigin, dropPosition = event.position.selection;
+      return dragOrigin ? 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.
+   */
+  defineBehavior({
+    on: "drag.drop",
+    guard: ({
+      event
+    }) => event.dragOrigin !== void 0,
+    actions: [({
+      event
+    }) => [raise({
+      type: "deserialize",
+      originEvent: event
+    })]]
+  }),
+  /**
+   * Otherwise, we should to create a new selection.
+   */
+  defineBehavior({
+    on: "drag.drop",
+    actions: [({
+      event
+    }) => [raise({
+      type: "select",
+      at: event.position.selection
+    }), raise({
+      type: "deserialize",
+      originEvent: event
+    })]]
+  }),
+  /**
+   * Core Behavior that uses the drag origin to mimic a move operation during
+   * internal dragging.
+   */
+  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 ? isOverlappingSelection(dropPosition)({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
+      }) : !1, draggingEntireBlocks = isSelectingEntireBlocks({
+        context: {
+          ...snapshot.context,
+          selection: dragSelection
+        }
+      }), draggedBlocks = 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) => raise({
+      type: "delete.block",
+      at: block.path
+    })) : [raise({
+      type: "delete",
+      at: dragOrigin.selection
+    })], raise({
+      type: "select",
+      at: dropPosition
+    }), raise({
+      type: "insert.blocks",
+      blocks: event.data,
+      placement: draggingEntireBlocks ? originEvent.position.block === "start" ? "before" : originEvent.position.block === "end" ? "after" : "auto" : "auto"
+    })]]
   })
 ], breakingAtTheEndOfTextBlock = defineBehavior({
   on: "insert.break",
   guard: ({
     snapshot
   }) => {
-    const focusTextBlock = getFocusTextBlock(snapshot), selectionCollapsed = isSelectionCollapsed(snapshot);
+    const focusTextBlock = getFocusTextBlock(snapshot), selectionCollapsed = isSelectionCollapsed$1(snapshot);
     if (!snapshot.context.selection || !focusTextBlock || !selectionCollapsed)
       return !1;
     const atTheEndOfBlock = isAtTheEndOfBlock(focusTextBlock)(snapshot), focusListItem = focusTextBlock.node.listItem, focusLevel = focusTextBlock.node.level;
@@ -5642,7 +5840,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
   guard: ({
     snapshot
   }) => {
-    const focusTextBlock = getFocusTextBlock(snapshot), selectionCollapsed = isSelectionCollapsed(snapshot);
+    const focusTextBlock = getFocusTextBlock(snapshot), selectionCollapsed = isSelectionCollapsed$1(snapshot);
     if (!snapshot.context.selection || !focusTextBlock || !selectionCollapsed)
       return !1;
     const focusSpan = getFocusSpan$1(snapshot), focusDecorators = focusSpan?.node.marks?.filter((mark) => snapshot.context.schema.decorators.some((decorator) => decorator.name === mark) ?? []), focusAnnotations = focusSpan?.node.marks?.filter((mark) => !snapshot.context.schema.decorators.some((decorator) => decorator.name === mark)) ?? [], focusListItem = focusTextBlock.node.listItem, focusLevel = focusTextBlock.node.level;
@@ -5754,7 +5952,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
   guard: ({
     snapshot
   }) => {
-    const selectionCollapsed = isSelectionCollapsed(snapshot), focusTextBlock = getFocusTextBlock(snapshot), focusSpan = getFocusSpan$1(snapshot);
+    const selectionCollapsed = isSelectionCollapsed$1(snapshot), focusTextBlock = getFocusTextBlock(snapshot), focusSpan = getFocusSpan$1(snapshot);
     return !selectionCollapsed || !focusTextBlock || !focusSpan ? !1 : focusTextBlock.node.children[0]._key === focusSpan.node._key && snapshot.context.selection?.focus.offset === 0 && focusTextBlock.node.level === 1 ? {
       focusTextBlock
     } : !1;
@@ -5771,7 +5969,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
   guard: ({
     snapshot
   }) => {
-    const selectionCollapsed = isSelectionCollapsed(snapshot), focusTextBlock = getFocusTextBlock(snapshot), focusSpan = getFocusSpan$1(snapshot);
+    const selectionCollapsed = isSelectionCollapsed$1(snapshot), focusTextBlock = getFocusTextBlock(snapshot), focusSpan = getFocusSpan$1(snapshot);
     return !selectionCollapsed || !focusTextBlock || !focusSpan ? !1 : focusTextBlock.node.children[0]._key === focusSpan.node._key && snapshot.context.selection?.focus.offset === 0 && focusTextBlock.node.level !== void 0 && focusTextBlock.node.level > 1 ? {
       focusTextBlock,
       level: focusTextBlock.node.level - 1
@@ -5792,7 +5990,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
   guard: ({
     snapshot
   }) => {
-    const selectionCollapsed = isSelectionCollapsed(snapshot), focusListBlock = getFocusListBlock(snapshot);
+    const selectionCollapsed = isSelectionCollapsed$1(snapshot), focusListBlock = getFocusListBlock(snapshot);
     return !selectionCollapsed || !focusListBlock || !isEmptyTextBlock(snapshot.context, focusListBlock.node) ? !1 : {
       focusListBlock
     };
@@ -5863,7 +6061,52 @@ const arrowDownOnLonelyBlockObject = 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 = [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(Editor.nodes(slateEditor, {
+    at: range,
+    mode: "highest",
+    match: (n) => !Editor.isEditor(n)
+  })).map(([blockNode]) => DOMEditor.toDOMNode(slateEditor, blockNode)) : [];
+}
+function getChildNodes(slateEditor, snapshot) {
+  if (!snapshot.context.selection)
+    return [];
+  const range = toSlateRange(snapshot.context.selection, slateEditor);
+  return range ? Array.from(Editor.nodes(slateEditor, {
+    at: range,
+    mode: "lowest",
+    match: (n) => !Editor.isEditor(n)
+  })).map(([childNode]) => 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 = [defineBehavior({
   on: "annotation.toggle",
   guard: ({
     snapshot,
@@ -6017,7 +6260,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     type: "insert.block",
     block,
     placement: index === 0 ? "before" : "after",
-    select: "end"
+    select: event.select ?? "end"
   }))]
 }), defineBehavior({
   on: "insert.blocks",
@@ -6030,7 +6273,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     type: "insert.block",
     block,
     placement: "after",
-    select: "end"
+    select: event.select ?? "end"
   }))]
 }), defineBehavior({
   on: "insert.blocks",
@@ -6054,12 +6297,12 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     type: "insert.block",
     block: event.blocks[0],
     placement: "auto",
-    select: "end"
+    select: event.select ?? "end"
   })] : isEmptyTextBlock(snapshot.context, focusTextBlock.node) ? event.blocks.map((block, index) => raise({
     type: "insert.block",
     block,
     placement: index === 0 ? "auto" : "after",
-    select: "end"
+    select: event.select ?? "end"
   })) : event.blocks.flatMap((block, index) => index === 0 ? [raise({
     type: "split"
   }), raise({
@@ -6069,7 +6312,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     type: "insert.block",
     block,
     placement: "auto",
-    select: "end"
+    select: event.select ?? "end"
   })] : index === event.blocks.length - 1 ? [raise({
     type: "select.next block",
     select: "start"
@@ -6077,12 +6320,12 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     type: "insert.block",
     block,
     placement: "auto",
-    select: "end"
+    select: event.select ?? "end"
   })] : [raise({
     type: "insert.block",
     block,
     placement: "after",
-    select: "end"
+    select: event.select ?? "end"
   })])]
 }), defineBehavior({
   on: "insert.blocks",
@@ -6095,7 +6338,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     type: "insert.block",
     block,
     placement: index === 0 ? "auto" : "after",
-    select: "end"
+    select: event.select ?? "end"
   }))]
 }), defineBehavior({
   on: "insert.break",
@@ -6389,7 +6632,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
   actions: [(_, {
     newTextBlock,
     selection
-  }) => isSelectionCollapsed$1(selection) ? [raise({
+  }) => isSelectionCollapsed(selection) ? [raise({
     type: "insert.block",
     block: newTextBlock,
     placement: "after",
@@ -6525,7 +6768,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     guard: ({
       snapshot
     }) => {
-      const focusSpan = getFocusSpan$1(snapshot), selectionCollapsed = isSelectionCollapsed(snapshot);
+      const focusSpan = getFocusSpan$1(snapshot), selectionCollapsed = isSelectionCollapsed$1(snapshot);
       return focusSpan && selectionCollapsed;
     },
     actions: []
@@ -6544,7 +6787,7 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
     guard: ({
       snapshot
     }) => {
-      const focusSpan = getFocusSpan$1(snapshot), selectionCollapsed = isSelectionCollapsed(snapshot);
+      const focusSpan = getFocusSpan$1(snapshot), selectionCollapsed = isSelectionCollapsed$1(snapshot);
       return focusSpan && selectionCollapsed;
     },
     actions: []
@@ -6599,86 +6842,6 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
       }
     }]]
   }),
-  defineBehavior({
-    on: "drag.drop",
-    guard: ({
-      snapshot,
-      event
-    }) => {
-      const dragOrigin = snapshot.beta.internalDrag?.origin, dropPosition = event.position.selection;
-      return dragOrigin ? isOverlappingSelection(dropPosition)({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: dragOrigin.selection
-        }
-      }) : !1;
-    },
-    actions: []
-  }),
-  defineBehavior({
-    on: "drag.drop",
-    actions: [({
-      event
-    }) => [raise({
-      type: "select",
-      at: event.position.selection
-    }), raise({
-      type: "deserialize",
-      originEvent: event
-    })]]
-  }),
-  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 ? isOverlappingSelection(dropPosition)({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: dragOrigin.selection
-        }
-      }) : !1, draggingEntireBlocks = isSelectingEntireBlocks({
-        context: {
-          ...snapshot.context,
-          selection: dragOrigin.selection
-        }
-      }), draggedBlocks = 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) => raise({
-      type: "delete.block",
-      at: block.path
-    })) : [raise({
-      type: "delete",
-      at: dragOrigin.selection
-    })], 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
@@ -6830,7 +6993,8 @@ function performEvent({
   keyGenerator,
   schema,
   getSnapshot,
-  nativeEvent
+  nativeEvent,
+  sendBack
 }) {
   debug$9(`(${mode}:${eventCategory(event)})`, JSON.stringify(event, null, 2));
   const eventBehaviors = [...remainingEventBehaviors, ...abstractBehaviors].filter((behavior) => {
@@ -6862,7 +7026,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}`));
@@ -6875,7 +7040,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}`));
@@ -6904,7 +7070,8 @@ function performEvent({
                     keyGenerator,
                     schema,
                     getSnapshot,
-                    nativeEvent
+                    nativeEvent,
+                    sendBack
                   });
                   continue;
                 }
@@ -6918,7 +7085,8 @@ function performEvent({
                     keyGenerator,
                     schema,
                     getSnapshot,
-                    nativeEvent
+                    nativeEvent,
+                    sendBack
                   });
                   continue;
                 }
@@ -6931,7 +7099,8 @@ function performEvent({
                   keyGenerator,
                   schema,
                   getSnapshot,
-                  nativeEvent: void 0
+                  nativeEvent: void 0,
+                  sendBack
                 });
               }
             });
@@ -6958,7 +7127,8 @@ function performEvent({
                 keyGenerator,
                 schema,
                 getSnapshot,
-                nativeEvent
+                nativeEvent,
+                sendBack
               });
               continue;
             }
@@ -6972,7 +7142,8 @@ function performEvent({
                 keyGenerator,
                 schema,
                 getSnapshot,
-                nativeEvent
+                nativeEvent,
+                sendBack
               });
               continue;
             }
@@ -7044,9 +7215,7 @@ function createEditorSnapshot({
   editor,
   keyGenerator,
   readOnly,
-  schema,
-  hasTag,
-  internalDrag
+  schema
 }) {
   const selection = editor.selection ? slateRangeToSelection({
     schema,
@@ -7071,9 +7240,7 @@ function createEditorSnapshot({
         decoratorState: editor.decoratorState,
         markState: editor.markState,
         schema
-      }),
-      hasTag,
-      internalDrag
+      })
     }
   };
 }
@@ -7195,11 +7362,10 @@ const debug$8 = debugWithName("editor machine"), editorMachine = setup({
             readOnly: self.getSnapshot().matches({
               "edit mode": "read only"
             }),
-            schema: context.schema,
-            hasTag: (tag) => self.getSnapshot().hasTag(tag),
-            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}`));
@@ -7253,6 +7419,13 @@ const debug$8 = debugWithName("editor machine"), editorMachine = setup({
         ...event,
         type: "selection"
       }))]
+    },
+    "set drag ghost": {
+      actions: assign({
+        dragGhost: ({
+          event
+        }) => event.ghost
+      })
     }
   },
   type: "parallel",
@@ -7347,7 +7520,6 @@ const debug$8 = debugWithName("editor machine"), editorMachine = setup({
                     internalDrag: ({
                       event
                     }) => ({
-                      ghost: event.ghost,
                       origin: event.origin
                     })
                   })],
@@ -7397,13 +7569,15 @@ const debug$8 = debugWithName("editor machine"), editorMachine = 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}`));
                   }
               }, assign({
+                dragGhost: void 0
+              }), assign({
                 internalDrag: void 0
               })],
               tags: ["dragging internally"],
@@ -10784,73 +10958,19 @@ const debug = debugWithName("component:Editable"), PortableTextEditable = forwar
       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 = 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: isSelectionCollapsed$1(dragSelection) ? dragSelection : {
-          anchor: getSelectionEndPoint(dragSelection),
-          focus: 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;
@@ -10918,6 +11038,7 @@ const debug = debugWithName("component:Editable"), PortableTextEditable = forwar
           originEvent: {
             dataTransfer: event_12.dataTransfer
           },
+          dragOrigin: editorActor.getSnapshot().context.internalDrag?.origin,
           position: position_7
         },
         editor: slateEditor,
@@ -10942,6 +11063,7 @@ const debug = debugWithName("component:Editable"), PortableTextEditable = forwar
         originEvent: {
           dataTransfer: event_13.dataTransfer
         },
+        dragOrigin: editorActor.getSnapshot().context.internalDrag?.origin,
         position: position_8
       },
       editor: slateEditor,