use fragment instead of node transfer type on drag (#2090)

* use fragment instead of node transfer type on drag

* remove the range.isCollapsed check in Changes.deleteAtRange so that it will also remove the selection when only a void node is selected

* fix selection before starting the drag

* fix linting errors

* review fixes

* align with new way of handling void nodes via schema

packages/slate-react/src/plugins/after.js

@@ -4,7 +4,7 @@ import Plain from 'slate-plain-serializer'
 import { IS_IOS } from 'slate-dev-environment'
 import React from 'react'
 import getWindow from 'get-window'
-import { Block, Inline, Text } from 'slate'
+import { Text } from 'slate'
 import Hotkeys from 'slate-hotkeys'
 
 import Content from '../components/content'
@@ -271,15 +271,18 @@ function AfterPlugin() {
     const ancestors = document.getAncestors(node.key)
     const isVoid =
       node && (schema.isVoid(node) || ancestors.some(a => schema.isVoid(a)))
+    const selectionIncludesNode = value.blocks.some(
+      block => block.key === node.key
+    )
 
-    if (isVoid) {
+    // If a void block is dragged and is not selected, select it (necessary for local drags).
-      const encoded = Base64.serializeNode(node, { preserveKeys: true })
+    if (isVoid && !selectionIncludesNode) {
-      setEventTransfer(event, 'node', encoded)
+      change.moveToRangeOfNode(node)
-    } else {
-      const { fragment } = value
-      const encoded = Base64.serializeNode(fragment)
-      setEventTransfer(event, 'fragment', encoded)
     }
+
+    const fragment = change.value.fragment
+    const encoded = Base64.serializeNode(fragment)
+    setEventTransfer(event, 'fragment', encoded)
   }
 
   /**
@@ -300,7 +303,7 @@ function AfterPlugin() {
     if (!target) return
 
     const transfer = getEventTransfer(event)
-    const { type, fragment, node, text } = transfer
+    const { type, fragment, text } = transfer
 
     change.focus()
 
@@ -352,14 +355,6 @@ function AfterPlugin() {
       change.insertFragment(fragment)
     }
 
-    if (type == 'node' && Block.isBlock(node)) {
-      change.insertBlock(node.regenerateKey()).removeNodeByKey(node.key)
-    }
-
-    if (type == 'node' && Inline.isInline(node)) {
-      change.insertInline(node.regenerateKey()).removeNodeByKey(node.key)
-    }
-
     // COMPAT: React's onSelect event breaks after an onDrop event
     // has fired in a node: https://github.com/facebook/react/issues/11379.
     // Until this is fixed in React, we dispatch a mouseup event on that

packages/slate/src/changes/at-range.js

@@ -70,8 +70,6 @@ Changes.addMarksAtRange = (change, range, marks, options = {}) => {
  */
 
 Changes.deleteAtRange = (change, range, options = {}) => {
-  if (range.isCollapsed) return
-
   // Snapshot the selection, which creates an extra undo save point, so that
   // when you undo a delete, the expanded selection will be retained.
   change.snapshotSelection()