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

Use Immutable data structure without converting to JSON for speed and profit. Added more tests.

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-09-23 19:56:35 +02:00
parent 57688af42e
commit 1860a2389d
3 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React, { PropTypes } from 'react';
import MarkupIt, { Syntax, JSONUtils, BLOCKS, STYLES, ENTITIES } from 'markup-it';
import MarkupIt, { Syntax, BLOCKS, STYLES, ENTITIES } from 'markup-it';
const defaultRenderers = {
[BLOCKS.DOCUMENT]: 'article',
@ -36,14 +36,17 @@ const defaultRenderers = {
};
function renderToken(token, index = 0, key = '0') {
const { type, data, text, tokens } = token;
const type = token.get('type');
const data = token.get('data');
const text = token.get('text');
const tokens = token.get('tokens');
const nodeType = defaultRenderers[type];
key = `${key}.${index}`;
// Only render if type is registered as renderer
if (typeof nodeType !== 'undefined') {
let children = null;
if (Array.isArray(tokens) && tokens.length) {
if (tokens.size) {
children = tokens.map((token, idx) => renderToken(token, idx, key));
} else if (type === 'text') {
children = text;
@ -52,9 +55,9 @@ function renderToken(token, index = 0, key = '0') {
// If this is a react element
return React.createElement(
nodeType,
{ key, ...data }, // Add key as a prop
Array.isArray(children) && children.length === 1
? children[0] : children); // Pass single child if possible
{ key, ...data.toJS() }, // Add key as a prop
children
);
} else {
// If this is a text node
return children;
@ -80,10 +83,7 @@ export default class MarkitupReactRenderer extends React.Component {
render() {
const { value } = this.props;
const content = this.parser.toContent(value);
const json = JSONUtils.encode(content);
// console.log(JSON.stringify(json, null, 2));
return renderToken(json.token);
return renderToken(content.get('token'));
}
}

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

@ -81,6 +81,30 @@ Text with **bold** & _em_ elements
});
});
describe('Lists', () => {
it('should render lists', () => {
const value = `
1. ol item 1
1. ol item 2
* Sublist 1
* Sublist 2
* Sublist 3
1. Sub-Sublist 1
1. Sub-Sublist 2
1. Sub-Sublist 3
1. ol item 3
`;
const component = shallow(
<MarkitupReactRenderer
value={value}
syntax={markdownSyntax}
/>
);
const tree = component.html();
expect(tree).toMatchSnapshot();
});
});
describe('Links', () => {
it('should render links', () => {
const value = `

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

@ -1,7 +1,9 @@
exports[`MarkitupReactRenderer should render HTML 1`] = `"<article><p>Paragraph with <em>inline</em> element</p></article>"`;
exports[`MarkitupReactRenderer HTML rendering should render HTML 1`] = `"<article><p>Paragraph with <em>inline</em> element</p></article>"`;
exports[`MarkitupReactRenderer should render HTML as is using Markdown 1`] = `"<article><h1>Title</h1></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 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></article>"`;
exports[`MarkitupReactRenderer should support custom syntax 1`] = `"<article></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>"`;
exports[`MarkitupReactRenderer custom elements should support custom syntax 1`] = `"<article></article>"`;