diff --git a/packages/slate-react/src/components/node.js b/packages/slate-react/src/components/node.js index 447e88d37..46748adf2 100644 --- a/packages/slate-react/src/components/node.js +++ b/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 = { - 'data-key': node.key, - 'onDragStart': this.onDragStart - } + const attributes = { 'data-key': node.key } // If it's a block node with inline children, add the proper `dir` attribute // for text direction. diff --git a/packages/slate-react/src/components/void.js b/packages/slate-react/src/components/void.js index 2a170d4f2..5445ecbff 100644 --- a/packages/slate-react/src/components/void.js +++ b/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()}