From c7706f29d12fe8536973acfa65a7a5e6313b26cf Mon Sep 17 00:00:00 2001
From: hjm <63528605@qq.com>
Date: Fri, 26 Jul 2019 14:47:36 +0800
Subject: [PATCH] toHTML delay

---
 public/react/src/common/TextUtil.js           |  6 ++---
 .../components/markdown/MarkdownToHtml.js     | 25 ++++++++++++++++---
 .../courses/exercise/new/MainDisplay.js       | 10 +++++---
 .../courses/exercise/new/NullDisplay.js       |  8 ++++--
 .../exercise/new/QestionDisplayHeader.js      | 11 +++++---
 .../courses/exercise/new/SingleDisplay.js     | 16 ++++++++----
 6 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/public/react/src/common/TextUtil.js b/public/react/src/common/TextUtil.js
index bd524c4a9..70ca23258 100644
--- a/public/react/src/common/TextUtil.js
+++ b/public/react/src/common/TextUtil.js
@@ -6,11 +6,9 @@ export function isImageExtension(fileName) {
 export function markdownToHTML(oldContent, selector) {
     window.$('#md_div').html('')
     // markdown to html
-    try {
-
-    
+    try {    
     var markdwonParser = window.editormd.markdownToHTML("md_div", {
-        markdown: oldContent,
+        markdown: oldContent, // .replace(/▁/g,"▁▁▁"),
         emoji: true,
         htmlDecode: "style,script,iframe",  // you can filter tags decode
         taskList: true,
diff --git a/public/react/src/common/components/markdown/MarkdownToHtml.js b/public/react/src/common/components/markdown/MarkdownToHtml.js
index 266f831ee..0780fc789 100644
--- a/public/react/src/common/components/markdown/MarkdownToHtml.js
+++ b/public/react/src/common/components/markdown/MarkdownToHtml.js
@@ -1,27 +1,44 @@
 import React,{ Component } from "react";
 import { markdownToHTML } from 'educoder'
+/** 
+  selector 需要传入唯一的selector作为id，不然会引起冲突
+  delay 如果有公式，需要传入delay={true}
+*/ 
 class MarkdownToHtml extends Component{
   constructor(props){
     super(props);
     this.state={
     }
   }
+  _markdownToHTML = (content, selector) => {
+    if (this.props.delay == true) {
+      (function(content, selector) {
+        // console.log('selector: ', selector)
+          setTimeout(() => {
+              markdownToHTML(content, selector)
+          }, 600)
+      })(content, selector)
+    } else {
+      markdownToHTML(content, selector)
+    }
+  }
   componentDidUpdate = (prevProps) => {
     if (this.props.content) {
       if ( prevProps.content != this.props.content ) {
-        markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
+        this._markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
       }
     }
   }
   componentDidMount () {
-    this.props.content && markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
+    this.props.content && this._markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
     
   }
   render(){
-    
+    const { style, className } = this.props
     return(
-      <div id="memo_content_editorMd" className={`new_li markdown-body ${this.props.className} markdown_to_html_${this.props.selector || ''}`}
+      <div id="memo_content_editorMd" className={`new_li markdown-body ${className} markdown_to_html_${this.props.selector || ''}`}
         // dangerouslySetInnerHTML={{__html: markdownToHTML(this.props.content)}}
+        style={style}
       >
       </div>
     )
diff --git a/public/react/src/modules/courses/exercise/new/MainDisplay.js b/public/react/src/modules/courses/exercise/new/MainDisplay.js
index 73e5864d6..0581865d7 100644
--- a/public/react/src/modules/courses/exercise/new/MainDisplay.js
+++ b/public/react/src/modules/courses/exercise/new/MainDisplay.js
@@ -7,7 +7,7 @@ import {
 } from 'antd';
 import axios from 'axios'
 import { qNameArray } from './common'
-import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
+import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
 import QestionDisplayHeader from './QestionDisplayHeader'
 const { TextArea } = Input;
 const confirm = Modal.confirm;
@@ -68,10 +68,14 @@ class MainDisplay extends Component{
             { standard_answer[0] && 
             <React.Fragment>
               <div style={{color: '#05101A'}} className="font-16 mb5 font-bd">参考答案：</div>
-              <div className="mainQuestionDisplay markdown-body" 
+              
+              <MarkdownToHtml content={standard_answer[0]} selector={'answer_' + qNumber} 
+                  delay={true} className=""
+              ></MarkdownToHtml>
+              {/* <div className="mainQuestionDisplay markdown-body" 
                   dangerouslySetInnerHTML={{__html: markdownToHTML(standard_answer[0])}}
               >
-              </div>
+              </div> */}
             </React.Fragment>            
             }
 
diff --git a/public/react/src/modules/courses/exercise/new/NullDisplay.js b/public/react/src/modules/courses/exercise/new/NullDisplay.js
index e61c1d2f7..eade97474 100644
--- a/public/react/src/modules/courses/exercise/new/NullDisplay.js
+++ b/public/react/src/modules/courses/exercise/new/NullDisplay.js
@@ -7,7 +7,7 @@ import {
 } from 'antd';
 import axios from 'axios'
 import { qNameArray } from './common'
-import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
+import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
 import QestionDisplayHeader from './QestionDisplayHeader'
 const { TextArea } = Input;
 const confirm = Modal.confirm;
@@ -108,8 +108,12 @@ class NullDisplay extends Component{
                             <span className="lineh-40">答案（填空{index+1}）：</span>
                             <div className="answers">
                                 { answers.answer_text.map((item, itemIndex) => {
-                                    return <span className="answer" key={itemIndex}>{item}</span>
+                                    return <MarkdownToHtml 
+                                        className="answer" key={itemIndex} delay={true}
+                                        content={item} selector={'null_' + (index + 1) + '' + (itemIndex + 1)}     
+                                    ></MarkdownToHtml>
                                 })}
+                                {/* <span className="answer" key={itemIndex}>{item}</span> */}
                             </div>
                         </div>
                     })
diff --git a/public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js b/public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js
index d4a827a68..7b82b14b6 100644
--- a/public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js
+++ b/public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js
@@ -7,7 +7,7 @@ import {
 } from 'antd';
 import axios from 'axios'
 import { qNameArray } from './common'
-import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
+import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
 const { TextArea } = Input;
 const confirm = Modal.confirm;
 const $ = window.$
@@ -80,8 +80,13 @@ class QestionDisplayHeader extends Component{
                 </React.Fragment>}
             </div>
         </div>
-        <span className="markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML(question_title)}} 
-        style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}></span>
+        { question_title && 
+         <MarkdownToHtml content={question_title} selector={'qtitle_' + (index + 1)} style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}
+            delay={true}
+         ></MarkdownToHtml>
+        //  <div className="markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML(question_title)}} 
+        // style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}></div>
+          }
         </React.Fragment>
       )
     }
diff --git a/public/react/src/modules/courses/exercise/new/SingleDisplay.js b/public/react/src/modules/courses/exercise/new/SingleDisplay.js
index 13d1e838c..cbb6da827 100644
--- a/public/react/src/modules/courses/exercise/new/SingleDisplay.js
+++ b/public/react/src/modules/courses/exercise/new/SingleDisplay.js
@@ -7,7 +7,7 @@ import {
 } from 'antd';
 import axios from 'axios'
 import QestionDisplayHeader from './QestionDisplayHeader'
-import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
+import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
 const { TextArea } = Input;
 const confirm = Modal.confirm;
 const $ = window.$
@@ -100,16 +100,22 @@ class SingleDisplay extends Component{
                     return (
                         <div className="mb10 clearfix" key={optionIndex}>
                             <Radio disabled className="fl lineh-20" checked={item.standard_boolean}>{prefix}</Radio>
-                            <span style={{ display: 'inline-block'}} className="markdown-body fl"
-                                    dangerouslySetInnerHTML={{__html:  markdownToHTML(item.choice_text)}}></span>
+                            <MarkdownToHtml content={item.choice_text} selector={'single_' + (index + 1) + '' + (optionIndex + 1)} style={{ float: 'left', display: 'inline-block' }}
+                                delay={true}
+                            ></MarkdownToHtml>
+                            {/* <span style={{ display: 'inline-block'}} className="markdown-body fl"
+                                    dangerouslySetInnerHTML={{__html:  markdownToHTML(item.choice_text)}}></span> */}
                         </div>)
                   } else {
 
                     return (
                         <div className="mb10 clearfix" key={optionIndex}>
                             <Checkbox  disabled className="fl lineh-20" checked={item.standard_boolean}>{prefix}</Checkbox>
-                            <span style={{ display: 'inline-block'}} className="markdown-body fl"
-                                    dangerouslySetInnerHTML={{__html:  markdownToHTML(item.choice_text)}}></span>
+                            <MarkdownToHtml content={item.choice_text} selector={'single_' + (index + 1)+ '' + (optionIndex + 1)} style={{ float: 'left', display: 'inline-block' }}
+                                delay={true}
+                            ></MarkdownToHtml>
+                            {/* <span style={{ display: 'inline-block'}} className="markdown-body fl"
+                                    dangerouslySetInnerHTML={{__html:  markdownToHTML(item.choice_text)}}></span> */}
                         </div>)
                   }
                 })}