microlinkhq / microlinkhq/react-json-view
Option to set strings to `white-space: pre`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 417
- Forks
- 68
- Avg merge
- 4h 22m
- Merged PRs (30d)
- 8
Description
Hi there! First of all, this library is excellent. I'm using it to help devs / technical folk debug a tool that, among other things, generates queries. Part of my use case is to easily see (well formatted) generated queries as part of a JSON blob.
I noticed the escapeStrings option, but setting that to false doesn't actually respect formatting in the UI. Ideally, this would cause strings to have white-space: pre or something like that set via css so that new lines and indentation are respected. This could also be a separate option, a new prop that covers this like nodeStyle, etc.
My workaround is just to set it in my css, but it would be nice to have this built in:
.react-json-view .string-value{
white-space: pre;
}
Also, I'd want the copy button to copy with these special characters respected (right now, even with my css workaround, it copies \n explicitly). I can work around this for now using the enableClipboard prop, although copy.src has the wrong type (it's object but can be a string):
<ReactJsonView
//....
enableClipboard={({ src }) => {
if (typeof src === 'string')
navigator.clipboard.writeText(
// @ts-expect-error src can be a string but is typed as object
src.replace(/\\n/g, '\n')
)
}}
/>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the escapeStrings option, the .string-value CSS class, and enableClipboard's src value and type. Done means formatted string whitespace can be supported through the component and copied strings preserve newlines, while the documented src type accepts strings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100