feat: support editing nested custom values

Author: Akryum

packages/app-backend-vue3/src/components/data.ts

@@ -202,7 +202,6 @@ export function getCustomObjectDetails (object: any, proto: string): CustomState
       _custom: {
         type: objectType.toLowerCase(),
         objectType,
-        readOnly: true,
         value,
         ...raw ? { tooltip: `<span class="font-mono">${raw}</span>` } : {},
       },

packages/app-frontend/src/features/inspector/DataField.vue

@@ -68,11 +68,15 @@ export default defineComponent({
       return valueType(this.field.value)
     },
 
+    interpretedValueType (): string {
+      return valueType(this.field.value, false)
+    },
+
     valueDetails (): string {
       return valueDetails(this.field.value)
     },
 
-    rawValueType (): string {
+    nativeValueType (): string {
       return typeof this.field.value
     },
 
@@ -190,7 +194,7 @@ export default defineComponent({
     },
 
     valueClass (): string[] {
-      const cssClass = [this.valueType, `raw-${this.rawValueType}`]
+      const cssClass = [this.valueType, `raw-${this.nativeValueType}`]
       if (this.valueType === 'custom') {
         const value = this.field.value
         value._custom.type && cssClass.push(`type-${value._custom.type}`)

packages/app-frontend/src/mixins/data-field-edit.js

@@ -71,7 +71,7 @@ export default {
     },
 
     isValueEditable () {
-      const type = this.valueType
+      const type = this.interpretedValueType
       return this.isEditable &&
         (
           type === 'null' ||
@@ -83,7 +83,7 @@ export default {
     },
 
     isSubfieldsEditable () {
-      return this.isEditable && (this.valueType === 'array' || this.valueType === 'plain-object')
+      return this.isEditable && (this.interpretedValueType === 'array' || this.interpretedValueType === 'plain-object')
     },
 
     valueValid () {
@@ -145,7 +145,12 @@ export default {
         if (currentEditedField && currentEditedField !== this) {
           currentEditedField.cancelEdit()
         }
-        this.editedValue = this.transformSpecialTokens(JSON.stringify(this.field.value), true)
+        let valueToEdit = this.field.value
+        // Edit custom value (we don't want to edit the whole custom value data object)
+        if (this.valueType === 'custom') {
+          valueToEdit = valueToEdit._custom.value
+        }
+        this.editedValue = this.transformSpecialTokens(JSON.stringify(valueToEdit), true)
         this.editedKey = this.field.key
         this.editing = true
         currentEditedField = this
@@ -166,7 +171,16 @@ export default {
     submitEdit () {
       if (this.editValid) {
         this.editing = false
-        const value = this.transformSpecialTokens(this.editedValue, false)
+        let value = this.transformSpecialTokens(this.editedValue, false)
+        // We need to send the entire custom value data object
+        if (this.valueType === 'custom') {
+          value = JSON.stringify({
+            _custom: {
+              ...this.field.value._custom,
+              value: JSON.parse(value), // Input
+            },
+          })
+        }
         const newKey = this.editedKey !== this.field.key ? this.editedKey : undefined
         this.sendEdit({ value, newKey })
         this.$emit('submit-edit')
@@ -212,9 +226,9 @@ export default {
 
     addNewValue () {
       let key
-      if (this.valueType === 'array') {
+      if (this.interpretedValueType === 'array') {
         key = this.field.value.length
-      } else if (this.valueType === 'plain-object') {
+      } else if (this.interpretedValueType === 'plain-object') {
         let i = 1
         while (this.field.value.hasOwnProperty(key = `prop${i}`)) i++
       }

packages/shell-dev-vue3/src/SetupScript.vue

@@ -12,6 +12,10 @@ const double = computed(() => count.value * 2)
 
 const answer = 42
 
+const state2 = reactive({
+  n: ref(0),
+})
+
 function onClick () {
   count.value++
 }
@@ -26,4 +30,6 @@ function onClick () {
   </button>
 
   <Child />
+
+  <pre>{{ state2 }}</pre>
 </template>

packages/shell-dev-vue3/src/devtools-plugin/index.js

@@ -108,13 +108,7 @@ export default {
             type: 'fail',
             key: 'state',
             editable: true,
-            value: {
-              _custom: {
-                type: null,
-                readOnly: false,
-                value: reactive({ n: ref(0) }),
-              },
-            },
+            value: reactive({ n: ref(0) }),
           })
 
           return api.getComponentBounds(payload.componentInstance).then(bounds => {