Move onDragStart handler from Node to Void. (#1167)

packages/slate-react/src/components/node.js

@@ -1,5 +1,4 @@
 
-import Base64 from 'slate-base64-serializer'
 import Debug from 'debug'
 import ImmutableTypes from 'react-immutable-proptypes'
 import React from 'react'
@@ -7,10 +6,8 @@ import SlateTypes from 'slate-prop-types'
 import logger from 'slate-dev-logger'
 import Types from 'prop-types'
 
-import TRANSFER_TYPES from '../constants/transfer-types'
 import Void from './void'
 import Text from './text'
-import setTransferData from '../utils/set-transfer-data'
 
 /**
  * Debug.
@@ -145,28 +142,6 @@ class Node extends React.Component {
     return false
   }
 
-  /**
-   * On drag start, add a serialized representation of the node to the data.
-   *
-   * @param {Event} e
-   */
-
-  onDragStart = (e) => {
-    const { node } = this.props
-
-    // Only void node are draggable
-    if (!node.isVoid) {
-      return
-    }
-
-    const encoded = Base64.serializeNode(node, { preserveKeys: true })
-    const { dataTransfer } = e.nativeEvent
-
-    setTransferData(dataTransfer, TRANSFER_TYPES.NODE, encoded)
-
-    this.debug('onDragStart', e)
-  }
-
   /**
    * Render.
    *
@@ -189,10 +164,7 @@ class Node extends React.Component {
 
     // Attributes that the developer must to mix into the element in their
     // custom node renderer component.
-    const attributes = {
+    const attributes = { 'data-key': node.key }
-      'data-key': node.key,
-      'onDragStart': this.onDragStart
-    }
 
     // If it's a block node with inline children, add the proper `dir` attribute
     // for text direction.

packages/slate-react/src/components/void.js

@@ -1,10 +1,13 @@
 
+import Base64 from 'slate-base64-serializer'
 import Debug from 'debug'
 import React from 'react'
 import SlateTypes from 'slate-prop-types'
 import Types from 'prop-types'
 
+import setTransferData from '../utils/set-transfer-data'
 import Text from './text'
+import TRANSFER_TYPES from '../constants/transfer-types'
 
 /**
  * Debug.
@@ -97,6 +100,22 @@ class Void extends React.Component {
     event.preventDefault()
   }
 
+  /**
+   * On drag start, add a serialized representation of the node to the data.
+   *
+   * @param {Event} event
+   */
+
+  onDragStart = (event) => {
+    const { node } = this.props
+    const encoded = Base64.serializeNode(node, { preserveKeys: true })
+    const { dataTransfer } = event.nativeEvent
+
+    setTransferData(dataTransfer, TRANSFER_TYPES.NODE, encoded)
+
+    this.debug('onDragStart', event)
+  }
+
   /**
    * Render.
    *
@@ -117,6 +136,7 @@ class Void extends React.Component {
         onClick={this.onClick}
         onDragOver={this.onDragOver}
         onDragEnter={this.onDragEnter}
+        onDragStart={this.onDragStart}
       >
         {this.renderSpacer()}
         <Tag contentEditable={false}>