JSON Formatting can be improved

[manurana]

When you paste some JSON into the values editor, monaco editor formats it automatically. However, the formatting is not the best. I am attaching an example:

Here is the JSON I am using for the example, and how it should ideally be formatted

{
    "lastState": "*",
    "eventId": "EVT_SELECT_OPTION_MF_SHARES",
    "accountId": "57363",
    "httpEventId": null,
    "tenant_code": "KNAB"
}

I tried changing the default language for the Editor component in the Values Editor to json instead of typescript, but did not see any improvement.

[giacomocerquone]

Setting either the language prop or the defaultLanguage one to json works on my local environment 🤷

The reason we can't set the language to json though, is that it will force users to always type the double quotes ("") on each property. Setting the language to typescript instead doesn't work as expected because what we're looking at has a different meaning. I mean, when you have a tsfile.ts on your editor and write something like this:

{
    "lastState": "*",
    "eventId": "EVT_SELECT_OPTION_MF_SHARES",
    "accountId": "57363",
    "httpEventId": null,
    "tenant_code": "KNAB"
}

What you're doing is declaring a block statement and not a JS or JSON object, that's also probably the reason of the weird formatting.

There are surely ways to fix this. The first thing I can think of is to integrate prettier in monaco, set the language prop to json and let prettier do the heavy lifting of reformatting a js object into a json object. It's quite heavy though

[giacomocerquone]

any idea here? @marilari88