search

josdejong / svelte-jsoneditor

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

Feature-Request: onFocus event #276

Closed howardjones closed 6 months ago

howardjones commented 1 year ago

I'd like to be able to have other page elements react to a change of focus in the JSON Editor - my use case is additional context-sensitive help per-field, but I think there are others. I don't think this exists currently. I also don't think (but it's not very clear what "selected" means in that context) that onSelect proposed in #163 does what I am looking for.

I am using the vanilla-jsoneditor with no frameworks.

josdejong commented 1 year ago

Thanks for your suggestion.

Let me try to explain the different events that we had/have/plan-to-have:

  1. There is an onFocus and onBlur event implemented, but this is doing something very different then what you are looking for: it triggers when the editor as a whole gets focus or loses focus.
  2. The planned onSelect event discussed in #163 will happen when the selection changes, it will be more or less a replacement of the onSelectionChange event of predecessor of this library, jsoneditor. A change can be triggered by a mouse click, drag, or keyboard events like the arrow keys to navigate. The current selection is highlighted in gray in the editor.
  3. The onEvent event available in the predecessor, jsoneditor triggers when a user does do something like mouse click, mouse hover, key down, etc. Sometimes, this has a corresponding onSelect event, sometimes it doesn't (like right-click to select "copy" in the context menu or so). There are no plans yet to implement something similar
  4. New in svelte-jsoneditor is the possibility to change the way values are rendered, via onRenderValue. You can render values differently like hide a password or show a color picker, and you can render an information icon based on a JSON Schema description or something like that.

my use case is additional context-sensitive help per-field

In your case, is the information that you want to display tight to the selection (highlighted in gray)? Or dependent on where the mouse is hovering for example? Or would something like info icons be a good solution?

howardjones commented 1 year ago

To the selection - I'm hoping to have a side-by-side layout providing additional info about the effects of changing the current value as a user edits the document. It does sound like I could use onRenderValue to do some cheesy jquery-style addition of data-xxx attributes with the path though and attach event handlers myself.

josdejong commented 1 year ago

Ok clear, then the onSelect event discussed in #163 will be what you need I think.

It does sound like I could use onRenderValue to do some cheesy jquery-style addition of data-xxx attributes with the path though and attach event handlers myself.

That would be possible I think, though it may be relatively cumbersome. Properly implementing this onSelect in the editor is probably less work 😉 , help would be welcome.

josdejong commented 6 months ago

Closing this issue, an onSelect event is available since some time now.