Merge pull request #556 from weseek/imprv/enable-search-help

Imprv/enable search help

resource/js/components/PageEditor/CodeMirrorEditor.js

@@ -34,6 +34,7 @@ require('codemirror/addon/fold/foldgutter');
 require('codemirror/addon/fold/foldgutter.css');
 require('codemirror/addon/fold/markdown-fold');
 require('codemirror/addon/fold/brace-fold');
+require('codemirror/addon/display/placeholder');
 require('codemirror/mode/gfm/gfm');
 require('../../util/codemirror/autorefresh.ext');
 
@@ -460,6 +461,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       <ReactCodeMirror
         ref="cm"
         className={additionalClasses}
+        placeholder="search"
         editorDidMount={(editor) => {
           // add event handlers
           editor.on('paste', this.pasteHandler);
@@ -522,7 +524,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
       />
 
       { this.renderLoadingKeymapOverlay() }
-
     </React.Fragment>;
   }
 

resource/js/components/SearchTypeahead.js

@@ -91,6 +91,9 @@ export default class SearchTypeahead extends React.Component {
 
   onInputChange(text) {
     this.setState({input: text});
+    if (text === '') {
+      this.setState({pages: []});
+    }
   }
 
   onChange(selected) {
@@ -142,6 +145,7 @@ export default class SearchTypeahead extends React.Component {
     const defaultSelected = (this.props.keywordOnInit != '')
       ? [{path: this.props.keywordOnInit}]
       : [];
+    const help = this.getHelpElement();
 
     return (
       <div className="search-typeahead">
@@ -151,7 +155,7 @@ export default class SearchTypeahead extends React.Component {
           inputProps={{name: 'q', autoComplete: 'off'}}
           isLoading={this.state.isLoading}
           labelKey="path"
-          minLength={2}
+          minLength={0}
           options={this.state.pages} // Search result (Some page names)
           emptyLabel={this.emptyLabel ? this.emptyLabel : emptyLabel}
           align='left'
@@ -161,11 +165,34 @@ export default class SearchTypeahead extends React.Component {
           renderMenuItemChildren={this.renderMenuItemChildren}
           caseSensitive={false}
           defaultSelected={defaultSelected}
+          promptText={help}
         />
         {restoreFormButton}
       </div>
     );
   }
+
+  getHelpElement() {
+    return <table className="table table-borderd search-help">
+              <caption className="text-center">Search Help</caption>
+              <tr>
+                <td className="text-center">keyword</td>
+                <th>記事名 or カテゴリ or 本文にkeywordを含む</th>
+              </tr>
+              <tr>
+                <td className="text-center">title:keyword</td>
+                <th>記事名にkeywordを含む</th>
+              </tr>
+              <tr>
+                <td className="text-center">a b</td>
+                <th>文字列aとbを含む(スペース区切り)</th>
+              </tr>
+              <tr>
+                <td className="text-center">-keyword</td>
+                <th>文字列keywordを含まない</th>
+              </tr>
+            </table>;
+  }
 }
 
 /**

resource/styles/scss/_search.scss

@@ -1,10 +1,10 @@
 // import react-bootstrap-typeahead
 @import "~react-bootstrap-typeahead/css/Typeahead";
-
 .search-listpage-icon {
   font-size: 16px;
   color: #999;
 }
+
 .search-listpage-clear {
   display: none;
   position: absolute;
@@ -18,7 +18,6 @@
 
 .search-typeahead {
   position: relative;
-
   .search-clear {
     position: absolute;
     z-index: 2;
@@ -31,18 +30,15 @@
   }
   .rbt-menu {
     margin-top: 3px;
-
     li a span {
       .page-path {
         display: inline;
         padding: 0 4px;
         color: inherit;
       }
-
       .page-list-meta {
         font-size: .9em;
         color: #999;
-
         >span {
           margin-right: .3rem;
         }
@@ -51,6 +47,13 @@
   }
 }
 
+// search help
+.search-help {
+  .search-help, td, th {
+    border: solid 1px gray;
+  }
+}
+
 // top and sidebar input styles
 .search-top, .search-sidebar {
   .search-clear {