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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions