search

TexteaInc / json-viewer

not only a JSON viewer
https://viewer.textea.io
MIT License
439 stars 34 forks source link

Text editor functionality #458

Closed kozlovskisarmands closed 3 days ago

kozlovskisarmands commented 7 months ago

Is it possible to use usual text editor functionality, like: copy, paste, select all etc.? (Ctrl+C/V/A) Idea would be to copy whole object to clipboard and then just with Ctrl+V to paste it inside the JSON Viewer, is it possible and/or will it be supported in future?

pionxzh commented 7 months ago

Let me rephrase what I understand:

  1. You want to copy "part of" or "the whole" JSON object, but I'm curious: isn't this already supported?
  2. Allow pasting in json-viewer, and it will accept and update the content?
  3. Not sure what behavior you want to see after user presses ctrl+A
kozlovskisarmands commented 7 months ago

Hello @pionxzh!

  1. Copy as already supported, you are right.
  2. Yes, If I do Ctrl+V inside the JSON Viewer, the clipboard content should be displayed in the viewer.
  3. I think the main functionality is pasting stuff inside the viewer, but maybe Ctrl+A could highlight all of the JSON Viewer code and then simple Ctrl+C would get the whole object copied.
pionxzh commented 7 months ago

Thanks for the detailed explanation. I believe that the implementation of this request might be more suitable to be put on userland. json-viewer shouldn't listen to these global actions as a "component".

Here are a couple of suggestions:

  1. You could try using a hidden input field that stays "focus" to catch paste events. This field would take the pasted content, figure out what it is, and update the data. It's worth looking into whether there's a simpler way to do this, this is what I have tried before.
  2. The Ctrl + A situation is a bit complicated. You can listen to the Ctrl + A event and highlight the text. Even if the text gets selected correctly, the copied content might not look right as JSON because of how the elements are shown.

I wanted to make a quick demo for you, but Next.js just stopped working on StackBlitz 😞. I'll try to fix it this week.

kozlovskisarmands commented 6 months ago

Thanks for answer! First method actually seems doable, I'll try. What about JSON Viewer supporting onPaste prop itself?

pionxzh commented 6 months ago

That would be kind of weird. You can always update the input value out of the component. paste is something that happened out of the JSON viewer, so it makes no sense to have an onPaste callback.