fix #10824 : allow text wrapping when there is no whitespace #10969
Conversation
When st.code is used, long words now break in the middle if no whitespace is present by using "break-word". Additionally, "pre-wrap" ensures that existing whitespace is preserved while prioritizing natural line breaks.
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
|
Hi @matilde2004 thank you very much for this contribution! This looks to be in the right direction! The linked ticket states:
I took a look at the e2e tests that failed, and a couple snapshot tests failed. I think this is because the changes in this PR are applying to all usages of the code component, regardless if the user set Would you be able to fix up the logic for this? Additionally, we should add some tests for this in |
|
Hi, thank you so much for the quick feedback! I think I can fix the logic, I’ll take a look at the tests that failled to work on a solution. I’ll also check the e2e_playwright/st_code_test.py and add some tests. I’ll reach out with an update as soon as possible! |
…ts.ts Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for mid-word wrapping in code blocks when no whitespace is present by introducing a wrapLines prop that toggles pre-wrap/break-word styling.
- Expose a new
wrapLinesboolean toStyledCodeandStyledPrefor conditional whitespace and word-break CSS - Update the Streamlit React components to pass
wrapLinesthrough and disable wrapping in error/exception traces - Add Python examples and end-to-end Playwright tests for long single-word strings with and without wrapping
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/lib/src/components/shared/ErrorElement/ErrorElement.tsx | Pass wrapLines={false} to StyledCode to preserve existing behavior in error stack traces |
| frontend/lib/src/components/elements/ExceptionElement/ExceptionElement.tsx | Disable wrapping in exception stack traces via wrapLines={false} |
| frontend/lib/src/components/elements/CodeBlock/styled-components.ts | Introduce StyledCodeProps.wrapLines and conditionally apply white-space/word-break styles |
| frontend/lib/src/components/elements/CodeBlock/StreamlitSyntaxHighlighter.tsx | Forward the wrapLines prop to StyledPre |
| e2e_playwright/st_code_test.py | Update code block count assertions and add snapshots for long single-word string tests |
| e2e_playwright/st_code.py | Add reproducible examples of st.code with long single-word strings, with and without wrapping |
frontend/lib/src/components/elements/CodeBlock/styled-components.ts
Outdated
Show resolved
Hide resolved
frontend/lib/src/components/elements/CodeBlock/styled-components.ts
Outdated
Show resolved
Hide resolved
…ts.ts Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
| padding: 0, | ||
| whiteSpace: "pre", | ||
| wordBreak: "normal", | ||
| wordWrap: "normal", |
There was a problem hiding this comment.
So just removing these because "normal" is already the default?
There was a problem hiding this comment.
Oh good question! Yes, I removed work-break: normal because that is the default.
I changed word-wrap because it is not a standard and has been supplanted by overflow-wrap [MDN Docs]
sfc-gh-lwilby
left a comment
There was a problem hiding this comment.
Took a second look after Bob's changes and LGTM!
Describe your changes
When st.code is used, long words now break in the middle if no whitespace is present by using "break-word".
Additionally, "pre-wrap" ensures that existing whitespace is preserved while prioritizing natural line breaks.
GitHub Issue Link (if applicable)
Fixes #10824
Testing Plan
I used the Reproducible Code Example to test.
Here it is working: https://youtu.be/xYdI6NZxtsw?si=xEoYWDdyrCKL-MCB
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.