refactor to move onBlur to core plugin

lib/components/content.js

@@ -165,14 +165,9 @@ class Content extends React.Component {
   onBlur = (e) => {
     if (this.props.readOnly) return
     if (this.tmp.isCopying) return
-    let { state } = this.props
 
-    state = state
-      .transform()
-      .blur()
-      .apply({ isNative: true })
-
-    this.onChange(state)
+    const data = {}
+    this.props.onBlur(e, data)
   }
 
   /**

lib/components/editor.js

@@ -6,12 +6,31 @@ import State from '../models/state'
 
 /**
  * Noop.
+ *
+ * @type {Function}
  */
 
 function noop() {}
 
+/**
+ * Event handlers to mix in to the editor.
+ *
+ * @type {Array}
+ */
+
+const EVENT_HANDLERS = [
+  'onBeforeInput',
+  'onBlur',
+  'onDrop',
+  'onKeyDown',
+  'onPaste',
+  'onSelect'
+]
+
 /**
  * Editor.
+ *
+ * @type {Component}
  */
 
 class Editor extends React.Component {
@@ -22,13 +41,8 @@ class Editor extends React.Component {
 
   static propTypes = {
     className: React.PropTypes.string,
-    onBeforeInput: React.PropTypes.func,
     onChange: React.PropTypes.func.isRequired,
     onDocumentChange: React.PropTypes.func,
-    onDrop: React.PropTypes.func,
-    onKeyDown: React.PropTypes.func,
-    onPaste: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
     onSelectionChange: React.PropTypes.func,
     placeholder: React.PropTypes.any,
     placeholderClassName: React.PropTypes.string,
@@ -43,6 +57,10 @@ class Editor extends React.Component {
     style: React.PropTypes.object
   };
 
+  /**
+   * Default properties.
+   */
+
   static defaultProps = {
     onDocumentChange: noop,
     onSelectionChange: noop,
@@ -63,6 +81,13 @@ class Editor extends React.Component {
     this.state = {}
     this.state.plugins = this.resolvePlugins(props)
     this.state.state = props.state
+
+    // Mix in the event handlers.
+    for (const method of EVENT_HANDLERS) {
+      this[method] = (...args) => {
+        this.onEvent(method, ...args)
+      }
+    }
   }
 
   /**
@@ -80,7 +105,7 @@ class Editor extends React.Component {
   }
 
   /**
-   * Blur the editor.
+   * Programmatically blur the editor.
    */
 
   blur = () => {
@@ -93,7 +118,7 @@ class Editor extends React.Component {
   }
 
   /**
-   * Focus the editor.
+   * Programmatically focus the editor.
    */
 
   focus = () => {
@@ -108,7 +133,7 @@ class Editor extends React.Component {
   /**
    * Get the editor's current `state`.
    *
-   * @return {State} state
+   * @return {State}
    */
 
   getState = () => {
@@ -162,73 +187,25 @@ class Editor extends React.Component {
     }
   }
 
-  /**
-   * On before input.
-   *
-   * @param {Mixed} ...args
-   */
-
-  onBeforeInput = (...args) => {
-    this.onEvent('onBeforeInput', ...args)
-  }
-
-  /**
-   * On drop.
-   *
-   * @param {Mixed} ...args
-   */
-
-  onDrop = (...args) => {
-    this.onEvent('onDrop', ...args)
-  }
-
-  /**
-   * On key down.
-   *
-   * @param {Mixed} ...args
-   */
-
-  onKeyDown = (...args) => {
-    this.onEvent('onKeyDown', ...args)
-  }
-
-  /**
-   * On paste.
-   *
-   * @param {Mixed} ...args
-   */
-
-  onPaste = (...args) => {
-    this.onEvent('onPaste', ...args)
-  }
-
-  /**
-   * On selection.
-   *
-   * @param {Mixed} ...args
-   */
-
-  onSelect = (...args) => {
-    this.onEvent('onSelect', ...args)
-  }
-
   /**
    * Render the editor.
    *
-   * @return {Element} element
+   * @return {Element}
    */
 
   render = () => {
+    const handlers = {}
+
+    for (const property of EVENT_HANDLERS) {
+      handlers[property] = this[property]
+    }
+
     return (
       <Content
+        {...handlers}
         className={this.props.className}
         editor={this}
-        onBeforeInput={this.onBeforeInput}
         onChange={this.onChange}
-        onDrop={this.onDrop}
-        onKeyDown={this.onKeyDown}
-        onPaste={this.onPaste}
-        onSelect={this.onSelect}
         readOnly={this.props.readOnly}
         renderDecorations={this.renderDecorations}
         renderMark={this.renderMark}
@@ -245,7 +222,7 @@ class Editor extends React.Component {
    *
    * @param {Block} text
    * @param {Block} block
-   * @return {Object} style
+   * @return {Object}
    */
 
   renderDecorations = (text, block) => {
@@ -263,7 +240,7 @@ class Editor extends React.Component {
    *
    * @param {Mark} mark
    * @param {Set} marks
-   * @return {Object} style
+   * @return {Object}
    */
 
   renderMark = (mark, marks) => {
@@ -280,7 +257,7 @@ class Editor extends React.Component {
    * Render a `node`, cascading through the plugins.
    *
    * @param {Node} node
-   * @return {Element} element
+   * @return {Element}
    */
 
   renderNode = (node) => {
@@ -302,7 +279,7 @@ class Editor extends React.Component {
    * for the editor, like delete characters and such.
    *
    * @param {Object} props
-   * @return {Array} plugins
+   * @return {Array}
    */
 
   resolvePlugins = (props) => {
@@ -317,6 +294,14 @@ class Editor extends React.Component {
 
 }
 
+/**
+ * Mix in the property types for the event handlers.
+ */
+
+for (const property of EVENT_HANDLERS) {
+  Editor.propTypes[property] = React.PropTypes.func
+}
+
 /**
  * Export.
  */

lib/plugins/core.js

@@ -119,6 +119,22 @@ function Plugin(options = {}) {
     return next
   }
 
+  /**
+   * On blur.
+   *
+   * @param {Event} e
+   * @param {Object} data
+   * @param {State} state
+   * @return {State}
+   */
+
+  function onBlur(e, data, state) {
+    return state
+      .transform()
+      .blur()
+      .apply({ isNative: true })
+  }
+
   /**
    * On drop.
    *