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

Extracted renderToken function from class. Do not render additional <div>.

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-09-22 17:44:25 +02:00
parent 2c483220b5
commit 7fe1a6f8b6
3 changed files with 106 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,30 +21,30 @@ const defaultRenderers = {
'unstyled': null,
};
export default class MarkitupReactRenderer extends React.Component {
function renderToken(token) {
const { type, data, text, tokens } = token;
const element = defaultRenderers[type];
renderToken = (token) => {
const { type, data, text, tokens } = token;
const element = defaultRenderers[type];
// Only render if type is registered as renderer
if (typeof element !== 'undefined') {
let children = null;
if (Array.isArray(tokens) && tokens.length) {
children = tokens.map(this.renderToken);
} else if (type === 'text') {
children = text;
}
if (element !== null) {
// If this is a react element
return React.createElement(element, data, children);
} else {
// If this is a text node
return children;
}
// Only render if type is registered as renderer
if (typeof element !== 'undefined') {
let children = null;
if (Array.isArray(tokens) && tokens.length) {
children = tokens.map(renderToken);
} else if (type === 'text') {
children = text;
}
if (element !== null) {
// If this is a react element
return React.createElement(element, data, children);
} else {
// If this is a text node
return children;
}
return null;
}
return null;
}
export default class MarkitupReactRenderer extends React.Component {
render() {
const { value, syntax } = this.props;
@ -57,9 +57,7 @@ export default class MarkitupReactRenderer extends React.Component {
const json = JSONUtils.encode(content);
// console.log(JSON.stringify(json, null, 2));
return (
<div>{this.renderToken(json.token)}</div>
);
return renderToken(json.token);
}
}

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

@ -44,8 +44,7 @@ Text with **bold** & _em_ elements
});
it('should support custom syntax', () => {
const value = `
`;
const value = '';
const component = renderer.create(
<MarkitupReactRenderer
value={value}

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

@ -1,90 +1,88 @@
exports[`MarkitupReactRenderer should render HTML 1`] = `
<div>
<article>
<p>
Paragraph with
<em>
inline
</em>
element
</p>
</article>
</div>
<article>
<p>
Paragraph with
<em>
inline
</em>
element
</p>
</article>
`;
exports[`MarkitupReactRenderer should render markdown 1`] = `
<div>
<article>
<h1
id={null}>
H1
</h1>
<p>
Text with
<strong>
bold
</strong>
&
<em>
em
</em>
elements
</p>
<h2
id={null}>
H2
</h2>
<ul>
<li
loose={false}>
ul item 1
</li>
<li
loose={false}>
ul item 2
</li>
</ul>
<h3
id={null}>
H3
</h3>
<ol>
<li
loose={false}>
ol item 1
</li>
<li
loose={false}>
ol item 2
</li>
<li
loose={false}>
ol item 3
</li>
</ol>
<h4
id={null}>
H4
</h4>
<p>
<a
href="http://google.com">
link title
</a>
</p>
<h5
id={null}>
H5
</h5>
<p>
<img
alt="alt text"
src="https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg" />
</p>
<h6
id={null}>
H6
</h6>
</article>
</div>
<article>
<h1
id={null}>
H1
</h1>
<p>
Text with
<strong>
bold
</strong>
&
<em>
em
</em>
elements
</p>
<h2
id={null}>
H2
</h2>
<ul>
<li
loose={false}>
ul item 1
</li>
<li
loose={false}>
ul item 2
</li>
</ul>
<h3
id={null}>
H3
</h3>
<ol>
<li
loose={false}>
ol item 1
</li>
<li
loose={false}>
ol item 2
</li>
<li
loose={false}>
ol item 3
</li>
</ol>
<h4
id={null}>
H4
</h4>
<p>
<a
href="http://google.com">
link title
</a>
</p>
<h5
id={null}>
H5
</h5>
<p>
<img
alt="alt text"
src="https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg" />
</p>
<h6
id={null}>
H6
</h6>
</article>
`;
exports[`MarkitupReactRenderer should support custom syntax 1`] = `<article />`;