Change the value property of the callbacks onNodeName, `onEditabl…

…e`, and `onClassName` into a lazy getter.

HISTORY.md

@@ -3,6 +3,16 @@
 https://github.com/josdejong/jsoneditor
 
 
+## not yet published, version 9.6.0
+
+- Pass a new property `value` along with the `onNodeName` callback, see #1409. 
+  Thanks @brianpos.
+- Implement the `value` property of the callbacks `onNodeName`, `onEditable`, 
+  and `onClassName` for objects and arrays too (was `undefined` before). 
+  Since this can be a heavy recursive operation, the property is changed into 
+  a lazy getter.
+
+
 ## 2021-12-29, version 9.5.11
 
 - Fix the font on Ubuntu for real by add the "ubuntu mono" font. See #1405. 

src/js/Node.js

@@ -95,9 +95,12 @@ export class Node {
 
       if ((this.editor.options.mode === 'tree' || this.editor.options.mode === 'form') &&
           (typeof this.editor.options.onEditable === 'function')) {
+        const getValue = this.getValue.bind(this)
         const editable = this.editor.options.onEditable({
           field: this.field,
-          value: this.value,
+          get value() {
+            return getValue()
+          },
           path: this.getPath()
         })
 
@@ -944,7 +947,14 @@ export class Node {
       typeof this.editor.options.onClassName === 'function' &&
       this.dom.tree) {
       removeAllClassNames(this.dom.tree)
-      const addClasses = this.editor.options.onClassName({ path: this.getPath(), field: this.field, value: this.value }) || ''
+      const getValue = this.getValue.bind(this)
+      const addClasses = this.editor.options.onClassName({
+        path: this.getPath(),
+        field: this.field,
+        get value() {
+          return getValue()
+        }
+      }) || ''
       addClassName(this.dom.tree, 'jsoneditor-values ' + addClasses)
     }
   }
@@ -4061,11 +4071,14 @@ export class Node {
     if (this.type === 'object' || this.type === 'array') {
       if (this.editor.options.onNodeName) {
         try {
+          const getValue = this.getValue.bind(this)
           nodeName = this.editor.options.onNodeName({
             path: this.getPath(),
             size: count,
             type: this.type,
-            value: this.value
+            get value() {
+              return getValue()
+            }
           })
         } catch (err) {
           console.error('Error in onNodeName callback: ', err)