search: Clear search with Esc or button

packages/gitbook-plugin-search/src/components/Input.js

@@ -3,6 +3,8 @@ const { React } = GitBook;
 
 const search = require('../actions/search');
 
+const ESCAPE = 27;
+
 const SearchInput = React.createClass({
     propTypes: {
         query:    React.PropTypes.string,
@@ -17,17 +19,47 @@ const SearchInput = React.createClass({
         dispatch(search.query(value));
     },
 
+    /**
+     * On Escape key down, clear the search field
+     */
+    onKeyDown(e) {
+        const { query } = this.props;
+        if (e.keyCode == ESCAPE && query != '') {
+            e.preventDefault();
+            e.stopPropagation();
+            this.clearSearch();
+        }
+    },
+
+    clearSearch() {
+        this.props.dispatch(search.query(''));
+    },
+
     render() {
         const { i18n, query } = this.props;
 
+        let clear;
+        if (query != '') {
+            clear = (
+                <span className="Search-Clear"
+                      onClick={this.clearSearch}>
+                    ✕
+                </span>
+            );
+            // clear = <GitBook.Icon id="x" onClick={this.clearSearch}/>;
+        }
+
         return (
             <div className="Search-Input">
                 <input
                     type="text"
+                    onKeyDown={this.onKeyDown}
                     value={query}
                     placeholder={i18n.t('SEARCH_PLACEHOLDER')}
                     onChange={this.onChange}
                 />
+
+                { clear }
             </div>
         );
     }

packages/gitbook-plugin-theme-default/less/Search.less

@@ -11,7 +11,7 @@
     margin-top: -1px;
 
     input, input:focus, input:hover {
-        width: 100%;
+        width: 90%; // 10% room for clear input X
         background: transparent;
         border: 1px solid transparent;
         box-shadow: none;
@@ -22,6 +22,16 @@
     }
 }
 
+.Search-Clear {
+    width: 10%;
+    display: inline-block;
+    text-align: center;
+    font-size: 14px;
+    line-height: 22px;
+    color: @search-clear-color;
+    cursor: pointer;
+}
+
 
 .Search-MatchSpan {
     background: @search-highlight-color;

packages/gitbook-plugin-theme-default/less/variables.less

@@ -45,6 +45,7 @@
 @tooltip-color:                     #fff;
 // Search
 @search-highlight-color:            rgba(255, 220, 0, 0.4);
+@search-clear-color:                @button-color;
 // Font awesome
 @path-assets:                       '.';
 @path-fonts:                        '@{path-assets}/fonts';