move before input handling to core plugin

lib/components/content.js

@@ -3,7 +3,6 @@ import OffsetKey from '../utils/offset-key'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import Text from './text'
-import TextModel from '../models/text'
 import keycode from 'keycode'
 
 /**
@@ -17,6 +16,7 @@ class Content extends React.Component {
    */
 
   static propTypes = {
+    onBeforeInput: React.PropTypes.func,
     onChange: React.PropTypes.func,
     onKeyDown: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -112,30 +112,7 @@ class Content extends React.Component {
    */
 
   onBeforeInput(e) {
-    let { state } = this.props
+    this.props.onBeforeInput(e)
-    const { selection } = state
-    const { data }  = e
-    if (!data) return
-
-    // If the selection is still expanded, delete anything inside it first.
-    if (selection.isExpanded) {
-      e.preventDefault()
-      state = state
-        .transform()
-        .delete()
-        .insertText(data)
-        .apply()
-    }
-
-    // Otherwise, insert text.
-    else {
-      state = state
-        .transform()
-        .insertText(data)
-        .apply({ isNative: true })
-    }
-
-    this.onChange(state)
   }
 
   /**

lib/components/editor.js

@@ -104,9 +104,10 @@ class Editor extends React.Component {
       <Content
         state={this.props.state}
         onChange={state => this.onChange(state)}
-        onKeyDown={e => this.onEvent('onKeyDown', e)}
         renderMark={mark => this.renderMark(mark)}
         renderNode={node => this.renderNode(node)}
+        onBeforeInput={e => this.onEvent('onBeforeInput', e)}
+        onKeyDown={e => this.onEvent('onKeyDown', e)}
       />
     )
   }

lib/plugins/core.js

@@ -9,6 +9,41 @@ import { IS_WINDOWS, IS_MAC } from '../utils/environment'
 
 export default {
 
+  /**
+   * The core `onBeforeInput` handler.
+   *
+   * @param {Event} e
+   * @param {State} state
+   * @param {Editor} editor
+   * @return {State or Null} newState
+   */
+
+  onBeforeInput(e, state, editor) {
+    const { data }  = e
+
+    // When does this happen...
+    if (!data) {
+      debugger
+      return
+    }
+
+    // If the selection is still expanded, delete anything inside it first.
+    if (state.isExpanded) {
+      e.preventDefault()
+      return state
+        .transform()
+        .delete()
+        .insertText(data)
+        .apply()
+    }
+
+    // Otherwise, insert text natively, without re-rendering.
+    return state
+      .transform()
+      .insertText(data)
+      .apply({ isNative: true })
+  },
+
   /**
    * The core `onKeyDown` handler.
    *