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

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

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

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

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