diff --git a/src/JSONNode.js b/src/JSONNode.js index c16d83f..fdf8272 100644 --- a/src/JSONNode.js +++ b/src/JSONNode.js @@ -119,16 +119,27 @@ export default class JSONNode extends Component { } renderProperty (path, data, options) { - if (path.length > 0) { - const content = last(path) - const isIndex = typeof content === 'number' + console.log('renderProperty', path, data) - return h('div', { - class: 'jsoneditor-property' + (isIndex ? ' jsoneditor-readonly' : ''), - contentEditable: !isIndex, - spellCheck: 'false', - onInput: this.handleChangeProperty - }, content) + if (path.length > 0) { + const prop = last(path) + const isIndex = typeof prop === 'number' + + if (isIndex) { // array item + return h('div', { + class: 'jsoneditor-property jsoneditor-readonly', + contentEditable: 'false', + spellCheck: 'false' + }, prop) + } + else { // object property + return h('div', { + class: 'jsoneditor-property', + contentEditable: 'true', + spellCheck: 'false', + onInput: this.handleChangeProperty + }, prop) + } } else { // root node @@ -136,7 +147,7 @@ export default class JSONNode extends Component { return h('div', { class: 'jsoneditor-property jsoneditor-readonly', - contentEditable: false, + contentEditable: 'false', spellCheck: 'false', onInput: this.handleChangeProperty }, content) diff --git a/src/Main.js b/src/Main.js index 38884d7..fbd3996 100644 --- a/src/Main.js +++ b/src/Main.js @@ -1,8 +1,8 @@ import { h, Component } from 'preact' -import * as pointer from 'json-pointer' import { setIn, updateIn, getIn, deleteIn, cloneDeep } from './utils/objectUtils' import { compareAsc, compareDesc, last } from './utils/arrayUtils' +import { stringConvert } from './utils/typeUtils' import { isObject } from './utils/typeUtils' import bindMethods from './utils/bindMethods' import JSONNode from './JSONNode' @@ -71,7 +71,6 @@ export default class Main extends Component { console.log('handleChangeProperty', path, oldProp, newProp) const index = this._findIndex(path, oldProp) - const newPath = path.concat(newProp) this._setIn(path, ['props', index, 'name'], newProp) } @@ -79,7 +78,31 @@ export default class Main extends Component { handleChangeType (path, type) { console.log('handleChangeType', path, type) - this._setIn(path, ['type'], type) + const oldEntry = this._getIn(path) + const oldType = oldEntry.type + + const newEntry = createDataEntry(type) + + // convert contents from old value to new value where possible + if (type === 'value' && oldType === 'string') { + newEntry.value = stringConvert(oldEntry.value) + } + if (type === 'string' && oldType === 'value') { + newEntry.value = oldEntry.value + '' + } + if (type === 'object' && oldType === 'array') { + newEntry.props = oldEntry.items.map((item, index) => { + return { + name: index + '', + value: item + } + }) + } + if (type === 'array' && oldType === 'object') { + newEntry.items = oldEntry.props.map(prop => prop.value) + } + + this._setIn(path, [], newEntry) } handleInsert (path, type) { @@ -262,6 +285,7 @@ export default class Main extends Component { this.handleShowContextMenu({}) } + // TODO: remove _getIn, _setIn, etc _getIn (path, dataProps = []) { const dataPath = toDataPath(this.state.data, path)