Highlight selected content only instead of whole width of editor

src/jsoneditor/components/JSONNode.js

@@ -106,7 +106,8 @@ export default class JSONNode extends PureComponent {
       this.renderDelimiter('{', 'jsoneditor-delimiter-start'),
       !meta.expanded
           ? [
-            this.renderTag(`${props.length} props`, `Object containing ${props.length} properties`),
+            this.renderTag(`${props.length} ${props.length === 1 ? 'prop' : 'props'}`,
+                `Object containing ${props.length} ${props.length === 1 ? 'property' : 'properties'}`),
             this.renderDelimiter('}', 'jsoneditor-delimiter-start'),
           ]
           : null,
@@ -143,8 +144,8 @@ export default class JSONNode extends PureComponent {
     return h('div', {
       'data-path': compileJSONPointer(meta.path),
       className: this.getContainerClassName(meta.selected, this.state.hover),
-      onMouseOver: this.handleMouseOver,
-      onMouseLeave: this.handleMouseLeave
+      // onMouseOver: this.handleMouseOver,
+      // onMouseLeave: this.handleMouseLeave
     }, [nodeStart, floatingMenu, insertArea, childs, nodeEnd])
   }
 
@@ -163,7 +164,8 @@ export default class JSONNode extends PureComponent {
       this.renderDelimiter('[', 'jsoneditor-delimiter-start'),
       !meta.expanded
           ? [
-            this.renderTag(`${count} items`, `Array containing ${count} items`),
+            this.renderTag(`${count} ${count === 1 ? 'item' : 'items'}`,
+                `Array containing ${count} item${count === 1 ? 'item' : 'items'}`),
             this.renderDelimiter(']', 'jsoneditor-delimiter-start'),
           ]
           : null,
@@ -199,8 +201,8 @@ export default class JSONNode extends PureComponent {
     return h('div', {
       'data-path': compileJSONPointer(meta.path),
       className: this.getContainerClassName(meta.selected, this.state.hover),
-      onMouseOver: this.handleMouseOver,
-      onMouseLeave: this.handleMouseLeave
+      // onMouseOver: this.handleMouseOver,
+      // onMouseLeave: this.handleMouseLeave
     }, [nodeStart, floatingMenu, insertArea, childs, nodeEnd])
   }
 
@@ -228,8 +230,8 @@ export default class JSONNode extends PureComponent {
     return h('div', {
       'data-path': compileJSONPointer(meta.path),
       className: this.getContainerClassName(meta.selected, this.state.hover),
-      onMouseOver: this.handleMouseOver,
-      onMouseLeave: this.handleMouseLeave
+      // onMouseOver: this.handleMouseOver,
+      // onMouseLeave: this.handleMouseLeave
     }, [node, floatingMenu, insertArea])
   }
 
@@ -330,11 +332,6 @@ export default class JSONNode extends PureComponent {
     return h('div', {key: 'separator', className: 'jsoneditor-delimiter'}, ':')
   }
 
-  renderComma() {
-    // TODO: don't render when it's the last item/prop
-    return h('div', {key: 'comma', className: 'jsoneditor-delimiter'}, ',')
-  }
-
   renderDelimiter (text, className = '') {
     return h('div', {key: text, className: 'jsoneditor-delimiter ' + className}, text)
   }

src/jsoneditor/components/TreeMode.js

@@ -686,6 +686,11 @@ export default class TreeMode extends PureComponent {
   }
 
   handleTouchStart = (event) => {
+    if (event.button !== 0) {
+      // cancel when left mouse button is not down
+      return
+    }
+
     const pointer = this.findESONPointerFromElement(event.target)
     const clickedOnEmptySpace = (event.target.nodeName === 'DIV') &&
         (event.target.contentEditable !== 'true')

src/jsoneditor/components/jsoneditor.css

@@ -173,13 +173,13 @@
 
 div.jsoneditor-list {
   list-style-type: none;
-  padding-left: 20px;
+  border-left: 20px solid transparent;
   margin: 0;
   font-size: 0; }
 
 /* no left padding for the root div element */
 .jsoneditor-contents > div.jsoneditor-list {
-  padding-left: 2px; }
+  border-left-width: 2px; }
 
 .jsoneditor-property,
 .jsoneditor-value,
@@ -231,13 +231,15 @@ div.jsoneditor-list {
 
 .jsoneditor-delimiter,
 .jsoneditor-readonly {
-  color: #9d9d9d; }
+  color: #9d9d9d;
+  display: inline-block; }
 
 .jsoneditor-delimiter-start {
-  margin-left: 5px; }
+  padding-left: 5px; }
 
 .jsoneditor-delimiter-end {
-  margin-left: 27px; }
+  padding-left: 5px;
+  border-left: 20px solid transparent; }
 
 .jsoneditor-readonly:focus,
 .jsoneditor-readonly:hover {
@@ -559,24 +561,24 @@ div.jsoneditor-node-container {
       width: 60px;
       height: 20px;
       background: inherit; }
-  div.jsoneditor-node-container.jsoneditor-hover {
-    background-color: #d3d3d3; }
-    div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after {
-      background-color: inherit; }
-      div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area {
-        border-color: #d3d3d3;
-        background-color: #d3d3d3; }
-  div.jsoneditor-node-container.jsoneditor-selected {
+  div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-node {
     background-color: #ffed99; }
-    div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-after {
-      background-color: inherit; }
-      div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-after > div.jsoneditor-insert-area {
-        border-color: #ffed99;
-        background-color: #ffed99; }
+  div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-delimiter-end {
+    background-color: #ffed99;
+    border-left-color: #ffed99; }
+  div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-list {
+    border-left-color: #ffed99; }
+  div.jsoneditor-node-container.jsoneditor-hover > .jsoneditor-node > .jsoneditor-button-container,
+  div.jsoneditor-node-container.jsoneditor-hover > .jsoneditor-node > .jsoneditor-button-placeholder {
+    background-color: #d3d3d3; }
+  div.jsoneditor-node-container.jsoneditor-hover > .jsoneditor-list {
+    border-left-color: #d3d3d3; }
+  div.jsoneditor-node-container.jsoneditor-hover > .jsoneditor-delimiter-end {
+    border-left-color: #d3d3d3; }
   div.jsoneditor-node-container div.jsoneditor-floating-menu {
     position: absolute;
     bottom: 100%;
-    right: 0;
+    left: 0;
     z-index: 999;
     margin: 10px;
     white-space: nowrap;

src/jsoneditor/components/jsoneditor.scss

@@ -129,14 +129,14 @@ $insert-area-height: 6px;
 
 div.jsoneditor-list {
   list-style-type: none;
-  padding-left: 20px;
+  border-left: 20px solid transparent;
   margin: 0;
   font-size: 0;
 }
 
 /* no left padding for the root div element */
 .jsoneditor-contents > div.jsoneditor-list {
-  padding-left: 2px;
+  border-left-width: 2px;
 }
 
 .jsoneditor-property,
@@ -208,14 +208,16 @@ div.jsoneditor-list {
 .jsoneditor-delimiter,
 .jsoneditor-readonly {
   color: $gray;
+  display: inline-block;
 }
 
 .jsoneditor-delimiter-start {
-  margin-left: $input-padding;
+  padding-left: $input-padding;
 }
 
 .jsoneditor-delimiter-end {
-  margin-left: $line-height + $input-padding + 2px;
+  padding-left: $input-padding;
+  border-left: $line-height solid transparent;
 }
 
 .jsoneditor-readonly:focus,
@@ -631,36 +633,51 @@ div.jsoneditor-node-container {
     }
   }
 
-  &.jsoneditor-hover {
-    background-color: $hoverColor;
-
-    &.jsoneditor-hover-insert-area-after {
-      background-color: inherit;
-
-      > div.jsoneditor-insert-area {
-        border-color: $hoverColor;
-        background-color: $hoverColor;
-      }
-    }
-  }
+  //&.jsoneditor-hover {
+  //  > .jsoneditor-node > .jsoneditor-delimiter-start,
+  //  > .jsoneditor-delimiter-end {
+  //    color: $theme-color;
+  //    font-weight: bold;
+  //  }
+  //}
 
   &.jsoneditor-selected {
-    background-color: $selectedColor;
+    .jsoneditor-node {
+      background-color: $selectedColor;
+    }
 
-    &.jsoneditor-selected-insert-area-after {
-      background-color: inherit;
+    .jsoneditor-delimiter-end {
+      background-color: $selectedColor;
+      border-left-color: $selectedColor;
+    }
 
-      > div.jsoneditor-insert-area {
-        border-color: $selectedColor;
-        background-color: $selectedColor;
-      }
+    .jsoneditor-list {
+      border-left-color: $selectedColor;
     }
   }
 
+  &.jsoneditor-hover {
+    > .jsoneditor-node > .jsoneditor-button-container,
+    > .jsoneditor-node > .jsoneditor-button-placeholder {
+      background-color: $hoverColor;
+    }
+
+    > .jsoneditor-list {
+      border-left-color: $hoverColor;
+    }
+
+    > .jsoneditor-delimiter-end {
+      //padding-left: $line-height + $input-padding + 2px;
+      border-left-color: $hoverColor;
+    }
+
+  }
+
+
   div.jsoneditor-floating-menu {
     position: absolute;
     bottom: 100%;
-    right: 0;
+    left: 0;
     z-index: 999;
 
     margin: 10px;