creat CommentHtml File

resource/js/app.js

@@ -138,7 +138,7 @@ if (writeCommentElem) {
     }
   };
   ReactDOM.render(
-    <CommentForm crowi={crowi} pageId={pageId} revisionId={pageRevisionId} onPostComplete={postCompleteHandler} />,
+    <CommentForm crowi={crowi} pageId={pageId} revisionId={pageRevisionId} onPostComplete={postCompleteHandler} crowiRenderer={crowiRenderer}/>,
     writeCommentElem);
 }
 

resource/js/components/PageComment/CommentForm.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from 'react-bootstrap/es/Button';
 import FormControl from 'react-bootstrap/es/FormControl';
-import Panel from 'react-bootstrap/es/panel';
 import Tab from 'react-bootstrap/es/tab';
 import Tabs from 'react-bootstrap/es/tabs';
 import UserPicture from '../User/UserPicture';
+import CommentHtml from './CommentHtml';
 /**
  *
  * @author Yuki Takei <yuki@weseek.co.jp>
@@ -20,7 +20,7 @@ export default class CommentForm extends React.Component {
     super(props);
 
     this.state = {
-      comment: '',
+      comment: 'hoge',
       isMarkdown: false,
     };
 
@@ -64,6 +64,7 @@ export default class CommentForm extends React.Component {
   }
 
   render() {
+console.log(`commentfotm`)
     //{% if not user %}disabled{% endif %}をtextareaとbuttonに追加
     // denounce/throttle
     return (
@@ -84,7 +85,7 @@ export default class CommentForm extends React.Component {
           </Tab>
               <Tab eventKey={2} title="Prevrew">
                <div className="comment-form-prevew">
-               preview
+                 <CommentHtml crowi={this.props.crowi} crowiRenderer={this.props.crowiRenderer} comment={this.state.comment}/>
                </div>
               </Tab>
             </Tabs>
@@ -111,4 +112,5 @@ CommentForm.propTypes = {
   onPostComplete: PropTypes.func,
   pageId: PropTypes.string,
   revisionId: PropTypes.string,
+  crowiRenderer:  PropTypes.object.isRequired,
 };

resource/js/components/PageComment/CommentHtml.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+/**
+ *
+ * @author Yuki Takei <yuki@weseek.co.jp>
+ *
+ * @export
+ * @class Comment
+ * @extends {React.Component}
+ */
+export default class CommentHtml extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      html: 'HTML',
+    };
+
+    this.setCommentHtml = this.setCommentHtml.bind(this);
+    this.renderHtml = this.renderHtml.bind(this);
+  }
+
+  setCommentHtml() {
+this.renderHtml(this.props.comment);
+  }
+
+  renderHtml(markdown) {
+    var context = {
+      markdown,
+      dom: this.revisionBodyElement,
+    };
+
+    const crowiRenderer = this.props.crowiRenderer;
+    const interceptorManager = this.props.crowi.interceptorManager;
+    interceptorManager.process('prePreviewRender', context)
+      .then(() => interceptorManager.process('prePreviewPreProcess', context))
+      .then(() => {
+        context.markdown = crowiRenderer.preProcess(context.markdown);
+      })
+      .then(() => interceptorManager.process('postPreviewPreProcess', context))
+      .then(() => {
+        var parsedHTML = crowiRenderer.process(context.markdown);
+        context['parsedHTML'] = parsedHTML;
+      })
+      .then(() => interceptorManager.process('prePreviewPostProcess', context))
+      .then(() => {
+        context.parsedHTML = crowiRenderer.postProcess(context.parsedHTML, context.dom);
+      })
+      .then(() => interceptorManager.process('postPreviewPostProcess', context))
+      .then(() => interceptorManager.process('prePreviewRenderHtml', context))
+      .then(() => {
+  //       this.setState({ html: context.parsedHTML });
+      })
+      // process interceptors for post rendering
+      .then(() => interceptorManager.process('postPreviewRenderHtml', context));
+
+  }
+
+  render() {
+    console.log(`write`)
+    this.setCommentHtml()
+    return (
+      <div>
+        html
+        </div>
+
+    )
+  }
+}
+
+CommentHtml.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  crowiRenderer:  PropTypes.object.isRequired,
+  comment: PropTypes.string.isRequired,
+};