change void blocks to not be added automatically, and to handle focus

examples/images/index.js

@@ -1,5 +1,5 @@
 
-import { Editor, Mark, Raw } from '../..'
+import { Editor, Mark, Raw, Void } from '../..'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import initialState from './state.json'
@@ -19,7 +19,11 @@ const NODES = {
     const { data } = node
     const isActive = state.isFocused && state.blocks.includes(node)
     const src = data.get('src')
-    return <img {...props.attributes} src={src} data-active={isActive} />
+    return (
+      <Void {...props} className="image-block">
+        <img {...props.attributes} src={src} data-active={isActive} />
+      </Void>
+    )
   }
 }
 

examples/index.css

@@ -24,10 +24,6 @@ img {
   max-height: 20em;
 }
 
-img[data-active="true"] {
-  box-shadow: 0 0 0 2px blue;
-}
-
 blockquote {
   border-left: 2px solid #ddd;
   margin-left: 0;
@@ -137,3 +133,11 @@ td {
 .hover-menu .button[data-active="true"] {
   color: #fff;
 }
+
+.image-block:focus {
+  outline: none;
+}
+
+.image-block:focus > * > img {
+  box-shadow: 0 0 0 2px blue;
+}

lib/components/content.js

@@ -4,7 +4,6 @@ import OffsetKey from '../utils/offset-key'
 import Raw from '../serializers/raw'
 import React from 'react'
 import Text from './text'
-import Void from './void'
 import includes from 'lodash/includes'
 import keycode from 'keycode'
 import { IS_FIREFOX } from '../utils/environment'
@@ -490,7 +489,7 @@ class Content extends React.Component {
       'data-key': node.key
     }
 
-    const element = (
+    return (
       <Component
         attributes={attributes}
         key={node.key}
@@ -501,32 +500,6 @@ class Content extends React.Component {
         {children}
       </Component>
     )
-
-    return node.isVoid
-      ? this.renderVoid(element, node)
-      : element
-  }
-
-  /**
-   * Render a void wrapper around an `element` for `node`.
-   *
-   * @param {Node} node
-   * @param {Element} element
-   * @return {Element} element
-   */
-
-  renderVoid = (element, node) => {
-    const { editor, state } = this.props
-    return (
-      <Void
-        key={node.key}
-        editor={editor}
-        node={node}
-        state={state}
-      >
-        {element}
-      </Void>
-    )
   }
 
   /**

lib/components/void.js

@@ -14,9 +14,11 @@ class Void extends React.Component {
 
   static propTypes = {
     children: React.PropTypes.any.isRequired,
+    className: React.PropTypes.string,
     editor: React.PropTypes.object.isRequired,
     node: React.PropTypes.object.isRequired,
-    state: React.PropTypes.object.isRequired
+    state: React.PropTypes.object.isRequired,
+    style: React.PropTypes.object
   };
 
   shouldComponentUpdate = (props) => {
@@ -28,21 +30,36 @@ class Void extends React.Component {
   }
 
   render = () => {
-    const { children, node } = this.props
+    const { children, node, className, style } = this.props
     const Tag = node.kind == 'block' ? 'div' : 'span'
-    const style = {
+
+    // Make the outer wrapper relative, so the spacer can overlay it.
+    const relative = {
       position: 'relative'
     }
 
     return (
-      <Tag style={style}>
-        {this.renderSpacer()}
-        <div contentEditable={false}>{children}</div>
+      <Tag
+        contentEditable={false}
+        style={relative}
+      >
+        <Tag
+          contentEditable
+          suppressContentEditableWarning
+          className={className}
+          style={style}
+        >
+          {this.renderSpacer()}
+          <Tag contentEditable={false}>{children}</Tag>
+        </Tag>
       </Tag>
     )
   }
 
   renderSpacer = () => {
+    // Styles that will cause the spacer to be overlaid exactly on top of the
+    // void content, so it capture clicks and emulates the same scrolling
+    // behavior, but with a negative text indent to hide the cursor.
     const style = {
       position: 'absolute',
       top: '0px',

lib/index.js

@@ -5,6 +5,7 @@
 
 import Editor from './components/editor'
 import Placeholder from './components/placeholder'
+import Void from './components/void'
 
 /**
  * Models.
@@ -59,7 +60,8 @@ export {
   Selection,
   State,
   Text,
-  Utils
+  Utils,
+  Void
 }
 
 export default {
@@ -77,5 +79,6 @@ export default {
   Selection,
   State,
   Text,
-  Utils
+  Utils,
+  Void
 }