Show placeholders when a `prop` or `value` is empty

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 () {

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
 

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;