gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use dangerouslySetInnerHTML since the react parser wasn't working with inline styles correctly.

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-09-27 12:18:52 +02:00
parent 05913d4a1b
commit f38e6b6f25
4 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -97,7 +97,6 @@
"prismjs": "^1.5.1", "prismjs": "^1.5.1",
"react-addons-css-transition-group": "^15.3.1", "react-addons-css-transition-group": "^15.3.1",
"react-datetime": "^2.6.0", "react-datetime": "^2.6.0",
"react-htmlparser2": "^0.1.0",
"react-portal": "^2.2.1", "react-portal": "^2.2.1",
"react-simple-dnd": "^0.1.2", "react-simple-dnd": "^0.1.2",
"react-toolbox": "^1.2.1", "react-toolbox": "^1.2.1",

3
src/components/Widgets/MarkitupReactRenderer.js
View File

@ -1,5 +1,4 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import reactParser from 'react-htmlparser2';
import MarkupIt, { Syntax, BLOCKS, STYLES, ENTITIES } from 'markup-it'; import MarkupIt, { Syntax, BLOCKS, STYLES, ENTITIES } from 'markup-it';
import { omit } from 'lodash'; import { omit } from 'lodash';
@ -11,7 +10,7 @@ const defaultSchema = {
[BLOCKS.PARAGRAPH]: 'p', [BLOCKS.PARAGRAPH]: 'p',
[BLOCKS.FOOTNOTE]: 'footnote', [BLOCKS.FOOTNOTE]: 'footnote',
[BLOCKS.HTML]: ({ token }) => { [BLOCKS.HTML]: ({ token }) => {
return reactParser(token.get('raw'), React); return <div dangerouslySetInnerHTML={{ __html: token.get('raw') }}/>;
}, },
[BLOCKS.HR]: 'hr', [BLOCKS.HR]: 'hr',
[BLOCKS.HEADING_1]: 'h1', [BLOCKS.HEADING_1]: 'h1',

4
src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js
View File

@ -166,7 +166,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
}); });
describe('HTML', () => { describe('HTML', () => {
it('should render HTML as is using Markdown', () => { it('should render HTML as is when using Markdown', () => {
const value = ` const value = `
# Title # Title
@ -179,6 +179,8 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
<dt>Testing HTML in Markdown</dt> <dt>Testing HTML in Markdown</dt>
</dl> </dl>
</form> </form>
<h1 style="display: block; border: 10px solid #f00; width: 100%">Test</h1>
`; `;
const component = shallow( const component = shallow(
<MarkitupReactRenderer <MarkitupReactRenderer

13
src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap
View File

@ -6,16 +6,19 @@ exports[`MarkitupReactRenderer Markdown rendering Code should render code 2 1`]
exports[`MarkitupReactRenderer Markdown rendering General should render markdown 1`] = `"<article><h1>H1</h1><p>Text with <strong>bold</strong> &amp; <em>em</em> elements</p><h2>H2</h2><ul><li>ul item 1</li><li>ul item 2</li></ul><h3>H3</h3><ol><li>ol item 1</li><li>ol item 2</li><li>ol item 3</li></ol><h4>H4</h4><p><a href=\"http://google.com\">link title</a></p><h5>H5</h5><p><img alt=\"alt text\" src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\"/></p><h6>H6</h6></article>"`; exports[`MarkitupReactRenderer Markdown rendering General should render markdown 1`] = `"<article><h1>H1</h1><p>Text with <strong>bold</strong> &amp; <em>em</em> elements</p><h2>H2</h2><ul><li>ul item 1</li><li>ul item 2</li></ul><h3>H3</h3><ol><li>ol item 1</li><li>ol item 2</li><li>ol item 3</li></ol><h4>H4</h4><p><a href=\"http://google.com\">link title</a></p><h5>H5</h5><p><img alt=\"alt text\" src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\"/></p><h6>H6</h6></article>"`;
exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is using Markdown 1`] = ` exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = `
"<article><h1>Title</h1><form action=\"test\"> "<article><h1>Title</h1><div><form action=\"test\">
<label for=\"input\"> <label for=\"input\">
<input type=\"checkbox\" checked=\"\" id=\"input\"/> My label <input type=\"checkbox\" checked=\"checked\" id=\"input\"/> My label
</label> </label>
<dl class=\"test-class another-class\" style=\"width: 100%;\"> <dl class=\"test-class another-class\" style=\"width: 100%\">
<dt data-attr=\"test\">Test HTML content</dt> <dt data-attr=\"test\">Test HTML content</dt>
<dt>Testing HTML in Markdown</dt> <dt>Testing HTML in Markdown</dt>
</dl> </dl>
</form></article>" </form>
</div><div><h1 style=\"display: block; border: 10px solid #f00; width: 100%\">Test</h1>
</div></article>"
`; `;
exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 1 1`] = `"<article><h1>Title</h1></article>"`; exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 1 1`] = `"<article><h1>Title</h1></article>"`;