fix void leaf selection handling

docs/reference/models/transform.md

@@ -17,7 +17,9 @@ Transform methods can either operate on the [`Document`](./document.md), the [`S
   - [`deleteBackward`](#deletebackward)
   - [`deleteForward`](#deleteforward)
   - [`delete`](#delete)
+  - [`insertBlock`](#insertblock)
   - [`insertFragment`](#insertfragment)
+  - [`insertInline`](#insertinline)
   - [`insertText`](#inserttext)
   - [`addMark`](#addmark)
   - [`setBlock`](#setblock)
@@ -50,7 +52,9 @@ Transform methods can either operate on the [`Document`](./document.md), the [`S
   - [`deleteAtRange`](#deleteatrange)
   - [`deleteBackwardAtRange`](#deletebackwardatrange)
   - [`deleteForwardAtRange`](#deleteforwardatrange)
+  - [`insertBlockAtRange`](#insertblockatrange)
   - [`insertFragmentAtRange`](#insertfragmentatrange)
+  - [`insertInlineAtRange`](#insertinlineatrange)
   - [`insertTextAtRange`](#inserttextatrange)
   - [`addMarkAtRange`](#addmarkatrange)
   - [`setBlockAtRange`](#setblockatrange)

examples/images/index.js

@@ -202,41 +202,9 @@ class Images extends React.Component {
    */
 
   insertImage = (state, src) => {
-    if (state.isExpanded) {
-      state = state
+    return state
       .transform()
-        .delete()
-        .apply()
-    }
-
-    const { anchorBlock, selection } = state
-    let transform = state.transform()
-
-    if (anchorBlock.type == 'image') {
-      transform = transform.splitBlock()
-    }
-
-    else if (anchorBlock.text != '') {
-      if (selection.isAtEndOf(anchorBlock)) {
-        transform = transform.splitBlock()
-      }
-
-      else if (selection.isAtStartOf(anchorBlock)) {
-        transform = transform
-          .splitBlock()
-          .collapseToStartOfPreviousBlock()
-      }
-
-      else {
-        transform = transform
-          .splitBlock()
-          .splitBlock()
-          .collapseToStartOfPreviousBlock()
-      }
-    }
-
-    return transform
-      .setBlock({
+      .insertBlock({
         type: 'image',
         isVoid: true,
         data: { src }

lib/components/leaf.js

@@ -28,6 +28,7 @@ class Leaf extends React.Component {
 
   static propTypes = {
     index: React.PropTypes.number.isRequired,
+    isVoid: React.PropTypes.bool,
     marks: React.PropTypes.object.isRequired,
     node: React.PropTypes.object.isRequired,
     ranges: React.PropTypes.object.isRequired,
@@ -36,6 +37,16 @@ class Leaf extends React.Component {
     text: React.PropTypes.string.isRequired
   };
 
+  /**
+   * Default properties.
+   *
+   * @type {Object}
+   */
+
+  static defaultProps = {
+    isVoid: false
+  };
+
   /**
    * Constructor.
    *
@@ -85,6 +96,10 @@ class Leaf extends React.Component {
     return state.selection.hasEdgeBetween(node, start, end)
   }
 
+  /**
+   * When the DOM updates, try updating the selection.
+   */
+
   componentDidMount() {
     this.updateSelection()
   }
@@ -93,14 +108,18 @@ class Leaf extends React.Component {
     this.updateSelection()
   }
 
+  /**
+   * Update the DOM selection if it's inside the leaf.
+   */
+
   updateSelection() {
-    const { state, ranges } = this.props
+    const { state, ranges, isVoid } = this.props
     const { selection } = state
 
     // If the selection is blurred we have nothing to do.
     if (selection.isBlurred) return
 
-    const { anchorOffset, focusOffset } = selection
+    let { anchorOffset, focusOffset } = selection
     const { node, index } = this.props
     const { start, end } = OffsetKey.findBounds(index, ranges)
 
@@ -109,6 +128,13 @@ class Leaf extends React.Component {
     const hasFocus = selection.hasFocusBetween(node, start, end)
     if (!hasAnchor && !hasFocus) return
 
+    // If the leaf is a void leaf, ensure that it has no width. This is due to
+    // void nodes always rendering an empty leaf, for browser compatibility.
+    if (isVoid) {
+      anchorOffset = 0
+      focusOffset = 0
+    }
+
     // We have a selection to render, so prepare a few things...
     const native = window.getSelection()
     const el = findDeepestNode(ReactDOM.findDOMNode(this))

lib/components/void.js

@@ -164,6 +164,7 @@ class Void extends React.Component {
 
     return (
       <Leaf
+        isVoid
         renderMark={noop}
         key={offsetKey}
         state={state}