fix findNativePoint for void nodes

examples/emojis/index.js

@@ -71,13 +71,14 @@ class Emojis extends React.Component {
 
   onClickEmoji = (e, code) => {
     e.preventDefault()
-    const change = this.state.state
+    const { state } = this.state
-      .change()
+    const change = state.change()
-      .insertInline({
+
-        type: 'emoji',
+    change.insertInline({
-        isVoid: true,
+      type: 'emoji',
-        data: { code }
+      isVoid: true,
-      })
+      data: { code }
+    })
 
     this.onChange(change)
   }

examples/markdown-preview/index.js

@@ -97,7 +97,7 @@ const schema = {
   },
   rules: [
     {
-      match: () => true,
+      match: object => object.kind == 'block',
       decorate: markdownDecorator,
     }
   ]

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

@@ -15,6 +15,12 @@ import Leaf from './leaf'
 
 const debug = Debug('slate:node')
 
+/**
+ * Text.
+ *
+ * @type {Component}
+ */
+
 class Text extends React.Component {
 
   /**
@@ -31,6 +37,17 @@ class Text extends React.Component {
     parent: SlateTypes.node.isRequired,
     schema: SlateTypes.schema.isRequired,
     state: SlateTypes.state.isRequired,
+    style: Types.object,
+  }
+
+  /**
+   * Default prop types.
+   *
+   * @type {Object}
+   */
+
+  static defaultProps = {
+    style: null,
   }
 
   /**
@@ -90,7 +107,7 @@ class Text extends React.Component {
     const { props } = this
     this.debug('render', { props })
 
-    const { decorations, node, state } = props
+    const { decorations, node, state, style } = props
     const { document } = state
     const { key } = node
 
@@ -112,7 +129,7 @@ class Text extends React.Component {
     })
 
     return (
-      <span data-key={key}>
+      <span data-key={key} style={style}>
         {leaves}
       </span>
     )

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

@@ -3,10 +3,8 @@ import Debug from 'debug'
 import React from 'react'
 import SlateTypes from 'slate-prop-types'
 import Types from 'prop-types'
-import { Mark } from 'slate'
 
-import Leaf from './leaf'
+import Text from './text'
-import OffsetKey from '../utils/offset-key'
 
 /**
  * Debug.
@@ -79,9 +77,25 @@ class Void extends React.Component {
     })
   }
 
-  onDragOver = event => event.preventDefault()
+  /**
+   * On drag enter, prevent default to allow drops.
+   *
+   * @type {Event} event
+   */
 
-  onDragEnter = event => event.preventDefault()
+  onDragEnter = (event) => {
+    event.preventDefault()
+  }
+
+  /**
+   * On drag over, prevent default to allow drops.
+   *
+   * @type {Event} event
+   */
+
+  onDragOver = (event) => {
+    event.preventDefault()
+  }
 
   /**
    * Render.
@@ -113,7 +127,7 @@ class Void extends React.Component {
   }
 
   /**
-   * Render a fake spacer leaf, which will catch the cursor when it the void
+   * Render a fake spacer text, which will catch the cursor when it the void
    * node is navigated to with the arrow keys. Having this spacer there means
    * the browser continues to manage the selection natively, so it keeps track
    * of the right offset when moving across the block.
@@ -122,7 +136,8 @@ class Void extends React.Component {
    */
 
   renderSpacer = () => {
-    const { node } = this.props
+    const { block, decorations, isSelected, node, readOnly, schema, state, editor } = this.props
+    const child = node.getFirstText()
     let style
 
     if (node.kind == 'block') {
@@ -140,43 +155,18 @@ class Void extends React.Component {
     }
 
     return (
-      <span style={style}>{this.renderLeaf()}</span>
+      <Text
-    )
-  }
-
-  /**
-   * Render a fake leaf.
-   *
-   * @return {Element}
-   */
-
-  renderLeaf = () => {
-    const { block, node, schema, state, editor } = this.props
-    const child = node.getFirstText()
-    const ranges = child.getRanges()
-    const text = ''
-    const offset = 0
-    const marks = Mark.createSet()
-    const index = 0
-    const offsetKey = OffsetKey.stringify({
-      key: child.key,
-      index
-    })
-
-    return (
-      <Leaf
-        key={offsetKey}
         block={node.kind == 'block' ? node : block}
+        decorations={decorations}
         editor={editor}
-        index={index}
+        isSelected={isSelected}
-        marks={marks}
+        key={child.key}
         node={child}
-        offset={offset}
         parent={node}
-        ranges={ranges}
+        readOnly={readOnly}
         schema={schema}
         state={state}
-        text={text}
+        style={style}
       />
     )
   }