microlinkhq / microlinkhq/react-json-view

Option to set strings to `white-space: pre`

Open
#86 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.