/
ReviewContent.jsx
100 lines (93 loc) · 3.43 KB
/
ReviewContent.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
var Guessing = require('./Guessing.jsx');
module.exports = React.createClass({
getDefaultProps: function() {
marked.setOptions({breaks: true});
return {
progressState: 'backSide',
preview: false
};
},
shouldComponentUpdate(nextProps, nextState){
return this.props.preview || nextProps.progressState !== this.props.progressState;
},
componentDidMount: function (root) {
this.renderMathJax();
},
componentDidUpdate: function (prevProps, state) {
//this.renderMathJax();
//var math = MathJax.Hub.getAllJax("frontsideCanvas");
//console.log("debzug math: " + JSON.stringify(math));
//MathJax.Hub.Queue(["Text",math,"x+1"]);
//MathJax.Hub.queue.Push(["Text",math,"x+1"]);
this.renderMathJax();
},
renderMathJax(){
MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.refs["frontsideCanvas"].getDOMNode()]);
if(this.props.progressState === "backSide"){
MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.refs["backsideCanvas"].getDOMNode()]);
}
},
onFlip(){
this.props.onFlip();
},
renderMarkdownOld(str){
var latexStringBuffer = [];
var backStrNew = str.replace(/(\$.*?\$)/g, function(match, p1){
latexStringBuffer.push(p1);
return '$$';
});
return marked(backStrNew).replace(/\$\$/g, function(){
// and replace the placeholders with transformed math
return latexStringBuffer.shift();
});
},
renderMarkdown(str){
var latexStringBuffer = [];
var backStrNew = str.replace(/(\$.*?\$)/g, function(match, p1){
latexStringBuffer.push(p1);
return '$$';
});
return marked(backStrNew).replace(/\$\$/g, function(){
// and replace the placeholders with transformed math
return latexStringBuffer.shift();
});
},
render(){
var thisOuter = this;
var template = this.props.template;
var frontStr = template.front.replace(
/{(\w*)}/g, function (match, p1) {
return thisOuter.props.templateData[p1];
});
var backStr = template.back.replace(
/{(\w*)}/g, function (match, p1) {
return thisOuter.props.templateData[p1];
});
return(
<div id="reviewStage">
<div
ref="frontsideCanvas"
id="frontsideCanvas"
className="markdowned"
dangerouslySetInnerHTML={{__html: this.renderMarkdown(frontStr)}}>
</div>
{this.props.useGuess &&
<Guessing
onFlip={this.onFlip}
backStr={(this.props.progressState === "backSide" && this.props.useGuess)?backStr:false}
/>
}
{this.props.progressState === "backSide" &&
<hr className={this.props.progressState === "backSide" ? "" : "invisible"} />
}
{this.props.progressState === "backSide" &&
<div
ref="backsideCanvas"
className="markdowned"
dangerouslySetInnerHTML={{__html: this.renderMarkdown(backStr)}}>
</div>
}
</div>
)
}
});