From 4c32d1242fe00dbad3d6bce6c6ee4e597bcca564 Mon Sep 17 00:00:00 2001 From: Skagevang Date: Fri, 17 Aug 2018 18:12:16 +0200 Subject: [PATCH] replaced dangersethtml --- package.json | 1 + src/components/CoursePage/CourseInfo.js | 17 ++++++++--------- src/components/LessonPage/Content.js | 16 ++-------------- src/components/LessonPage/ToggleButton.js | 8 +++----- src/components/MarkdownRenderer.js | 5 +++-- src/components/PopoverComponent.js | 8 ++++---- yarn.lock | 21 +++++++++++++++++++++ 7 files changed, 42 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index f2100e841..f3e68d858 100644 --- a/package.json +++ b/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", diff --git a/src/components/CoursePage/CourseInfo.js b/src/components/CoursePage/CourseInfo.js index fe4d79a4e..81b963f47 100644 --- a/src/components/CoursePage/CourseInfo.js +++ b/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 ( - {courseInfo.__html ? -
+ {courseInfo ? +
{renderHTML(courseInfo)}
:

{t('coursepage.courseinfonotfound')}

} @@ -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 }); diff --git a/src/components/LessonPage/Content.js b/src/components/LessonPage/Content.js index 5526cb129..d17c23342 100644 --- a/src/components/LessonPage/Content.js +++ b/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 = () =>
Loading...
; -// -// 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
; + return
{renderHTML(processContent(lessonContent, styles, isHydrated))}
; }; Content.propTypes = { // ownProps diff --git a/src/components/LessonPage/ToggleButton.js b/src/components/LessonPage/ToggleButton.js index 3451f7dc8..19b5bddd0 100644 --- a/src/components/LessonPage/ToggleButton.js +++ b/src/components/LessonPage/ToggleButton.js @@ -1,9 +1,8 @@ -/* 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) { @@ -11,9 +10,8 @@ class ToggleButton extends React.Component { 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 {
-
+ {renderHTML(hiddenHTML)}
diff --git a/src/components/MarkdownRenderer.js b/src/components/MarkdownRenderer.js index 9fcec34c0..af2233599 100644 --- a/src/components/MarkdownRenderer.js +++ b/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 ? - : -
; + {renderHTML(markdown.renderInline(src))} : +
{renderHTML(markdown.render(src))}
; } else { return null; } diff --git a/src/components/PopoverComponent.js b/src/components/PopoverComponent.js index 63bd474be..e164d95cf 100644 --- a/src/components/PopoverComponent.js +++ b/src/components/PopoverComponent.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 styles from './PopoverComponent.scss'; import withStyles from 'isomorphic-style-loader/lib/withStyles'; import Popover from 'react-bootstrap/lib/Popover'; @@ -8,13 +9,12 @@ 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 = -
+
+ {renderHTML(popoverContent)} +
; const options = { animation: true, diff --git a/yarn.lock b/yarn.lock index e8bb66308..daa385750 100644 --- a/yarn.lock +++ b/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"