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

Sanitize unsupported props. This removes all React warnings. Refactored renderToken.

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-09-26 15:37:25 +02:00
parent af8ea80142
commit cdc71a2bbf
4 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -98,8 +98,8 @@
"react-addons-css-transition-group": "^15.3.1",
"react-datetime": "^2.6.0",
"react-portal": "^2.2.1",
"react-toolbox": "^1.2.1",
"react-simple-dnd": "^0.1.2",
"react-toolbox": "^1.2.1",
"selection-position": "^1.0.0",
"semaphore": "^1.0.5",
"slate": "^0.13.6"

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

@ -1,5 +1,6 @@
import React, { PropTypes } from 'react';
import MarkupIt, { Syntax, BLOCKS, STYLES, ENTITIES } from 'markup-it';
import { pick } from 'lodash';
import htmlSyntax from 'markup-it/syntaxes/html';
const defaultSchema = {
@ -9,7 +10,7 @@ const defaultSchema = {
[BLOCKS.BLOCKQUOTE]: 'blockquote',
[BLOCKS.PARAGRAPH]: 'p',
[BLOCKS.FOOTNOTE]: 'footnote',
[BLOCKS.HTML]: (token) => {
[BLOCKS.HTML]: ({ token }) => {
return <MarkitupReactRenderer
value={token.get('raw')}
syntax={htmlSyntax}
@ -41,6 +42,12 @@ const defaultSchema = {
[ENTITIES.HARD_BREAK]: 'br'
};
const allowedProps = ['className', 'id', 'name', 'title', 'src', 'alt', 'href'];
function sanitizeProps(props) {
return pick(props, allowedProps);
}
function renderToken(schema, token, index = 0, key = '0') {
const type = token.get('type');
const data = token.get('data');
@ -58,16 +65,12 @@ function renderToken(schema, token, index = 0, key = '0') {
children = text;
}
if (nodeType !== null) {
// If this is a function we want to pass the `token` as an argument
if (typeof nodeType === 'function') {
return nodeType(token);
let props = { key, token };
if (typeof nodeType !== 'function') {
props = { key, ...sanitizeProps(data.toJS()) };
}
// If this is a react element
return React.createElement(
nodeType,
{ key, ...data.toJS() }, // Add key as a prop
children
);
return React.createElement(nodeType, props, children);
} else {
// If this is a text node
return children;
@ -100,5 +103,8 @@ export default class MarkitupReactRenderer extends React.Component {
MarkitupReactRenderer.propTypes = {
value: PropTypes.string,
syntax: PropTypes.instanceOf(Syntax).isRequired,
schema: PropTypes.objectOf(PropTypes.node)
schema: PropTypes.objectOf(PropTypes.oneOfType([
PropTypes.string,
PropTypes.func
]))
};

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

@ -204,7 +204,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
});
const myCustomSchema = {
'mediaproxy': (token) => {
'mediaproxy': ({ token }) => {
const src = token.getIn(['data', 'src']);
const alt = token.getIn(['data', 'alt']);
return <img src={src} alt={alt}/>;

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

@ -4,7 +4,7 @@ exports[`MarkitupReactRenderer Markdown rendering Code should render code 1`] =
exports[`MarkitupReactRenderer Markdown rendering Code should render code 2 1`] = `"<article><p><code>There is a literal backtick (\`) here.</code></p></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 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>"`;
@ -20,7 +20,7 @@ exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading
exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 6 1`] = `"<article><h6>Title</h6></article>"`;
exports[`MarkitupReactRenderer Markdown rendering Links should render links 1`] = `"<article><p>I get 10 times more traffic from <a href=\"http://google.com/\" title=\"Google\">Google</a> than from <a href=\"http://search.yahoo.com/\" title=\"Yahoo Search\">Yahoo</a> or <a href=\"http://search.msn.com/\" title=\"MSN Search\">MSN</a>.</p></article>"`;
exports[`MarkitupReactRenderer Markdown rendering Links should render links 1`] = `"<article><p>I get 10 times more traffic from <a title=\"Google\" href=\"http://google.com/\">Google</a> than from <a title=\"Yahoo Search\" href=\"http://search.yahoo.com/\">Yahoo</a> or <a title=\"MSN Search\" href=\"http://search.msn.com/\">MSN</a>.</p></article>"`;
exports[`MarkitupReactRenderer Markdown rendering Lists should render lists 1`] = `"<article><ol><li>ol item 1</li><li>ol item 2<ul><li>Sublist 1</li><li>Sublist 2</li><li>Sublist 3<ol><li>Sub-Sublist 1</li><li>Sub-Sublist 2</li><li>Sub-Sublist 3</li></ol></li></ul></li><li>ol item 3</li></ol></article>"`;