Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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