Add option to disable line text-wrap

[circAssimilate]

In some cases, like long strings or very nested JSON, it may be useful to allow the user or implementer to enable / disable text wrap. If it's not too difficult it would be neat to allow for a prop or CSS option to easily enable / disable line text wrapping.

[praneshr]

Hi @circAssimilate, can you provide me an example with screenshot?

Currently, all the text inside <pre> has a style white-space: pre-wrap. You can override by adding it under diffContainer style.

[circAssimilate]

Thanks, @praneshr. The white-space: pre-wrap suggestion is a good tip, but upon switching it to no-wrap I'd additionally like to control the max-width of each column and allow for before / after diff horizontal scrolling as an option after 50% of the parent container. So here's how it looks without wrap:

And I envision an opportunity to allow overflow-x: auto on the content column when it's longer than 50% of the parent container.

[circAssimilate]

I think I narrowed in on the core issue here. When a long string has no spaces, automatic breaking doesn't happen as expected and the container gets really big (while still wrapping). It would still be nice to allow for a non wrap option or style with a set width, but also figuring out how to ensure breaking happens at 50% for long strings like this:

Before

"[\"and\",[\"or\",[\"or\",{\"name\":\"user_id\",\"value\":123,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":456,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":789,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":321,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":654,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":987,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":111,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":333,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":777,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":999,\"match_type\":\"exact\",\"type\":\"custom_attribute\"}]]]"

After

"[\"and\",[\"or\",[\"or\",{\"name\":\"user_id\",\"value\":123,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":456,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":789,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":321,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":654,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":987,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":111,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":333,\"match_type\":\"exact\",\"type\":\"custom_attribute\"},{\"name\":\"user_id\",\"value\":777,\"match_type\":\"exact\",\"type\":\"custom_attribute\"}]]]"

[EricCatlin]

Hi, i am having this exact issue when my payload contains a JWT.
JWTs are fairly lengthy and have no good break point.

[circAssimilate]

@praneshr, @EricCatlin, the simplest workaround I just found was to add the following style override to ensure a wrap happens (probably should be default):

line: {
    wordBreak: 'break-word',
},

Then, something like this helps with preventing wrap but allowing horizontal scroll:

diffRemoved: {
    overflowX: 'auto',
    maxWidth: 300,
},
diffAdded: {
    overflowX: 'auto',
    maxWidth: 300,
},

For that, it would be best if the maxWidth could be computed within to be half the width of the table container minus gutters and whatnot.

The above works for now but I could imagine these could be powered by an shouldWrapText option that defaults to true.

[fev4]

The solution above ends up for me like this:

Shows multiple horizontal scrolling bars. Optimally there should only be one.

---

To avoid this, here's what I'm using:

styles={{
  diffContainer: {
    overflowX: "auto",
    display: "block",
    "& pre": { whiteSpace: "pre" },
  },
}}

Then just set the max-width on the container or the table it self and it should result in something like this:

[YeeJone]

I have the same problem. The style is ...