diegomura / diegomura/react-pdf
SVG Text doesn't have a way to wrap
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
I am trying to display some text in an svg rect. While this works for the first line it doesnt for any following lines since `\n` is ignored and doesnt wrap ever.
**To Reproduce**
Have a text like:
```
• Standalone is a web application
using Matrix as a storage backend and communications channel
• We can implement our own UI flow,
e.g. the NeoBoad dashbaord
• We have control about the application state, e.g.
- Deep link to boards
- Save changes when leaving a board
- Error handling and backoff
• Extended features (not yet there)
- Invite guests easily
- Account / subscription management
- Pop out NeoBoard from the small widget windows
```
Instead of preserving the newlines it will instead put it on a single line:
https://react-pdf.org/repl?code=3187b0760ce02e00400a0110188c0bc30050128d03e4c05030c00f0223002b80b60299852e471a5c02180e6b532cb240ca00dc38f5e3002409002ab4007ac009ea80378026000cea02f9340440431f9436600099b0036e168c00961061b1801dd6802307001c3f99bc0d941b7066184a081b300e1800597f00271b59077b47681058ce6b573660006b7a13075318506a6a4a305f7f40c862800b63305a7302027d00756b3f305b6a6f5a3a0618104a58a1a76e805500491800334b27001a60da003a0e5598285aeb00395a100021103602b3085aacb49316f6eb7ac14ef028589073075761d86deb362f1f3f005c030683f9688b181ac36c1002d0c010b45a078603e300e4b6201827cd8b11304161063623ceac62e3d89c3b6eb996844f0a451cd8dc41200a2b157a8deaa6547d28a595c88166b35b8c199f27cad00ab31a54046b47b060c020452d1be3b58ad0b004a9981043628358389439541ec34b0b9814048020b0140e558001e841945704180f10f103bad4630640650025c040c8af8c1f64713ae2e6af6a16c76209f799de4e1b098b8b014e98404e7c588f80e993c944bc1203a842260a901dec2e2894be42a3fa98580037010004a34e0141104855bab4cb45886048bd9803b70ad82100
~~Splitting for this seems to not work either as it results in `TypeError: font.layout is not a function` after having split the string and returning text inside of Array.map like usual in reactjs. (note: This was happening in vitejs + webworker for rendering)~~ (turned out that I had empty lines)
**Expected behavior**
It follows the wrap info
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: Linux
- Browser: Firefox
- React-pdf version: 4.1.4
Contributor guide
Assessment
This issue has not been assessed yet.