From d8a007903242a07a7417a446732b94195d510bea Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Sat, 20 Aug 2016 11:34:37 +0200
Subject: [PATCH] Show placeholders when a `prop` or `value` is empty

---
 src/JSONNode.js     | 11 ++++++++---
 src/TreeMode.js     |  1 +
 src/jsoneditor.less | 22 ++++++++++++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

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;