Tmp

resource/css/_wiki.scss

@@ -130,6 +130,10 @@ div.body {
     }
   }
 
+  .highlighted {
+    background: #ff0;
+  }
+
   // {{{ table (copied from bootstrap .table
   table {
     width: 100%;

resource/js/components/Page/PageBody.js

@@ -16,60 +16,41 @@ export default class PageBody extends React.Component {
       body = this.props.page.revision.body;
     }
 
-
-    //var contentHtml = Crowi.unescape(contentText);
-    //// TODO 前処理系のプラグイン化
-    //contentHtml = this.preFormatMarkdown(contentHtml);
-    //contentHtml = this.expandImage(contentHtml);
-    //contentHtml = this.link(contentHtml);
-
-    //var $body = this.$revisionBody;
-    // Using async version of marked
-    //{}, function (err, content) {
-    //  if (err) {
-    //    throw err;
-    //  }
-    //  $body.html(content);
-    //});
-    //return body;
+    let parsed = '<b>hoge</b>';
     try {
-    marked.setOptions({
-      gfm: true,
-      highlight: (code, lang, callback) => {
-        let result, hl;
-        if (lang) {
-          try {
-            hl = hljs.highlight(lang, code);
-            result = hl.value;
-          } catch (e) {
+      // TODO
+      marked.setOptions({
+        gfm: true,
+        highlight: (code, lang, callback) => {
+          let result, hl;
+          if (lang) {
+            try {
+              hl = hljs.highlight(lang, code);
+              result = hl.value;
+            } catch (e) {
+              result = code;
+            }
+          } else {
             result = code;
           }
-        } else {
-          result = code;
-        }
-        return callback(null, result);
-      },
-      tables: true,
-      breaks: true,
-      pedantic: false,
-      sanitize: false,
-      smartLists: true,
-      smartypants: false,
-      langPrefix: 'lang-'
-    });
-    console.log('parsing', 'いくぜ');
-    //const parsed = marked(body);
-    const parsed = '<b>hoge</b>';
-    console.log('parsed', parsed);
-    } catch (e) { console.log(e); }
+          return callback(null, result);
+        },
+        tables: true,
+        breaks: true,
+        pedantic: false,
+        sanitize: false,
+        smartLists: true,
+        smartypants: false,
+        langPrefix: 'lang-'
+      });
+      parsed = marked(body);
+    } catch (e) { console.log(e, e.stack); }
 
     return { __html: parsed };
   }
 
   render() {
-    console.log('Render!');
     const parsedBody = this.getMarkupHTML();
-    console.log('parse completed', parsedBody);
 
     return (
       <div

resource/js/components/SearchPage.js

@@ -1,10 +1,9 @@
 // This is the root component for #search-page
 
 import React from 'react';
-
+import axios from 'axios'
 import SearchForm from './SearchPage/SearchForm';
 import SearchResult from './SearchPage/SearchResult';
-import axios from 'axios'
 
 export default class SearchPage extends React.Component {
 
@@ -19,6 +18,7 @@ export default class SearchPage extends React.Component {
     }
 
     this.search = this.search.bind(this);
+    this.changeURL = this.changeURL.bind(this);
   }
 
   componentDidMount() {
@@ -40,6 +40,12 @@ export default class SearchPage extends React.Component {
     return query;
   }
 
+  changeURL(keyword) {
+    if (window.history && window.history.pushState ){
+      window.history.pushState(state, 'hoge', 'x');
+    }
+  }
+
   search(data) {
     const keyword = data.keyword;
     if (keyword === '') {
@@ -63,6 +69,8 @@ export default class SearchPage extends React.Component {
           searchedPages: res.data.data,
         });
       }
+
+      this.changeURL(keyword);
       // TODO error
     })
     .catch((res) => {

resource/js/components/SearchPage/SearchForm.js

@@ -40,7 +40,7 @@ export default class SearchForm extends React.Component {
 
   render() {
     return (
-      <form className="form" onSubmit={this.handleSubmit}>
+      <form className="form form-group input-group" onSubmit={this.handleSubmit}>
         <input
           type="text"
           name="q"
@@ -48,6 +48,11 @@ export default class SearchForm extends React.Component {
           onChange={this.handleChange}
           className="form-control"
           />
+          <span className="input-group-btn">
+            <button type="submit" className="btn btn-default">
+              <i className="search-top-icon fa fa-search"></i>
+            </button>
+          </span>
       </form>
     );
   }

resource/js/components/SearchPage/SearchResult.js

@@ -11,7 +11,7 @@ export default class SearchResult extends React.Component {
     const listView = this.props.pages.map((page) => {
       const pageId = "#" + page._id;
       return (
-        <Page page={page} linkTo={pageId} key={page_.id}>
+        <Page page={page} linkTo={pageId} key={page._id}>
           <div className="page-list-option">
             <a href={page.path}><i className="fa fa-arrow-circle-right" /></a>
           </div>
@@ -21,6 +21,7 @@ export default class SearchResult extends React.Component {
 
     return (
       <div className="content-main" id="content-main">
+        <span>Search {this.props.searchingKeyword}</span>
         <div className="search-result row" id="search-result">
           <div className="col-md-4 page-list search-result-list" id="search-result-list">
             <nav data-spy="affix"  data-offset-top="120">

resource/js/components/SearchPage/SearchResultList.js

@@ -14,7 +14,7 @@ export default class SearchResultList extends React.Component {
     let returnBody = body;
 
     this.props.searchingKeyword.split(' ').forEach((keyword) => {
-      const keywordExp = new RegExp('(' + keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ')', 'g');
+      const keywordExp = new RegExp('(' + keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ')', 'ig');
       returnBody = returnBody.replace(keyword, '<span style="highlighted">$&</span>');
     });
 
@@ -30,7 +30,7 @@ export default class SearchResultList extends React.Component {
       return (
         <div id={page._id} key={page._id}>
           <h2>{page.path}</h2>
-          <div>
+          <div className="wiki">
             <PageBody page={page} pageBody={pageBody} />
           </div>
         </div>