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 ) {
        this._markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
      }
    }
  }
  componentDidMount () {
    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 ${className} markdown_to_html_${this.props.selector || ''}`}
        // dangerouslySetInnerHTML={{__html: markdownToHTML(this.props.content)}}
        style={style}
      >
      </div>
    )
  }
}
export default MarkdownToHtml;