Skip to content

Commit 5000371

Browse files
KikobeatsKikobeats
authored
Merge pull request #46 from microlinkhq/aaroncannoncv/master2
fix: escape string
2 parents d5bc8af + c80b094 commit 5000371

File tree

7 files changed

+102
-25
lines changed

7 files changed

+102
-25
lines changed

‎dev-server/src/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,13 @@ ReactDom.render(
180180
}
181181
src={getExampleJson2()}
182182
/>
183+
184+
{/* String with special escape sequences */}
185+
<JsonViewer
186+
theme='monokai'
187+
name='String with special escape sequences'
188+
src={getExampleWithStringEscapeSequences()}
189+
/>
183190
</div>,
184191
document.getElementById('app-container')
185192
)
@@ -294,3 +301,7 @@ function getExampleArray () {
294301
}
295302
]
296303
}
304+
305+
function getExampleWithStringEscapeSequences () {
306+
return { '\\\n\t\r\f\\n': '\\\n\t\r\f\\n' }
307+
}

‎src/js/components/DataTypes/String.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import DataTypeLabel from './DataTypeLabel'
3-
import { toType } from './../../helpers/util'
3+
import { toType, escapeString } from './../../helpers/util'
44

55
// theme
66
import Theme from './../../themes/getStyle'
@@ -46,6 +46,8 @@ export default class extends React.PureComponent {
4646
const collapsible = toType(collapseStringsAfterLength) === 'integer'
4747
const style = { style: { cursor: 'default' } }
4848

49+
value = escapeString(value)
50+
4951
if (collapsible && value.length > collapseStringsAfterLength) {
5052
style.style.cursor = 'pointer'
5153
if (this.state.collapsed) {

‎src/js/components/VariableEditor.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import AutosizeTextarea from 'react-textarea-autosize'
33

4-
import { toType } from './../helpers/util'
4+
import { escapeString } from './../helpers/util'
55
import dispatcher from './../helpers/dispatcher'
66
import parseInput from './../helpers/parseInput'
77
import stringifyVariable from './../helpers/stringifyVariable'
@@ -93,7 +93,7 @@ class VariableEditor extends React.PureComponent {
9393
{!!quotesOnKeys && (
9494
<span style={{ verticalAlign: 'top' }}>"</span>
9595
)}
96-
<span style={{ display: 'inline-block' }}>{variable.name}</span>
96+
<span style={{ display: 'inline-block' }}>{escapeString(variable.name)}</span>
9797
{!!quotesOnKeys && (
9898
<span style={{ verticalAlign: 'top' }}>"</span>
9999
)}

‎src/js/helpers/util.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@ function getType (obj) {
2323
.toLowerCase()
2424
}
2525

26+
export function escapeString (value) {
27+
return value
28+
.replace(/\\/g, '\\\\')
29+
.replace(/\n/g, '\\n')
30+
.replace(/\t/g, '\\t')
31+
.replace(/\r/g, '\\r')
32+
.replace(/\f/g, '\\f')
33+
}
34+
2635
// validation for base-16 themes
2736
export function isTheme (theme) {
2837
const theme_keys = [

‎test/tests/js/components/DataTypes/String-test.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ import JsonString from './../../../../../src/js/components/DataTypes/String'
66

77
describe('<JsonString />', function () {
88
it('string component should have a data type label', function () {
9-
const rjvId = 1
109
const wrapper = mount(
1110
<JsonString
1211
value='test'
13-
rjvId={rjvId}
1412
displayDataTypes
1513
theme='rjv-default'
1614
/>
@@ -19,10 +17,8 @@ describe('<JsonString />', function () {
1917
})
2018

2119
it('string with hidden data type', function () {
22-
const rjvId = 1
2320
const props = {
2421
value: 'test',
25-
rjvId: 1,
2622
theme: 'rjv-default',
2723
displayDataTypes: false
2824
}
@@ -32,10 +28,8 @@ describe('<JsonString />', function () {
3228

3329
// test collapsed string and expand click
3430
it('string displaying data type', function () {
35-
const rjvId = 1
3631
const props = {
3732
value: 'test',
38-
rjvId: 1,
3933
displayDataTypes: false,
4034
theme: 'rjv-default'
4135
}
@@ -44,11 +38,9 @@ describe('<JsonString />', function () {
4438
})
4539

4640
it('collapsed string content', function () {
47-
const rjvId = 1
4841
const props = {
4942
value: '123456789',
5043
collapseStringsAfterLength: 3,
51-
rjvId: 1,
5244
displayDataTypes: false,
5345
theme: 'rjv-default'
5446
}
@@ -61,4 +53,16 @@ describe('<JsonString />', function () {
6153
'"123456789"'
6254
)
6355
})
56+
57+
it('string with special escape sequences', function () {
58+
const props = {
59+
value: '\\\n\t\r\f\\n',
60+
displayDataTypes: false,
61+
theme: 'rjv-default'
62+
}
63+
const component = mount(<JsonString {...props} />).render()
64+
expect(component.find('.string-value').text()).to.equal(
65+
'"\\\\\\n\\t\\r\\f\\\\n"'
66+
)
67+
})
6468
})

‎test/tests/js/components/VariableEditor-test.js

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe('<VariableEditor />', function () {
1313
<VariableEditor
1414
src={{ test: true }}
1515
theme='rjv-default'
16-
onEdit={edit => {}}
16+
onEdit={edit => { }}
1717
rjvId={rjvId}
1818
singleIndent={1}
1919
variable={{
@@ -48,7 +48,7 @@ describe('<VariableEditor />', function () {
4848
<VariableEditor
4949
src={{ test: true }}
5050
theme='rjv-default'
51-
onEdit={edit => {}}
51+
onEdit={edit => { }}
5252
rjvId={rjvId}
5353
variable={{
5454
name: 'test',
@@ -66,7 +66,7 @@ describe('<VariableEditor />', function () {
6666
<VariableEditor
6767
src={{ test: true }}
6868
theme='rjv-default'
69-
onEdit={edit => {}}
69+
onEdit={edit => { }}
7070
rjvId={rjvId}
7171
variable={{
7272
name: 'test',
@@ -172,7 +172,7 @@ describe('<VariableEditor />', function () {
172172
<VariableEditor
173173
src={{ test: true }}
174174
theme='rjv-default'
175-
onEdit={edit => {}}
175+
onEdit={edit => { }}
176176
rjvId={rjvId}
177177
variable={{
178178
name: 'test',
@@ -192,7 +192,7 @@ describe('<VariableEditor />', function () {
192192
<VariableEditor
193193
src={{ test: true }}
194194
theme='rjv-default'
195-
onEdit={edit => {}}
195+
onEdit={edit => { }}
196196
rjvId={rjvId}
197197
variable={{
198198
name: 'test',
@@ -212,7 +212,7 @@ describe('<VariableEditor />', function () {
212212
<VariableEditor
213213
src={{ test: true }}
214214
theme='rjv-default'
215-
onEdit={edit => {}}
215+
onEdit={edit => { }}
216216
rjvId={rjvId}
217217
variable={{
218218
name: 'test',
@@ -232,7 +232,7 @@ describe('<VariableEditor />', function () {
232232
<VariableEditor
233233
src={{ test: true }}
234234
theme='rjv-default'
235-
onEdit={edit => {}}
235+
onEdit={edit => { }}
236236
rjvId={rjvId}
237237
variable={{
238238
name: 'test',
@@ -252,7 +252,7 @@ describe('<VariableEditor />', function () {
252252
<VariableEditor
253253
src={{ test: true }}
254254
theme='rjv-default'
255-
onEdit={edit => {}}
255+
onEdit={edit => { }}
256256
rjvId={rjvId}
257257
variable={{
258258
name: 'test',
@@ -274,7 +274,7 @@ describe('<VariableEditor />', function () {
274274
<VariableEditor
275275
src={{ test: true }}
276276
theme='rjv-default'
277-
onEdit={edit => {}}
277+
onEdit={edit => { }}
278278
rjvId={rjvId}
279279
variable={{
280280
name: 'test',
@@ -294,7 +294,7 @@ describe('<VariableEditor />', function () {
294294
<VariableEditor
295295
src={{ test: true }}
296296
theme='rjv-default'
297-
onEdit={edit => {}}
297+
onEdit={edit => { }}
298298
rjvId={rjvId}
299299
variable={{
300300
name: 'test',
@@ -314,7 +314,7 @@ describe('<VariableEditor />', function () {
314314
<VariableEditor
315315
src={{ test: true }}
316316
theme='rjv-default'
317-
onEdit={edit => {}}
317+
onEdit={edit => { }}
318318
rjvId={rjvId}
319319
variable={{
320320
name: 'test',
@@ -334,7 +334,7 @@ describe('<VariableEditor />', function () {
334334
<VariableEditor
335335
src={{ test: true }}
336336
theme='rjv-default'
337-
onEdit={edit => {}}
337+
onEdit={edit => { }}
338338
rjvId={rjvId}
339339
variable={{
340340
name: 'test',
@@ -348,4 +348,28 @@ describe('<VariableEditor />', function () {
348348
expect(wrapper.state('editMode')).to.equal(true)
349349
expect(wrapper.find('.variable-editor').props().value).to.equal('5')
350350
})
351+
352+
it('VariableEditor renders escaped characters', function () {
353+
const wrapper = shallow(
354+
<VariableEditor
355+
src={{ test: true }}
356+
theme='rjv-default'
357+
onEdit={edit => { }}
358+
rjvId={rjvId}
359+
variable={{
360+
name: '\\\n\t\r\f\\n',
361+
value: '\\\n\t\r\f\\n',
362+
type: 'string'
363+
}}
364+
/>
365+
)
366+
console.log(wrapper.debug())
367+
expect(wrapper.find('.object-key').text()).to.equal('\\\\\\n\\t\\r\\f\\\\n')
368+
expect(wrapper.find('.click-to-edit-icon').length).to.equal(1)
369+
wrapper.find('.click-to-edit-icon').simulate('click')
370+
expect(wrapper.state('editMode')).to.equal(true)
371+
expect(wrapper.find('.variable-editor').props().value).to.equal(
372+
'\\\n\t\r\f\\n'
373+
)
374+
})
351375
})

‎test/tests/js/helpers/Util-test.js

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { expect } from 'chai'
33

4-
import { toType, isTheme } from './../../../../src/js/helpers/util'
4+
import { toType, isTheme, escapeString } from './../../../../src/js/helpers/util'
55

66
describe('toType', function () {
77
it('toType object', function () {
@@ -30,7 +30,7 @@ describe('toType', function () {
3030
})
3131

3232
it('toType function', function () {
33-
const test = () => {}
33+
const test = () => { }
3434
expect(toType(test)).to.equal('function')
3535
})
3636

@@ -60,6 +60,33 @@ describe('toType', function () {
6060
})
6161
})
6262

63+
describe('escapeString', function () {
64+
it('escape \\\\', function () {
65+
const test = '\\'
66+
expect(escapeString(test)).to.equal('\\\\')
67+
})
68+
it('escape \\n', function () {
69+
const test = '\n'
70+
expect(escapeString(test)).to.equal('\\n')
71+
})
72+
it('escape \\t', function () {
73+
const test = '\t'
74+
expect(escapeString(test)).to.equal('\\t')
75+
})
76+
it('escape \\r', function () {
77+
const test = '\r'
78+
expect(escapeString(test)).to.equal('\\r')
79+
})
80+
it('escape \\f', function () {
81+
const test = '\f'
82+
expect(escapeString(test)).to.equal('\\f')
83+
})
84+
it('escape \\\\n', function () {
85+
const test = '\\n'
86+
expect(escapeString(test)).to.equal('\\\\n')
87+
})
88+
})
89+
6390
describe('isTheme', function () {
6491
it('isTheme valid theme', function () {
6592
const test = {

0 commit comments

Comments
 (0)