Replaced dangerouslySetInnerHTML

package.json

@@ -55,6 +55,7 @@
     "react-helmet": "^5.2.0",
     "react-overlays": "^0.8.3",
     "react-redux": "^4.4.9",
+    "react-render-html": "^0.6.0",
     "react-router": "^3.2.1",
     "react-router-bootstrap": "^0.23.3",
     "react-router-scroll": "^0.4.4",

src/components/CoursePage/CourseInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import renderHTML from 'react-render-html';
 import CollapsiblePanel from '../CollapsiblePanel';
 import {getCourseInfo} from '../../resources/courseContent';
 import {getTranslator} from '../../selectors/translate';
@@ -11,8 +12,8 @@ const CourseInfo = ({t, isStudentMode, courseInfo}) => {
   const bsStyle = isStudentMode ? 'student' : 'teacher';
   return (
     <CollapsiblePanel initiallyExpanded={false} header={t('coursepage.courseinfo')} {...{bsStyle}}>
-      {courseInfo.__html ?
-        <div dangerouslySetInnerHTML={courseInfo}/>
+      {courseInfo ?
+        <div>{renderHTML(courseInfo)}</div>
         :
         <h4>{t('coursepage.courseinfonotfound')}</h4>
       }
@@ -23,18 +24,16 @@ const CourseInfo = ({t, isStudentMode, courseInfo}) => {
 CourseInfo.propTypes = {
   // mapStateToProps
   t: PropTypes.func.isRequired,
-  courseInfo: PropTypes.shape({__html: PropTypes.string}).isRequired,
+  courseInfo: PropTypes.string.isRequired,
   isStudentMode: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = (state, {courseName}) => ({
   t: getTranslator(state),
-  courseInfo: {
-    __html: processCourseInfo(
-      getCourseInfo(courseName, state.language),
-      {baseurl: getLanguageIndependentCoursePath(courseName)},
-    ),
-  },
+  courseInfo: processCourseInfo(
+    getCourseInfo(courseName, state.language),
+    {baseurl: getLanguageIndependentCoursePath(courseName)},
+  ),
   isStudentMode: state.isStudentMode
 });
 

src/components/LessonPage/Content.js

@@ -1,27 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import renderHTML from 'react-render-html';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import styles from './Content.scss';
 import {processContent} from '../../utils/processContent';
 import {getLessonContent} from '../../resources/lessonContent';
 
-const createMarkup = (lessonContent, isHydrated) => {
-  return ({__html: processContent(lessonContent, styles, isHydrated)});
-};
-
-// const Loading = () => <div>Loading...</div>;
-//
-// const getLesson = (path) => Loadable({
-//   loader: () => import('./Content'),
-//   loading: Loading,
-// });
-
-//console.log('lessonContext.keys:', lessonContext.keys());
-
 const Content = ({course, lesson, language, isReadme, isHydrated}) => {
   const lessonContent = getLessonContent(course, lesson, language, isReadme);
-  return <div dangerouslySetInnerHTML={createMarkup(lessonContent, isHydrated)}/>;
+  return <div>{renderHTML(processContent(lessonContent, styles, isHydrated))}</div>;
 };
 Content.propTypes = {
   // ownProps

src/components/LessonPage/ToggleButton.js

@@ -1,19 +1,17 @@
-/* eslint-env node */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from 'react-bootstrap/lib/Button';
 import Collapse from 'react-bootstrap/lib/Collapse';
+import renderHTML from 'react-render-html';
 
 class ToggleButton extends React.Component {
   constructor(props) {
     super(props);
     this.state = {open: false};
   }
 
-  createMarkup = () => ({__html: this.props.hiddenHTML})
-
   render() {
+    const {hiddenHTML} = this.props;
     const containerStyle = {
       margin: '10px 0',
       padding: '10px',
@@ -32,7 +30,7 @@ class ToggleButton extends React.Component {
         <Collapse in={this.state.open}>
           <div>
             <div style={contentStyle}>
-              <div dangerouslySetInnerHTML={this.createMarkup()}/>
+              {renderHTML(hiddenHTML)}
             </div>
           </div>
         </Collapse>

src/components/MarkdownRenderer.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import markdownGenerator from 'markdown-it';
+import renderHTML from 'react-render-html';
 
 const markdown = markdownGenerator();
 
 const MarkdownRenderer = ({src, inline}) => {
   if (src) {
     return inline ?
-      <span dangerouslySetInnerHTML={{__html: markdown.renderInline(src)}}/> :
-      <div dangerouslySetInnerHTML={{__html: markdown.render(src)}}/>;
+      <span>{renderHTML(markdown.renderInline(src))}</span> :
+      <div>{renderHTML(markdown.render(src))}</div>;
   } else {
     return null;
   }

src/components/PopoverComponent.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import renderHTML from 'react-render-html';
 import styles from './PopoverComponent.scss';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import Popover from 'react-bootstrap/lib/Popover';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import {hashCode} from '../utils/util';
 
 const PopoverComponent = ({children, popoverContent, showDyslexicFont}) => {
-  const createMarkup = () => {
-    return {__html: popoverContent};
-  };
   const className = showDyslexicFont ? styles.contentDyslexia : styles.content;
   const overlay =
     <Popover id={hashCode(popoverContent)} className={styles.popover}>
-      <div {...{className}} role='region' dangerouslySetInnerHTML={createMarkup()}/>
+      <div {...{className}} role='region'>
+        {renderHTML(popoverContent)}
+      </div>
     </Popover>;
   const options = {
     animation: true,

yarn.lock

@@ -78,6 +78,10 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@types/node@*":
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.7.1.tgz#b704d7c259aa40ee052eec678758a68d07132a2e"
+
 JSONStream@^0.8.4:
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-0.8.4.tgz#91657dfe6ff857483066132b4618b62e8f4887bd"
@@ -6088,6 +6092,12 @@ parse5@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
 
+parse5@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
+  dependencies:
+    "@types/node" "*"
+
 parseurl@~1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
@@ -6815,6 +6825,10 @@ re-reselect@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/re-reselect/-/re-reselect-0.5.0.tgz#cee923e59a4ab7f9d9d85fae1479686cb4e1ee50"
 
+react-attr-converter@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/react-attr-converter/-/react-attr-converter-0.3.1.tgz#4a2abf6d907b7ddae4d862dfec80e489ce41ad6e"
+
 react-bootstrap@^0.31.1:
   version "0.31.5"
   resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.31.5.tgz#57040fa8b1274e1e074803c21a1b895fdabea05a"
@@ -6880,6 +6894,13 @@ react-redux@^4.4.9:
     loose-envify "^1.1.0"
     prop-types "^15.5.4"
 
+react-render-html@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-render-html/-/react-render-html-0.6.0.tgz#1af51d859ed75474435a1c65c293a48e12c36627"
+  dependencies:
+    parse5 "^3.0.2"
+    react-attr-converter "^0.3.1"
+
 react-router-bootstrap@^0.23.3:
   version "0.23.3"
   resolved "https://registry.yarnpkg.com/react-router-bootstrap/-/react-router-bootstrap-0.23.3.tgz#970c35c53c04c61fb6b110d4ff651a7e8a73b2ba"