status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added keys for bolding and linking for markup.js 

If you were to mix-and-match or use multiple markdown elements in one
string, this would cause a React key error. This fixes it by key-ing all
the things!
This commit is contained in:
Daniel Kaspo 2017-05-31 20:46:03 -04:00
parent 9d557785e3
commit 608f50ae1c
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
common/translations/markup.js
View File

@ -19,10 +19,12 @@ function linkify(mdString: string) {
return decodeHTMLEntities(parts[0]);
}
const result = [];
let key = 0;
let i = 0;
while (i + 1 < parts.length) {
result.push(decodeHTMLEntities(parts[i]));
result.push(<a key={'linkify-' + i} href={parts[i + 2]} target="_blank">{parts[i + 1]}</a>);
result.push(<a key={'linkify-' + key} href={parts[i + 2]} target="_blank">{parts[i + 1]}</a>);
key++;
i += 3;
}
result.push(decodeHTMLEntities(parts[parts.length - 1]));
@ -35,10 +37,12 @@ export function markupToReact(mdString: string) {
return linkify(parts[0]);
}
let result = [];
let key = 0;
let i = 0;
while (i + 1 < parts.length) {
result = result.concat(linkify(parts[i]));
result.push(<b>{parts[i + 2]}</b>);
result.push(<b key={'boldify-' + key}>{parts[i + 2]}</b>);
key++;
i += 3;
}
result = result.concat(linkify(parts.pop()));

26
spec/translations/markup.spec.js
View File

@ -10,47 +10,47 @@ describe('markupToReact', () => {
it('transforms bold syntax', () => {
let value = '**foo**';
let expected = [<b>foo</b>];
let expected = [<b key="boldify-0">foo</b>];
expect(markupToReact(value)).toEqual(expected);
value = '**foo** bar';
expected = [<b>foo</b>, ' bar'];
expected = [<b key="boldify-0">foo</b>, ' bar'];
expect(markupToReact(value)).toEqual(expected);
value = 'bar **foo**';
expected = ['bar ', <b>foo</b>];
expected = ['bar ', <b key="boldify-0">foo</b>];
expect(markupToReact(value)).toEqual(expected);
value = 'bar **foo** baz';
expected = ['bar ', <b>foo</b>, ' baz'];
expected = ['bar ', <b key="boldify-0">foo</b>, ' baz'];
expect(markupToReact(value)).toEqual(expected);
value = '**foo****bar**';
expected = [<b>foo</b>, <b>bar</b>];
expected = [<b key="boldify-0">foo</b>, <b key="boldify-1">bar</b>];
expect(markupToReact(value)).toEqual(expected);
});
it('transforms link syntax', () => {
let value = '[foo](http://google.com)';
let expected = [<a href="http://google.com" target="_blank">foo</a>];
let expected = [<a key="linkify-0" href="http://google.com" target="_blank">foo</a>];
expect(markupToReact(value)).toEqual(expected);
value = '[foo](http://google.com) bar';
expected = [<a href="http://google.com" target="_blank">foo</a>, ' bar'];
expected = [<a key="linkify-0" href="http://google.com" target="_blank">foo</a>, ' bar'];
expect(markupToReact(value)).toEqual(expected);
value = 'bar [foo](http://google.com)';
expected = ['bar ', <a href="http://google.com" target="_blank">foo</a>];
expected = ['bar ', <a key="linkify-0" href="http://google.com" target="_blank">foo</a>];
expect(markupToReact(value)).toEqual(expected);
value = 'bar [foo](http://google.com) baz';
expected = ['bar ', <a href="http://google.com" target="_blank">foo</a>, ' baz'];
expected = ['bar ', <a key="linkify-0" href="http://google.com" target="_blank">foo</a>, ' baz'];
expect(markupToReact(value)).toEqual(expected);
value = '[foo](http://google.com)[bar](http://google.ca)';
expected = [
<a href="http://google.com" target="_blank">foo</a>,
<a href="http://google.ca" target="_blank">bar</a>
<a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
<a key="linkify-1" href="http://google.ca" target="_blank">bar</a>
];
expect(markupToReact(value)).toEqual(expected);
});
@ -59,9 +59,9 @@ describe('markupToReact', () => {
let value = 'Bold **foo** link [foo](http://google.com) text';
let expected = [
'Bold ',
<b>foo</b>,
<b key="boldify-0">foo</b>,
' link ',
<a href="http://google.com" target="_blank">foo</a>,
<a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
' text'
];
expect(markupToReact(value)).toEqual(expected);