Comments (7)
circAssimilate
commented on August 17, 2024
22
@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.
from react-diff-viewer.
fev4
commented on August 17, 2024
1
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:
from react-diff-viewer.
praneshr
commented on August 17, 2024
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.
from react-diff-viewer.
circAssimilate
commented on August 17, 2024
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.
from react-diff-viewer.
circAssimilate
commented on August 17, 2024
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\"}]]]"
from react-diff-viewer.
EricCatlin
commented on August 17, 2024
Hi, i am having this exact issue when my payload contains a JWT.
JWTs are fairly lengthy and have no good break point.
from react-diff-viewer.
YeeJone
commented on August 17, 2024
from react-diff-viewer.
Related Issues (20)
- nearbySequences like in react-diff-view
- the demo provided in readme.md run like this，how to fix it?
- Add a Copy button HOT 1
- Text not visible for too long content HOT 6
- Use DiffViewer inside Shadow DOM HOT 2
- Prism syntax highlighting does not work for multi-line comments
- Compare Difference Row Exception
- Accept texts with the difference already made
- Can I hide the 'Expand 1 lines...' at the top？ HOT 1
- What are the conditions of the lines to which Expand Lines apply? HOT 1
- What is the performance ceiling of this componnet? HOT 1
- Reverse Diff
- bug handling added/removed empty lines
- CJS default export types are improperly configured
- can't select diff text properly! ⛔ HOT 2
- Line Selection Bug 🪲
- diff performance with large json data
- ReferenceError: _jsxs is not defined HOT 1
- Styles not visible after adding CSP
- Does react-diff-viewer support editor mode?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-diff-viewer.