WIP: render page with react component

refactor Page, RevisionBody

resource/js/components/Page/PageBody.js → resource/js/components/Page.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Preview from '../PageEditor/Preview';
+import RevisionBody from './Page/RevisionBody';
 
-export default class PageBody extends React.Component {
+export default class Page extends React.Component {
 
   constructor(props) {
     super(props);
@@ -72,7 +72,7 @@ export default class PageBody extends React.Component {
     const isMathJaxEnabled = !!config.env.MATHJAX;
 
     return (
-      <Preview html={this.state.html}
+      <RevisionBody html={this.state.html}
           inputRef={el => this.previewElement = el}
           isMathJaxEnabled={isMathJaxEnabled}
           renderMathJaxOnInit={true}
@@ -81,7 +81,7 @@ export default class PageBody extends React.Component {
   }
 }
 
-PageBody.propTypes = {
+Page.propTypes = {
   crowi: PropTypes.object.isRequired,
   crowiRenderer: PropTypes.object.isRequired,
   markdown: PropTypes.string.isRequired,

resource/js/components/PageEditor/Preview.js → resource/js/components/Page/RevisionBody.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PreviewOptions } from './OptionsSelector';
 
-export default class Preview extends React.Component {
+// TODO refactor
+import { PreviewOptions } from '../PageEditor/OptionsSelector';
+
+export default class RevisionBody extends React.Component {
 
   constructor(props) {
     super(props);
@@ -15,8 +17,7 @@ export default class Preview extends React.Component {
   }
 
   componentDidUpdate() {
-    const opts = this.props.previewOptions;
-    if (this.props.isMathJaxEnabled && opts != null && opts.renderMathJaxInRealtime) {
+    if (this.props.isMathJaxEnabled && this.props.renderMathJaxInRealtime) {
       this.renderMathJax();
     }
   }
@@ -39,16 +40,20 @@ export default class Preview extends React.Component {
           this.element = elm;
           this.props.inputRef(elm);
         }}
-        className="wiki page-editor-preview-body" dangerouslySetInnerHTML={this.generateInnerHtml(this.props.html)}>
+        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>
     )
   }
 }
 
-Preview.propTypes = {
+RevisionBody.propTypes = {
   html: PropTypes.string,
   inputRef: PropTypes.func.isRequired,  // for getting div element
   isMathJaxEnabled: PropTypes.bool,
   renderMathJaxOnInit: PropTypes.bool,
-  previewOptions: PropTypes.instanceOf(PreviewOptions),
+  renderMathJaxInRealtime: PropTypes.bool,
+  // TODO inject previewOptions
+  // previewOptions: PropTypes.instanceOf(PreviewOptions),
 };

resource/js/components/PageEditor.js

@@ -4,9 +4,10 @@ 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 {
 
@@ -306,11 +307,11 @@ export default class PageEditor extends React.Component {
           />
         </div>
         <div className="col-md-6 hidden-sm hidden-xs page-editor-preview-container">
-          <Preview html={this.state.html}
+          <RevisionBody 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/SearchPage/SearchResultList.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import PageBody from '../Page/PageBody.js';
+import Page from '../Page.js';
 
 export default class SearchResultList extends React.Component {
 
@@ -18,7 +18,7 @@ export default class SearchResultList extends React.Component {
         <div id={page._id} key={page._id} className="search-result-page">
           <h2><a href={page.path}>{page.path}</a></h2>
           <div className="wiki">
-            <PageBody
+            <Page
               crowi={this.props.crowi}
               crowiRenderer={this.props.crowiRenderer}
               markdown={pageBody}