Debounce input event of editor container

CODEOWNERS

@@ -0,0 +1 @@
+*   @infusionsoft/pi

README.md

@@ -73,6 +73,8 @@ AMD syntax example as well as a CommonJS (browserify) example.
   <dd>Defines which of Scribe's built-in plugins should be active</dd>
   <dt><pre>defaultFormatters</pre></dt>
   <dd>Defines which of Scribe's default formatters should be active</dd>
+  <dt><pre>inputDelay</pre></dt>
+  <dd>Defines the debounce delay for input events on editor container (default is 0)</dd>
 </dl>
 
 For detailed documentation see the [wiki page on options](https://github.com/guardian/scribe/wiki/Scribe-configuration-options).

src/config.js

@@ -31,7 +31,9 @@ define(['immutable'], function (immutable) {
     defaultFormatters: [
       'escapeHtmlCharactersFormatter',
       'replaceNbspCharsFormatter'
-    ]
+    ],
+
+    inputDelay: 0
   };
 
 

src/debounce.js

@@ -0,0 +1,26 @@
+define([], function () {
+  return function (func, wait, immediate) {
+    var timeout;
+
+    return function () {
+      var context = this, args = arguments;
+
+      var later = function () {
+        timeout = null;
+
+        if (!immediate) {
+          func.apply(context, args);
+        }
+      };
+
+      var callNow = immediate && !timeout;
+
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+
+      if (callNow) {
+        func.apply(context, args);
+      }
+    };
+  };
+});

src/scribe.js

@@ -11,7 +11,8 @@ define([
   './node',
   'immutable',
   './config',
-  './events'
+  './events',
+  './debounce'
 ], function (
   plugins,
   commands,
@@ -25,7 +26,8 @@ define([
   nodeHelpers,
   Immutable,
   config,
-  eventNames
+  eventNames,
+  debounce
 ) {
 
   'use strict';
@@ -68,15 +70,15 @@ define([
 
     this.el.setAttribute('contenteditable', true);
 
-    this.el.addEventListener('input', function () {
+    this.el.addEventListener('input', debounce(function () {
       /**
        * This event triggers when either the user types something or a native
        * command is executed which causes the content to change (i.e.
        * `document.execCommand('bold')`). We can't wrap a transaction around
        * these actions, so instead we run the transaction in this event.
        */
       this.transactionManager.run();
-    }.bind(this), false);
+    }.bind(this), this.options.inputDelay).bind(this), false);
 
     /**
      * Core Plugins