WIP: render page with react component

Ensure to use renderes of different settings according to the mode

resource/js/app.js

@@ -64,7 +64,7 @@ if (isLoggedin) {
   crowi.fetchUsers();
 }
 
-const crowiRenderer = new GrowiRenderer(crowi);
+const crowiRenderer = new GrowiRenderer(crowi, {mode: 'page'});
 window.crowiRenderer = crowiRenderer;
 
 // FIXME
@@ -87,7 +87,7 @@ const onSaveSuccess = function(page) {
 const componentMappings = {
   'search-top': <HeaderSearchBox crowi={crowi} />,
   'search-page': <SearchPage crowi={crowi} />,
-  'page': <Page crowi={crowi} crowiRenderer={crowiRenderer} markdown={markdown} pagePath={pagePath} />,
+  'page': <Page crowi={crowi} crowiRenderer={crowiRenderer} markdown={markdown} pagePath={pagePath} showHeadEditButton={true} />,
   'page-list-search': <PageListSearch crowi={crowi} />,
   'page-comments-list': <PageComments pageId={pageId} revisionId={pageRevisionId} revisionCreatedAt={pageRevisionCreatedAt} crowi={crowi} />,
   'page-attachment': <PageAttachment pageId={pageId} pageContent={pageContent} crowi={crowi} />,

resource/js/components/PageEditor.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import * as toastr from 'toastr';
 import { throttle, debounce } from 'throttle-debounce';
 
+import GrowiRenderer from '../util/GrowiRenderer';
+
 import { EditorOptions, PreviewOptions } from './PageEditor/OptionsSelector';
 import Editor from './PageEditor/Editor';
 import Preview from './PageEditor/Preview';
@@ -28,6 +30,8 @@ export default class PageEditor extends React.Component {
       previewOptions: this.props.previewOptions,
     };
 
+    this.growiRenderer = new GrowiRenderer(this.props.crowi, {mode: 'editor'});
+
     this.setCaretLine = this.setCaretLine.bind(this);
     this.focusToEditor = this.focusToEditor.bind(this);
     this.onMarkdownChanged = this.onMarkdownChanged.bind(this);
@@ -263,20 +267,21 @@ export default class PageEditor extends React.Component {
       currentPagePath: decodeURIComponent(location.pathname)
     };
 
+    const growiRenderer = this.growiRenderer;
     const interceptorManager = this.props.crowi.interceptorManager;
     interceptorManager.process('preRenderPreview', context)
       .then(() => interceptorManager.process('prePreProcess', context))
       .then(() => {
-        context.markdown = crowiRenderer.preProcess(context.markdown);
+        context.markdown = growiRenderer.preProcess(context.markdown);
       })
       .then(() => interceptorManager.process('postPreProcess', context))
       .then(() => {
-        var parsedHTML = crowiRenderer.process(context.markdown);
+        var parsedHTML = growiRenderer.process(context.markdown);
         context['parsedHTML'] = parsedHTML;
       })
       .then(() => interceptorManager.process('prePostProcess', context))
       .then(() => {
-        context.parsedHTML = crowiRenderer.postProcess(context.parsedHTML, context.dom);
+        context.parsedHTML = growiRenderer.postProcess(context.parsedHTML, context.dom);
       })
       .then(() => interceptorManager.process('postPostProcess', context))
       .then(() => interceptorManager.process('preRenderPreviewHtml', context))

resource/js/components/SearchPage/SearchResult.js

@@ -262,7 +262,6 @@ export default class SearchResult extends React.Component {
           <div className="col-md-8 search-result-content" id="search-result-content">
             <SearchResultList
               crowi={this.props.crowi}
-              crowiRenderer={crowiRenderer}
               pages={this.props.pages}
               searchingKeyword={this.props.searchingKeyword}
               />

resource/js/components/SearchPage/SearchResultList.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import GrowiRenderer from '../../util/GrowiRenderer';
+
 import Page from '../Page.js';
 
 export default class SearchResultList extends React.Component {
 
   constructor(props) {
     super(props);
+
+    this.growiRenderer = new GrowiRenderer(this.props.crowi, {mode: 'searchresult'});
   }
 
   render() {
@@ -19,10 +23,10 @@ export default class SearchResultList extends React.Component {
           <h2><a href={page.path}>{page.path}</a></h2>
           <Page
             crowi={this.props.crowi}
-            crowiRenderer={this.props.crowiRenderer}
+            crowiRenderer={this.growiRenderer}
             markdown={pageBody}
             pagePath={page.path}
-            // highlightKeywords={this.props.searchingKeyword}
+            highlightKeywords={this.props.searchingKeyword}
           />
         </div>
       );
@@ -38,7 +42,6 @@ export default class SearchResultList extends React.Component {
 
 SearchResultList.propTypes = {
   crowi: PropTypes.object.isRequired,
-  crowiRenderer: PropTypes.object.isRequired,
   pages: PropTypes.array.isRequired,
   searchingKeyword: PropTypes.string.isRequired,
 };

resource/js/legacy/crowi.js

@@ -5,6 +5,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import GrowiRenderer from '../util/GrowiRenderer';
 import Page from '../components/Page';
 
 const io = require('socket.io-client');
@@ -412,8 +413,14 @@ $(function() {
   });
 
   // for list page
+  let growiRendererForTimeline = null;
   $('a[data-toggle="tab"][href="#view-timeline"]').on('show.bs.tab', function() {
     var isShown = $('#view-timeline').data('shown');
+
+    if (growiRendererForTimeline == null) {
+      growiRendererForTimeline = new GrowiRenderer(crowi, {mode: 'timeline'});
+    }
+
     if (isShown == 0) {
       $('#view-timeline .timeline-body').each(function()
       {
@@ -425,7 +432,7 @@ $(function() {
         var pagePath = document.getElementById(id).getAttribute('data-page-path');
         var markdown = entities.decodeHTML($(contentId).html());
 
-        ReactDOM.render(<Page crowi={crowi} crowiRenderer={crowiRenderer} markdown={markdown} pagePath={pagePath} />, revisionBodyElem);
+        ReactDOM.render(<Page crowi={crowi} crowiRenderer={growiRendererForTimeline} markdown={markdown} pagePath={pagePath} />, revisionBodyElem);
       });
 
       $('#view-timeline').data('shown', 1);

resource/js/util/GrowiRenderer.js

@@ -19,7 +19,7 @@ import TocAndAnchorConfigurer from './markdown-it/toc-and-anchor';
 export default class GrowiRenderer {
 
 
-  constructor(crowi) {
+  constructor(crowi, option) {
     this.crowi = crowi;
 
     this.preProcessors = [
@@ -29,32 +29,62 @@ export default class GrowiRenderer {
     ];
     this.postProcessors = [
     ];
-    this.markdownItConfigurers = [
-      new CommonPluginsConfigurer(crowi),
-      new TocAndAnchorConfigurer(crowi),
-      new HeaderConfigurer(crowi),
-      new HeaderLineNumberConfigurer(crowi),
-      new TableConfigurer(crowi),
-      new EmojiConfigurer(crowi),
-      new MathJaxConfigurer(crowi),
-      new PlantUMLConfigurer(crowi),
-    ];
+
     this.langProcessors = {
       'template': new Template(crowi),
     };
 
     this.configure = this.configure.bind(this);
-    this.configurePlugins = this.configurePlugins.bind(this);
+    this.configureMarkdownIt = this.configureMarkdownIt.bind(this);
     this.process = this.process.bind(this);
     this.codeRenderer = this.codeRenderer.bind(this);
 
     this.md = new MarkdownIt();
     this.configure(this.crowi.getConfig());
-    this.configurePlugins(this.crowi.getConfig());
+    this.configureMarkdownIt(option);
+
+  }
+
+  configureMarkdownIt(option) {
+    const crowi = this.crowi;
+
+    let configurers = [
+      new CommonPluginsConfigurer(crowi),
+      new HeaderConfigurer(crowi),
+      new TableConfigurer(crowi),
+      new EmojiConfigurer(crowi),
+      new MathJaxConfigurer(crowi),
+      new PlantUMLConfigurer(crowi),
+    ];
+
+    if (option != null) {
+      const mode = option.mode;
+      switch (mode) {
+        case 'page':
+          configurers = configurers.concat([
+            new TocAndAnchorConfigurer(crowi),
+            new HeaderLineNumberConfigurer(crowi),
+          ]);
+          break;
+        case 'editor':
+          configurers = configurers.concat([
+            new HeaderLineNumberConfigurer(crowi)
+          ]);
+          break;
+        case 'timeline':
+          break;
+        case 'searchresult':
+          break;
+      }
+    }
+
+    configurers.forEach((configurer) => {
+      configurer.configure(this.md);
+    });
   }
 
   /**
-   * configure markdown-it
+   * configure with crowi config
    * @param {any} config
    */
   configure(config) {
@@ -66,16 +96,6 @@ export default class GrowiRenderer {
     });
   }
 
-  /**
-   * configure markdown-it plugins
-   * @param {any} config
-   */
-  configurePlugins(config) {
-    this.markdownItConfigurers.forEach((configurer) => {
-      configurer.configure(this.md);
-    });
-  }
-
   preProcess(markdown) {
     for (let i = 0; i < this.preProcessors.length; i++) {
       if (!this.preProcessors[i].process) {