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

Use react-htmlparser2 to render HTML to React VDOM

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-09-27 11:26:28 +02:00
parent 0a9eb3d688
commit e0724aa1bd
4 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -97,6 +97,7 @@
"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",

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

@ -1,7 +1,7 @@
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 { pick } from 'lodash'; import { pick } from 'lodash';
import htmlSyntax from 'markup-it/syntaxes/html';
const defaultSchema = { const defaultSchema = {
[BLOCKS.DOCUMENT]: 'article', [BLOCKS.DOCUMENT]: 'article',
@ -11,10 +11,7 @@ const defaultSchema = {
[BLOCKS.PARAGRAPH]: 'p', [BLOCKS.PARAGRAPH]: 'p',
[BLOCKS.FOOTNOTE]: 'footnote', [BLOCKS.FOOTNOTE]: 'footnote',
[BLOCKS.HTML]: ({ token }) => { [BLOCKS.HTML]: ({ token }) => {
return <MarkitupReactRenderer return reactParser(token.get('raw'), React);
value={token.get('raw')}
syntax={htmlSyntax}
/>;
}, },
[BLOCKS.HR]: 'hr', [BLOCKS.HR]: 'hr',
[BLOCKS.HEADING_1]: 'h1', [BLOCKS.HEADING_1]: 'h1',

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

@ -170,10 +170,15 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
const value = ` const value = `
# Title # Title
<ul> <form action="test">
<li>Test HTML content</li> <label for="input">
<li>Testing HTML in Markdown</li> <input type="checkbox" checked="checked" id="input"/> My label
</ul> </label>
<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>
`; `;
const component = shallow( const component = shallow(
<MarkitupReactRenderer <MarkitupReactRenderer

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

@ -6,7 +6,17 @@ 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 src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\" alt=\"alt text\"/></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 src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\" alt=\"alt text\"/></p><h6>H6</h6></article>"`;
exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is using Markdown 1`] = `"<article><h1>Title</h1><article><ul><li>Test HTML content</li><li>Testing HTML in Markdown</li></ul></article></article>"`; exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is using Markdown 1`] = `
"<article><h1>Title</h1><form action=\"test\">
<label for=\"input\">
<input type=\"checkbox\" checked=\"\" id=\"input\"/> My label
</label>
<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>"
`;
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>"`;