Skip to content

Option to set strings to white-space: pre #86

@daedalus28

Description

@daedalus28

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')
      )
  }}
/>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions