search

josdejong / svelte-jsoneditor

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

Allow custom editable value renderers #454

Open VincentK-ZA opened 5 days ago

VincentK-ZA commented 5 days ago

Looking at the custom value renderer examples, none of them really take over the the editing rendering.

I've been working on getting this work, but from I could see, I had to fork the project in order to get it working.

Here's an example of a custom editable div in our project, using codemirror: custom-editable-div

Please see this PR (internal to the forked repo for now) for what I believe would need to be changed.
This includes an EditableCodeMirror component for demo purposes on the examples page. Our actual implementation relies on getContext to get actual completion/suggestion data, since I didn't want to pass any more props through EditableValue.

Let me know what you think about this proposal, and if you'd be open to merging a change like this into the project.

There are some tricky things regarding focus/mousedown events that I have not managed to solve as of yet.
For example, I couldn't get the suggestions panel to stay open if the user tries to drag the scrollbar to see more suggestions.

josdejong commented 3 days ago

Thanks for your inputs Vincent.

Can you explain what you think is missing in API in order to (easily) create an editable value component yourself?

josdejong commented 3 days ago

I've added an example showing how to create custom editable input: