Feature request: Object property / key selection

[acidMyke]

Hi CarlosNZ,

To provide easier selection of object properties.

I'm proposing a new prop restrictAddSelection, similar to restrictTypeSelection, where the user is given a dropdown, if prop is provided and if the data is object, to be able to select the appropriate key to add, instead of requiring user to type out the prop key.

My original plan is for this feature to merge with the existing restrictAdd prop but, after thinking it through, it will conflict with existing usage. In order for the dropdown to appear, restrictAddSelection needs to be called when the add input field is rendered, whereas restrictAdd is only called after the new key is added for validation. Do let me your opinion on this.

Possible Syntax:

type AddFilterFunction = (input: NodeData) => boolean | string[]
interface JsonEditorProps {
  //...
  restrictAddSelection?: boolean | string[] | AddFilterFunction
}

Mock-up:

I could try to implement the feature if you don't mind.

Look forward to your response.

[CarlosNZ]

Hey, this sounds like a good idea. My only concern would be that it could be quite tedious to define a function to handle all the different possible options for different parts of the data structure if it's a reasonably complex one, but I guess it would be handy for smaller data sets.

I think I'd call it addPropertyOptions, or something like that, not totally sure yet.

I'll try and do this in the next couple of weeks, but feel free to make a start or post a PR if I haven't got to it soon enough.

(That reminds me, I should probably update the README with some info about setting up a dev environment -- let me know if you have any trouble with it)

[dreglad]

It’d be even better to work this by providing a JSON Schema instead of manual definitions. That way, it’d address @CarlosNZ’s concern about handling complex data structures and also add cool benefits like autocompletion.

[CarlosNZ]

It’d be even better to work this by providing a JSON Schema instead of manual definitions. That way, it’d address @CarlosNZ’s concern about handling complex data structures and also add cool benefits like autocompletion.

Yes, I agree. We can currently implement JSON schema validation fairly easily, so in a sense you can get this functionality after the fact (i.e. error if you add an illegal key).

I'm not sure I want to start adding a full JSON schema parser into this, so it'd be good to come up with a solution that allowed the requested suggestion without bloating the codebase. Integrating with existing tools (like we do for schema validation) would seem to be the approach to take, so I'll have a think about what's possible.

Suggestions welcome :)

[DameNianch]

Does the "select the appropriate key to add" function automatically assign values?
I'm having trouble with the new key becoming NULL value when I add it. I'm imitating the onUpdate validation in the demo source code. But I can't add a value because it's rejected by that validation.

[CarlosNZ]

I'm having trouble with the new key becoming NULL value when I add it. I'm imitating the onUpdate validation in the demo source code. But I can't add a value because it's rejected by that validation

I'm not totally clear what you're asking. Can you start a new issue with a bit more detail of your specific problem?

[CarlosNZ]

@acidMyke -- this will be available in v1.25.0 -- look for the newKeyOptions prop. Should be out within a few days.

[CarlosNZ]

Done in #183 and released in v1.25.0