From 157f63d11a8eccdf261f8f7c5ffee1b90a24f571 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Wed, 22 Nov 2017 11:36:47 +0100
Subject: [PATCH] Fixed insert menu missing before arrays and objects

---
 src/components/JSONNode.js |  8 ++++++--
 src/jsoneditor.less        | 10 +++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/JSONNode.js b/src/components/JSONNode.js
index c2389fb..00ccdad 100644
--- a/src/components/JSONNode.js
+++ b/src/components/JSONNode.js
@@ -104,12 +104,14 @@ export default class JSONNode extends PureComponent {
           ])
         : null
 
+    const insertArea = this.renderInsertBeforeArea()
+
     return h('div', {
       'data-path': compileJSONPointer(this.props.path),
       className: this.getContainerClassName(data.selected, this.state.hover),
       onMouseOver: this.handleMouseOver,
       onMouseLeave: this.handleMouseLeave
-    }, [node, floatingMenu, childs])
+    }, [node, floatingMenu, insertArea, childs])
   }
 
   // TODO: extract a function renderChilds shared by both renderJSONObject and renderJSONArray (rename .props and .items to .childs?)
@@ -161,12 +163,14 @@ export default class JSONNode extends PureComponent {
           ])
         : null
 
+    const insertArea = this.renderInsertBeforeArea()
+
     return h('div', {
       'data-path': compileJSONPointer(this.props.path),
       className: this.getContainerClassName(data.selected, this.state.hover),
       onMouseOver: this.handleMouseOver,
       onMouseLeave: this.handleMouseLeave
-    }, [node, floatingMenu, childs])
+    }, [node, floatingMenu, insertArea, childs])
   }
 
   renderJSONValue ({prop, index, data, options}) {
diff --git a/src/jsoneditor.less b/src/jsoneditor.less
index af7fc02..edda97c 100644
--- a/src/jsoneditor.less
+++ b/src/jsoneditor.less
@@ -576,13 +576,13 @@ div.jsoneditor-node-container {
       &.jsoneditor-hover-insert-area {
         background-color: @selectedColor;
 
-        div.jsoneditor-insert-area {
+        > div.jsoneditor-insert-area {
           border: 1px dashed gray;
           background-color: @hoverColor;
         }
 
         &.jsoneditor-selected-insert-area {
-          div.jsoneditor-insert-area {
+          > div.jsoneditor-insert-area {
             border: 1px dashed #f4af41;
             background-color: @hoverAndSelectedColor;
           }
@@ -601,7 +601,7 @@ div.jsoneditor-node-container {
         }
       }
 
-      div.jsoneditor-insert-area {
+      > div.jsoneditor-insert-area {
         border: 1px dashed #f4af41;
         background: @selectedColor;
       }
@@ -614,7 +614,7 @@ div.jsoneditor-node-container {
       &.jsoneditor-hover-insert-area {
         background-color: inherit;
 
-        div.jsoneditor-insert-area {
+        > div.jsoneditor-insert-area {
           border: 1px dashed #f4af41;
           background: @hoverAndSelectedColor;
         }
@@ -628,7 +628,7 @@ div.jsoneditor-node-container {
     &.jsoneditor-hover-insert-area {
       background-color: inherit;
 
-      div.jsoneditor-insert-area {
+      > div.jsoneditor-insert-area {
         border: 1px dashed gray;
         background-color: @hoverColor;
       }