Added search icon, added prev/next button (not yet doing anything)

src/components/TreeMode.js

@@ -200,6 +200,8 @@ export default class TreeMode extends Component {
             text: this.state.search.text,
             resultsCount: searchResultsCount,
             onChange: this.handleSearch,
+            onNext: this.handleNext,
+            onPrevious: this.handlePrevious,
             delay: SEARCH_DEBOUNCE
           })
         )
@@ -312,6 +314,18 @@ export default class TreeMode extends Component {
     this.setState(setIn(this.state, ['search', 'text'], text))
   }
 
+  /** @private */
+  handleNext = () => {
+    // TODO: implement select next search result
+    console.log('next search result...')
+  }
+
+  /** @private */
+  handlePrevious = () => {
+    // TODO: implement select previous search result
+    console.log('previous search result...')
+  }
+
   /**
    * Apply a JSONPatch to the current JSON document and emit a change event
    * @param {JSONPatch} actions

src/components/menu/Search.js

@@ -18,15 +18,34 @@ export default class Search extends Component {
   }
 
   render () {
-    // TODO: prev/next
     // TODO: focus on search results
     // TODO: expand the focused search result if not expanded
 
     return h('div', {className: 'jsoneditor-search'}, [
       this.renderResultsCount(this.props.resultsCount),
-      h('div', {key: 'box', className: 'jsoneditor-search-box'},
-          h('input', {type: 'text', value: this.state.text, onInput: this.handleChange})
-      )
+      h('div', {key: 'box', className: 'jsoneditor-search-box'}, [
+          h('input', {
+            key: 'input',
+            type: 'text',
+            className: 'jsoneditor-search-text',
+            value: this.state.text,
+            onInput: this.handleChange
+          }),
+          h('input', {
+            key: 'next',
+            type: 'button',
+            className: 'jsoneditor-search-next',
+            title: 'Next result',
+            onClick: this.props.onPrevious
+          }),
+          h('input', {
+            key: 'previous',
+            type: 'button',
+            className: 'jsoneditor-search-previous',
+            title: 'Previous result',
+            onClick: this.props.onNext
+          })
+      ])
     ])
   }
 
@@ -72,5 +91,8 @@ export default class Search extends Component {
 
 Search.propTypes = {
   text: PropTypes.string,
-  resultsCount: PropTypes.number
-}
+  resultsCount: PropTypes.number,
+  onChange: PropTypes.func,
+  onPrevious: PropTypes.func,
+  onNext: PropTypes.func,
+}

src/components/menu/Search.less

@@ -10,18 +10,74 @@ div.jsoneditor-search {
   }
 
   div.jsoneditor-search-box {
-    display: inline-block;
+    display: inline-flex;
+    position: relative;
 
-    background: white;
+    background-color: white;
     border: 2px solid @theme-color;
     box-sizing: border-box;
 
-    input {
+    @search-icon-width: 22px;
+
+    &::before {
+      position: absolute;
+      display: inline-block;
+      width: @search-icon-width;
+      height: 100%;
+      background: transparent url('../../img/jsoneditor-icons.svg') -97px -71px;
+      content: '';
+    }
+
+    input.jsoneditor-search-text {
+      display: inline-block;
+      position: relative;
+
       border: none;
       outline: none;
+      width: 120px;
+      max-width: 100%;
       height: 22px;
       line-height: 22px;
-      padding: 2px;
+      padding: 2px 2px 2px @search-icon-width;
+      background: transparent;
+    }
+
+    input[type=button] {
+      display: inline-block;
+      position: relative;
+
+      width: 16px;
+      height: 100%;
+      line-height: 22px;
+      margin: 2px 0;
+      padding: 0;
+      border: none;
+      background: transparent url('../../img/jsoneditor-icons.svg');
+      opacity: 0.8;
+
+      font-family: arial, sans-serif;
+      font-size: 10pt;
+    }
+
+    input[type=button]:hover {
+      background-color: transparent;
+    }
+
+    input.jsoneditor-search-next {
+      cursor: pointer;
+      background-position: -124px -73px;
+    }
+    input.jsoneditor-search-next:hover {
+      background-position: -124px -49px;
+    }
+
+    input.jsoneditor-search-previous {
+      cursor: pointer;
+      background-position: -148px -73px;
+      margin-right: 2px;
+    }
+    input.jsoneditor-search-previous:hover {
+      background-position: -148px -49px;
     }
   }
 }

src/jsoneditor.less

@@ -261,7 +261,7 @@ div.jsoneditor-value.jsoneditor-empty::after {
 }
 
 .jsoneditor-highlight-primary {
-  background-color: gold;
+  background-color: #FF9632;
 }
 
 .jsoneditor-button-placeholder {