Added CSS classes on array and object nodes reflecting there expanded/collapsed state

HISTORY.md

@@ -3,6 +3,12 @@
 https://github.com/josdejong/jsoneditor
 
 
+## not yet published version 8.4.0
+
+- Added CSS classes `jsoneditor-expanded` and `jsoneditor-collapsed` on array 
+  and object nodes reflecting there state.
+
+
 ## 2020-01-18 version 8.3.0
 
 - Update dependency `ajv` to `v6.11.0`. 

src/js/Node.js

@@ -781,6 +781,9 @@ export class Node {
         child.expand(recurse)
       })
     }
+
+    // update the css classes of table row, and fire onClassName etc
+    this.updateDom({ recurse: false })
   }
 
   /**
@@ -807,6 +810,9 @@ export class Node {
       this.dom.expand.className = 'jsoneditor-button jsoneditor-collapsed'
     }
     this.expanded = false
+
+    // update the css classes of table row, and fire onClassName etc
+    this.updateDom({ recurse: false })
   }
 
   /**
@@ -2221,15 +2227,32 @@ export class Node {
     // apply value to DOM
     const domValue = this.dom.value
     if (domValue) {
-      if (this.type === 'array') {
+      if (this.type === 'array' || this.type === 'object') {
         this.updateNodeName()
-        addClassName(this.dom.tr, 'jsoneditor-expandable')
-      } else if (this.type === 'object') {
-        this.updateNodeName()
-        addClassName(this.dom.tr, 'jsoneditor-expandable')
       } else {
         domValue.innerHTML = this._escapeHTML(this.value)
-        removeClassName(this.dom.tr, 'jsoneditor-expandable')
+      }
+    }
+
+    // apply styling to the table row
+    const tr = this.dom.tr
+    if (tr) {
+      if (this.type === 'array' || this.type === 'object') {
+        console.log(this.getPath(), this.type, this.expanded, tr)
+
+        addClassName(tr, 'jsoneditor-expandable')
+
+        if (this.expanded) {
+          addClassName(tr, 'jsoneditor-expanded')
+          removeClassName(tr, 'jsoneditor-collapsed')
+        } else {
+          addClassName(tr, 'jsoneditor-collapsed')
+          removeClassName(tr, 'jsoneditor-expanded')
+        }
+      } else {
+        removeClassName(tr, 'jsoneditor-expandable')
+        removeClassName(tr, 'jsoneditor-expanded')
+        removeClassName(tr, 'jsoneditor-collapsed')
       }
     }
 
@@ -2237,8 +2260,6 @@ export class Node {
     this._updateDomField()
     this._updateDomValue()
 
-    this._updateCssClassName()
-
     // update childs indexes
     if (options && options.updateIndexes === true) {
       // updateIndexes is true or undefined
@@ -2268,6 +2289,9 @@ export class Node {
     if (this.showMore) {
       this.showMore.updateDom()
     }
+
+    // fire onClassName
+    this._updateCssClassName()
   }
 
   /**