add autoFocus support

examples/focus-blur/index.js

@@ -124,6 +124,7 @@ class FocusBlur extends React.Component {
     return (
       <div className="editor">
         <Editor
+          autoFocus
           schema={schema}
           state={this.state.state}
           onChange={this.onChange}

src/components/content.js

@@ -35,6 +35,7 @@ class Content extends React.Component {
    */
 
   static propTypes = {
+    autoFocus: React.PropTypes.bool.isRequired,
     autoCorrect: React.PropTypes.bool.isRequired,
     children: React.PropTypes.array.isRequired,
     className: React.PropTypes.string,
@@ -55,7 +56,7 @@ class Content extends React.Component {
     state: React.PropTypes.object.isRequired,
     style: React.PropTypes.object,
     tabIndex: React.PropTypes.number
-  };
+  }
 
   /**
    * Default properties.
@@ -65,7 +66,7 @@ class Content extends React.Component {
 
   static defaultProps = {
     style: {}
-  };
+  }
 
   /**
    * Constructor.
@@ -107,6 +108,17 @@ class Content extends React.Component {
     )
   }
 
+  /**
+   * On mount, if `autoFocus` is set, focus the editor.
+   */
+
+  componentDidMount = () => {
+    if (this.props.autoFocus) {
+      const el = ReactDOM.findDOMNode(this)
+      el.focus()
+    }
+  }
+
   /**
    * On update, if the state is blurred now, but was focused before, and the
    * DOM still has a node inside the editor selected, we need to blur it.

src/components/editor.js

@@ -47,6 +47,23 @@ const PLUGINS_PROPS = [
   'schema',
 ]
 
+/**
+ * Pass-through properties of the editor.
+ *
+ * @type {Array}
+ */
+
+const PASS_THROUGH_PROPS = [
+  'autoCorrect',
+  'autoFocus',
+  'className',
+  'readOnly',
+  'role',
+  'spellCheck',
+  'style',
+  'tabIndex',
+]
+
 /**
  * Editor.
  *
@@ -63,6 +80,7 @@ class Editor extends React.Component {
 
   static propTypes = {
     autoCorrect: React.PropTypes.bool,
+    autoFocus: React.PropTypes.bool,
     className: React.PropTypes.string,
     onBeforeChange: React.PropTypes.func,
     onChange: React.PropTypes.func,
@@ -78,8 +96,8 @@ class Editor extends React.Component {
     spellCheck: React.PropTypes.bool,
     state: React.PropTypes.instanceOf(State).isRequired,
     style: React.PropTypes.object,
-    tabIndex: React.PropTypes.number
+    tabIndex: React.PropTypes.number,
-  };
+  }
 
   /**
    * Default properties.
@@ -88,6 +106,7 @@ class Editor extends React.Component {
    */
 
   static defaultProps = {
+    autoFocus: false,
     autoCorrect: true,
     onChange: noop,
     onDocumentChange: noop,
@@ -95,8 +114,8 @@ class Editor extends React.Component {
     plugins: [],
     readOnly: false,
     schema: {},
-    spellCheck: true
+    spellCheck: true,
-  };
+  }
 
   /**
    * When constructed, create a new `Stack` and run `onBeforeChange`.
@@ -241,28 +260,27 @@ class Editor extends React.Component {
     const { props, state } = this
     const { stack } = state
     const handlers = {}
+    const passes = {}
     const children = stack.render(state.state, this)
 
     for (const property of EVENT_HANDLERS) {
       handlers[property] = this[property]
     }
 
+    for (const property of PASS_THROUGH_PROPS) {
+      passes[property] = this.props[property]
+    }
+
     debug('render', { props, state })
 
     return (
       <Content
         {...handlers}
+        {...passes}
         editor={this}
         onChange={this.onChange}
         schema={this.getSchema()}
         state={this.getState()}
-        className={props.className}
-        readOnly={props.readOnly}
-        autoCorrect={props.autoCorrect}
-        spellCheck={props.spellCheck}
-        style={props.style}
-        tabIndex={props.tabIndex}
-        role={props.role}
       >
         {children.map((child, i) => <Portal key={i} isOpened>{child}</Portal>)}
       </Content>

src/components/leaf.js

@@ -39,7 +39,7 @@ class Leaf extends React.Component {
     schema: React.PropTypes.object.isRequired,
     state: React.PropTypes.object.isRequired,
     text: React.PropTypes.string.isRequired
-  };
+  }
 
   /**
    * Constructor.

src/components/placeholder.js

@@ -22,7 +22,7 @@ class Placeholder extends React.Component {
     parent: React.PropTypes.object.isRequired,
     state: React.PropTypes.object.isRequired,
     style: React.PropTypes.object
-  };
+  }
 
   /**
    * Should the placeholder update?

src/components/void.js

@@ -35,7 +35,7 @@ class Void extends React.Component {
     parent: React.PropTypes.object.isRequired,
     schema: React.PropTypes.object.isRequired,
     state: React.PropTypes.object.isRequired,
-  };
+  }
 
   /**
    * Debug.