bug fixing

examples/basic/index.js

@@ -66,8 +66,11 @@ class App extends React.Component {
         renderMark={mark => this.renderMark(mark)}
         state={this.state.state}
         onChange={(state) => {
-          console.log('State:', state.toJS())
+          console.groupCollapsed('Change!')
+          console.log('Document:', state.document.toJS())
+          console.log('Selection:', state.selection.toJS())
           console.log('Content:', Raw.serialize(state))
+          console.groupEnd()
           this.setState({ state })
         }}
       />

examples/plaintext/index.js

@@ -25,8 +25,11 @@ class App extends React.Component {
       <Editor
         state={this.state.state}
         onChange={(state) => {
+          console.groupCollapsed('Change!')
           console.log('Document:', state.document.toJS())
+          console.log('Selection:', state.selection.toJS())
           console.log('Content:', Plaintext.serialize(state))
+          console.groupEnd()
           this.setState({ state })
         }}
       />

examples/richtext/index.js

@@ -128,8 +128,11 @@ class App extends React.Component {
           renderNode={node => this.renderNode(node)}
           renderMark={mark => this.renderMark(mark)}
           onChange={(state) => {
+            console.groupCollapsed('Change!')
             console.log('Document:', state.document.toJS())
+            console.log('Selection:', state.selection.toJS())
             console.log('Content:', Raw.serialize(state))
+            console.groupEnd()
             this.setState({ state })
           }}
         />

lib/components/text.js

@@ -34,15 +34,13 @@ class Text extends React.Component {
     const { node } = this.props
     const { characters } = node
     const ranges = groupByMarks(characters)
-    return ranges.size == 0
-      ? this.renderSpacerLeaf()
-      : ranges.map((range, i, ranges) => {
-        const previous = ranges.slice(0, i)
-        const offset = previous.size
-          ? previous.map(range => range.text).join('').length
-          : 0
-        return this.renderLeaf(range, offset)
-      })
+    return ranges.map((range, i, ranges) => {
+      const previous = ranges.slice(0, i)
+      const offset = previous.size
+        ? previous.map(range => range.text).join('').length
+        : 0
+      return this.renderLeaf(range, offset)
+    })
   }
 
   renderLeaf(range, offset) {
@@ -71,14 +69,6 @@ class Text extends React.Component {
     )
   }
 
-  renderSpacerLeaf() {
-    return this.renderLeaf({
-      marks: new List(),
-      offset: 0,
-      text: ''
-    })
-  }
-
 }
 
 /**

lib/models/node.js

@@ -242,6 +242,27 @@ const Node = {
     return list
   },
 
+  /**
+   * Get the first text child node.
+   *
+   * @return {Text or Null} text
+   */
+
+  getFirstTextNode() {
+    return this.findNode(node => node.type == 'text') || null
+  },
+
+  /**
+   * Get the last text child node.
+   *
+   * @return {Text or Null} text
+   */
+
+  getLastTextNode() {
+    const texts = this.findNode(node => node.type == 'text')
+    return texts.size ? texts.get(texts.size - 1) : null
+  },
+
   /**
    * Get a set of the marks in a `range`.
    *

lib/models/selection.js

@@ -109,7 +109,7 @@ class Selection extends SelectionRecord {
 
   isAtStartOf(node) {
     const { startKey, startOffset } = this
-    const first = node.type == 'text' ? node : node.nodes.first()
+    const first = node.type == 'text' ? node : node.getFirstTextNode()
     return startKey == first.key && startOffset == 0
   }
 
@@ -122,7 +122,7 @@ class Selection extends SelectionRecord {
 
   isAtEndOf(node) {
     const { endKey, endOffset } = this
-    const last = node.type == 'text' ? node : node.nodes.last()
+    const last = node.type == 'text' ? node : node.getLastTextNode()
     return endKey == last.key && endOffset == last.length
   }
 

lib/models/state.js

@@ -133,7 +133,11 @@ class State extends Record(DEFAULTS) {
     const { startKey } = selection
     const startNode = document.getNode(startKey)
 
-    if (selection.isExpanded) {
+    if (selection.isAtStartOf(document)) {
+      after = selection
+    }
+
+    else if (selection.isExpanded) {
       after = selection.moveToStart()
     }
 

lib/serializers/plaintext.js

@@ -1,6 +1,6 @@
 
 import Character from '../models/character'
-import Node from '../models/node'
+import Element from '../models/element'
 import Text from '../models/text'
 import Document from '../models/document'
 import State from '../models/state'
@@ -33,13 +33,13 @@ function deserialize(string) {
     }, Character.createList())
 
   const text = Text.create({ characters })
-  const texts = Node.createMap([text])
-  const node = Node.create({
+  const texts = Element.createMap([text])
+  const node = Element.create({
     type: 'paragraph',
     nodes: texts,
   })
 
-  const nodes = Node.createMap([node])
+  const nodes = Element.createMap([node])
   const document = Document.create({ nodes })
   const state = State.create({ document })
   return state

lib/utils/group-by-marks.js

@@ -1,5 +1,5 @@
 
-import { List, Map, Record } from 'immutable'
+import { List, Map, Record, Set } from 'immutable'
 
 /**
  * Range.
@@ -7,7 +7,7 @@ import { List, Map, Record } from 'immutable'
 
 const Range = new Record({
   text: '',
-  marks: new List()
+  marks: new Set()
 })
 
 /**
@@ -18,6 +18,12 @@ const Range = new Record({
  */
 
 function groupByMarks(characters) {
+  if (characters.size == 0) {
+    let ranges = new List()
+    ranges = ranges.push(new Range())
+    return ranges
+  }
+
   return characters
     .toList()
     .reduce((ranges, char, i) => {

lib/utils/offset-key.js

@@ -10,6 +10,7 @@ const PARSER = /^(\w+)(?::(\d+)-(\d+))?$/
  */
 
 const ATTRIBUTE = 'data-offset-key'
+const SELECTOR = `[${ATTRIBUTE}]`
 
 /**
  * From a `node`, find the closest parent's offset key.
@@ -20,9 +21,17 @@ const ATTRIBUTE = 'data-offset-key'
 
 function findKey(node) {
   if (node.nodeType == 3) node = node.parentNode
-  const parent = node.closest(`[${ATTRIBUTE}]`)
-  if (!parent) return null
-  return parent.getAttribute(ATTRIBUTE)
+
+  // If a parent with an offset key exists, use it.
+  const parent = node.closest(SELECTOR)
+  if (parent) return parent.getAttribute(ATTRIBUTE)
+
+  // Otherwise, if a child with an offset key exists, use it.
+  const child = node.querySelector(SELECTOR)
+  if (child) return child.getAttribute(ATTRIBUTE)
+
+  // Shouldn't get here... else we have an edge case to handle.
+  console.error('No offset key found for node:', node)
 }
 
 /**