WIP: render page with react component

refactor PageEditor, Preview

resource/js/components/Page/RevisionBody.js

@@ -1,9 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-// TODO refactor
-import { PreviewOptions } from '../PageEditor/OptionsSelector';
-
 export default class RevisionBody extends React.Component {
 
   constructor(props) {
@@ -41,8 +38,6 @@ export default class RevisionBody extends React.Component {
           this.props.inputRef(elm);
         }}
         className="wiki" dangerouslySetInnerHTML={this.generateInnerHtml(this.props.html)}>
-        {/* TODO add .page-editor-preview-body when using from PageEditor */}
-        {/* className="wiki page-editor-preview-body" dangerouslySetInnerHTML={this.generateInnerHtml(this.props.html)}> */}
       </div>
     )
   }
@@ -54,6 +49,4 @@ RevisionBody.propTypes = {
   isMathJaxEnabled: PropTypes.bool,
   renderMathJaxOnInit: PropTypes.bool,
   renderMathJaxInRealtime: PropTypes.bool,
-  // TODO inject previewOptions
-  // previewOptions: PropTypes.instanceOf(PreviewOptions),
 };

resource/js/components/PageEditor.js

@@ -4,10 +4,9 @@ import PropTypes from 'prop-types';
 import * as toastr from 'toastr';
 import { throttle, debounce } from 'throttle-debounce';
 
-import RevisionBody from './Page/RevisionBody';
-
 import { EditorOptions, PreviewOptions } from './PageEditor/OptionsSelector';
 import Editor from './PageEditor/Editor';
+import Preview from './PageEditor/Preview';
 
 export default class PageEditor extends React.Component {
 
@@ -307,11 +306,11 @@ export default class PageEditor extends React.Component {
           />
         </div>
         <div className="col-md-6 hidden-sm hidden-xs page-editor-preview-container">
-          <RevisionBody html={this.state.html}
+          <Preview html={this.state.html}
               inputRef={el => this.previewElement = el}
               isMathJaxEnabled={this.state.isMathJaxEnabled}
               renderMathJaxOnInit={false}
-              // previewOptions={this.state.previewOptions}
+              previewOptions={this.state.previewOptions}
           />
         </div>
       </div>

resource/js/components/PageEditor/Preview.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import RevisionBody from '../Page/RevisionBody';
+
+import { PreviewOptions } from './OptionsSelector';
+
+/**
+ * Wrapper component for Page/RevisionBody
+ */
+export default class Preview extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const renderMathJaxInRealtime = this.props.previewOptions.renderMathJaxInRealtime;
+
+    return (
+      <div className="page-editor-preview-body">
+        <RevisionBody
+          ref={(elm) => {
+            this.props.inputRef(elm);
+          }}
+          {...this.props}
+          renderMathJaxInRealtime={renderMathJaxInRealtime}
+        />
+      </div>
+    )
+  }
+}
+
+Preview.propTypes = {
+  html: PropTypes.string,
+  inputRef: PropTypes.func.isRequired,  // for getting div element
+  isMathJaxEnabled: PropTypes.bool,
+  renderMathJaxOnInit: PropTypes.bool,
+  previewOptions: PropTypes.instanceOf(PreviewOptions),
+};

resource/js/components/SearchPage/SearchResultList.js

@@ -17,15 +17,13 @@ export default class SearchResultList extends React.Component {
       return (
         <div id={page._id} key={page._id} className="search-result-page">
           <h2><a href={page.path}>{page.path}</a></h2>
-          <div className="wiki">
-            <Page
-              crowi={this.props.crowi}
-              crowiRenderer={this.props.crowiRenderer}
-              markdown={pageBody}
-              pagePath={page.path}
-              // highlightKeywords={this.props.searchingKeyword}
-            />
-          </div>
+          <Page
+            crowi={this.props.crowi}
+            crowiRenderer={this.props.crowiRenderer}
+            markdown={pageBody}
+            pagePath={page.path}
+            // highlightKeywords={this.props.searchingKeyword}
+          />
         </div>
       );
     });