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",
"react-addons-css-transition-group": "^15.3.1",
"react-datetime": "^2.6.0",
"react-htmlparser2": "^0.1.0",
"react-portal": "^2.2.1",
"react-simple-dnd": "^0.1.2",
"react-toolbox": "^1.2.1",

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

@ -1,5 +1,4 @@
import React, { PropTypes } from 'react';
import reactParser from 'react-htmlparser2';
import MarkupIt, { Syntax, BLOCKS, STYLES, ENTITIES } from 'markup-it';
import { omit } from 'lodash';
@ -11,7 +10,7 @@ const defaultSchema = {
[BLOCKS.PARAGRAPH]: 'p',
[BLOCKS.FOOTNOTE]: 'footnote',
[BLOCKS.HTML]: ({ token }) => {
return reactParser(token.get('raw'), React);
return <div dangerouslySetInnerHTML={{ __html: token.get('raw') }}/>;
},
[BLOCKS.HR]: 'hr',
[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', () => {
it('should render HTML as is using Markdown', () => {
it('should render HTML as is when using Markdown', () => {
const value = `
# 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>
</dl>
</form>
<h1 style="display: block; border: 10px solid #f00; width: 100%">Test</h1>
`;
const component = shallow(
<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 HTML should render HTML as is using Markdown 1`] = `
"<article><h1>Title</h1><form action=\"test\">
exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = `
"<article><h1>Title</h1><div><form action=\"test\">
<label for=\"input\">
<input type=\"checkbox\" checked=\"\" id=\"input\"/> My label
<input type=\"checkbox\" checked=\"checked\" id=\"input\"/> My 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>Testing HTML in Markdown</dt>
</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>"`;