diff --git a/src/JSONNode.js b/src/JSONNode.js index 48737dc..b121bf5 100644 --- a/src/JSONNode.js +++ b/src/JSONNode.js @@ -170,7 +170,7 @@ export default class JSONNode extends Component { } else { // object property return h('div', { - class: 'jsoneditor-property', + class: 'jsoneditor-property' + (prop.length === 0 ? ' jsoneditor-empty' : ''), contentEditable: 'true', spellCheck: 'false', onInput: this.handleChangeProperty @@ -194,9 +194,14 @@ export default class JSONNode extends Component { } renderValue (value) { + const escapedValue = escapeHTML(value) const type = valueType (value) const _isUrl = isUrl(value) - const valueClass = 'jsoneditor-value jsoneditor-' + type + (_isUrl ? ' jsoneditor-url' : '') + const isEmpty = escapedValue.length === 0 + const valueClass = 'jsoneditor-value ' + + 'jsoneditor-' + type + + (_isUrl ? ' jsoneditor-url' : '') + + (isEmpty ? ' jsoneditor-empty' : '') return h('div', { class: valueClass, @@ -206,7 +211,7 @@ export default class JSONNode extends Component { onClick: this.handleClickValue, onKeyDown: this.handleKeyDownValue, title: _isUrl ? 'Ctrl+Click or ctrl+Enter to open url' : null - }, escapeHTML(value)) + }, escapedValue) } renderExpandButton () { diff --git a/src/TreeMode.js b/src/TreeMode.js index 989499e..2e4ca24 100644 --- a/src/TreeMode.js +++ b/src/TreeMode.js @@ -16,6 +16,7 @@ export default class TreeMode extends Component { constructor (props) { super(props) + // TODO: don't put name and expand like this in the constructor const name = this.props.options && this.props.options.name || null const expand = this.props.options && this.props.options.expand || TreeMode.expand diff --git a/src/jsoneditor.less b/src/jsoneditor.less index 6cfc5eb..7acdcb6 100644 --- a/src/jsoneditor.less +++ b/src/jsoneditor.less @@ -120,6 +120,28 @@ div.jsoneditor-value.jsoneditor-url { text-decoration: underline; } +div.jsoneditor-empty { + border: 1px dotted lightgray; + border-radius: 2px; + padding: 0 5px; + line-height: 17px; +} + +div.jsoneditor-empty::after, +div.jsoneditor-empty::after { + pointer-events: none; + color: lightgray; + font-size: 8pt; +} + +div.jsoneditor-property.jsoneditor-empty::after { + content: 'prop'; +} + +div.jsoneditor-value.jsoneditor-empty::after { + content: 'value'; +} + .jsoneditor-button-placeholder { width: 20px; padding: 0;