diff --git a/src/components/content.js b/src/components/content.js index d026ebae3..e16d022d8 100644 --- a/src/components/content.js +++ b/src/components/content.js @@ -521,9 +521,6 @@ class Content extends React.Component { isFocused: true }) - // If the target is inside a void node, abort. - if (state.document.hasVoidParent(point.key)) return - // Add drop-specific information to the data. data.target = target diff --git a/src/components/void.js b/src/components/void.js index 0b9df64a9..f4db1bed1 100644 --- a/src/components/void.js +++ b/src/components/void.js @@ -41,6 +41,17 @@ class Void extends React.Component { state: Types.object.isRequired, } + /** + * State + * + * @type {Object} + */ + + state = { + dragCounter: 0, + editable: false + } + /** * Debug. * @@ -81,6 +92,45 @@ class Void extends React.Component { editor.onChange(next) } + /** + * Increment counter, and temporarily switch node to editable to allow drop events + * Counter required as onDragLeave fires when hovering over child elements + * + * @param {Event} event + */ + + onDragEnter = () => { + this.setState((prevState) => { + const dragCounter = prevState.dragCounter + 1 + return { dragCounter, editable: undefined } + }) + } + + /** + * Decrement counter, and if counter 0, then no longer dragging over node + * and thus switch back to non-editable + * + * @param {Event} event + */ + + onDragLeave = () => { + this.setState((prevState) => { + const dragCounter = prevState.dragCounter + 1 + const editable = dragCounter === 0 ? false : undefined + return { dragCounter, editable } + }) + } + + /** + * If dropped item onto node, then reset state + * + * @param {Event} event + */ + + onDrop = () => { + this.setState({ dragCounter: 0, editable: false }) + } + /** * Render. * @@ -103,9 +153,16 @@ class Void extends React.Component { this.debug('render', { props }) return ( - + {this.renderSpacer()} - + {children} diff --git a/src/plugins/core.js b/src/plugins/core.js index 7e14c41c3..a9b99caa9 100644 --- a/src/plugins/core.js +++ b/src/plugins/core.js @@ -434,10 +434,26 @@ function Plugin(options = {}) { debug('onDropText', { data }) const { text, target } = data + const { document } = state const transform = state .transform() .select(target) + let hasVoidParent = document.hasVoidParent(target.anchorKey) + + // Insert text into nearest text node + if (hasVoidParent) { + let node = document.getNode(target.anchorKey) + + while (hasVoidParent) { + node = document.getNextText(node.key) + if (!node) break + hasVoidParent = document.hasVoidParent(node.key) + } + + if (node) transform.collapseToStartOf(node) + } + text .split('\n') .forEach((line, i) => {