search

josdejong / svelte-jsoneditor

A web-based tool to view, edit, format, repair, query, transform, and validate JSON
https://jsoneditoronline.org
Other
816 stars 108 forks source link

How to configure a "form" mode, only allow editing values #342

Closed see7788 closed 6 months ago

see7788 commented 7 months ago

How to configure it: Only the value can be modified, the key can not be modified, the key cannot be added, and the deletion is not allowed

josdejong commented 7 months ago

The svelte-jsoneditor library is not very suitable for a "form" mode like you describe: only allowing edits of values.

I did a short experiment with creating an editor with readOnly=true, and then create a custom onRenderValue which ignores this readOnly prop, intercepts the onPatch event and applies that itself to the JSON data, but it comes with some difficulties (because of the readOnly mode of the editor, and also, quickkeys don't work etc).

Besides that, you'll need to disable text mode and table mode. You can hide the buttons from the menu using some CSS, though when loading invalid JSON, the editor will still show a button to switch to text mode, so it may be hard to take care of all those edge cases.