escape/unescape fields and values

This commit is contained in:
jos 2016-07-12 16:19:57 +02:00
parent 4e0aa5659c
commit 89657a539f
3 changed files with 48 additions and 7 deletions

View File

@ -46,4 +46,10 @@ ul.jsoneditor-list {
.jsoneditor-readonly { .jsoneditor-readonly {
color: gray; color: gray;
}
.jsoneditor-readonly:focus,
.jsoneditor-readonly:hover {
border-color: transparent;
background-color: inherit;
} }

View File

@ -3,6 +3,7 @@ import isObject from './utils/isObject'
import escapeHTML from './utils/escapeHTML' import escapeHTML from './utils/escapeHTML'
import unescapeHTML from './utils/unescapeHTML' import unescapeHTML from './utils/unescapeHTML'
import getInnerText from './utils/getInnerText' import getInnerText from './utils/getInnerText'
import stringConvert from './utils/stringConvert'
export default class JSONNode extends Component { export default class JSONNode extends Component {
constructor (props) { constructor (props) {
@ -24,13 +25,15 @@ export default class JSONNode extends Component {
} }
} }
// TODO: reorganize the render methods, they are too large now
renderObject ({parent, field, value, onChangeValue, onChangeField}) { renderObject ({parent, field, value, onChangeValue, onChangeField}) {
//console.log('JSONObject', field,value) //console.log('JSONObject', field,value)
const hasParent = parent !== null const hasParent = parent !== null
return h('li', {class: 'jsoneditor-object'}, [ return h('li', {}, [
h('div', {class: 'jsoneditor-node'}, [ h('div', {class: 'jsoneditor-node jsoneditor-object'}, [
h('div', {class: 'jsoneditor-field', contentEditable: hasParent, onBlur: this.onBlurField}, hasParent ? field : 'object'), h('div', {class: 'jsoneditor-field' + (hasParent ? '' : ' jsoneditor-readonly'), contentEditable: hasParent, onBlur: this.onBlurField}, hasParent ? escapeHTML(field) : 'object'),
h('div', {class: 'jsoneditor-separator'}, ':'), h('div', {class: 'jsoneditor-separator'}, ':'),
h('div', {class: 'jsoneditor-readonly', contentEditable: false}, '{' + Object.keys(value).length + '}') h('div', {class: 'jsoneditor-readonly', contentEditable: false}, '{' + Object.keys(value).length + '}')
]), ]),
@ -47,7 +50,7 @@ export default class JSONNode extends Component {
return h('li', {}, [ return h('li', {}, [
h('div', {class: 'jsoneditor-node jsoneditor-array'}, [ h('div', {class: 'jsoneditor-node jsoneditor-array'}, [
h('div', {class: 'jsoneditor-field', contentEditable: hasParent, onBlur: this.onBlurField}, hasParent ? field : 'array'), h('div', {class: 'jsoneditor-field' + (hasParent ? '' : ' jsoneditor-readonly'), contentEditable: hasParent, onBlur: this.onBlurField}, hasParent ? escapeHTML(field) : 'array'),
h('div', {class: 'jsoneditor-separator'}, ':'), h('div', {class: 'jsoneditor-separator'}, ':'),
h('div', {class: 'jsoneditor-readonly', contentEditable: false}, '{' + value.length + '}') h('div', {class: 'jsoneditor-readonly', contentEditable: false}, '{' + value.length + '}')
]), ]),
@ -66,7 +69,7 @@ export default class JSONNode extends Component {
h('div', {class: 'jsoneditor-node'}, [ h('div', {class: 'jsoneditor-node'}, [
index !== undefined index !== undefined
? h('div', {class: 'jsoneditor-readonly', contentEditable: false}, index) ? h('div', {class: 'jsoneditor-readonly', contentEditable: false}, index)
: h('div', {class: 'jsoneditor-field', contentEditable: hasParent, onBlur: this.onBlurField}, hasParent ? field : 'value'), : h('div', {class: 'jsoneditor-field' + (hasParent ? '' : ' jsoneditor-readonly'), contentEditable: hasParent, onBlur: this.onBlurField}, hasParent ? escapeHTML(field) : 'value'),
h('div', {class: 'jsoneditor-separator'}, ':'), h('div', {class: 'jsoneditor-separator'}, ':'),
h('div', {class: 'jsoneditor-value', contentEditable: true, onBlur: this.onBlurValue}, escapeHTML(value)) h('div', {class: 'jsoneditor-value', contentEditable: true, onBlur: this.onBlurValue}, escapeHTML(value))
]) ])
@ -79,7 +82,7 @@ export default class JSONNode extends Component {
onBlurField (event) { onBlurField (event) {
const path = this.props.parent.getPath() const path = this.props.parent.getPath()
const newField = getInnerText(event.target) const newField = unescapeHTML(getInnerText(event.target))
const oldField = this.props.field const oldField = this.props.field
if (newField !== oldField) { if (newField !== oldField) {
this.props.onChangeField(path, newField, oldField) this.props.onChangeField(path, newField, oldField)
@ -88,7 +91,7 @@ export default class JSONNode extends Component {
onBlurValue (event) { onBlurValue (event) {
const path = this.getPath() const path = this.getPath()
const value = unescapeHTML(getInnerText(event.target)) const value = stringConvert(unescapeHTML(getInnerText(event.target)))
if (value !== this.props.value) { if (value !== this.props.value) {
this.props.onChangeValue(path, value) this.props.onChangeValue(path, value)
} }

View File

@ -0,0 +1,32 @@
/**
* Convert contents of a string to the correct JSON type. This can be a string,
* a number, a boolean, etc
* @param {String} str
* @return {*} castedStr
* @private
*/
export default function stringConvert (str) {
const lower = str.toLowerCase()
const num = Number(str) // will nicely fail with '123ab'
const numFloat = parseFloat(str) // will nicely fail with ' '
if (str == '') {
return ''
}
else if (lower == 'null') {
return null
}
else if (lower == 'true') {
return true
}
else if (lower == 'false') {
return false
}
else if (!isNaN(num) && !isNaN(numFloat)) {
return num
}
else {
return str
}
}